Browse Source

国之重器详情页:分享界面也要有视频背景

任一存 2 years ago
parent
commit
61e1b965c4
1 changed files with 39 additions and 0 deletions
  1. 39 0
      src/views/TreasureDetail.vue

+ 39 - 0
src/views/TreasureDetail.vue

@@ -80,6 +80,13 @@
             :key="item.id"
             class="swiper-slide"
           >
+            <video
+              v-if="fullScreenStatus"
+              src="@/assets/videos/bg-history.mp4"
+              class="bg"
+              autoplay
+              loop
+            />
             <iframe
               :src="`${prefix}/web-model/index.html#/relic-detail?model-path=${encodeURIComponent(item.filePath)}`"
               frameborder="0"
@@ -107,6 +114,13 @@
             class="swiper-slide"
           >
             <video
+              v-if="fullScreenStatus"
+              src="@/assets/videos/bg-history.mp4"
+              class="bg"
+              autoplay
+              loop
+            />
+            <video
               :src="item.filePath"
             />
             <button
@@ -131,6 +145,13 @@
             :key="item.id"
             class="swiper-slide"
           >
+            <video
+              v-if="fullScreenStatus"
+              src="@/assets/videos/bg-history.mp4"
+              class="bg"
+              autoplay
+              loop
+            />
             <img
               draggable="false"
               :src="`${prefix}/${item.filePath}`"
@@ -484,6 +505,15 @@ export default {
         margin-right: auto;
         .swiper-slide {
           font-size: 0;
+          >video.bg{
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            z-index: -1;
+          }
           > iframe {
             width: 100%;
             height: 100%;
@@ -694,6 +724,15 @@ export default {
           margin-right: auto;
           .swiper-slide {
             font-size: 0;
+            >video.bg{
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              z-index: -1;
+            }
             > iframe {
               width: 100%;
               height: 100%;