Merge branch 'master' of http://121.40.40.223:3000/zizhong.wang/konggang-city-miniprogram

pages/index/index.vue

@@ -1,15 +1,21 @@
 <template>
 	<view class="content">
-		<view class="page-section-spacing" style="width: 100%;">
+		<view class="page-section-spacing" style="width: 100%;position: relative;">
 		 	<swiper class="swiper" 
-		 		indicator-dots="true" 
+		 		 indicator-dots="false" 
 				 autoplay="true" 
 		 		 duration="500"	
-				 style="height:400rpx">
-		 		<swiper-item v-for="(item , index) in swiperList" :key="index">
+				 style="height:400rpx"
+				 @change="swiperChange">
+		 		<swiper-item v-for="(item , index) in swiperList" :key="index" class="swiper-content">
 		 			<image :src="item.pic_path" mode="aspectFill" style="width: 100%;height: 100%;"></image>
 		 		</swiper-item>
 		 	</swiper>
+			<view class="rowDot">
+				 <view v-for="(item,index) in swiperList" :key="index" class="dots">
+					 <view :class="['dot',index === swiperCurrent ? 'active' : '']"></view>
+				 </view>
+			</view>
 		 </view>
 		 
 		 <view class="page-nav-box">	
@@ -138,6 +144,7 @@
 						img:'/static/swiper/swiper2.jpg'
 					},
 				],
+				swiperCurrent:0,
 			    navList:[
 					{
 						url:'/static/navList/appeal.png',
@@ -259,6 +266,9 @@
            this.getSwiperList()
 		},
 		methods: {
+			swiperChange(e){
+				this.swiperCurrent = e.detail.current
+			},
 			getSwiperList(){
 				let md5Sign = md5("method="+'common'+"&timestamp="+getApp().globalData.globalTimestamp+"&secret="+getApp().globalData.secret)
 				let url = getApp().globalData.shareUrl+'api/api.php'+'?method=common&source=main_pics&action=list&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
@@ -316,7 +326,32 @@
 		font-size: 36rpx;
 		color: #8f8f94;
 	}
-	
+	.rowDot {
+		display: flex;
+		position: absolute;
+		top: 135px;
+		left: 40px;
+	}
+	.dots {
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		align-content: center;
+	}
+	.dot {
+		margin-right: 8rpx;
+		width: 40rpx;
+		height: 8rpx;
+		opacity: 1;
+		border-radius: 6rpx;
+		background: #fff5f9;
+	}
+	.dot.active {
+		background: #ff4e54;
+	}
+	.swiper-content {
+		border-radius: 0 0 10% 10%; 
+	}
 	.page-nav-box {
 		width: 80%;
 		/* height: 320rpx; */