no message

src/view/home.vue

@@ -8,17 +8,12 @@
 		</div>
 		<div class="page-content">
 			<div class="banner" v-if="bannerImgList.length > 0">
-				<swiper :options="swiperOption">
+				<swiper :options="swiperOption" ref="mySwiper">
 					<swiper-slide v-for="(item,index) in bannerImgList"  :key="index">
 						<div class="swiper-img" :style="{backgroundImage:'url('+item.imgUrl+')'}"></div>
-						<!--<img src="../../dist/static/img/slider-img.21dc32f.png"/>-->
 					</swiper-slide>
-				    <!--<swiper-slide v-for="(item,index) in bannerImgList" v-if="bannerImgList.length > 0" :key="index">
-				    	<img :src="item.imgUrl"/>
-				    </swiper-slide>-->
-				    <!--<div class="swiper-pagination" slot="pagination"></div>-->
 				</swiper>
-				
+				<div class="swiper-pagination"></div>
 			</div>
 			<div class="coupon" v-if="promotionImgList.imgUrl">
 				<a :href="promotionImgList.linkUrl || ''"><img :src="promotionImgList.imgUrl"/></a>
@@ -83,8 +78,13 @@
 				goodsList:[],
 				imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
 				swiperOption: {//swiper3
-			      autoplay: 3000,
-			      speed: 1000,
+			      	autoplay: {
+			      		disableOnInteraction: false,
+			      	},
+			      	speed: 1000,
+			      	pagination: {
+            			el: '.swiper-pagination'
+          			}
 			    }
 			};
 		},
@@ -97,6 +97,11 @@
 		watch: {
 			
 		},
+		computed: {
+//	      	swiper() {
+//	        	return this.$refs.mySwiper.swiper
+//	      	}
+	    },
 		methods: {
 			getName (){
 				let arr = this.addressValue[2].split('&') || ''
@@ -243,28 +248,29 @@
 	padding-bottom: 1rem;
 }
 .home .page-content .banner {
-	max-height: 2.56rem;
-	margin-bottom: 0.3rem;
+	max-height: 3rem;
+	position: relative;
 }
 .home .page-content .banner > div {
-	max-height: 2.56rem;
+	max-height: 3rem;
 }
 .home .page-content .banner a {
 	display: block;
 }
 .home .page-content .banner div img {
 	width: 100%;
+	height: 3rem;
 	display: block;
 	margin: auto;
 }
 .swiper-img {
 	width: 100%;
-	height: 2.56rem;
+	height: 3rem;
 	background-size: 100% 100%;
 }
 .home .page-content .coupon {
-	margin-top: 0.3rem;
-	margin-bottom: 0.4rem;
+	margin-top: 0.05rem;
+	margin-bottom: 0.05rem;
 }
 .home .page-content .coupon img {
 	width:6.8rem;
@@ -390,5 +396,16 @@
 .picke-address .status-btn a.complete-btn {
 	color: #1aad19;
 }
-
+.swiper-pagination {
+	width: 100%;
+	bottom: 0;
+}
+.swiper-pagination span {
+	width: 0.2rem;
+	height: 0.2rem;
+	margin: 0 0.1rem;
+}
+.swiper-pagination-bullet-active {
+	background: #5a5a5a;
+}
 </style>