添加視頻背景

src/app.vue

@@ -152,7 +152,6 @@ const changeMode = (name, e, focus3d = false) => {
     nextTick(() => {
       if (focus3d) {
         let $active = document.querySelector(".tabs>span:last-of-type");
-        console.log($active.getBoundingClientRect().width);
         background.value.style.width = $active.getBoundingClientRect().width + "px";
         background.value.style.left = $active.offsetLeft + "px";
       } else {

src/components/openVideo/index.vue

@@ -1,73 +1,92 @@
 <template>
-    <transition appear name="custom-classes-transition" leave-active-class="animated fadeOut faster">
-        <div class="open-video">
-            <video x5-playsinline="true" playsinline="true" webkit-playsinline="true"  ref="openvideo$" preload autoplay :src="videourl"></video>
-            <div @click.stop="emit('close')" class="jump">跳過</div>
-        </div>
-    </transition>
+  <transition appear name="custom-classes-transition" leave-active-class="animated fadeOut faster">
+    <div class="open-video">
+      <div class="vmask"></div>
+      <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="bgvideo" preload autoplay :src="videourl"></video>
+      <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="video" ref="openvideo$" preload autoplay :src="videourl"></video>
+      <div @click.stop="emit('close')" class="jump">跳過</div>
+    </div>
+  </transition>
 </template>
 <script setup>
-import { ref, watch, defineEmits, computed, onMounted,nextTick, defineProps } from 'vue'
+import { ref, watch, defineEmits, computed, onMounted, nextTick, defineProps } from "vue";
 import * as apis from "@/apis/index.js";
 
 const openvideo$ = ref(null);
 const videourl = ref(null);
 
-
 const emit = defineEmits(["close"]);
 
-onMounted(()=>{
-
-    nextTick(async ()=>{
-        let res = await apis.get_video()
-        if (!res.data) {
-           return emit('close')
-        }
-        videourl.value = res.data.videoUrl
-        openvideo$.value.addEventListener('ended',()=>{
-            emit('close')
-        })
-        
-        document.addEventListener("WeixinJSBridgeReady",()=> { 
-            openvideo$.value.play(); 
-        }, false);
-    })
-})
+onMounted(() => {
+  nextTick(async () => {
+    let res = await apis.get_video();
+    if (!res.data) {
+      return emit("close");
+    }
+    videourl.value = res.data.videoUrl;
+    openvideo$.value.addEventListener("ended", () => {
+      emit("close");
+    });
 
+    document.addEventListener(
+      "WeixinJSBridgeReady",
+      () => {
+        openvideo$.value.play();
+      },
+      false
+    );
+  });
+});
 </script>
 <style lang="scss" scoped>
-.open-video{
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
+.open-video {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: table;
+  table-layout: fixed;
+  .bgvideo {
+    position: absolute;
+    height: 150%;
     left: 0;
+    top: 0;
+    bottom: 0;
     right: 0;
+    z-index: -2;
+    // filter: blur(10px);
+  }
+  .vmask {
+    position: absolute;
+    left: 0;
+    top: 0;
     bottom: 0;
-    display: table;
-    table-layout: fixed;
-    background: rgba(255, 255, 255, 1);
-    >video{
-        width: 100%;
-        height: 100%;
-        display: table-cell;
-        text-align: center;
-        vertical-align: middle;
-    }
-    .jump{
-        position: absolute;
-        right: 15px;
-        top: 20px;
-        width: 56px;
-        height: 28px;
-        background: rgba(0, 0, 0, 0.5);
-        border-radius: 16px;
-        text-align: center;
-        line-height: 28px;
-        z-index: 999;
-    }
+    right: 0;
+    display: inline-block;
+    z-index: -1;
+    backdrop-filter: blur(10px);
+  }
+  .video {
+    width: 100%;
+    height: 100%;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .jump {
+    position: absolute;
+    right: 15px;
+    top: 20px;
+    width: 56px;
+    height: 28px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 16px;
+    text-align: center;
+    line-height: 28px;
+    z-index: 999;
+  }
 }
-
-
-
 </style>