图片修改

src/pages/details.vue

@@ -65,7 +65,7 @@
             :current="current"
             v-else
             class="swiper"
-            :display-multiple-items="3"
+            :display-multiple-items="4"
             circular
             style="margin-top:20px; margin-bottom: 10px;"
         >
@@ -76,7 +76,7 @@
                     :class="{ active: swiperCurrent === index }"
                 >
                     <img
-                        style="height:100%"
+                        style="height:100%,width:70px"
                         :src="item.image + oss"
                         @click="preview(item.image, getImgs(cardList))"
                         alt=""
@@ -95,12 +95,7 @@
             <div v-else class="btn" @click="collects">收起</div>
             <div v-if="imgFlag" class="imgBox">
                 <div v-for="(item, index) in cards" :key="index">
-                    <img
-                        style="width: 70px;height: 100px;padding:5px"
-                        :src="item.image + oss"
-                        @click="preview(item.image, getImgs(cards))"
-                        alt=""
-                    />
+                    <img class="img" :src="item.image + oss" @click="preview(item.image, getImgs(cards))" alt="" />
                 </div>
             </div>
         </div>
@@ -171,7 +166,7 @@ export default {
     computed: {
         cardList() {
             return [...this.cards].filter((item, index) => {
-                return index < 10;
+                return index < 4;
             });
         },
         // defaultCards() {
@@ -382,7 +377,16 @@ export default {
     .imgBox {
         .flex();
         flex-wrap: wrap;
+        width: 342px !important;
         margin-top: 20px;
+        .img {
+            width: 80px;
+            height: 110px;
+            padding: 0 2px;
+        }
+    }
+    ._img:nth-child(3) {
+        padding: 0;
     }
     // .customDots {
     //     margin-top: 5px;
@@ -655,28 +659,32 @@ export default {
     }
 }
 .swiper {
-    height: 310rpx;
+    height: 250rpx;
     image {
         width: 100% !important;
-        transition: transform ease-in-out 0.1s;
+        // transition: transform ease-in-out 0.1s;
     }
-    ._swiper-item.active + ._swiper-item {
-        image {
-            transform: scale(1.1);
-        }
+    // ._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);
+    //     }
 
-    /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>