修改

src/pages/details.vue

@@ -60,19 +60,14 @@
         <div class="box-details" v-if="cardList == ''">
             {{ label }}
         </div>
-        <swiper @change="swiperChange" v-else class="swiper" circular style="margin-top:20px; margin-bottom: 10px;">
+        <div v-else class="imgBox" style="margin-top:20px">
             <template>
-                <swiper-item v-for="(item, index) in cards" :key="index" :class="{ active: swiperCurrent === index }">
-                    <img
-                        style="height:100%,width:70px"
-                        :src="item.image + oss"
-                        @click="preview(item.image, getImgs(cards))"
-                        alt=""
-                    />
-                    <p class="swiper-itemText">×{{ item.count }}</p>
-                </swiper-item>
+                <div v-for="(item, index) in cardList" :key="index" :class="{ active: swiperCurrent === index }">
+                    <img class="img" :src="item.image + oss" @click="preview(item.image, getImgs(cardList))" alt="" />
+                    <p class="swiper-itemTexts">×{{ item.count }}</p>
+                </div>
             </template>
-        </swiper>
+        </div>
         <!-- <div class="customDots" v-if="cardList.length > 0">
             <template>
                 {{ swiperCurrent + 1 }}/{{ cardList.length }}
@@ -165,7 +160,7 @@ export default {
         cardList() {
             let list = [...this.cards];
             return list.filter((item, index) => {
-                return index <= 4;
+                return index < 4;
             });
         },
         defaultCards() {
@@ -386,7 +381,6 @@ export default {
         .flex();
         width: 340px;
         flex-wrap: wrap;
-        margin-bottom: 12px;
         .img {
             width: 75px;
             height: 110px;
@@ -409,16 +403,6 @@ export default {
     //     display: flex;
     //     justify-content: center;
     // }
-    .swiper-itemText {
-        position: absolute;
-        left: 5px;
-        right: 5px;
-        bottom: 3px;
-        font-size: 13px;
-        color: #fff;
-        font-weight: bold;
-        text-align: center;
-    }
     // .customDots .customDots-item {
     //     margin: 0 8px;
     //     width: 8px;
@@ -677,33 +661,33 @@ export default {
         opacity: 0;
     }
 }
-.swiper {
-    height: 220rpx;
-    image {
-        width: 100% !important;
-        // transition: transform ease-in-out 0.1s;
-    }
-    // ._swiper-item.active + ._swiper-item {
-    //     image {
-    //         transform: scale(1.1);
-    //     }
-    // }
-    ._swiper-item {
-        height: 110px !important;
-        width: 75px !important;
-        padding: 0 5px;
-    }
-    // /deep/ ._swiper-item {
-    //     // padding: 10px;
-    //     box-sizing: border-box;
-    //     padding: 10px;
-    //     image {
-    //         transform: scale(0.8);
-    //     }
+// .swiper {
+//     height: 220rpx;
+//     image {
+//         width: 100% !important;
+//         // transition: transform ease-in-out 0.1s;
+//     }
+//     // ._swiper-item.active + ._swiper-item {
+//     //     image {
+//     //         transform: scale(1.1);
+//     //     }
+//     // }
+//     ._swiper-item {
+//         height: 110px !important;
+//         width: 75px !important;
+//         padding: 0 5px;
+//     }
+//     // /deep/ ._swiper-item {
+//     //     // padding: 10px;
+//     //     box-sizing: border-box;
+//     //     padding: 10px;
+//     //     image {
+//     //         transform: scale(0.8);
+//     //     }
 
-    // &.active {
-    //     padding: 0 5px;
-    // }
-    // }
-}
+//     // &.active {
+//     //     padding: 0 5px;
+//     // }
+//     // }
+// }
 </style>