Quellcode durchsuchen

优化:轮播图计数样式

Martin vor 5 Jahren
Ursprung
Commit
0db05ac195
1 geänderte Dateien mit 9 neuen und 7 gelöschten Zeilen
  1. 9 7
      pages/goods/components/SlideImage.vue

+ 9 - 7
pages/goods/components/SlideImage.vue

@@ -1,13 +1,12 @@
 <template>
   <!-- 商品图片 -->
   <view class="images-swiper">
-    <swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :indicator-dots="indicatorDots"
-      :interval="interval" :circular="true" @change="setCurrent">
+    <swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :indicator-dots="indicatorDots" :interval="interval" :circular="true" @change="setCurrent">
       <swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
         <image class="slide-image" mode="aspectFill" :src="item.preview_url"></image>
       </swiper-item>
     </swiper>
-    <view class="banner-num">
+    <view class="swiper-count">
       <text>{{ currentIndex }}</text>
       <text>/</text>
       <text>{{ images.length }}</text>
@@ -60,6 +59,10 @@
 
 <style lang="scss" scoped>
   // swiper组件
+  .images-swiper {
+    position: relative;
+  }
+
   .swiper-box {
     width: 750rpx;
     height: 750rpx;
@@ -72,12 +75,11 @@
     }
   }
 
-  /* banner计数 */
-
-  .banner-num {
+  // swiper计数
+  .swiper-count {
     position: absolute;
     right: 30rpx;
-    margin-top: -70rpx;
+    bottom: 36rpx;
     padding: 2rpx 18rpx;
     background: rgba(0, 0, 0, 0.363);
     border-radius: 50rpx;