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

src/components/Index.vue

@@ -1,26 +1,74 @@
 <script setup>
 import { Button, Toast } from "vant";
 import { debounceTap } from "@/plugins";
+import gsap from "gsap";
 
 const emit = defineEmits(["IndexPage"]);
 
-
 const start = (event) => {
   debounceTap(event.target, () => {
-    Toast.success("开发中！");
+    emit("IndexPage", { action: "start" });
   });
 };
+
+const showMyPrize = (event) => {
+  let e = event.target;
+  debounceTap(e, () => {
+    emit("IndexPage", { action: "showMyPrize" });
+  });
+};
+
+const clockAni = () => {
+  gsap.to(".index-clock-h", {
+    duration: 12,
+    rotation: "+=360",
+    repeat: -1,
+    ease: "none",
+  });
+  gsap.to(".index-clock-m", {
+    duration: 8,
+    rotation: "+=360",
+    repeat: -1,
+    ease: "none",
+  });
+  gsap.to(".index-clock-s", {
+    duration: 3,
+    rotation: "+=360",
+    repeat: -1,
+    ease: "none",
+  });
+};
+
+onMounted(() => {
+  clockAni();
+});
 </script>
 
 <template>
   <div class="IndexPage">
-    <div class="index-bg"></div>
+    <div class="index-bg">
+      <div class="index-clock-box">
+        <div class="index-clock-h"></div>
+        <div class="index-clock-m"></div>
+        <div class="index-clock-s"></div>
+        <div class="index-clock-circle"></div>
+      </div>
+    </div>
     <div class="index-container">
       <div class="index-title"></div>
       <div class="index-rule-btn"></div>
-      <div class="index-prize-btn"></div>
+      <div class="index-prize-btn" @click="showMyPrize($event)"></div>
       <div class="index-start-btn" @click="start"></div>
-      <div class="index-agreement"></div>
+      <div class="index-agreement">
+        风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
+          class="b"
+          >本资料内容及观点仅供参考，不构成对任何人的投资建议。</span
+        >以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
+          class="b"
+          >理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span
+        ><span class="orange">理财非存款，产品有风险，投资须谨慎。</span
+        >金融消费者不得利用金融产品和服务从事违法活动。
+      </div>
     </div>
   </div>
 </template>
@@ -34,6 +82,26 @@ const start = (event) => {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
     @include bg_pos("index/bg.jpg");
+    .index-clock-box {
+      @include pos(125px, 125px, 213px, 700px);
+      @include bg_pos("load/clock-bg.png");
+      .index-clock-circle {
+        @include pos(13px, 13px, 57px, 55px);
+        @include bg_pos("load/clock-circle.png");
+      }
+      .index-clock-s {
+        @include pos(125px, 125px, 0px, 0px);
+        @include bg_pos("load/clock-second.png");
+      }
+      .index-clock-m {
+        @include pos(125px, 125px, 0px, 0px);
+        @include bg_pos("load/clock-minute.png");
+      }
+      .index-clock-h {
+        @include pos(125px, 125px, 0px, 0px);
+        @include bg_pos("load/clock-hour.png");
+      }
+    }
   }
 
   .index-container {
@@ -41,18 +109,18 @@ const start = (event) => {
     transform: translateY(-50%);
 
     .index-title {
+      pointer-events: none;
       @include pos(552px, 131px, 101px, 331px);
       @include bg_pos("index/title.png");
-
     }
 
     .index-rule-btn {
-      @include pos(101px, 51px, 0px, 474px);
+      @include pos(168px, 51px, -67px, 474px);
       @include bg_pos("index/rule-btn.png");
     }
 
     .index-prize-btn {
-      @include pos(101px, 51px, 0px, 536px);
+      @include pos(168px, 51px, -67px, 536px);
       @include bg_pos("index/prize-btn.png");
     }
 
@@ -62,8 +130,21 @@ const start = (event) => {
     }
 
     .index-agreement {
+      pointer-events: none;
       @include pos(736px, 172px, 7px, 1219px);
-      @include bg_pos("index/agreement.png");
+      background: rgba($color: #f49e6a, $alpha: 0.55);
+      font-size: 14px;
+      text-align: justify;
+      color: #000000;
+      padding: 10px;
+      box-sizing: border-box;
+      border-radius: 10px;
+      .b {
+        font-weight: 700;
+      }
+      .orange {
+        color: #ea5404;
+      }
     }
   }
 }