首页

src/pages.json

@@ -24,7 +24,7 @@
 			"desc": "彩店走势图",
 			"style": {
 				"navigationBarTitleText": "彩店走势图",
-				"navigationStyle": "default"
+				"navigationStyle": "custom"
 			}
 		},
 		{

src/pages/index/index.vue

+<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view>
-			<text class="title">{{title}}</text>
+		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
+			:duration="duration">
+			<swiper-item class="swiper-item">
+				<image class="banner" mode="aspectFit" src="/static/img/banner01.png"></image>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<image class="banner" mode="aspectFit" src="/static/img/banner01.png"></image>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<image class="banner" mode="aspectFit" 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>
@@ -11,39 +35,131 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				indicatorDots: true,
+				autoplay: true,
+				interval: 5000,
+				duration: 500,
+				meun_list1: [{
+					name: '今日营销',
+					nav: '',
+					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'
+				}]
 			}
 		},
-		onLoad() {
-
-		},
 		methods: {
-
+			menuNav(e) {
+				const url = e.target.dataset.nav
+				if (!url) return
+				uni.navigateTo({
+					url
+				})
+			}
 		}
 	}
 </script>
 
-<style>
+<style scoped>
 	.content {
+		padding: 0 5px;
+		font-size: 12px;
+	}
+
+	.swiper {
+		height: 130px;
+	}
+
+	.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: 20vw;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		justify-content: center;
+		margin-top: 10px;
 	}
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin: 200rpx auto 50rpx auto;
+	.menu-img {
+		width: 60px;
+		height: 60px;
 	}
 
-	.text-area {
-		display: flex;
-		justify-content: center;
+	.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;
 	}
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	.seg-name {
+		position: absolute;
+		white-space: nowrap;
+		top: -5px;
+		left: 5px;
 	}
-</style>
+</style>