过渡视频移动到进入网页时

src/views/HomeView.vue

@@ -1,5 +1,27 @@
 <template>
   <div class="home">
+    <div
+      v-if="isShowVideo"
+      class="video-wrap"
+    >
+      <video
+        id="VideoDom"
+        src="@/assets/videos/swkk-fade-in-video.mp4"
+        muted
+        autoplay
+        playsinline
+        x5-playsinline
+        webkit-playsinline
+      />
+      <button
+        class="skip"
+        :class="{ active: isShowSkip }"
+        @click="isShowVideo = false"
+      >
+        <span>跳过</span>
+      </button>
+    </div>
+
     <img
       class="title"
       src="@/assets/images/title.png"
@@ -9,7 +31,7 @@
     <div class="button-group">
       <router-link
         class="router-link"
-        to="./swkk-fade-in?floor=1"
+        to="./swkk-view?floor=1"
       >
         <img
           src="@/assets/images/button-to-scenes.png"
@@ -49,7 +71,25 @@
 export default {
   name: 'HomeView',
   components: {
-  }
+  },
+  data() {
+    return {
+      isShowSkip: false,
+      isShowVideo: true,
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.isShowSkip = true
+    }, 3000)
+    let dom = document.querySelector("#VideoDom")
+    dom.addEventListener('canplaythrough', () => {
+      dom.play()
+    })
+    dom.addEventListener("ended", () => {
+      this.isShowVideo = false
+    })
+  },
 }
 </script>
 
@@ -60,6 +100,46 @@ export default {
   background-color: #D8B275;
   background-image: url(@/assets/images/homepage-bg.jpg);
   background-size: cover;
+
+  .video-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    background-color: #000;
+    > video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .skip {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.5s;
+      background-image: url("@/assets/images/skip.png");
+      background-size: 100% 100%;
+      position: absolute;
+      bottom: 4.96rem;
+      right: 1.29rem;
+      width: 5.42rem;
+      height: 5.42rem;
+      font-size: 1.25rem;
+      color: #930909;
+      &.active {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      span {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-40%, -50%);
+      }
+    }
+  }
+
   .title {
     position: absolute;
     width: 39.63rem;