#30, 轮播图样式微调

wenyio · wenyio · commit c54faaa883ec · 2020-08-15T17:59:55.000+08:00
diff --git a/src/home/Index.vue b/src/home/Index.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="home">
-    <KSwiper
-      :indicator-dots="indicatorDots"
-      :circular="circularFlag"
-      :autoplay="autoplay"
-      :duration="duration"
-      :interval="interval"
-    >
-      <KSwiperItem v-for="(item,index) in background" :key="index">
-        <KView :class="'swiper-item '+ item">
-          <img :src="item" class="banner-item" mode='widthFix'/>
-        </KView>
-      </KSwiperItem>
-    </KSwiper>
+    <div class="swiper">
+      <KSwiper
+        :indicator-dots="indicatorDots"
+        :circular="circularFlag"
+        :autoplay="autoplay"
+        :duration="duration"
+        :interval="interval"
+      >
+        <KSwiperItem v-for="(item,index) in background" :key="index">
+          <KView :class="'swiper-item '+ item">
+            <img :src="item" class="banner-item" mode='widthFix'/>
+          </KView>
+        </KSwiperItem>
+      </KSwiper>
+    </div>
     <Tabs />
 
     <!-- <tabs></tabs>
@@ -119,14 +121,14 @@ export default Vue.extend({
   }
 }
     .swiper {
-        margin-top: 15px;
+        margin-top: 20rpx;
         width: 100%;
-        height: 185px;
+        height: 300rpx;
     }
     .banner-item {
         display: block;
         margin: auto;
-        height: 160px;
-        border-radius: 20px;
+        width: 95%;
+        border-radius: 20rpx;
     }
 </style>
