v-console移除，初始化蒙版时间修改

src/view/tabs/home-screen.vue

@@ -1,14 +1,5 @@
 <template>
   <div id="home-screen-wrapper">
-    <van-overlay
-      :show="showOverlay"
-      z-index="100"
-      style="background-color: #000"
-    >
-      <van-loading size="80px" vertical color="#1989fa"
-        ><span>加载中...</span></van-loading
-      >
-    </van-overlay>
     <div class="bg-video" @click="changeAnimation()">
       <!-- 关机动画循环 -->
       <video
@@ -122,13 +113,12 @@ import {
   onActivated,
   getCurrentInstance,
   onBeforeMount,
+  nextTick
 } from "vue";
 import router from "@/router";
 import { CountTo } from "vue3-count-to";
 import { $commonService } from "@/services/framework/dependency-injection-service";
 
-/** 是否显示遮罩层 */
-const showOverlay = ref(true);
 /** 小时 */
 const hour = ref("--");
 /** 分钟 */
@@ -168,12 +158,15 @@ const timePushTimer: any = ref(null);
 const { proxy } = getCurrentInstance() as any;
 const tem = ref(22);
 const hum = ref(50);
-const startTem = ref(22);
-const startHum = ref(50);
+const startTem = ref(99);
+const startHum = ref(0);
 const seasonName = ref("雪天");
 const seasonImg = ref("/assets/imgs/show/home_xuetian.png");
 const seasonTem = ref(-10);
 const getImgSrc = $commonService.$imgService.getImgSrc;
+/** 向父组件传递事件 */
+const emit = defineEmits(["videoReady"]);
+
 onBeforeMount(() => {
   proxy.$eventBusService.on("queryType", setType);
   //温度、湿度数据
@@ -235,9 +228,14 @@ onActivated(() => {
 });
 
 onMounted(() => {
-  setTimeout(() => {
-    showOverlay.value = false;
-  }, 3500);
+  if (animationApproach.value) {
+    const videoLoad = setInterval(() => {
+      if ( animationApproach.value.readyState >= 3 ) {
+        emit("videoReady");
+        clearInterval(videoLoad);
+      }
+    }, 500)
+  }
   getTimeTimer.value = setInterval(() => {
     const date = new Date();
     hour.value =
@@ -257,9 +255,6 @@ onUnmounted(() => {
  *
  */
 const wholeSetting = () => {
-  //初始动画值
-  startTem.value = tem.value;
-  startHum.value = hum.value;
   router.push({
     path: "/wholeSetting",
     query: {

src/view/tabs/tabs.vue

@@ -1,5 +1,17 @@
 <template>
   <div id="tabs-wrapper">
+    <!-- 遮罩层loading -->
+    <van-overlay 
+        :show="showOverlay"
+        z-index="100"
+        style="background-color: #000;"
+    >
+        <van-loading
+            size="80px"
+            vertical
+            color="#1989fa"
+        ><span>加载中...</span></van-loading>
+    </van-overlay>
     <!-- 下拉 -->
     <div
       class="drop-down-menu"
@@ -20,7 +32,7 @@
         <div class="swiper-slide">
           <div class="swiper-item">
             <div>
-              <HomeScreen></HomeScreen>
+              <HomeScreen @video-ready="videoReady()"></HomeScreen>
             </div>
           </div>
         </div>
@@ -60,6 +72,8 @@ import DropDownMenu from "../drop-down-menu/drop-down-menu.vue";
 import "swiper/swiper-bundle.css";
 
 let mySwiper: Swiper; // 声明swiper
+/** 是否显示遮罩层 */
+const showOverlay = ref(true);
 const touchStart = ref(0);
 const touchDis = ref(0);
 /** 是否展示菜单 */
@@ -68,6 +82,9 @@ const menuDom: any = ref();
 
 onMounted(() => {
   initSwiper();
+  // setTimeout(() => {
+  //   showOverlay.value = false;
+  // }, 3000);
   menuDom.value = document.getElementById("menu") as HTMLElement | null;
 });
 
@@ -88,6 +105,11 @@ const initSwiper = () => {
   });
 };
 
+/** 视频加载完成 */
+const videoReady = () => {
+  showOverlay.value = false;
+}
+
 /** 下拉菜单开始 */
 const dropDownMenuStart = (event: any) => {
   touchStart.value = 0;
@@ -162,5 +184,16 @@ const pullUp = () => {
     top: -100vh;
     z-index: 999;
   }
+
+  .van-loading {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    span {
+        font-size: 30px !important;
+    }
+  }
 }
 </style>