完成加载页、我的奖品页面、答题页逻辑，首页待优化动画

src/components/Loading.vue

@@ -1,28 +1,86 @@
 <script setup>
-import { ref } from "vue";
-import { Button, Toast } from "vant";
+import { Toast } from "vant";
 import gsap from "gsap";
 import { debounceTap } from "@/plugins";
+import Preloader from "@/plugins/Preloader";
+import { loadImg, pageImg } from "@/data/imgList";
 
 // 页面配置初始化
 const emit = defineEmits(["LoadPage"]);
 
-const show = (event) => {
-  const e = event.target;
-  debounceTap(e, () => {
-    console.log(1);
-    emit("LoadPage", { action: "hide" });
+const loadNum = ref(0);
+
+const entryAni = () => {
+  gsap.to(".clock-h", {
+    duration: 10,
+    rotation: "+=360",
+    repeat: -1,
+    ease: "none",
+  });
+  gsap.to(".clock-m", {
+    duration: 3,
+    rotation: "+=360",
+    repeat: -1,
+    ease: "none",
+  });
+  gsap.to(".clock-s", {
+    duration: 1,
+    rotation: "+=360",
+    repeat: -1,
+    ease: "none",
   });
 };
+onMounted(() => {
+  entryAni();
+  Preloader({
+    name: "加载页资源",
+    imgs: loadImg,
+    callback: (progress) => {
+      // console.log('进度：', progress);
+    },
+  }).then((res) => {
+    gsap.to(".LoadPage", {
+      duration: 0.2,
+      autoAlpha: 1,
+      onComplete: () => {
+        Preloader({
+          name: "内页资源",
+          imgs: pageImg,
+          callback: (progress) => {
+            // console.log('进度：', progress);
+            gsap.set(".bar", { width: progress + "%" });
+            loadNum.value = progress;
+          },
+        }).then((res) => {
+          console.log("加载完成");
+          gsap.to(".LoadPage", {
+            duration: 1,
+            autoAlpha: 0,
+            onComplete: () => {
+              emit("LoadPage", { action: "hide" });
+            },
+          });
+        });
+      },
+    });
+  });
+});
 </script>
 
 <template>
   <div class="LoadPage">
     <div class="load-bg"></div>
     <div class="load-container">
-      <div class="box">
-        <Button @click="show">to index</Button>
+      <div class="clock-box">
+        <div class="clock-h"></div>
+        <div class="clock-m"></div>
+        <div class="clock-s"></div>
+        <div class="clock-circle"></div>
       </div>
+      <div class="load-box">
+        <div class="bar"></div>
+      </div>
+      <div class="load-num">{{ loadNum }}%</div>
     </div>
   </div>
 </template>
@@ -32,20 +90,67 @@ const show = (event) => {
   @include pos(100%, 100%, 0px, 0px);
   background-color: rgb(223, 15, 60);
   overflow: hidden;
+  @include flexCen();
 
   .load-bg {
     @include pos(750px, 100%, 0px, 50%);
     transform: translateY(-50%);
+    @include bg_pos("load/bg.jpg");
   }
 
   .load-container {
-    @include pos(750px, 100%, 0px, 50%);
-    transform: translateY(-50%);
-    @include flexCen();
+    position: relative;
+    @include box(750px, 1180px);
+    // transform: translateY(-50%);
 
-    .box {
-      @include box(300px, 300px);
-      @include flexCen();
+    .clock-box {
+      @include pos(125px, 125px, 313px, 299px);
+      @include bg_pos("load/clock-bg.png");
+      .clock-circle {
+        @include pos(13px, 13px, 57px, 55px);
+        @include bg_pos("load/clock-circle.png");
+      }
+      .clock-s {
+        @include pos(125px, 125px, 0px, 0px);
+        @include bg_pos("load/clock-second.png");
+      }
+      .clock-m {
+        @include pos(125px, 125px, 0px, 0px);
+        @include bg_pos("load/clock-minute.png");
+      }
+      .clock-h {
+        @include pos(125px, 125px, 0px, 0px);
+        @include bg_pos("load/clock-hour.png");
+      }
+    }
+
+    .load-box {
+      @include pos(512px, 38px, 119px, 450px);
+      border-style: solid;
+      border-width: 2px;
+      border-color: #e17c4d;
+      border-radius: 20px;
+      overflow: hidden;
+      .bar {
+        @include box(10%, 38px);
+        border-radius: 20px;
+        background: linear-gradient(45deg, #f2733a, #ffd667);
+      }
+    }
+
+    .load-num {
+      @include pos(750px, 50px, 0px, 511px);
+      text-align: center;
+      font-size: 38px;
+      color: #ffaf5e;
+      line-height: 40px;
+      font-weight: 700;
+      background: linear-gradient(to right, #f2733a, #ffd667);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      letter-spacing: 2px;
+      font-style: italic;
     }
 
     .btn {