首页增加loading效果

src/view/tabs/home-screen.vue

@@ -1,5 +1,16 @@
 <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
@@ -117,6 +128,9 @@ import {
 import router from "@/router";
 import { CountTo } from "vue3-count-to";
 
+
+/** 是否显示遮罩层 */
+const showOverlay = ref(true);
 /** 小时 */
 const hour = ref("--");
 /** 分钟 */
@@ -200,6 +214,9 @@ onActivated(() => {
 });
 
 onMounted(() => {
+  setTimeout(() => {
+    showOverlay.value = false;
+  }, 3500);
   getTimeTimer.value = setInterval(() => {
     const date = new Date();
     hour.value =
@@ -491,5 +508,16 @@ const timeTouchEnd = () => {
       justify-content: center;
     }
   }
+
+  .van-loading {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    span {
+        font-size: 30px !important;
+    }
+  }
 }
 </style>