up

src/views/Home/index.vue

@@ -1,10 +1,16 @@
 <template>
   <div class='Home'>
     <img class="logo" src="../../assets/img/home/logo.png" alt="">
-    <img class="btn" @click="$router.push('/layout/construct')" src="../../assets/img/home/btn.png" alt="">
+    <img class="btn" @click="videoShow = true" src="../../assets/img/home/btn.png" alt="">
     <div class="ifrBox">
       <iframe src="http://zzbbh.4dage.com/SWKK/show.html?id=WK1592095910366638080" frameborder="0"></iframe>
     </div>
+
+    <!-- 视频盒子 -->
+    <div class="videoBox" :class="{ videoAc: videoShow }">
+      <video muted src="../../assets/media/home.mp4"></video>
+      <div v-show="videoBtnShow" class="videoBtn" @click="$router.push('/layout/construct')">点击跳过视频</div>
+    </div>
   </div>
 </template>
 
@@ -15,11 +21,25 @@ export default {
   components: {},
   data() {
     return {
-
+      videoShow: false,
+      videoBtnShow: false
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    videoShow(val) {
+      if (val) {
+        let dom = document.querySelector('video')
+        dom.play()
+        dom.addEventListener('ended', () => { //结束
+          this.$router.push('/layout/construct')
+        }, false);
+        setTimeout(() => {
+          this.videoBtnShow = true
+        }, 1000);
+      }
+    }
+  },
   methods: {
 
   },
@@ -42,7 +62,6 @@ export default {
 .Home {
   width: 100%;
   height: 100%;
-  background-color: #2086ee;
   position: relative;
 
   .ifrBox {
@@ -51,7 +70,8 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
-    iframe{
+
+    iframe {
       width: 100%;
       height: 100%;
     }
@@ -74,5 +94,48 @@ export default {
     left: 50%;
     transform: translateX(-50%);
   }
+
+  .videoBox {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .3s;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+
+    video {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+    }
+
+    .videoBtn {
+      background-color: rgba(255, 89, 89, .6);
+      font-size: 20px;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      bottom: 40px;
+      width: 200px;
+      height: 48px;
+      border-radius: 24px;
+      z-index: 2;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .videoAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 </style>

src/views/Layout/index.vue

@@ -2,8 +2,8 @@
   <div class='Layout'>
 
     <div class="bottom">
-      <div class="row" @click="$router.push(item.path).catch(() => { })" :class="{ active: item.id === $route.meta.myInd }"
-        v-for="item in data" :key="item.id">{{ item.name }}
+      <div class="row" @click="$router.push(item.path).catch(() => { })"
+        :class="{ active: item.id === $route.meta.myInd }" v-for="item in data" :key="item.id">{{ item.name }}
       </div>
     </div>