Ver código fonte

只有一个图片/热点时,样式优化

任一存 2 anos atrás
pai
commit
1ec35f5c1c
1 arquivos alterados com 27 adições e 3 exclusões
  1. 27 3
      src/views/HomeMobile.vue

+ 27 - 3
src/views/HomeMobile.vue

@@ -63,13 +63,16 @@
               keyboard: true,
               loop: false,
             }"
-            class="swiper-wrapper"
+            class="swiper-wrapper img-list-wrapper"
           >
             <img
               v-for="(item, index) in hotspotData.images"
               :key="index"
               v-lazy="item"
               class="swiper-slide"
+              :class="{
+                single: hotspotData.images.length === 1
+              }"
               alt=""
               draggable="false"
             >
@@ -87,12 +90,15 @@
           class="swiper-root"
         >
           <div
-            class="swiper-wrapper"
+            class="swiper-wrapper video-list-wrapper"
           >
             <div
               v-for="(item, index) in hotspotData.video"
               :key="index"
               class="swiper-slide"
+              :class="{
+                single: hotspotData.images.length === 1
+              }"
               @click="viewVideo(item)"
             >
               <video
@@ -359,7 +365,7 @@ export default {
         overflow: hidden;
         height: 100%;
         width: 100%;
-        .swiper-wrapper {
+        .swiper-wrapper.img-list-wrapper {
           > .swiper-slide {
             object-fit: contain;
             border-radius: 4px;
@@ -367,6 +373,19 @@ export default {
             width: 30.2vw;
             height: 19.6vw;
             position: relative;
+          }
+          > .swiper-slide.single {
+            width: 100%;
+            height: initial;
+            margin-right: initial;
+          }
+        }
+        .swiper-wrapper.video-list-wrapper {
+          > .swiper-slide {
+            margin-right: 1.8vw;
+            width: 30.2vw;
+            height: 19.6vw;
+            position: relative;
             > video {
               object-fit: contain;
               border-radius: 4px;
@@ -382,6 +401,11 @@ export default {
               height: 6.2vw;
             }
           }
+          > .swiper-slide.single {
+            width: 100%;
+            height: initial;
+            margin-right: initial;
+          }
         }
         .swiper-pagination {
         }