场景添加开场视频

scene/src/App.vue

@@ -1,29 +1,74 @@
 <template>
-    <div class="vvvv">
-        <router-view/>
-        <div class="orientation-tip" v-if="isMobile">
-        <div>
-            <img :src="require('@/assets/images/project/landtip.png')" alt="" />
-            <p>请在竖屏模式观看</p>
-        </div>
-        </div>
+  <div class="vvvv">
+    <router-view />
+    <div class="orientation-tip" v-if="isMobile">
+      <div>
+        <img :src="require('@/assets/images/project/landtip.png')" alt="" />
+        <p>请在竖屏模式观看</p>
+      </div>
     </div>
+
+    <!-- 开场视频播放 -->
+    <div
+      class="baseVideo"
+      :style="`opacity:${videoShow ? '1' : '0'};pointerEvents:${
+        videoShow ? 'auto' : 'none'
+      }`"
+    >
+      <video
+        @ended="videoEnd"
+        autoplay
+        muted
+        src="./assets/img/base.mp4"
+      ></video>
+    </div>
+  </div>
 </template>
 
 <script>
-import '@/assets/style/reset.less'
-import '@/assets/style/public.less'
+import "@/assets/style/reset.less";
+import "@/assets/style/public.less";
 export default {
-    
-}
+  data() {
+    return {
+      videoShow: true,
+    };
+  },
+  methods: {
+    videoEnd() {
+      this.videoShow = false;
+
+      setTimeout(() => {
+        const dom = document.querySelector(".baseVideo");
+        if (dom) dom.remove();
+      }, 1000);
+    },
+  },
+};
 </script>
 <style lang="less">
-.vvvv{
+.vvvv {
+  width: 100%;
+  height: 100%;
+
+  .baseVideo {
+    transition: all 1s;
+    opacity: 1;
+    pointer-events: auto;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
 }
 
-
 /*横屏体验*/
 .orientation-tip {
   width: 100%;
@@ -43,7 +88,7 @@ export default {
     transform: translate(-50%, -50%);
     text-align: center;
     > img {
-        width: 20%;
+      width: 20%;
     }
     > p {
       font-size: 16px;

scene/src/pages/Home.vue

@@ -91,6 +91,9 @@
           <span>{{isVisNum}}</span>浏览量</p>
       </div>
     </div>
+  
+
+  
   </div>
 </template>
 
@@ -185,6 +188,9 @@ export default {
 .parent-body {
   width: 100%;
   height: 100%;
+
+
+
 }
 
 .loading {