bug fix: 展示热点中图片与视频的标题

src/views/HomeMobile.vue

@@ -68,17 +68,24 @@
             }"
             class="swiper-wrapper img-list-wrapper"
           >
-            <img
+            <div
               v-for="(item, index) in hotspotData.images"
               :key="index"
-              v-lazy="item"
               class="swiper-slide"
               :class="{
-                single: hotspotData.images.length === 1
+                single: hotspotData.video.length === 1
               }"
-              alt=""
-              draggable="false"
+              @click="viewVideo(item)"
             >
+              <div class="title">
+                {{ hotspotData.imagesDesc[index] }}
+              </div>
+              <img
+                v-lazy="item"
+                alt=""
+                draggable="false"
+              >
+            </div>
           </div>
         <!-- <div class="swiper-pagination" />
         <div class="swiper-button-prev" />
@@ -104,6 +111,9 @@
               }"
               @click="viewVideo(item)"
             >
+              <div class="title">
+                {{ hotspotData.videosDesc[index] }}
+              </div>
               <img
                 class="cover"
                 src="@/assets/images/video-icon.png"
@@ -374,37 +384,70 @@ export default {
       line-height: 5.3vw;
     }
     .swiper-wrapper-mine {
-      margin-top: 5vw;
+      margin-top: 2vw;
       .swiper-root {
         overflow: hidden;
         height: 100%;
         width: 100%;
         .swiper-wrapper.img-list-wrapper {
           > .swiper-slide {
-            object-fit: contain;
-            border-radius: 4px;
             margin-right: 1.8vw;
             width: 30.2vw;
-            height: 19.6vw;
+            height: 25.6vw;
             position: relative;
+            > .title {
+              overflow: hidden;
+              white-space: pre;
+              text-overflow: ellipsis;
+              font-size: 3.2vw;
+              font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+              font-weight: bold;
+              color: #1F3E7C;
+              width: 100%;
+              height: 6vw;
+              line-height: 6vw;
+              text-align: center;
+            }
+            > img {
+              object-fit: cover;
+              border-radius: 4px;
+              width: 100%;
+              height: 19.6vw;
+            }
           }
           > .swiper-slide.single {
             width: 100%;
             height: initial;
             margin-right: initial;
+            > img {
+              height: initial;
+            }
           }
         }
         .swiper-wrapper.video-list-wrapper {
           > .swiper-slide {
             margin-right: 1.8vw;
             width: 30.2vw;
-            height: 19.6vw;
+            height: 25.6vw;
             position: relative;
+            > .title {
+              overflow: hidden;
+              white-space: pre;
+              text-overflow: ellipsis;
+              font-size: 3.2vw;
+              font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+              font-weight: bold;
+              color: #1F3E7C;
+              width: 100%;
+              height: 6vw;
+              line-height: 6vw;
+              text-align: center;
+            }
             > .cover {
               object-fit: contain;
               border-radius: 4px;
               width: 100%;
-              height: 100%;
+              height: 19.6vw;
             }
             > img.icon {
               position: absolute;
@@ -419,6 +462,9 @@ export default {
             width: 100%;
             height: initial;
             margin-right: initial;
+            > .cover {
+              height: initial;
+            }
           }
         }
         .swiper-pagination {