change

components/m-title.vue

@@ -0,0 +1,58 @@
+<template>
+	<view class="m-tap">
+		<image :src="imgSrc" mode=""></image>
+		<text class="iconfont iconenter">更多</text>
+	</view>
+<!-- 	<view class="">
+		9999999999999
+	</view> -->
+</template>
+
+<script>
+export default {
+	name: 'm-title',
+	data() {
+		return {
+			imgUrl: [
+				'../static/img/seckill.png','../static/img/groupBooking.png','../static/img/exchange.png'
+			]
+		};
+	},
+	props: {
+		num: {
+			type: String,
+			default: '0'
+		}
+	},
+	computed: {
+		imgSrc() {
+			return this.imgUrl[this.num*1]
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.m-tap {
+	height: 66rpx;
+	margin-top: 49rpx;
+	display: flex;
+	position: relative;
+	image {
+		width: 295rpx;
+		height: 66rpx;
+		position: absolute;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+	}
+	.iconenter {
+		font-size: 26rpx;
+		color: $font-color-light;
+		position: absolute;
+		right: 25rpx;
+		top: 21rpx;
+	}
+	
+}
+</style>

pages/index/index.vue

@@ -15,21 +15,22 @@
 			<!-- 标题栏和状态栏占位符 -->
 			<view class="titleNview-placing"></view>
 			<!-- 背景色区域 -->
-			<view class="titleNview-background" :style="{ backgroundColor: '#5DBC7C' }"></view>
+			<!-- <view class="titleNview-background" :style="{ backgroundColor: '#5DBC7C' }"></view> -->
+			<view class="titleNview-background" :style="{ backgroundColor: '#efe9df' }"></view>
 			<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
 				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item.pic" /></swiper-item>
 			</swiper>
-			<!-- 自定义swiper指示器 -->
-			<view class="swiper-dots">
-				<template>
-					<view class="swiper-dots-item"></view>
-				</template>
-			</view>
-<!-- 			<view class="swiper-dots">
-				<text class="num">{{ swiperCurrent + 1 }}</text>
-				<text class="sign">/</text>
-				<text class="num">{{ swiperLength }}</text>
-			</view> -->
+		</view>
+		<!-- 自定义swiper指示器 -->
+		<view class="swiper-dot">
+			<template v-for="item in swiperLength">
+				<view class="swiper-dots-item" :key="item" :class="{action: swiperCurrent + 1 === item}"></view>
+			</template>
+		</view>
+		<mtitle></mtitle>
+		<view class="m-tap">
+			<image src="../../static/img/seckill.png" mode=""></image>
+			<text class="iconfont iconenter">更多</text>
 		</view>
 		<!-- 分类 -->
 		<view class="cate-section">
@@ -333,6 +334,7 @@
 </template>
 
 <script>
+import mtitle from '../../components/m-title.vue'
 import seckill from '../../components/seckill/seckill.vue';
 import { loadIndexs } from '@/api/index.js';
 import { getUserInfo } from '@/api/user.js';
@@ -343,7 +345,8 @@ import { mapState } from 'vuex';
 
 export default {
 	components: {
-		seckill
+		seckill,
+		mtitle
 	},
 	watch: {
 		//自适应swiper高度
@@ -1246,4 +1249,45 @@ page {
 		color: $font-color-light;
 	}
 }
+.swiper-dot {
+	padding-top: 28rpx;
+	display: flex;
+	justify-content: center;
+	.swiper-dots-item {
+		width: 25rpx;
+		height: 8rpx;
+		border-radius: 4rpx 4rpx;
+		background-color: #cea19e;
+		margin: 0 16rpx;
+		// z-index: 999;
+	}
+	.action {
+		background-color: #901B21;
+	}
+}
+.m-tap {
+	height: 66rpx;
+	margin-top: 49rpx;
+	display: flex;
+	position: relative;
+	// align-content: center;
+	image {
+		// justify-items: center;
+		// align-items: center;
+		width: 295rpx;
+		height: 66rpx;
+		position: absolute;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+	}
+	.iconenter {
+		font-size: 26rpx;
+		color: $font-color-light;
+		position: absolute;
+		right: 25rpx;
+		top: 21rpx;
+	}
+	
+}
 </style>