场馆漫游过渡页面 写了但又不需要了

.env

@@ -1 +1,2 @@
-VUE_APP_CDN_PATH=/goodsData/
+VUE_APP_CDN_PATH=/goodsData/
+VUE_APP_SWKK_PATH=http://192.168.20.16:8081/index.html#/1

src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import RelicsAppr from "@/views/RelicsAppr.vue"
 import RelicDetail from "@/components/RelicDetail.vue"
+// import SwkkFadeIn from "@/views/SwkkFadeIn.vue"
 
 Vue.use(VueRouter)
 
@@ -17,6 +18,15 @@ const routes = [
       next()
     }
   },
+  // {
+  //   path: '/swkk-fade-in',
+  //   name: 'SwkkFadeIn',
+  //   component: SwkkFadeIn,
+  //   meta: {
+  //     isShowBottomBar: false,
+  //     canFullScreen: false,
+  //   }
+  // },
   {
     path: '/relics-appr',
     name: 'RelicsAppr',

src/views/SwkkFadeIn.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="video-fade-in">
+    <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>
+
+    <div
+      class="entry"
+      @click="toSwkk"
+    >
+      &emsp;进入展馆
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VideoFadeIn",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      isShowSkip: false,
+      isShowVideo: true,
+    }
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    setTimeout(() => {
+      this.isShowSkip = true
+    }, 3000)
+    let dom = document.querySelector("#VideoDom")
+    dom.addEventListener('canplaythrough', () => {
+      dom.play()
+    })
+    dom.addEventListener("ended", () => {
+      this.isShowVideo = false
+    })
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {},
+  //方法集合
+  methods: {
+    toSwkk() {
+      window.location.replace(process.env.VUE_APP_SWKK_PATH)
+    }
+  },
+}
+</script>
+
+<style lang='less' scoped>
+.video-fade-in {
+  height: 100%;
+  position: relative;
+  background-image: url("@/assets/images/swkk-fade-in-bg.jpg");
+  background-size: contain;
+  .video-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    > 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%);
+      }
+    }
+  }
+  .entry {
+    cursor: pointer;
+    position: absolute;
+    bottom: 70px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 302px;
+    height: 140px;
+    line-height: 190px;
+    font-weight: 700;
+    text-align: center;
+    font-size: 24px;
+    color: #930909;
+    background-image: url("@/assets/images/swkk-entry.png");
+    background-size: 100% 100%;
+  }
+}
+</style>