swiper分页改用数字

src/components/HotspotDetail.vue

@@ -58,7 +58,10 @@
             draggable="false"
           >
         </div>
-        <div class="swiper-pagination" />
+        <!-- <div class="swiper-pagination" /> -->
+        <div class="swiper-pagination">
+          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesToShow[currentTabIdx].list.length }}</span>
+        </div>
         <div class="swiper-button-prev" />
         <div class="swiper-button-next" />
       </div>
@@ -83,7 +86,10 @@
             draggable="false"
           >
         </div>
-        <div class="swiper-pagination" />
+        <!-- <div class="swiper-pagination" /> -->
+        <div class="swiper-pagination">
+          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesToShow[currentTabIdx].list.length }}</span>
+        </div>
         <div class="swiper-button-prev" />
         <div class="swiper-button-next" />
       </div>
@@ -108,7 +114,10 @@
             draggable="false"
           >
         </div>
-        <div class="swiper-pagination" />
+        <!-- <div class="swiper-pagination" /> -->
+        <div class="swiper-pagination">
+          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesToShow[currentTabIdx].list.length }}</span>
+        </div>
         <div class="swiper-button-prev" />
         <div class="swiper-button-next" />
       </div>
@@ -133,7 +142,10 @@
             draggable="false"
           >
         </div>
-        <div class="swiper-pagination" />
+        <!-- <div class="swiper-pagination" /> -->
+        <div class="swiper-pagination">
+          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesToShow[currentTabIdx].list.length }}</span>
+        </div>
         <div class="swiper-button-prev" />
         <div class="swiper-button-next" />
       </div>
@@ -244,9 +256,9 @@ export default {
       const that = this
       const swiper = new Swiper('.swiper-root', {
       // If we need pagination
-        pagination: {
-          el: '.swiper-pagination',
-        },
+        // pagination: {
+        //   el: '.swiper-pagination',
+        // },
 
         // Navigation arrows
         navigation: {
@@ -332,20 +344,32 @@ export default {
           object-fit: contain;
         }
       }
+      // .swiper-pagination {
+      //   top: 100%;
+      //   bottom: initial;
+      //   height: 0.42rem;
+      //   /deep/.swiper-pagination-bullet {
+      //     width: 5.34rem;
+      //     height: 0.42rem;
+      //     background-color: #999999;
+      //     margin-right: 0.79rem;
+      //     // background-color: #930909;
+      //     border-radius: initial;
+      //   }
+      //   /deep/.swiper-pagination-bullet.swiper-pagination-bullet-active {
+      //     background-color: #930909;
+      //   }
+      // }
       .swiper-pagination {
+        position: absolute;
         top: 100%;
-        bottom: initial;
-        height: 0.42rem;
-        /deep/.swiper-pagination-bullet {
-          width: 5.34rem;
-          height: 0.42rem;
-          background-color: #999999;
-          margin-right: 0.79rem;
-          // background-color: #930909;
-          border-radius: initial;
-        }
-        /deep/.swiper-pagination-bullet.swiper-pagination-bullet-active {
-          background-color: #930909;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 1.33rem;
+        font-family: Inter-Regular, Inter;
+        color: #666;
+        .cur {
+          color: #930909;
         }
       }
       .swiper-button-prev {

src/components/RelicDetail.vue

@@ -11,33 +11,6 @@
         frameborder="0"
         class="display-3d"
       />
-      <!-- <div
-        v-if="dimNumber === 2"
-        v-viewer="{
-          button: true,
-          navbar: false,
-          title: false,
-          toolbar: false,
-          tooltip: false,
-          movable: true,
-          zoomable: true,
-          rotatable: true,
-          scalable: true,
-          transition: false,
-          fullscreen: false,
-          keyboard: true,
-          loop: false,
-        }"
-        class="photos"
-      >
-        <img
-          v-for="(item, index) in imageList"
-          :key="index"
-          :src="item"
-          alt=""
-          draggable="false"
-        >
-      </div> -->
 
       <div
         v-if="dimNumber === 2"
@@ -73,7 +46,10 @@
               draggable="false"
             >
           </div>
-          <div class="swiper-pagination" />
+          <!-- <div class="swiper-pagination" /> -->
+          <div class="swiper-pagination">
+            <span class="cur">{{ currentSlideIdx }}</span> / <span>{{ imageList.length }}</span>
+          </div>
           <div class="swiper-button-prev" />
           <div class="swiper-button-next" />
         </div>
@@ -152,23 +128,31 @@ export default {
       iframeSrc: '',
       imageList: [],
       detailInfo: [],
+      currentSlideIdx: 1,
 
       isShowDesc: false,
     }
   },
   mounted() {
     this.$nextTick(() => {
+      const that = this
       new Swiper('.swiper-root', {
       // If we need pagination
-        pagination: {
-          el: '.swiper-pagination',
-        },
+        // pagination: {
+        //   el: '.swiper-pagination',
+        // },
 
         // Navigation arrows
         navigation: {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
         },
+
+        on: {
+          slideChange: function(e) {
+            that.currentSlideIdx = e.activeIndex + 1
+          }
+        }
       })
     })
 
@@ -271,20 +255,32 @@ export default {
             object-fit: contain;
           }
         }
+        // .swiper-pagination {
+        //   top: 100%;
+        //   bottom: initial;
+        //   height: 0.42rem;
+        //   /deep/.swiper-pagination-bullet {
+        //     width: 5.34rem;
+        //     height: 0.42rem;
+        //     background-color: #999999;
+        //     margin-right: 0.79rem;
+        //     // background-color: #930909;
+        //     border-radius: initial;
+        //   }
+        //   /deep/.swiper-pagination-bullet.swiper-pagination-bullet-active {
+        //     background-color: #930909;
+        //   }
+        // }
         .swiper-pagination {
+          position: absolute;
           top: 100%;
-          bottom: initial;
-          height: 0.42rem;
-          /deep/.swiper-pagination-bullet {
-            width: 5.34rem;
-            height: 0.42rem;
-            background-color: #999999;
-            margin-right: 0.79rem;
-            // background-color: #930909;
-            border-radius: initial;
-          }
-          /deep/.swiper-pagination-bullet.swiper-pagination-bullet-active {
-            background-color: #930909;
+          left: 50%;
+          transform: translateX(-50%);
+          font-size: 1.33rem;
+          font-family: Inter-Regular, Inter;
+          color: #666;
+          .cur {
+            color: #930909;
           }
         }
         .swiper-button-prev {