style: hotspot

hotspot/views/hotspot/index.scss

@@ -18,8 +18,8 @@
     bottom: 5px;
 
     img {
-      width: 52px;
-      height: 52px;
+      width: 57px;
+      height: 57px;
       cursor: pointer;
     }
   }
@@ -49,9 +49,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 9vh 0;
+    padding: 9vh 20px;
     max-width: 1320px;
-    width: calc(100vw - 30vw);
+    min-width: 400px;
+    width: auto;
     background: rgba(53, 53, 53, 1);
     box-sizing: border-box;
   }
@@ -91,8 +92,8 @@
     justify-content: center;
   }
   &-video {
+    height: 100%;
     max-height: 100%;
-    object-fit: cover;
   }
   &-img {
     display: flex;

hotspot/views/hotspot/index.vue

@@ -24,13 +24,8 @@
       </Swiper>
 
       <!-- 视频页面 -->
-      <Swiper
-        v-if="myType === 'video'"
-        class="hotspot-page-swiper hotspot-page-video"
-        @swiper="initSwiper"
-        @slideChange="handleChange"
-      >
-        <SwiperSlide v-for="(item, index) in curList" :key="item.url">
+      <div v-if="myType === 'video'" class="hotspot-page-swiper hotspot-page-video">
+        <template v-for="(item, index) in curList" :key="item.url">
           <video
             v-if="index === myInd"
             id="videoID"
@@ -39,8 +34,8 @@
             :src="item.url"
             autoplay
           />
-        </SwiperSlide>
-      </Swiper>
+        </template>
+      </div>
 
       <!-- 图片页面 -->
       <Swiper
@@ -254,10 +249,18 @@
         this.myInd = activeIndex;
       },
       handlePre() {
-        this.swiper?.slidePrev();
+        if (this.myType === 'video') {
+          this.myInd = this.myInd > 0 ? this.myInd - 1 : this.curList.length - 1;
+        } else {
+          this.swiper?.slidePrev();
+        }
       },
       handleNext() {
-        this.swiper?.slideNext();
+        if (this.myType === 'video') {
+          this.myInd = this.myInd < this.curList.length - 1 ? this.myInd + 1 : 0;
+        } else {
+          this.swiper?.slideNext();
+        }
       },
     },
   };