<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="content">
		<swiper class="swiper uni-swiper-height" :indicator-dots="indicatorDots" :autoplay="autoplay"
			:interval="interval" :duration="duration">
			<swiper-item class="swiper-item">
				<image class="banner" mode="widthFix" src="/static/img/banner01.png"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image class="banner" mode="widthFix" src="/static/img/banner01.png"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image class="banner" mode="widthFix" src="/static/img/banner01.png"></image>
			</swiper-item>
		</swiper>
		<view class="menu-content">
			<view class="menu-item" v-for="(item,index) in meun_list1" :key="index">
				<image class="menu-img" :src="item.src" :data-nav="item.nav" @click="menuNav"></image>
				<view class="menu-name">{{item.name}}</view>
			</view>
		</view>
		<view class="seg-line">
			<view class="seg-name">彩店工具</view>
		</view>
		<view class="menu-content">
			<view class="menu-item" v-for="(item,index) in meun_list2" :key="index">
				<image class="menu-img" :src="item.src" :data-nav="item.nav" @click="menuNav"></image>
				<view class="menu-name">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				meun_list1: [{
					name: '今日营销',
					nav: '/posters',
					src: '/static/img/jryx.png'
				}, {
					name: '开奖查询',
					nav: '',
					src: '/static/img/kjcx.png'
				}, {
					name: '票据宣传',
					nav: '',
					src: '/static/img/pjxc.png'
				}, {
					name: '走势图表',
					nav: '',
					src: '/static/img/zstb.png'
				}, {
					name: '今日单关',
					nav: '',
					src: '/static/img/jrdg.png'
				}, {
					name: '场场单关',
					nav: '',
					src: '/static/img/ccdg.png'
				}, {
					name: '竞彩情报',
					nav: '',
					src: '/static/img/jcqb.png'
				}, {
					name: '视频宣传',
					nav: '',
					src: '/static/img/spxc.png'
				}],
				meun_list2: [{
					name: '合买定制',
					nav: '',
					src: '/static/img/hmdz.png'
				}, {
					name: '奖金计算',
					nav: '',
					src: '/static/img/jjjs.png'
				}, {
					name: '电视走势',
					nav: '/tv/list',
					src: '/static/img/dszs.png'
				}, {
					name: '推荐日常表',
					nav: '',
					src: '/static/img/tjrcb.png'
				}]
			}
		},
		methods: {
			menuNav(e) {
				const url = e.target.dataset.nav
				if (!url) return
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped>
	@media screen and (min-width:769px) {
		.uni-swiper-height {
			height: 248px !important;
		}
	}

	@media screen and (max-width:769px) {
		.uni-swiper-height {
			height: 248px !important;
		}
	}

	@media screen and (max-width: 600px) {
		.uni-swiper-height {
			height: 200px !important;
		}
	}

	@media screen and (max-width: 480px) {
		.uni-swiper-height {
			height: 170px !important;
		}
	}

	@media screen and (max-width: 415px) {
		.uni-swiper-height {
			height: 155px !important;
		}
	}

	@media screen and (max-width: 412px) {
		.uni-swiper-height {
			height: 150px !important;
		}
	}

	@media screen and (max-width: 390px) {
		.uni-swiper-height {
			height: 130px !important;
		}
	}

	@media screen and (max-width: 280px) {
		.uni-swiper-height {
			height: 100px !important;
		}
	}

	.content {
		padding: 0 5px;
		font-size: 12px;
	}

	.swiper {
		display: block;
		height: 150px;
		padding: 10px 5px 0px 5px;
	}

	.swiper-item {}

	.banner {
		width: calc(100% - 10px);
		width: 100%;
		height: 100%;
	}

	.menu-content {
		margin-top: 10px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.menu-item {
		width: 22%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
	}

	.menu-img {
		width: 60px;
		height: 60px;
	}

	.menu-name {
		width: 60px;
		text-align: center;
	}

	.seg-line {
		margin-top: 20px;
		margin-left: 20px;
		width: 28px;
		height: 10px;
		background-color: #fcdc74;
		border-radius: 3px;
		position: relative;
	}

	.seg-name {
		position: absolute;
		white-space: nowrap;
		top: -5px;
		left: 5px;
	}
</style>