初始化端午项目

.env.fat

@@ -5,3 +5,4 @@ VITE_FOLDER = /vite-4
 VITE_APPID = wxc2bc9f9e8d19b504
 VITE_API = /intfgw/data/mmoactivity
 VITE_URL = https://w-stg.pingan.com.cn/lckj/pawm-mmo-activity-xgl-frontend/index.html
+

package.json

@@ -15,25 +15,26 @@
     "axios": "^1.6.3",
     "gsap": "^3.12.4",
     "howler": "^2.2.4",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.0",
     "qrcode": "^1.5.3",
+    "swiper": "^11.2.1",
     "qs": "^6.11.2",
     "vant": "^3.6.12",
     "vconsole": "^3.15.1",
-    "vue": "^3.2.41",
+    "vue": "^3.4.0",
     "vue-clipboard3": "^2.0.0",
     "weixin-js-sdk": "^1.6.5"
   },
   "devDependencies": {
     "@vant/auto-import-resolver": "^1.0.2",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^5.2.4",
     "postcss-px-to-viewport-8-plugin": "^1.2.3",
     "sass": "^1.68.0",
     "sass-loader": "^13.3.2",
     "unplugin-auto-import": "^0.17.3",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^3.2.3",
+    "vite": "4.5.10",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-html": "^3.2.1"
+    "vite-plugin-html": "^3.2.2"
   }
 }

src/components/Draw.vue

@@ -14,7 +14,7 @@ const { toClipboard } = useClipboard()
 
 
 const money = ref("1.88");
-const code = ref("sss");
+const code = ref("PAKJ2025");
 
 const showResult = ref(false);
 const hasPrize = ref(false);
@@ -100,7 +100,7 @@ const hide = (event) => {
       duration: 0.3,
       autoAlpha: 0,
       onComplete: () => {
-        emit("DrawPage", {action:"hide"});
+        emit("DrawPage", { action: "hide" });
       },
     });
   });
@@ -108,7 +108,7 @@ const hide = (event) => {
 const copyFn = (event) => {
   let e = event.target;
   toClipboard(code.value)
-  debounceTap(e, async() => {
+  debounceTap(e, async () => {
     Toast(`复制成功：${code.value}`);
   });
 };
@@ -148,11 +148,16 @@ onMounted(() => {
     <div v-show="showResult" class="result-container">
       <!-- 有奖品 -->
       <div class="draw-has" v-show="hasPrize">
+        <div class="draw-has-title">恭喜您抽中</div>
         <div class="money">¥{{ money }}元</div>
+        <div class="draw-has-text">奖励抽到手，快乐马上有</div>
         <div class="code-box">
-          <div class="code">{{ code }}</div>
-          <div class="copy-btn" @click="copyFn($event)"></div>
+          <span>兑奖码：</span>
+          <span class="code">{{ code }}</span>
+          <span class="copy-btn" @click="copyFn($event)"></span>
         </div>
+        <div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“五一快乐”获取兑奖链接，输入兑换码兑换奖品</div>
+        <div class="exchnage-tips2">（兑换码可在主页面“我的奖品” 再次查看并复制）</div>
         <div class="cls-btn" @click="hide($event)"></div>
       </div>
       <!-- 没有奖品 -->
@@ -214,30 +219,58 @@ onMounted(() => {
   .draw-has {
     position: relative;
     @include box(665px, 731px);
-    @include bg_pos("prize/myPrize-box.png");
+    @include bg_pos("prize/myPrize-box2.png");
+
+    .draw-has-title {
+      @include pos(390px, 100px, 110px, 140px);
+      font-size: 40px;
+      color: #e95b46;
+      font-weight: 700;
+      letter-spacing: 3px;
+      // background-color: aqua;
+      @include flexCen();
+    }
+
+    .draw-has-text {
+      @include pos(390px, 100px, 110px, 300px);
+      font-size: 30px;
+      color: #e95b46;
+      font-weight: 700;
+      letter-spacing: 0;
+      // background-color: aqua;
+      @include flexCen();
+
+    }
 
     .money {
-      @include pos(370px, 81px, 139px, 239px);
-      display: flex;
-      justify-content: center;
-      align-items: center;
+
+      @include pos(390px, 130px, 110px, 200px);
+      @include flexCen();
       color: #e95b46;
       font-weight: 700;
       font-size: 58px;
       letter-spacing: 4px;
+      // background-color: rgb(217, 0, 255);
     }
 
     .code-box {
-      @include pos(312px, 52px, 197px, 508px);
+      @include pos(390px, 52px, 110px, 508px);
       display: flex;
       flex-direction: row;
       align-items: center;
-
-      .code {
+      justify-content: flex-start;
       font-size: 25px;
       font-weight: 700;
-        margin-right: 10px;
       color: #fff6cc;
+
+      span {
+        height: 77px;
+        line-height: 65px;
+      }
+
+      .code {
+        margin-right: 10px;
+
       }
 
       .copy-btn {
@@ -246,6 +279,31 @@ onMounted(() => {
       }
     }
 
+    .exchange-tips {
+      @include pos(390px, 152px, 110px, 558px);
+      display: flex;
+      flex-direction: row;
+      align-items: start;
+      justify-content: flex-start;
+      font-size: 20px;
+      // font-weight: 700;
+      color: #fff6cc;
+      letter-spacing: 2px;
+      // background-color: aqua;
+    }
+
+    .exchnage-tips2 {
+      @include pos(390px, 52px, 110px, 638px);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+      // font-weight: 700;
+      color: #fff6cc;
+      // background-color: aqua;
+    }
+
     .cls-btn {
       @include pos(82px, 82px, 517px, 114px);
       @include bg_pos("prize/cls-btn.png");

src/components/Index.vue

@@ -36,47 +36,34 @@ const showRule = (event) => {
 
 onMounted(() => {
   gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
-  gsap.from(".index-bottom-bg", { duration: 1, y: 100,  });
-  gsap.from(".index-windows", { duration: 1, scale: 0.5,autoAlpha:0,  });
-  gsap.from(".index-pet", { duration: 1, y: -50,autoAlpha:0,delay:0.5  });
-  gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0,delay:1  });
-  gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0,delay:0.5 });
-  gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0,delay:0.5 });
-  gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0,delay:0.75 });
-  gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0,delay:0.75 });
-  gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0,delay:0.75 });
-  gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
+  gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0, delay: 1 });
+  gsap.from(".index-time", { duration: 1, x: 40, autoAlpha: 0, delay: 1 });
+  gsap.from(".index-text", { duration: 1, scale: 2, autoAlpha: 0, delay: 1 });
+  gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0, delay: 0.75 });
+  gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0, delay: 1.3 });
   gsap.from(".index-prize-btn", {
     duration: 1,
     x: -100,
     autoAlpha: 0,
-    delay: 0.3,
+    delay: 1.5,
   });
   gsap.from(".index-start-btn", {
     duration: 1,
     y: 30,
     autoAlpha: 0,
-    delay: 0.5,
+    delay: 1.5,
   });
   gsap.from(".index-agreement", {
     duration: 1,
     scale: 0.4,
     autoAlpha: 0,
     delay: 0.5,
-    onComplete:()=>{
-      // gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
-      gsap.to('.index-fan-1',{duration:2,x:'-=30',repeat:-1,yoyo:true,ease:'none'})
-      gsap.to('.index-fan-2',{duration:1.5,x:'-=20',repeat:-1,yoyo:true,ease:'none'})
-      gsap.to('.index-fan-3',{duration:1.5,y:'+=20',repeat:-1,yoyo:true,ease:'none'})
-      gsap.to('.index-fan-4',{duration:2,x:'+=20',repeat:-1,yoyo:true,ease:'none'})
-      gsap.to('.index-pet',{duration:2,y:'-=10',repeat:-1,yoyo:true,ease:'none'})
+    onComplete: () => {
+      gsap.to('.index-start-btn', { duration: 1, scale: '0.95', repeat: -1, yoyo: true, ease: 'bounce.out' })
     }
   });
 
 
-
-
-
 });
 
 const vcNum = ref(false);
@@ -92,25 +79,21 @@ const showVC = () => {
   <div class="IndexPage" @touchmove.prevent>
     <div class="index-bg"></div>
     <div class="index-container">
-      <div class="index-fan-1"></div>
-      <div class="index-fan-2"></div>
-      <div class="index-fan-3"></div>
-      <div class="index-fan-4"></div>
       <div class="index-logo"></div>
-      <div class="index-bottom-bg"></div>
-      <!-- <div class="index-cloud"></div> -->
-      <div class="index-firework"></div>
-      <div class="index-windows"></div>
-      <div class="index-pet"></div>
       <div class="index-title" @click="showVC"></div>
-      <div class="index-rule-btn" @click="showRule($event)"></div>
-      <div class="index-prize-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)"></div>
+      <div class="index-time"></div>
+      <div class="index-rule-btn index-left-btn" @click="showRule($event)">活动规则</div>
+      <div class="index-prize-btn index-left-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)">我的奖品</div>
       <div class="index-start-btn" @click="start"></div>
       <div class="index-agreement">
-        风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
-          class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
-          class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
-          class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
+        <span>风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。</span>
+        <span class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>
+        <span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。</span>
+        <span class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
+          class="orange">理财非存款，产品有风险，投资须谨慎。</span>
+        <span>
+          金融消费者不得利用金融产品和服务从事违法活动。
+        </span>
       </div>
     </div>
   </div>
@@ -118,9 +101,9 @@ const showVC = () => {
 
 <style lang="scss" scoped>
 .IndexPage {
-  @include pos(100%, 100vh, 0px, 0px);
+  @include pos(100%, 1624px, 0px, 0px);
   overflow: hidden;
-  background: linear-gradient(135deg, #a11b15, #f80c00);
+  background: linear-gradient(135deg, #d6d1ca, #e5dccf);
 
   .index-bg {
     @include pos(750px, 1624px, 0px, 50%);
@@ -129,106 +112,74 @@ const showVC = () => {
   }
 
   .index-container {
-    @include pos(750px, 1624px, 0px, 50%);
-    transform: translateY(-50%);
+    @include pos(750px, 1624px, 0px, 0px);
+    // transform: translateY(-50%);
 
-    .index-bottom-bg{
-      pointer-events: none;
-      @include pos(750px, 558px, 0px, 1066px);
-      @include bg_pos("index/bottom-bg.png");
-    }
 
-    .index-fan-1{
+    .index-logo {
       pointer-events: none;
-      @include pos(235px, 574px, 0px, 60px);
-      @include bg_pos("index/fan-1.png");
-    }
-    .index-fan-2{
-      pointer-events: none;
-      @include pos(316px, 317px, -205px, 405px);
-      @include bg_pos("index/fan-2.png");
-    }
-    .index-logo{
-      pointer-events: none;
-      @include pos(632px, 94px, 59px, 267px);
+      @include pos(632px, 94px, 59px, 266px);
       @include bg_pos("index/logo.png");
     }
-    .index-fan-3{
-      pointer-events: none;
-      @include pos(370px, 334px, 545px, 910px);
-      @include bg_pos("index/fan-3.png");
-    }
-    .index-fan-4{
-      pointer-events: none;
-      @include pos(350px, 205px, 494px, 1011px);
-      @include bg_pos("index/fan-4.png");
-    }
-
-    .index-cloud{
-      pointer-events: none;
-      @include pos(88px, 46px, 621px, 253px);
-      @include bg_pos("index/cloud.png");
-    }
-
-    .index-firework{
-      pointer-events: none;
-      @include pos(120px, 120px, 651px, 474px);
-      @include bg_pos("index/firework.png");
-    }
-
-    .index-windows{
-      pointer-events: none;
-      @include pos(743px, 744px, 3px, 440px);
-      @include bg_pos("index/windows.png");
-    }
-
-    .index-pet{
-      pointer-events: none;
-      @include pos(234px, 386px, 353px, 614px);
-      @include bg_pos("index/pet-icon.png");
-    }
 
     .index-title {
       // pointer-events: none;
-      @include pos(542px, 101px, 104px, 369px);
+      @include pos(593px, 155px, 85px, 387px);
       @include bg_pos("index/title.png");
     }
 
+    .index-time {
+      @include pos(433px, 58px, 295px, 565px);
+      @include bg_pos("index/time.png");
+    }
+
+    .index-left-btn {
+      border: 2px solid rgb(255, 255, 255);
+      background-color: rgb(243, 87, 4);
+      box-shadow: 0px 6px 11px 0px rgba(155, 122, 68, 0.4);
+      font-size: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-left: 20px;
+      color: #ffffff;
+      letter-spacing: 1.5px;
+      border-radius: 21px;
+    }
+
     .index-rule-btn {
-      @include pos(184px, 49px, -37px, 506px);
-      @include bg_pos("index/rule-btn.png");
+      @include pos(184px, 49px, -37px, 578px);
     }
 
     .index-prize-btn {
-      @include pos(184px, 49px, -37px, 575px);
-      @include bg_pos("index/prize-btn.png");
+      @include pos(184px, 49px, -37px, 642px);
     }
 
     .index-start-btn {
-      @include pos(311px, 90px, 220px, 1168px);
-      @include bg_pos("index/start-btn.png");
+      @include pos(288px, 93px, 231px, 1097px);
+      @include bg_pos("index/btn.png");
     }
 
     .index-agreement {
-      font-family: "HarmonyOS_Sans_SC_Regular";
+      font-family: "FZZY_Regular";
       pointer-events: none;
-      @include pos(736px, 182px, 7px, 1258px);
-      // background: rgba($color: #f49e6a, $alpha: 0.55);
+      @include pos(736px, 182px, 7px, 1208px);
       font-size: 14px;
       text-align: justify;
       letter-spacing: 0.1px;
-      color: #ff8c84;
+      color: #ffffff;
       padding: 10px;
       box-sizing: border-box;
       border-radius: 10px;
       line-height: 20px;
 
+
       .b {
         font-weight: 700;
       }
 
       .orange {
-        color: #fdf9de;
+        color: #ff7127;
         font-weight: 700;
       }
     }

src/components/Loading.vue

@@ -41,7 +41,6 @@ onMounted(() => {
           name: "内页资源",
           imgs: pageImg,
           callback: (progress) => {     
-            // console.log('进度：', progress);
             gsap.set(".bar", { width: progress + "%" });
             loadNum.value = progress;
           },
@@ -70,7 +69,9 @@ onMounted(() => {
       <div class="load-box">
         <div class="bar"></div>
       </div>
-      <div class="load-num">{{ loadNum }}%</div>
+      <div class="load-num">
+        <span class="num">{{ loadNum }}%</span>
+      </div>
     </div>
   </div>
 </template>
@@ -85,7 +86,8 @@ onMounted(() => {
   .load-bg {
     @include pos(750px, 100%, 0px, 50%);
     transform: translateY(-50%);
-    @include bg_pos("load/bg.jpg");
+    background-image: -webkit-linear-gradient(-90deg, #ffffff 15%, #4ebbe5 100%);
+
   }
 
   .load-container {
@@ -93,40 +95,47 @@ onMounted(() => {
     @include box(750px, 1180px);
     // transform: translateY(-50%);
 
-    .load-icon{
-      @include pos(101px, 55px, 325px, 370px);
+    .load-icon {
+      @include pos(409px, 215px,199px, 350px);
       @include bg_pos("load/icon.png");
     }
 
     .load-box {
-      @include pos(512px, 35px, 119px, 450px);
-      border-style: solid;
-      border-width: 2px;
-      border-color: #e17c4d;
-      border-radius: 20px;
-      padding: 2px;
+      @include pos(582px, 45px, 83px, 450px);
+      border-radius: 25px;
+      padding: 1px;
+      border: 1px solid rgb(243, 87, 4);
+
 
       .bar {
-        @include box(0%, 26px);
+        @include box(0%, 38px);
         border-radius: 20px;
-        background: linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
-        background-image: -webkit-linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
+        border: 1px solid rgb(255, 255, 255);
+
+        background-image: -webkit-linear-gradient(0deg, #f7c86f 0%, #f25501 100%);
 
       }
     }
 
     .load-num {
-      @include pos(750px, 50px, 0px, 511px);
-      text-align: center;
-      font-size: 38px;
-      color: #ffaf5e;
-      line-height: 40px;
+      @include pos(235px, 80px, 256px, 511px);
+
+      @include flexCen();
+
+
+      .num {
+        font-size: 40px;
+        color: #f25501;
         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;
+
+        /* 文字填充色 */
+        text-shadow:
+          -1px -1px 0 #ffffff,
+          1px -1px 0 #ffffff,
+          -1px 1px 0 #ffffff,
+          1px 1px 0 #ffffff;
+        /* 四个方向阴影叠加 */
+      }
     }
 
     .btn {

src/components/MyPrize.vue

@@ -49,11 +49,16 @@ onMounted(() => {
 <template>
   <div class="MyPrizePage">
     <div class="myPrize-container">
+      <div class="myPrize-title">恭喜您抽中</div>
       <div class="myPrize-money">¥{{ money }}元</div>
+      <div class="myPrize-text">奖励抽到手，快乐马上有</div>
       <div class="myPrize-code-box">
+        <span>兑奖码：</span>
         <div class="code">{{ code }}</div>
         <div class="myPrize-copy-btn" @click="copyFn($event)"></div>
       </div>
+      <div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“五一快乐”获取兑奖链接，输入兑换码兑换奖品</div>
+      <div class="exchnage-tips2">（兑换码可在主页面“我的奖品” 再次查看并复制）</div>
       <div class="myPrize-cls-btn" @click="hide($event)"></div>
     </div>
   </div>
@@ -68,7 +73,28 @@ onMounted(() => {
   .myPrize-container {
     position: relative;
     @include box(665px, 731px);
-    @include bg_pos("prize/myPrize-box.png");
+    @include bg_pos("prize/myPrize-box2.png");
+
+    .myPrize-title {
+      @include pos(390px, 100px, 110px, 140px);
+      font-size: 40px;
+      color: #e95b46;
+      font-weight: 700;
+      letter-spacing: 3px;
+      // background-color: aqua;
+      @include flexCen();
+    }
+
+    .myPrize-text {
+      @include pos(390px, 100px, 110px, 300px);
+      font-size: 30px;
+      color: #e95b46;
+      font-weight: 700;
+      letter-spacing: 0;
+      // background-color: aqua;
+      @include flexCen();
+
+    }
 
     .myPrize-money {
       @include pos(370px, 81px, 139px, 239px);
@@ -82,10 +108,21 @@ onMounted(() => {
     }
 
     .myPrize-code-box {
-      @include pos(312px, 52px, 197px, 508px);
+      @include pos(390px, 52px, 110px, 500px);
       display: flex;
       flex-direction: row;
       align-items: center;
+      justify-content: flex-start;
+      font-size: 25px;
+      font-weight: 700;
+      color: #fff6cc;
+
+
+      span {
+        // height: 77px;
+        line-height: 65px;
+      }
+
 
       .code {
         font-size: 25px;
@@ -100,6 +137,32 @@ onMounted(() => {
       }
     }
 
+    .exchange-tips {
+      @include pos(390px, 152px, 110px, 558px);
+      display: flex;
+      flex-direction: row;
+      align-items: start;
+      justify-content: flex-start;
+      font-size: 20px;
+      // font-weight: 700;
+      color: #fff6cc;
+      letter-spacing: 2px;
+      // background-color: aqua;
+    }
+
+    .exchnage-tips2 {
+      @include pos(390px, 52px, 110px, 638px);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+      // font-weight: 700;
+      color: #fff6cc;
+      // background-color: aqua;
+    }
+
+
     .myPrize-cls-btn {
       @include pos(82px, 82px, 517px, 114px);
       @include bg_pos("prize/cls-btn.png");

src/components/Question.vue

@@ -7,82 +7,64 @@ import { useMainStore } from "@/store";
 import { subAnswer } from "@/api";
 
 // 页面配置初始化
-const emit = defineEmits(["QuestionPage"]);
+const emit = defineEmits([ "QuestionPage"]);
 const userStore = useMainStore();
 
+
 // 当前题目
-const currentId = ref(0); //当前id 0~11
+// const currentId = ref(props.questionId); //当前id 0~4
+const currentId = ref(0); //当前id 0~3
+
 const questionList = ref(data); //随机打乱题库
-const answerList = ref([]); // 答案库统计
-const activeId = ref(""); // 当前题目所选答案选项
-const showResultBtn = ref(false);
-const isChecked = ref(false)
+const isChecked = ref(false);
+const checkedOption = ref("");
+const QaResult = ref(1); //当前答题结果
 
 // 答题事件
 const answerFn = (item, event) => {
   let e = event.target.parentElement;
-  activeId.value = item.aid;  //更新选中状态
-  console.log('选项', item);
+
   debounceTap(e, () => {
-    let cid = questionList.value[currentId.value].id;
-    let has = answerList.value.findIndex((obj) => obj.id === cid);
-    // 答案库中未存在该题的结果则新增，存在则更新最新选项
-    if (has == -1) {
-      answerList.value.push({
-        id: cid,
-        aid: item.aid,
-        answer: item.text,
+    gsap.set(".answer-box", { pointerEvents: "none" });
+    isChecked.value = true;
+    checkedOption.value = item;
+    console.log("checkedOption", checkedOption.value);
+    QaResult.value = item.result;
+    gsap.to(".qp-result ", { duration: 0.5, autoAlpha: 1, delay: 1 });
   });
-    } else {
-      answerList.value[has].aid = item.aid;
-      answerList.value[has].answer = item.text;
-    }
-
-    
-    gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
-    gsap.set('.answer-box', { pointerEvents: 'none' })
-    isChecked.value = true
-    console.log('currentId.value',currentId.value);
-    if(currentId.value == 2 ){
-      gsap.set('.create-btn', { display: 'block' })
-    }else{
-      gsap.set('.next-btn', { display: 'block' })
-
-    }
-
-  })
-
-}
-
+};
 
 // 下一题
 const nextQuestion = (event) => {
   let e = event.target;
   debounceTap(e, () => {
-    isChecked.value = false
-    gsap.set('.option-tips,.analysis', { autoAlpha: 0 })
-    currentId.value++
-    activeId.value = ''
-    gsap.set('.answer-box', { pointerEvents: 'initial' })
-    gsap.set('.next-btn', { display: 'none' })
-
-  })
-
-}
+    gsap.to(".qp-result", {
+      duration: 0.5,
+      autoAlpha: 0,
+      onComplete: () => {
+        isChecked.value = false;
+        checkedOption.value = "";
+        gsap.set(".answer-box", { pointerEvents: "auto" });
+        currentId.value++;
+      },
+    });
+  });
+};
 
 // 查看结果事件
 const viewResult = (event) => {
   let e = event.target;
   debounceTap(e, () => {
-    // 随机生成海报id
-    userStore.updatePosterId(getRandomNumber([1, 2, 3]))
-    gsap.set('.question-box', { pointerEvents: 'none' })
-    Toast('答题结束')
+    // 更新海报id
+    userStore.posterId = currentId.value + 1;
+
+    gsap.set(".question-box", { pointerEvents: "none" });
+    Toast("答题结束");
     Toast.loading({
-      message: '结果生成中',
+      message: "结果生成中",
       duration: 0,
       forbidClick: true,
-    })
+    });
 
     if (import.meta.env.VITE_MODE != "dev") {
       // 提交完成记录
@@ -93,203 +75,187 @@ const viewResult = (event) => {
         }
 
         setTimeout(() => {
-          Toast.clear()
-          gsap.to('.QuestionPage', {
-            duration: 0.5, autoAlpha: 0, onComplete: () => {
-              emit("QuestionPage", { action: "showResult" });
-            }
-          })
-        }, 1000)
+          Toast.clear();
+          gsap.to(".QuestionPage", {
+            duration: 0.5,
+            autoAlpha: 0,
+            onComplete: () => {
+              emit("showResult", { action: "showResult" });
+            },
+          });
+        }, 1000);
       });
     } else {
       setTimeout(() => {
-        Toast.clear()
-        gsap.to('.QuestionPage', {
-          duration: 0.5, autoAlpha: 0, onComplete: () => {
-            emit("QuestionPage", { action: "showResult" });
+        Toast.clear();
+        gsap.to(".QuestionPage,.qp-result", {
+          duration: 0.5,
+          autoAlpha: 0,
+          onComplete: () => {
+            emit("QuestionPage", { action: 'showResult' });
+          },
+        });
+      }, 1000);
     }
-        })
-      }, 1000)
-    }
-  })
-}
-
-// 从数组中随机生成一个数字
-const getRandomNumber = (arr) => {
-  var randomIndex = Math.floor(Math.random() * arr.length);
-  return arr[randomIndex];
-}
-
+  });
+};
 
 onMounted(() => {
-  gsap.from('.question-bg', { duration: 0.5, autoAlpha: 0, })
-  gsap.from('.question-box', { duration: 0.5, scale: 0.4, autoAlpha: 0, })
-  gsap.to('.question-lantern-icon', { duration: 5, transformOrigin: '100% 0%', rotation: '10deg', repeat: -1, yoyo: true, ease: 'none' })
-
-
+  gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
+  gsap.from(".question-box", { duration: 0.5, scale: 0.4, autoAlpha: 0 });
 });
+
+const getClass = (item) => {
+  if (isChecked.value) {
+    if (checkedOption.value.aid == item.aid) {
+      return item.result ? "correct" : "incorrect";
+    }
+  }
+};
 </script>
 
 <template>
   <div class="QuestionPage" @touchmove.prevent>
-    <div class="question-bg">
-      <div class="bottom-fan-1"></div>
-      <div class="bottom-fan-2"></div>
-      <div class="question-bottom-bg"></div>
-    </div>
+    <div class="question-bg"></div>
     <div class="question-container">
-      <div class="container-fan-1"></div>
-      <div class="container-fan-2"></div>
-
       <div class="question-box">
-        <!-- 问题序号 -->
-        <div class="qa-number">{{ questionList[currentId].id }}</div>
+        <div class="question-serial">
+          <div>
+            <div class="serial-icon"></div>
+            <div class="serial-text">第{{ currentId + 1 }}题</div>
+          </div>
+          <div class="serial-num">{{ currentId+1 }}/{{ questionList.length }}</div>
+        </div>
         <div class="qa-question-box">
-          <!-- 问题 -->
           <div class="question">
-            <div class="question-text" v-for="item in questionList[currentId].question" :key="item">
+            <div
+              class="question-text"
+              v-for="item in questionList[currentId].question"
+              :key="item"
+            >
               {{ item }}
             </div>
-            <div class="question-tips">打一系列产品</div>
           </div>
           <!-- 选项 -->
           <div class="answer-box">
-            <div class="answer" :class="isChecked ? item.result + '-bg' : ''"
-              v-for="item in questionList[currentId].answer" :key="item.aid">
-              <div class="answer-text-box">
-                <div class="answer-text" v-for="a in item.text" :key="a">
-                  {{ item.aid }}.{{ a }}
-                </div>
-              </div>
-              <div class="option-tips">
-                <div :class="item.result"></div>
+            <div
+              class="answer"
+              :class="getClass(item)"
+              v-for="item in questionList[currentId].answer"
+              :key="item.aid"
+            >
+              <div class="answer-text">{{ item.aid }}.{{ item.text }}</div>
+              <div
+                class="result-icon"
+                v-if="isChecked && item.aid == checkedOption.aid"
+              >
+                <div
+                  :class="item.result ? 'icon-correct' : 'icon-incorrect'"
+                ></div>
               </div>
               <!-- 可点击区域 -->
               <div class="click-area" @click="answerFn(item, $event)"></div>
             </div>
           </div>
-          <!-- 解析 -->
-          <div class="analysis" >
-            <div v-for="li in questionList[currentId].analysis" :key="li">{{li}}</div>
+          <!-- <div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">
+            <div v-if='questionList[currentId].tips.length == 1'>
+              {{ isChecked ? `${['回答错误！', '回答正确！'][checkedOption.result]}` : `提示：${t}` }}
             </div>
-          <div class="next-btn" @click="nextQuestion($event)"></div>
+            <div v-else>
+              {{ isChecked ? `${i == 0 ? ['回答错误！', '回答正确！'][checkedOption.result] : ''}` : `${i == 0 ? '提示：' : ''}${t}` }}
+            </div>
+          </div> -->
+        </div>
+        <div class="return-btn" @click="nextQuestion($event)"></div>
         <div class="create-btn" @click="viewResult($event)"></div>
       </div>
-      </div>
-      <div class="question-lantern-icon"></div>
       <div class="question-gold-icon-1"></div>
-      <div class="question-gold-icon-2"></div>
     </div>
-    <!-- 进度条 -->
-    <Progress :percentage="(currentId + 1) / 3 * 100" pivot-color="#7232dd" :show-pivot="false"
-      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" />
+  </div>
+  <div class="qp-result">
+    <div class="qp-result-box">
+      <div
+        class="qp-result-icon"
+        :class="!QaResult ? 'is-incorrect' : ''"
+      ></div>
+      <div class="qp-result-text">{{ QaResult ? "答对啦" : "答错啦" }}</div>
+      <div class="qp-tips-text">{{ questionList[currentId].tips[0] }}</div>
+      <div class="qp-result-btn"></div>
+    </div>
+    <div
+      class="next-btn"
+      @click="
+        currentId == questionList.length - 1
+          ? viewResult($event)
+          : nextQuestion($event)
+      "
+    >
+      {{ currentId == questionList.length - 1 ? "查看结果" : "下一题" }}
+    </div>
   </div>
 </template>
 
-<style lang='scss' scope>
+<style lang="scss" scope>
 .QuestionPage {
-  @include pos(100%, 100%, 0px, 0px);
+  @include pos(100%, 1624px, 0px, 0px);
   overflow: hidden;
 
   .question-bg {
-    @include pos(750px, 1624px, 0px, 50%);
-    transform: translateY(-50%);
-    @include bg_pos('qa/bg.jpg');
-
-    .question-bottom-bg {
-      pointer-events: none;
-      @include box(750px, 393px);
-      position: absolute;
-      left: 0px;
-      bottom: 0px;
-      @include bg_pos("qa/bottom-bg.png");
+    @include pos(750px, 1624px, 0px, 0px);
+    background-image: -webkit-linear-gradient(
+      -90deg,
+      #ffffff 15%,
+      #4ebbe5 100%
+    );
   }
 
-    .bottom-fan-1 {
-      @include pos(370px, 334px, 545px, 1022px);
-      @include bg_pos('index/fan-3.png');
-    }
-
-    .bottom-fan-2 {
-      @include pos(350px, 205px, 494px, 1128px);
-      @include bg_pos('index/fan-4.png');
-    }
-  }
-
-
   .question-container {
-    @include pos(750px, 1624px, 0px, 50%);
-    transform: translateY(-50%);
+    @include pos(750px, 1624px, 0px, 0px);
     @include flexCen();
-
-    .question-lantern-icon {
-      // pointer-events: none;
-      @include pos(349px, 443px, 489px, 49px);
-      @include bg_pos('qa/lantern-icon.png');
-    }
-
-    .container-fan-1 {
-      pointer-events: none;
-      @include pos(235px, 574px, 0px, 60px);
-      @include bg_pos("index/fan-1.png");
-    }
-
-    .container-fan-2 {
-      pointer-events: none;
-      @include pos(316px, 317px, -205px, 405px);
-      @include bg_pos("index/fan-2.png");
-    }
+    background-color: rgba($color: #000000, $alpha: 0.3);
 
     .question-box {
-      @include pos(656px, 913px, 47px, 339px);
-      @include bg_pos("qa/question-box.png");
+      @include pos(727px, 769px, 22px, 308px);
+      @include bg_pos("qa/paper.png");
 
-      .qa-number {
-        @include pos(100px, 56px, 278px, 89px);
-        font-size: 40px;
-        font-style: italic;
-        color: #c61a1a;
-        font-weight: 700;
+      .question-serial {
+        @include pos(560px, 90px, 110px, 34px);
         display: flex;
-        justify-content: center;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
         align-items: center;
+        .serial-text {
+          color: #ffffff;
+          font-size: 40px;
+        }
+        .serial-num {
+          font-size: 60px;
+          padding-right: 20px;
+          color: transparent;
+          -webkit-text-stroke: 3px #ffffff; /* 控制描边粗细和颜色 */
+          text-stroke: 3px #ffffff;
+        }
       }
 
       .qa-question-box {
-        @include pos(570px, 700px, 43px, 194px);
+        @include pos(563px, 660px, 74px, 116px);
         display: flex;
         flex-direction: column;
-        // justify-content: space-around;
         justify-content: flex-start;
         align-items: center;
 
         // 问题样式
         .question {
-          display: flex;
-          flex-direction: column;
-          // margin-bottom: 10px;
-          height: 270px;
-          justify-content: center;
+          margin: 40px auto;
 
           .question-text {
-            width: 100%;
-            font-family: 'DouyinSansBold';
-            font-size: 35px;
-            color: rgb(255, 255, 255);
-            text-align: center;
-            padding: 10px;
-            text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
-            // -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0);
-          }
-
-          .question-tips {
-            font-size: 25px;
-            width: 100%;
-            font-family: 'DouyinSansBold';
-            color: rgb(255, 255, 255);
-            text-align: center;
-            padding: 10px;
-            text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
+            font-family: "FZZY_Regular";
+            font-size: 34px;
+            color: #55240d;
+            line-height: 50px;
+            text-align: justify;
+            font-weight: 700;
           }
         }
 
@@ -298,144 +264,126 @@ onMounted(() => {
           display: flex;
           flex-direction: column;
           align-items: center;
-          justify-content: space-between;
-          height: 200px;
-
-          // 选中状态
-          .correct-bg {
-            border: 1px solid rgb(255, 238, 186) !important;
-            background-image: linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
-            background-image: -webkit-linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
-
-            .answer-option {
-              color: #96100f;
-            }
-
-            .answer-text-box {
-              color: #96100f !important;
-            }
-
-          }
-
-          .incorrect-bg {
-            background-image: -webkit-linear-gradient(177deg, rgb(195, 59, 22) 0%, rgb(209, 84, 51) 100%);
-            box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85), inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
-
-            .answer-option {
-              color: #ffe2ad;
-            }
-
-            .answer-text-box {
-              color: #ffe2ad !important;
-            }
-
-          }
-
-
-
-          .answer {
-            @include box(476px, 92px);
-            position: relative;
-            border-radius: 47.5px;
-            border: 2px solid rgb(255, 225, 172);
-            // margin-bottom: 35px;
-            justify-content: space-between;
-            display: flex;
-            flex-direction: row;
           justify-content: space-around;
+          // height: 200px;
+
+          // 选项通用样式
+          .answer {
+            width: 504px;
+            position: relative;
+            border-radius: 32.5px;
+            display: flex;
+            justify-content: center;
             align-items: center;
+            border: 1px solid #fff;
+            color: #9e4b00;
+            background-color: #fff2b9;
+            margin-bottom: 30px;
+            padding: 10px 20px;
+
+            .answer-text {
+              font-size: 30px;
+              line-height: 40px;
+              @include flexCen();
+            }
 
             .click-area {
-              @include pos(476px, 92px, 0px, 0px);
-              border-radius: 47.5px;
+              width: 100%;
+              height: 100%;
+              border-radius: 32.5px;
+              position: absolute;
             }
 
+            .result-icon {
+              position: absolute;
+              @include box(504px, 45px);
+              top: 50%;
+              transform: translateY(-55%);
+              left: 460px;
 
-            .option-tips {
-              @include box(60px, 60px);
-              visibility: hidden;
-
-              .correct {
-                @include box(100%, 100%);
+              .icon-correct {
+                @include box(76px, 56px);
                 @include bg_pos("qa/correct.png");
               }
 
-              .incorrect {
-                @include box(100%, 100%);
+              .icon-incorrect {
+                @include box(52px, 54px);
                 @include bg_pos("qa/incorrect.png");
               }
             }
+          }
 
+          .correct {
+            color: #ffe8b4;
+            font-weight: 700;
+            // background: linear-gradient(-45deg, #facc22, #f83600);
+            background-color: #f83600;
+            border: 2px solid #f0d0ad;
+            // 外发光效果
+            box-shadow: 0px 5px 10px rgba($color: #0188d5, $alpha: 0.5);
+            border-radius: 32.5px;
+          }
 
+          .incorrect {
+            color: #f83600;
+            font-weight: 700;
+          }
+        }
 
-            .answer-text-box {
-              @include box(335px, 100%);
-              font-family: 'HarmonyOS_Sans_SC_Regular';
-              color: #ffe2ad;
-              font-size: 28px;
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-
-              .answer-text {
+        .question-tips {
+          font-size: 25px;
           width: 100%;
-                // text-align: center;
-                padding-left: 40px;
-              }
-
-            }
-          }
-
-
-
-
-
-        }
-
-        // 解析样式
-        .analysis {
-          visibility: hidden;
-          width: 95%;
-          font-family: 'HarmonyOS_Sans_SC_Regular';
-          font-size: 20px;
-          color: #ffe2ad;
+          font-family: "FZZY_Regular";
+          color: #ab7133;
           text-align: center;
-          // padding: 20px;
-          height: 100px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
+          padding: 5px;
         }
-
-        .next-btn{
-          @include box(234px,65px);
-          @include bg_pos("qa/next-btn.png");
-          display: none;
-
       }
-        .create-btn{
-          @include box(234px,65px);
-          @include bg_pos("qa/create-btn.png");
-          display: none;
-        
     }
+  }
+}
 
+.qp-result {
+  @include pos(100%, 1624px, 0px, 0px);
+  overflow: hidden;
+  @include flexCen();
+  background-color: rgba($color: #000000, $alpha: 0.6);
+  visibility: hidden;
+  .qp-result-box {
+    @include box(569px, 399px);
+    @include bg_pos("qa/result-box.png");
+    position: relative;
+    .qp-result-icon {
+      @include pos(112px, 112px, 222px, -28px);
+      @include bg_pos("qa/correct-icon.png");
+    }
+    .is-incorrect {
+      @include bg_pos("qa/incorrect-icon.png");
+    }
+    .qp-result-text {
+      @include pos(569px, 50px, 0px, 104px);
+      @include flexCen();
+      font-size: 35px;
+      color: #ffffff;
+    }
+    .qp-tips-text {
+      @include pos(569px, 220px, 0px, 150px);
+      padding: 20px;
+      font-size: 25px;
+      line-height: 35px;
+      text-align: justify;
+      color: #b3640d;
     }
   }
 
-    .question-gold-icon-1 {
-      pointer-events: none;
-      @include pos(135px, 128px, 604px, 773px);
-      @include bg_pos("qa/gold-icon.png");
-    }
-
-    .question-gold-icon-2 {
-      pointer-events: none;
-      @include pos(276px, 241px, -70px, 1089px);
-      @include bg_pos("qa/gold-icon-2.png");
-    }
-
+  .next-btn {
+    @include box(190px, 65px);
+    border: 1px solid #ffffff;
+    @include flexCen();
+    font-size: 35px;
+    color: #ffffff;
+    border-radius: 31px;
+    margin-top: 50px;
   }
 }
 </style>

src/components/Result.vue

@@ -2,7 +2,7 @@
 import { gsap } from "gsap";
 import { debounceTap } from "@/plugins";
 import { useMainStore } from "@/store";
-import { posterCreate } from "@/plugins";
+
 import { Toast } from "vant";
 import QRCode from "qrcode";
 import { reactive } from "vue";
@@ -10,112 +10,79 @@ import { reactive } from "vue";
 // 页面配置初始化
 const emit = defineEmits(["ResultPage"]);
 const userStore = useMainStore();
-const posterId = ref(userStore.posterId); //海报背景id：1～4
+const posterId = ref(userStore.posterId); //海报背景id：1～11
 
-const posterImgList = reactive([
-    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-4.jpg`, import.meta.url).href,
-])
+console.log("海报id", posterId.value);
+
+const posterImgSrc = new URL(
+  `../assets/images/result/poster.jpg`,
+  import.meta.url
+).href;
 
 // 生成二维码逻辑
 const eqcodePic = ref();
-onMounted(() => {
-    console.log('posterId:',posterId.value);
-    let eqCodeUrl = import.meta.env.VITE_URL;
-    QRCode.toDataURL(eqCodeUrl)
-        .then((url) => {
-            eqcodePic.value = url;
-            // console.log("eq", eqcodePic.value);
-        })
-        .catch((err) => {
-            console.error(err);
-        });
+onMounted(async () => {
+  // 执行任务队列
+  await executeTasks();
+});
 
-    gsap.from(".result-bg", {
+// 这是新加的函数封装异步任务
+const executeTasks = async () => {
+  console.log("二维码生成中...");
+
+  // 生成二维码
+  const eqCodeUrl = import.meta.env.VITE_URL;
+  eqcodePic.value = await QRCode.toDataURL(eqCodeUrl);
+
+  console.log("生成海报中...");
+
+  if (posterImgSrc && eqcodePic.value) {
+    posterCreate({ width: 750, height: 2502 }, [
+      { name: "bg", src: posterImgSrc, pos: { w: 750, h: 2502, x: 0, y: 0 } },
+      {
+        name: "eqcode",
+        src: eqcodePic.value,
+        pos: { w: 187, h: 187, x: 527, y: 2227 },
+      },
+    ]);
+  } else {
+    Toast.fail({ message: "生成失败" });
+    emit("ResultPage", { action: "hide" });
+  }
+};
+
+const showPoster = () => {
+  gsap.to(".posterPop", {
+    duration: 0.3,
+    autoAlpha: 1,
+  });
+  gsap.from(".cls-btn-box", {
     duration: 0.7,
     scale: 1.2,
     autoAlpha: 0,
   });
-
-    gsap.from(".result-larnten-box", {
+  gsap.from(".poster-box", {
     duration: 0.7,
-        scale: 1.4,
+    scale: 0.6,
     autoAlpha: 0,
   });
-    gsap.from(".result-larnten", {
+  gsap.from(".save-tips", {
     duration: 0.7,
     scale: 0.7,
     autoAlpha: 0,
+    delay: 0.3,
   });
-    gsap.from(".result-blessing-1", {
+  gsap.from(".go-draw", {
     duration: 0.7,
     y: -30,
     autoAlpha: 0,
-        delay:0.5
+    delay: 0.5,
   });
-    gsap.from(".result-blessing-2", {
+  gsap.from(".go-share", {
     duration: 0.7,
     y: -30,
     autoAlpha: 0,
-        delay:0.7
-    });
-    gsap.from(".result-product", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:1
-    });
-    gsap.from(".result-tips", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:1.2
-    });
-    gsap.from(".create-poster", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:1.4,
-        onComplete:()=>{
-            // gsap.to('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
-            let gl = gsap.timeline({repeat:-1,yoyo:true})
-            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'3deg',ease:'none'})
-            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'0deg',ease:'none'})
-            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'-3deg',ease:'none'})
-            // gsap.fo('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
-
-        }
-    });
-});
-
-// 生成海报逻辑
-const createPoster = (event) => {
-    let e = event.target;
-    debounceTap(e, () => {
-        // 海报生成
-        posterCreate(
-            { width: 750, height: 1334 }, //海报尺寸
-            // 海报素材，按顺序依次渲染
-            [
-                // 背景
-                {
-                    name: "bg",
-                    src: posterImgList[posterId.value-1],
-                    pos: { w: 750, h: 1334, x: 0, y: 0 },
-                },
-                //   二维码
-                {
-                    name: "eqcode",
-                    src: eqcodePic.value,
-                    pos: { w: 164, h: 164, x: 159, y: 1122 },
-                },
-            ],
-        );
-
-        // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
-        
+    delay: 0.7,
   });
 };
 
@@ -135,7 +102,26 @@ const goDraw = (event) => {
 const hidePop = (event) => {
   let e = event.target;
   debounceTap(e, () => {
-        gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
+    gsap.to(".posterPop", {
+      duration: 0.5,
+      autoAlpha: 0,
+      onComplete: () => {
+        emit("ResultPage", { action: "hide" });
+      },
+    });
+  });
+};
+
+const hide = (event) => {
+  let e = event.target;
+  debounceTap(e, () => {
+    gsap.to(".posterPop", {
+      duration: 0.5,
+      autoAlpha: 0,
+      onComplete: () => {
+        emit("ResultPage", { action: "showQuestion" });
+      },
+    });
   });
 };
 
@@ -151,34 +137,90 @@ const goShare = (event) => {
 const hideShare = () => {
   gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
 };
+
+// 海报生成
+const posterCreate = (option, imageArr) => {
+  let posterUrl = "";
+  const { width, height } = option;
+  Toast.loading({
+    message: "海报生成中",
+    duration: 0,
+    forbidClick: true,
+  });
+
+  let mycanvas = document.createElement("canvas"); // 创建一个canvas画布元素
+  let ctx = mycanvas.getContext("2d");
+  mycanvas.style.width = `${width}px`; //设置canvas的宽
+  mycanvas.style.height = `${height}px`; //设置canvas的高
+  mycanvas.width = width;
+  mycanvas.height = height;
+  //Promise对象加载资源
+  let loader_p = [];
+  imageArr.map((item) => {
+    const _p = new Promise((resolve) => {
+      const img = new Image();
+      img.crossOrigin = "Anonymous";
+      img.onload = () => {
+        resolve(img);
+      };
+      img.src = item.src;
+    });
+    loader_p.push(_p);
+  });
+  //Promise的.all方法，当所有预加载的图像加载好的回调函数
+  Promise.all(loader_p)
+    .then((imgList) => {
+      console.log("imgList", imgList);
+
+      // 图片素材遍历绘制
+      imgList.map((item, index) => {
+        ctx.drawImage(
+          item,
+          imageArr[index].pos.x,
+          imageArr[index].pos.y,
+          imageArr[index].pos.w,
+          imageArr[index].pos.h
+        ); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
+      });
+
+      //海报绘制完 ，转成图片对象
+      return mycanvas.toDataURL("image/jpeg", 1);
+    })
+    .then((baseURL) => {
+      //返回的图片地址，就是最后海报的地址，可以放在DOM显示
+      let posterImg = document.querySelector("#posterSrc");
+      posterImg.src = baseURL;
+      setTimeout(() => {
+        // 展示海报
+        showPoster();
+        Toast.success({ message: "生成成功！" });
+      }, 500);
+    })
+    .catch((error) => {
+      console.error("生成海报失败");
+      gsap.to(".posterPop", {
+        duration: 0.5,
+        autoAlpha: 0,
+        onComplete: () => {
+          emit("ResultPage", { action: "hide" });
+        },
+      });
+      Toast.fail({ message: "生成失败，请重试！" });
+    });
+
+  // return posterUrl
+};
 </script>
 
 <template>
-    <div class="ResultPage" @touchmove.prevent>
-        <div class="result-bg"></div>
-        <div class="result-container">
-            <div class="result-larnten-box" :class="'larnten-box-'+posterId"></div>
-            <div class="result-larnten" :class="'larnten-'+posterId"></div>
-            <!-- 新年祝福语 -->
-            <div class="result-blessing-1" :class="'blessing-'+posterId+'-1'"></div>
-            <div class="result-blessing-2" :class="'blessing-'+posterId+'-2'"></div>
-            <!-- 产品 -->
-            <div class="result-product" :class="'product-'+posterId"></div>
-            <!-- 提示语 -->
-            <div class="result-tips"></div>
-            <!-- 生成海报按钮 -->
-            <div class="create-poster" @click="createPoster($event)"></div>
-        </div>
-    </div>
-    <!-- 海报弹窗 -->
   <div class="posterPop" @touchmove.prevent>
-        <div class="cls-btn-box">
-            <div class="cls-btn" @click="hidePop($event)"></div>
-        </div>
+    <div class="poster-bg"></div>
+    <div class="poster-container">
       <div class="poster-box">
-            <div class="poster" :class="'poster-'+posterId">
-                <img id="posterSrc" src="" alt="" srcset="">
+        <div class="poster">
+          <img id="posterSrc" src="" alt="" srcset="" />
         </div>
+        <!-- <div class="poster-cls-btn" @click="hide($event)"></div> -->
       </div>
       <div class="save-tips">*长按保存海报</div>
       <div class="btn-box">
@@ -186,6 +228,7 @@ const hideShare = () => {
         <div class="go-share" @click="goShare($event)"></div>
       </div>
     </div>
+  </div>
   <!-- 分享提示 -->
   <div class="sharePop" @click="hideShare">
     <div class="tips-pic"></div>
@@ -193,171 +236,79 @@ const hideShare = () => {
   </div>
 </template>
 
-
 <style lang="scss" scoped>
-.ResultPage {
-    @include fixed();
-    background-color: azure;
-
-    .result-bg {
-        @include pos(750px, 1624px, 0px, 50%);
-        @include bg_pos("result/bg.jpg");
-        transform: translateY(-50%);
-        pointer-events: none;
-    }
-
-    .result-container {
-        @include pos(750px, 1624px, 0px, 50%);
-        transform: translateY(-50%);
-
-        .larnten-box-1{
-            @include pos(437px, 809px, 283px, 181px);
-            @include bg_pos("result/larnten-box-1.png");
-        }
-        .larnten-box-2{
-            @include pos(423px, 790px, 304px, 178px);
-            @include bg_pos("result/larnten-box-2.png");
-        }
-        .larnten-box-3{
-            @include pos(447px, 807px, 280px, 170px);
-            @include bg_pos("result/larnten-box-3.png");
-        }
-
-        .larnten-1{
-            @include pos(397px, 787px, 315px, 297px);
-            @include bg_pos("result/larnten-1.png");
-        }
-
-        .larnten-2{
-            @include pos(444px, 771px, 306px, 302px);
-            @include bg_pos("result/larnten-2.png");
-        }
-
-        .larnten-3{
-            @include pos(472px, 789px, 278px, 285px);
-            @include bg_pos("result/larnten-3.png");
-        }
-
-
-        .blessing-1-1{
-            @include pos(86px, 565px, 70px, 347px);
-            @include bg_pos("result/blessing-text-1-1.png");
-        }
-        .blessing-1-2{
-            @include pos(82px, 561px, 165px, 347px);
-            @include bg_pos("result/blessing-text-1-2.png");
-        }
-
-        .blessing-2-1{
-            @include pos(86px, 563px, 70px, 347px);
-            @include bg_pos("result/blessing-text-2-1.png");
-        }
-        .blessing-2-2{
-            @include pos(88px, 565px, 165px, 347px);
-            @include bg_pos("result/blessing-text-2-2.png");
-        }
-
-        .blessing-3-1{
-            @include pos(86px, 568px, 70px, 347px);
-            @include bg_pos("result/blessing-text-3-1.png");
-        }
-        .blessing-3-2{
-            @include pos(87px, 563px, 165px, 347px);
-            @include bg_pos("result/blessing-text-3-2.png");
-        }
-
-        .result-product{
-            @include pos(619px, 138px, 65px, 1015px);
-        }
-        .product-1{
-            @include bg_pos("result/product-1.png");
-        }
-        .product-2{
-            @include bg_pos("result/product-2.png");
-        }
-        .product-3{
-            @include bg_pos("result/product-3.png");
-        }
-
-        .result-tips{
-            @include pos(645px, 71px, 52px, 1183px);
-            @include bg_pos("result/text.png");
-        }
-
-        .create-poster{
-            @include pos(237px, 80px, 257px, 1284px);
-            @include bg_pos("result/create-btn.png");
-        }
-
-    }
-}
-
 .posterPop {
-    @include fixed();
-    @include flexCen();
-    background-color: rgba($color: #000000, $alpha: 0.6);
+  @include pos(100%, 1624px, 0px, 0px);
+  overflow: hidden;
+  background: linear-gradient(135deg, #d6d1ca, #e5dccf);
   visibility: hidden;
 
+  .poster-bg {
+    @include pos(750px, 1624px, 0px, 0px);
+    // transform: translateY(-50%);
+    @include bg_pos("index/bg.jpg");
+  }
+
+  .poster-container {
+    @include pos(750px, 1624px, 0px, 0px);
+    // transform: translateY(-50%);
+    @include flexCen();
+    background-color: rgba($color: #000000, $alpha: 0.3);
+
     .cls-btn-box {
       width: 617px;
       display: flex;
       justify-content: flex-end;
-
-        .cls-btn {
-            @include box(49px, 49px);
-            @include bg_pos("result/cls-btn.png");
-            margin-right: -20px;
-        }
     }
 
     .save-tips {
       font-size: 20px;
       line-height: 20px;
-        margin-top: 20px;
-        color: #fff;
+      color: #ffffff;
       letter-spacing: 2px;
     }
 
     .poster-box {
-        @include box(617px, 881px);
+      @include box(720px, 882px);
       margin-top: 20px;
       overflow: hidden;
+      position: relative;
+
+      .poster-cls-btn {
+        @include pos(53px, 53px, 660px, 10px);
+        @include bg_pos("result/cls-btn.png");
+      }
 
       .poster {
         @include box(100%, 100%);
         overflow: hidden;
-            #posterSrc{
+        @include bg_pos("result/card.png");
+
+        #posterSrc {
           @include box(100%, 100%);
           opacity: 0;
         }
       }
-        .poster-1{
-            @include bg_pos("result/preveiw-1.png");
-        }
-        .poster-2{
-            @include bg_pos("result/preveiw-2.png");
-        }
-        .poster-3{
-            @include bg_pos("result/preveiw-3.png");
-        }
     }
 
     .btn-box {
-        @include box(489px, 76px);
+      @include box(550px, 91px);
       display: flex;
       justify-content: space-between;
+      align-items: center;
       margin-top: 20px;
 
       .go-draw {
-            @include box(226px, 76px);
+        @include box(243px, 91px);
         @include bg_pos("result/go-draw-btn.png");
       }
 
       .go-share {
-            @include box(226px, 76px);
+        @include box(243px, 91px);
         @include bg_pos("result/go-share-btn.png");
       }
     }
+  }
 }
 
 .sharePop {
@@ -366,14 +317,14 @@ const hideShare = () => {
   visibility: hidden;
 
   .tips-pic {
-        @include pos(100px, 100px, 600px, 100px);
+    @include pos(100px, 100px, 600px, 180px);
     @include bg_pos("result/share-tips.svg");
     stroke: #ffffff;
   }
 
   .tips-text {
     font-size: 25px;
-        @include pos(750px, 100px, 0px, 220px);
+    @include pos(750px, 100px, 0px, 300px);
     color: #ffffff;
     text-align: right;
   }

src/components/Rule.vue

@@ -21,7 +21,7 @@ onMounted(() => {
 
     gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
     gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
-    gsap.to(".rule-arrow", { duration: 2.5, y: 10,repeat:-1,yoyo:true  });
+    gsap.to(".rule-arrow", { duration: 2.5, y: 10, repeat: -1, yoyo: true });
 });
 </script>
 
@@ -33,48 +33,48 @@ onMounted(() => {
                     <div class="rule-text-area wrapper">
                         <div>
                             <div class="part">
-                            <div>活动时间：2024年2月23日——2月25日</div>
+                                <div>活动时间：2025年4月27日——4月30日</div>
                                 <div>活动奖励：微信红包</div>
                             </div>
                             <div class="part">
                                 <div>活动攻略：</div>
                                 <div>
-                                1、【猜灯谜闹元宵】活动共设计3道题目，全部选择完毕后即可获取测试结果。参与抽奖活动；
+                                    1、【打卡理想假期，五一好礼等你】活动共设计5道题目，首页进入后左右滑动选择您想打卡的地点，点击进行答题，答对后即可获取专属打卡海报，并参与抽奖；答错时将跳转回选择打卡地点的页面，重新答题。
                                 </div>
-                            <div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
+                                <div>2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。</div>
                             </div>
                             <div class="part">
                                 <div>领奖说明：</div>
                                 <div>
-                                1、中奖后在中奖页面复制兑换码，前往<span class="blod">[平安理财服务号]</span>消息框输入“元宵快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
+                                    1、中奖后在中奖页面复制兑换码，前往<span
+                                        class="blod">[平安理财服务号]</span>消息框输入“五一快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品]
+                                    内查看兑换码；
                                 </div>
                                 <div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
                                 <div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
-                            <div class="part">其他：</div>
-                            <div>
-                                活动期间如遇到任何问题，请在<span class="blod">[平安理财服务号]</span>后台咨询，我们会在一个工作日内回复。
                             </div>
-                            <div class="part">说明：平安理财有权对活动规则进行解释</div>
+
+                            <div class="part">
+                                <div>其他：</div>
+                                活动期间如遇到任何问题，请在<span class="blod">[平安理财服务号]</span>后台咨询，我们会在一个工作日内回复。
+                                <div>说明：平安理财有权对活动规则进行解释</div>
                             </div>
                             <div class="part">
-                            <div>活动规则：</div>
+                                <div>活动说明：</div>
                                 <div>
-                                1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
+                                    （1）本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，并保留追究其法律责任的权利：
                                 </div>
                                 <div>
-                                (1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
+                                    (2)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式、不正当手段等参与本活动;同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等）单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的；
                                 </div>
                                 <div>
-                                (2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
+                                    (3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为；
                                 </div>
                                 <div>
-                                (3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
+                                    (4)平安理财保留调整、暂停和终止本活动的权利，并经公告后生效；
                                 </div>
                                 <div>
-                                2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
-                            </div>
-                            <div>
-                                3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
+                                    (5)用户参与本活动，即视为理解并同意本活动细则。在法律法规及监管规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
                                 </div>
                             </div>
                             <div class="margin-bottom-area"></div>
@@ -94,43 +94,43 @@ onMounted(() => {
 .RulePage {
     @include fixed();
     @include flexCen();
-    background-color: rgba($color: #000000, $alpha: 0.7);
+    background-color: rgba($color: #000000, $alpha: 0.3);
 
     .rule-container {
         position: relative;
-        @include box(612px, 794px);
+        @include box(685px, 876px);
         overflow: hidden;
 
         .content {
             .rule-content {
-                @include box(612px, 794px);
+                @include box(685px, 876px);
                 @include bg_pos("rule/rule-box.png");
                 position: relative;
                 overflow: hidden;
 
                 .rule-text-area {
-                    @include pos(612px, 676px, 0px, 101px);
+                    @include pos(635px, 709px, 25px, 83px);
                     overflow: hidden;
                     // overflow-y: scroll;
                     padding: 0px 20px;
 
 
                     .part {
-                        color: #a31b15;
+                        color: #a74f00;
                         font-size: 20px;
                         line-height: 35px;
                         margin-top: 30px;
                         text-align: justify;
                         padding: 0 10px;
-                        font-family: 'HarmonyOS_Sans_SC_Regular';
+                        font-family: 'FZZY_Regular';
                     }
 
-                    .blod{
+                    .blod {
                         font-weight: 700;
-                        color: #6c0500;
+                        color: #a74f00;
                     }
 
-                    .margin-bottom-area{
+                    .margin-bottom-area {
                         // margin-bottom: 100px;
                         height: 100px;
                     }
@@ -138,18 +138,20 @@ onMounted(() => {
             }
 
             .rule-arrow {
-                @include pos(149px, 84px, 231px, 682px);
+                @include pos(161px, 102px, 262px, 682px);
                 @include bg_pos("rule/arrow.png");
                 pointer-events: none;
             }
+
             .rule-bottom-bg {
-                // visibility: hidden;
-                @include pos(588px, 102px, 12px, 682px);
-                pointer-events: none;
-                background-image: -webkit-linear-gradient( 90deg, rgba(255,238,186,0.7) , rgba(255, 255, 255, 0.1) 100%);
+                // @include pos(685px, 102px, 0px, 712px);
+                // border-radius: 10px;
+                // pointer-events: none;
+                // background-image: -webkit-linear-gradient(90deg, rgba(255, 238, 186, 0.7), rgba(255, 255, 255, 0.1) 100%);
             }
+
             .rule-icon {
-                @include pos(118px, 146px, 511px, 25px);
+                @include pos(97px, 120px, 561px, 25px);
                 @include bg_pos("rule/icon.png");
                 pointer-events: none;
             }
@@ -159,9 +161,9 @@ onMounted(() => {
     }
 
     .rule-cls-btn {
-        @include box(43px, 43px);
+        @include box(49px, 49px);
         @include bg_pos("rule/cls-btn.png");
-        margin-top: 40px;
+        margin-top: 0px;
     }
 }
 </style>

src/data/imgList.js

@@ -1,98 +1,41 @@
-
 const load = [
-    'load/icon.png',
-    'load/bg.jpg',
-]
+  "load/icon.png",
+
+  "index/bg.jpg",
+  "music-on.png",
+  "share.jpg",
+];
 
 const page = [
 
-    'index/prize-btn.png',
-    'index/cloud.png',
-    'index/firework.png',
-    'index/rule-btn.png',
-    'index/start-btn.png',
-    'index/fan-3.png',
-    'index/title.png',
-    'index/fan-4.png',
-    'index/pet-icon.png',
-    'index/fan-2.png',
-    'index/fan-1.png',
-    'index/windows.png',
-    'index/bottom-bg.png',
-    'index/bg.jpg',
+  "prize/tips.png",
+  "prize/star.png",
+  "prize/draw-text.png",
+  "prize/light.png",
+  "prize/myPrize-box2.png",
+  "prize/no-prize.png",
+  "prize/cls-btn.png",
+  "prize/copy-btn.png",
+  "prize/draw-box.png",
 
-    'prize/tips.png',
-    'prize/cls-btn.png',
-    'prize/copy-btn.png',
-    'prize/draw-text.png',
-    'prize/light.png',
-    'prize/draw-box.png',
-    'prize/myPrize-box.png',
-    'prize/no-prize.png',
-    'prize/star.png',
 
-    'qa/correct.png',
-    'qa/gold-icon.png',
-    'qa/incorrect.png',
-    'qa/gold-icon-2.png',
-    'qa/next-btn.png',
-    'qa/create-btn.png',
-    'qa/lantern-icon.png',
-    'qa/question-box.png',
-    'qa/bottom-bg.png',
-    'qa/bg.jpg',
-
-    'result/tips.png',
-    'result/product-3.png',
-    'result/share-tips.svg',
-    'result/text.png',
-    'result/larnten-box-1.png',
-    'result/larnten-box-2.png',
-    'result/larnten-box-3.png',
-    'result/poster-1.jpg',
-    'result/poster-2.jpg',
-    'result/poster-3.jpg',
-    'result/preveiw-1.png',
-    'result/preveiw-2.png',
-    'result/preveiw-3.png',
-    'result/product-1.png',
-    'result/product-2.png',
-    'result/blessing-text-1-1.png',
-    'result/blessing-text-1-2.png',
-    'result/blessing-text-2-1.png',
-    'result/blessing-text-2-2.png',
-    'result/blessing-text-3-1.png',
-    'result/blessing-text-3-2.png',
-    'result/cls-btn.png',
-    'result/create-btn.png',
-    'result/go-draw-btn.png',
-    'result/go-share-btn.png',
-    'result/larnten-1.png',
-    'result/larnten-2.png',
-    'result/larnten-3.png',
-    'result/bg.jpg',
-    'rule/arrow.png',
-    'rule/cls-btn.png',
-    'rule/icon.png',
-    'rule/rule-box.png',
-]
+];
 
 // 处理为vite引入图片格式
 function imgCreate(url, img) {
-    let i = new URL(`../assets/images/${url}`, import.meta.url).href
-    img.push(i)
+  let i = new URL(`../assets/images/${url}`, import.meta.url).href;
+  img.push(i);
 }
 
+const loadImg = [];
+const pageImg = [];
 
-const loadImg = []
-const pageImg = []
-
-load.forEach(element => {
-    imgCreate(element, loadImg)
+load.forEach((element) => {
+  imgCreate(element, loadImg);
 });
 
-page.forEach(element => {
-    imgCreate(element, pageImg)
+page.forEach((element) => {
+  imgCreate(element, pageImg);
 });
 
-export { loadImg, pageImg }
+export { loadImg, pageImg };

src/data/index.js

@@ -2,72 +2,77 @@ export const data = [
   {
     id: 1,
     question: [
-            '兄弟好多个，个个都爱赢',
-            '目标很合适，止盈有方法',
+      "赛龙舟时，鼓手用节奏统一行动，舵手把控方向，划手齐心发力，三者缺一不可。这体现了哪种投资模式？",
     ],
     answer: [
       {
-                aid: 'A',
-                text: [
-                    '灵活策略目标盈',
-                ],
-                result:'correct',
+        aid: "A",
+        text: "平台化高效协作投资模式，集体智慧",
+        result: 1,
       },
       {
-                aid: 'B',
-                text: [
-                    '灵活策略目标强',
-                ],
-                result:'incorrect',
+        aid: "B",
+        text: "明星基金经理的单打独斗，个人英雄主义",
+        result: 0,
       },
     ],
+    tips: [`平安理财采取平台化、模块化的投资模式，通过团队作战能更好协调更优势、更广泛的资源，并最终为客户创造可持续的投资收益，截至 2025 年 5月15日已累计为 1700 万名客户创造1092亿元投资收益。`],
   },
   {
     id: 2,
     question: [
-            '固收旗舰团，兄弟有志气',
-            '三个金牛奖，开启财富门',
+      "赛龙舟经常会遇上河道弯曲或河流湍急，常常出现翻船风险，为了确保顺利抵达终点，在拐弯及面对急流时所使用的技巧与投资中的哪种情况相符？",
     ],
     answer: [
       {
-                aid: 'A',
-                text: [
-                    '启航',
-                ],
-                result:'correct',
+        aid: "A",
+        text: "追求单车变摩托，冒险前进，重仓搏一把",
+        result: 0,
       },
       {
-                aid: 'B',
-                text: [
-                    '远航',
-                ],
-                result:'incorrect',
+        aid: "B",
+        text: "坚持绝对收益目标，严格风险控制，稳健为先",
+        result: 1,
       },
     ],
-        analysis: ['（注：截止2024年2月19日，启航','系列历史到期正收益概率100%）']
+    tips: [`稳健是资产长期增值的关键，平安理财坚持以绝对收益为目标，截至2025年5月15日，旗下定开/封闭式多个产品线实现历史到期兑付100%正收益（如启航系列、稳健精选系列、启元系列、新安鑫系列、卓越成长系列、卓越稳健系列等）。`],
   },
   {
     id: 3,
     question: [
-            '兄弟好多个，口碑都很好',
-            '考试常满分，稳重不轻浮',
+      "赛龙舟中，队伍需在发令枪响的瞬间同步起桨，冲刺阶段更需高频划桨。这与下列哪种投资策略相符？",
     ],
     answer: [
       {
-                aid: 'A',
-                text: [
-                    '稳健精选（封闭型）',
-                ],
-                result:'correct',
+        aid: "A",
+        text: "精准把握市场机会，适当追求超额收益",
+        result: 1,
       },
       {
-                aid: 'B',
-                text: [
-                    '稳妥精选',
-                ],
-                result:'incorrect',
+        aid: "B",
+        text: "一旦配置长期不动，顺其自然随遇而安",
+        result: 0,
       },
     ],
-        analysis: ['（注：截止2024年2月19日，稳健精选系列（封闭型）','历史到期业绩基准达标率100%）']
+    tips: [`稳健为先的前提下，平安理财通过多资产、多策略的能力优势，在低利率时代中力争为投资者创造相对不错的超额收益。如鑫享全球动量策略日开180天持有1号A今年以来年`],
   },
-]
+  {
+    id: 4,
+    question: [
+      "赛龙舟通常500米，但有一种达到了30公里，号称龙舟马拉松。如果说500米赛龙舟对应的是投资中短期主义，那么龙舟马拉松对应的是哪种情怀？",
+    ],
+    answer: [
+      {
+        aid: "A",
+        text: "投机主义，左右摇摆或见风使舵",
+        result: 0,
+      },
+      {
+        aid: "B",
+        text: "长期主义精神，坚持长期稳健经营理念",
+        result: 1,
+      },
+    ],
+    tips: [`行稳方能致远。长期主义是以长远视角进行决策和行动的价值观，其核心在于追求可持续的价值增长，而非短期利益的最大化。这是平安理财自成立以来一直坚持的投资和经营理念。`],
+  },
+];

src/page/Home/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="home" @click.once="playMusic">
+  <div class="home" @click.once="firstClick">
+    <div class="home-container">
       <Index v-if="showIndex" @IndexPage="indexFn"></Index>
       <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
       <Result v-if="showResult" @ResultPage="resultFn"></Result>
@@ -7,6 +8,18 @@
       <Draw v-if="showDraw" @DrawPage="drawFn"></Draw>
       <Rule v-if="showRule" @RulePage="ruleFn"></Rule>
       <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
+      <!-- 音乐图标 -->
+      <div class="music_icon" @click="musicPlay">
+        <audio
+          style="display: none; height: 0"
+          id="bg-music"
+          autoplay="autoplay"
+          preload="auto"
+          :src="musicUrl"
+          loop="loop"
+        ></audio>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -19,19 +32,15 @@ import MyPrize from "@/components/MyPrize";
 import Draw from "@/components/Draw";
 import Result from "@/components/Result";
 import Rule from "@/components/Rule";
-import {
-  createBGM,
-  getQueryString,
-  screenOrientation,
-  isAndriod,
-  fontAdpat,
-} from "@/plugins";
+import { getQueryString, screenOrientation, fontAdpat } from "@/plugins";
 import { authorize, getUserInfo } from "@/api";
 import { Toast } from "vant";
 import { useMainStore } from "@/store";
 
 const userStore = useMainStore();
 
+const musicUrl = new URL(`@/assets/media/bgm.mp3`, import.meta.url).href;
+
 const showLoad = ref(false);
 const loadFn = (item) => {
   if (item.action == "hide") {
@@ -76,6 +85,8 @@ const myPrizeFn = (item) => {
   }
 };
 
+const posterId = ref(1);
+
 const showDraw = ref(false);
 const drawFn = (item) => {
   if (item.action == "hide") {
@@ -83,11 +94,13 @@ const drawFn = (item) => {
   }
 };
 
-const showResult = ref(false);
+const showResult = ref(true);
 const resultFn = (item) => {
   if (item.action == "hide") {
     showResult.value = false;
+    console.log("hide", showResult.value);
   }
+
   if (item.action == "showDraw") {
     showDraw.value = true;
   }
@@ -114,27 +127,10 @@ onMounted(() => {
         if (res.code == 0) {
           console.log("我的信息：", res.data);
           userStore.updateToken(res.data);
-          createBGM();
           // 开始加载组件
           showLoad.value = true;
-
-          // ios自动播放音乐
-          document.addEventListener("DOMContentLoaded", function () {
-            function audioAutoPlay() {
-              var audio = document.getElementById("musicBtn");
-              audio.play();
-              document.addEventListener(
-                "WeixinJSBridgeReady",
-                function () {
-                  WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
-                    audio.play();
-                  });
-                },
-                false
-              );
-            }
-            audioAutoPlay();
-          });
+          iosMusic(); //自动播放音乐
+          gsap.set(".music_icon", { autoAlpha: 1 });
           return;
         } else {
           authorize({ scopeType: 1, redirectUri: url }).then((res) => {
@@ -209,30 +205,94 @@ onMounted(() => {
       });
     }
   } else {
-    showLoad.value = true;
-    createBGM();
+    // showLoad.value = true;
+    iosMusic(); //自动播放音乐
+    gsap.set(".music_icon", { autoAlpha: 1 });
   }
 });
 
-const playMusic = () => {
-  var audioEle = document.getElementById("audio");
-  audioEle.play();
+// ios端音乐自动播放
+const iosMusic = () => {
+  // ios自动播放音乐
+  document.addEventListener("DOMContentLoaded", function () {
+    function audioAutoPlay() {
+      var audio = document.getElementById("bg-music");
+      audio.play();
+      document.addEventListener(
+        "WeixinJSBridgeReady",
+        function () {
+          WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
+            audio.play();
+          });
+        },
+        false
+      );
+    }
+    audioAutoPlay();
+  });
+
+  musicBtnAni.fromTo(
+    ".music_icon",
+    { rotation: "0" },
+    { rotation: "+=360", repeat: -1, duration: 7, ease: "none" }
+  );
+  musicBtnAni.play();
+};
+
+// 音乐播放
+const musicBtnAni = gsap.timeline();
+const playStatu = ref(true);
+const musicPlay = () => {
+  let audio = document.getElementById("bg-music");
+  if (playStatu.value == true) {
+    musicBtnAni.pause();
+    audio.pause();
+    playStatu.value = false;
+    console.log("暂停");
+  } else {
+    musicBtnAni.play();
+    audio.play();
+    playStatu.value = true;
+    console.log("播放");
+  }
+};
+
+const firstClick = () => {
+  let audio = document.getElementById("bg-music");
+
+  musicBtnAni.play();
+  audio.play();
+  playStatu.value = true;
+  console.log("播放");
 };
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 #app {
   overflow: hidden;
-  background: linear-gradient(135deg, #a11b15, #f80c00);
+  background: linear-gradient(135deg, #d6d1ca, #e5dccf);
+  // font-family: "FZZY_Regular";
 }
 
 #__vconsole {
   visibility: hidden;
 }
 
-#musicBtn {
-  @include pos(60px, 60px, 50px, 35px);
+.music_icon {
+  @include pos(60px, 60px, 50px, 245px);
+  @include bg_pos("music-on.png");
   z-index: 99;
+  visibility: hidden;
+}
+
+.home {
+  @include pos(100%, 100vh, 0px, 0px);
+  overflow: hidden;
+
+  .home-container {
+    @include pos(750px, 1624px, 0px, 50%);
+    transform: translateY(-50%);
+  }
 }
 
 // 音乐-on样式
@@ -245,12 +305,6 @@ const playMusic = () => {
   @include bg_pos("music-off.png");
 }
 
-.home {
-  @include box(750px, 100vh);
-  overflow: hidden;
-  margin: 0 auto;
-}
-
 .orientationPop {
   @include fixed();
   @include flexCen();

src/page/Home/main.js

@@ -19,8 +19,8 @@ app.config.globalProperties.imgUrl = (url) => {
 
 // 微信分享配置
 wxShare({
-    title: '欢乐猜灯谜，喜庆闹元宵',
-    desc: '猜灯谜、赏花灯，金龙贺岁过“龘”年',
+    title: '打卡理想假期 五一好礼等你',
+    desc: '穿越城市地标，解锁你的财富基因',
 })
 
 // 测试环境开vconsole

src/plugins/wxshare.js

@@ -3,7 +3,7 @@ import axios from "axios";
 import { Toast } from "vant";
 import {getShareConfig } from '@/api'
 
-const imgUrl = new URL(`@/assets/images/share.jpg`, import.meta.url).href
+const imgUrl = new URL(`../assets/images/share.jpg`, import.meta.url).href
 const linkUrl = import.meta.env.VITE_HOST + import.meta.env.VITE_FOLDER
 
 export function wxShare(option) {
@@ -31,6 +31,7 @@ export function wxShare(option) {
                 ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
             })
             wx.ready(function () {
+                console.log('share config success');
                 wx.onMenuShareTimeline({
                     link: import.meta.env.VITE_URL, // 分享链接
                     title: option.title, // 分享标题
@@ -57,3 +58,4 @@ export function wxShare(option) {
         .catch(() => {
         });
 }
+

src/store/index.js

@@ -1,42 +1,41 @@
 // pinia仓库
-import { defineStore } from "pinia"
+import { defineStore } from "pinia";
 
 export const useMainStore = defineStore("counter", {
   state: () => {
     return {
       hasDraw: true, //是否有抽奖机会
-            token: '',
-            posterId: 3,    //测试结果
+      token: "",
+      posterId: 1, //测试结果
       hasPrize: false, //是否有奖品
-            prizeCode: 'oggSVMbeLgSK', //兑换码
-            prizeMoney: '8.88', //金额
-            drawKey: '',
-        }
+      prizeCode: "oggSVMbeLgSK", //兑换码
+      prizeMoney: "8.88", //金额
+      drawKey: "",
+    };
   },
   // 相当于computed属性，对state进行二次加工
   getters: {},
   // 异步处理方法
   actions: {
     updateToken(data) {
-            this.token = data.authorization
-            this.hasDraw = data.drawNumber == 0 ? false : true
-
+      this.token = data.authorization;
+      this.hasDraw = data.drawNumber == 0 ? false : true;
     },
     updatePrize(data) {
-            this.prizeCode = data.prizeCode
-            this.prizeMoney = data.prizeAmount
-            this.hasPrize = true
+      this.prizeCode = data.prizeCode;
+      this.prizeMoney = data.prizeAmount;
+      this.hasPrize = true;
     },
     updatePosterId(id) {
-            this.posterId = id
+      this.posterId = id;
     },
     updateDrawKey(data) {
-            console.log('保存结果:', data);
-            this.drawKey = data.subKey
-            this.hasDraw = data.drawFlag
+      console.log("保存结果:", data);
+      this.drawKey = data.subKey;
+      this.hasDraw = data.drawFlag;
     },
     updateDraw(value) {
-            this.hasDraw = false
-        }
+      this.hasDraw = false;
     },
-})
+  },
+});

src/styles/global.scss

@@ -44,9 +44,6 @@ body {
   /* -webkit-user-select: none;*/
 }
 
-
-
-
 @font-face {
   font-family: "HarmonyOS_Sans_SC_Regular";
   src: url(@/assets/font/HarmonyOS_Sans_SC_Regular.ttf) format("truetype");
@@ -55,6 +52,10 @@ body {
   font-family: "DouyinSansBold";
   src: url(@/assets/font/DouyinSansBold.ttf) format("truetype");
 }
+@font-face {
+  font-family: "FZZY_Regular";
+  src: url(@/assets/font/FZZY_Regular.ttf) format("truetype");
+}
 
 * {
   padding: 0;

vite.config.js

@@ -33,7 +33,7 @@ export default defineConfig(({ command, mode }) => {
             template: 'index.html',
             injectOptions: {
               data: {
-                title: '猜灯谜闹元宵',
+                title: '打卡理想假期',
               },
             }
           },
@@ -44,6 +44,7 @@ export default defineConfig(({ command, mode }) => {
         resolvers: [VantResolver()],
       }),
       AutoImport({
+        resolvers: [VantResolver()],
         imports: ['vue', 'vue-router',]
       }),
       // 开启gzip压缩
@@ -85,7 +86,7 @@ export default defineConfig(({ command, mode }) => {
             propList: ['*'], // 能转化为vw的属性列表
             viewportUnit: 'vw', // 希望使用的视口单位
             fontViewportUnit: 'vw', // 字体使用的视口单位
-            selectorBlackList: ['home', 'pc-content'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+            selectorBlackList: [ 'pc-content'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
             minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
             mediaQuery: true, // 媒体查询里的单位是否需要转换单位
             replace: true, //  是否直接更换属性值，而不添加备用属性

yarn.lock

@@ -7,10 +7,22 @@
   resolved "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.7.tgz#26ea493a831b4f3a85475e7157be02fb4eab51fb"
   integrity sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==
 
-"@babel/parser@^7.23.6":
-  version "7.23.9"
-  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
-  integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
+"@babel/helper-string-parser@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
+  integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
+
+"@babel/helper-validator-identifier@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
+  integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
+
+"@babel/parser@^7.27.2":
+  version "7.27.2"
+  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.27.2.tgz#577518bedb17a2ce4212afd052e01f7df0941127"
+  integrity sha512-QYLs8299NA7WM/bZAdp+CviYYkVoYXlDW2rzliy3chxd1PQjej7JORuMJDJXJUb9g0TT+B99EwaVLKmX+sPXWw==
+  dependencies:
+    "@babel/types" "^7.27.1"
 
 "@babel/runtime@^7.17.2":
   version "7.23.9"
@@ -19,6 +31,14 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/types@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.npmmirror.com/@babel/types/-/types-7.27.1.tgz#9defc53c16fc899e46941fc6901a9eea1c9d8560"
+  integrity sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.27.1"
+
 "@better-scroll/core@^2.5.1":
   version "2.5.1"
   resolved "https://registry.npmmirror.com/@better-scroll/core/-/core-2.5.1.tgz#de53f089a2f53f51e58e5042556fe0d3e1655aa9"
@@ -31,15 +51,115 @@
   resolved "https://registry.npmmirror.com/@better-scroll/shared-utils/-/shared-utils-2.5.1.tgz#ed6a1b5713462fa50afd8bb7d172ca218a0b7f2e"
   integrity sha512-AplkfSjXVYP9LZiD6JsKgmgQJ/mG4uuLmBuwLz8W5OsYc7AYTfN8kw6GqZ5OwCGoXkVhBGyd8NeC4xwYItp0aw==
 
-"@esbuild/android-arm@0.15.18":
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.15.18.tgz#266d40b8fdcf87962df8af05b76219bc786b4f80"
-  integrity sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==
+"@esbuild/android-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
+  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
 
-"@esbuild/linux-loong64@0.15.18":
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz#128b76ecb9be48b60cf5cfc1c63a4f00691a3239"
-  integrity sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==
+"@esbuild/android-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
+  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+
+"@esbuild/android-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
+  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+
+"@esbuild/darwin-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+
+"@esbuild/darwin-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
+  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+
+"@esbuild/freebsd-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
+  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+
+"@esbuild/freebsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
+  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+
+"@esbuild/linux-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
+  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+
+"@esbuild/linux-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
+  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+
+"@esbuild/linux-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
+  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
+
+"@esbuild/linux-loong64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
+  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+
+"@esbuild/linux-mips64el@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
+  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+
+"@esbuild/linux-ppc64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
+  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+
+"@esbuild/linux-riscv64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
+  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+
+"@esbuild/linux-s390x@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
+  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+
+"@esbuild/linux-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
+  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+
+"@esbuild/netbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
+  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+
+"@esbuild/openbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
+  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+
+"@esbuild/sunos-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
+  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+
+"@esbuild/win32-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
+  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+
+"@esbuild/win32-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
+  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+
+"@esbuild/win32-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
+  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
 
 "@jridgewell/gen-mapping@^0.3.0":
   version "0.3.3"
@@ -73,6 +193,11 @@
   resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
+"@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.22"
   resolved "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz#72a621e5de59f5f1ef792d0793a82ee20f645e4c"
@@ -144,94 +269,95 @@
   resolved "https://registry.npmmirror.com/@vant/use/-/use-1.6.0.tgz#237df3091617255519552ca311ffdfea9de59001"
   integrity sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==
 
-"@vitejs/plugin-vue@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54"
-  integrity sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==
+"@vitejs/plugin-vue@^5.2.4":
+  version "5.2.4"
+  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz#9e8a512eb174bfc2a333ba959bbf9de428d89ad8"
+  integrity sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==
 
-"@vue/compiler-core@3.4.15":
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.4.15.tgz#be20d1bbe19626052500b48969302cb6f396d36e"
-  integrity sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==
+"@vue/compiler-core@3.5.14":
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.14.tgz#3676685c04c48a5b4a5515b3b2842e98342c555c"
+  integrity sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA==
   dependencies:
-    "@babel/parser" "^7.23.6"
-    "@vue/shared" "3.4.15"
+    "@babel/parser" "^7.27.2"
+    "@vue/shared" "3.5.14"
     entities "^4.5.0"
     estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
+    source-map-js "^1.2.1"
 
-"@vue/compiler-dom@3.4.15":
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz#753f5ed55f78d33dff04701fad4d76ff0cf81ee5"
-  integrity sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==
+"@vue/compiler-dom@3.5.14":
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.14.tgz#bbf27421f80f7b8873000edceecd817c4abf438a"
+  integrity sha512-1aOCSqxGOea5I80U2hQJvXYpPm/aXo95xL/m/mMhgyPUsKe9jhjwWpziNAw7tYRnbz1I61rd9Mld4W9KmmRoug==
   dependencies:
-    "@vue/compiler-core" "3.4.15"
-    "@vue/shared" "3.4.15"
+    "@vue/compiler-core" "3.5.14"
+    "@vue/shared" "3.5.14"
 
-"@vue/compiler-sfc@3.4.15":
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz#4e5811e681955fcec886cebbec483f6ae463a64b"
-  integrity sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==
+"@vue/compiler-sfc@3.5.14":
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.14.tgz#fc3db30a1c744139d41bb57bb451d783415fce4b"
+  integrity sha512-9T6m/9mMr81Lj58JpzsiSIjBgv2LiVoWjIVa7kuXHICUi8LiDSIotMpPRXYJsXKqyARrzjT24NAwttrMnMaCXA==
   dependencies:
-    "@babel/parser" "^7.23.6"
-    "@vue/compiler-core" "3.4.15"
-    "@vue/compiler-dom" "3.4.15"
-    "@vue/compiler-ssr" "3.4.15"
-    "@vue/shared" "3.4.15"
+    "@babel/parser" "^7.27.2"
+    "@vue/compiler-core" "3.5.14"
+    "@vue/compiler-dom" "3.5.14"
+    "@vue/compiler-ssr" "3.5.14"
+    "@vue/shared" "3.5.14"
     estree-walker "^2.0.2"
-    magic-string "^0.30.5"
-    postcss "^8.4.33"
-    source-map-js "^1.0.2"
+    magic-string "^0.30.17"
+    postcss "^8.5.3"
+    source-map-js "^1.2.1"
 
-"@vue/compiler-ssr@3.4.15":
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz#a910a5b89ba4f0a776e40b63d69bdae2f50616cf"
-  integrity sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==
+"@vue/compiler-ssr@3.5.14":
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.14.tgz#013174ee6bbf3ee291a6df247a3feb6eb43d808b"
+  integrity sha512-Y0G7PcBxr1yllnHuS/NxNCSPWnRGH4Ogrp0tsLA5QemDZuJLs99YjAKQ7KqkHE0vCg4QTKlQzXLKCMF7WPSl7Q==
   dependencies:
-    "@vue/compiler-dom" "3.4.15"
-    "@vue/shared" "3.4.15"
+    "@vue/compiler-dom" "3.5.14"
+    "@vue/shared" "3.5.14"
 
-"@vue/devtools-api@^6.5.0":
-  version "6.5.1"
-  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.1.tgz#7f71f31e40973eeee65b9a64382b13593fdbd697"
-  integrity sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==
+"@vue/devtools-api@^6.6.3":
+  version "6.6.4"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
 
-"@vue/reactivity@3.4.15":
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.4.15.tgz#ad9d9b83f5398d2e8660ad5cfc0f171e7679a9a1"
-  integrity sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==
+"@vue/reactivity@3.5.14":
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.14.tgz#814fb4ba84a9560d2752b9982fdd2b76e4a5e5a3"
+  integrity sha512-7cK1Hp343Fu/SUCCO52vCabjvsYu7ZkOqyYu7bXV9P2yyfjUMUXHZafEbq244sP7gf+EZEz+77QixBTuEqkQQw==
   dependencies:
-    "@vue/shared" "3.4.15"
+    "@vue/shared" "3.5.14"
 
-"@vue/runtime-core@3.4.15":
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.4.15.tgz#f81e2fd2108ea41a6d5c61c2462b11dfb754fdf0"
-  integrity sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==
+"@vue/runtime-core@3.5.14":
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.14.tgz#f4084cad032be3452d8f137035fcd93c182f7149"
+  integrity sha512-w9JWEANwHXNgieAhxPpEpJa+0V5G0hz3NmjAZwlOebtfKyp2hKxKF0+qSh0Xs6/PhfGihuSdqMprMVcQU/E6ag==
   dependencies:
-    "@vue/reactivity" "3.4.15"
-    "@vue/shared" "3.4.15"
+    "@vue/reactivity" "3.5.14"
+    "@vue/shared" "3.5.14"
 
-"@vue/runtime-dom@3.4.15":
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz#108ef86aa7334ead5d6b9c56a7d93679e1e45406"
-  integrity sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==
+"@vue/runtime-dom@3.5.14":
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.14.tgz#59ea4a5fe3ed93fb8f725c1c722a0fe8d8ae16cf"
+  integrity sha512-lCfR++IakeI35TVR80QgOelsUIdcKjd65rWAMfdSlCYnaEY5t3hYwru7vvcWaqmrK+LpI7ZDDYiGU5V3xjMacw==
   dependencies:
-    "@vue/runtime-core" "3.4.15"
-    "@vue/shared" "3.4.15"
+    "@vue/reactivity" "3.5.14"
+    "@vue/runtime-core" "3.5.14"
+    "@vue/shared" "3.5.14"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.15":
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.4.15.tgz#34438f998e6f6370fac78883a75efe136631957f"
-  integrity sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==
+"@vue/server-renderer@3.5.14":
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.14.tgz#adcaf30ddcf0064a28ce832d29f430bd0db3ef18"
+  integrity sha512-Rf/ISLqokIvcySIYnv3tNWq40PLpNLDLSJwwVWzG6MNtyIhfbcrAxo5ZL9nARJhqjZyWWa40oRb2IDuejeuv6w==
   dependencies:
-    "@vue/compiler-ssr" "3.4.15"
-    "@vue/shared" "3.4.15"
+    "@vue/compiler-ssr" "3.5.14"
+    "@vue/shared" "3.5.14"
 
-"@vue/shared@3.4.15":
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.15.tgz#e7d2ea050c667480cb5e1a6df2ac13bcd03a8f30"
-  integrity sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==
+"@vue/shared@3.5.14":
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.14.tgz#8fcdc6c69661a1163c173cafb6129c3f8ad01122"
+  integrity sha512-oXTwNxVfc9EtP1zzXAlSlgARLXNC84frFYkS0HHz0h3E4WZSP9sywqjqzGCP9Y34M8ipNmd380pVgmMuwELDyQ==
 
 acorn@^8.10.0, acorn@^8.11.2, acorn@^8.11.3, acorn@^8.8.2:
   version "8.11.3"
@@ -580,133 +706,33 @@ entities@^4.5.0:
   resolved "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
-esbuild-android-64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.15.18.tgz#20a7ae1416c8eaade917fb2453c1259302c637a5"
-  integrity sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==
-
-esbuild-android-arm64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.18.tgz#9cc0ec60581d6ad267568f29cf4895ffdd9f2f04"
-  integrity sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==
-
-esbuild-darwin-64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz#428e1730ea819d500808f220fbc5207aea6d4410"
-  integrity sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==
-
-esbuild-darwin-arm64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.18.tgz#b6dfc7799115a2917f35970bfbc93ae50256b337"
-  integrity sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==
-
-esbuild-freebsd-64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.18.tgz#4e190d9c2d1e67164619ae30a438be87d5eedaf2"
-  integrity sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==
-
-esbuild-freebsd-arm64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.18.tgz#18a4c0344ee23bd5a6d06d18c76e2fd6d3f91635"
-  integrity sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==
-
-esbuild-linux-32@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-linux-32/-/esbuild-linux-32-0.15.18.tgz#9a329731ee079b12262b793fb84eea762e82e0ce"
-  integrity sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==
-
-esbuild-linux-64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.15.18.tgz#532738075397b994467b514e524aeb520c191b6c"
-  integrity sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==
-
-esbuild-linux-arm64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.18.tgz#5372e7993ac2da8f06b2ba313710d722b7a86e5d"
-  integrity sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==
-
-esbuild-linux-arm@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.18.tgz#e734aaf259a2e3d109d4886c9e81ec0f2fd9a9cc"
-  integrity sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==
-
-esbuild-linux-mips64le@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.18.tgz#c0487c14a9371a84eb08fab0e1d7b045a77105eb"
-  integrity sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==
-
-esbuild-linux-ppc64le@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.18.tgz#af048ad94eed0ce32f6d5a873f7abe9115012507"
-  integrity sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==
-
-esbuild-linux-riscv64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.18.tgz#423ed4e5927bd77f842bd566972178f424d455e6"
-  integrity sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==
-
-esbuild-linux-s390x@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.18.tgz#21d21eaa962a183bfb76312e5a01cc5ae48ce8eb"
-  integrity sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==
-
-esbuild-netbsd-64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.18.tgz#ae75682f60d08560b1fe9482bfe0173e5110b998"
-  integrity sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==
-
-esbuild-openbsd-64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.18.tgz#79591a90aa3b03e4863f93beec0d2bab2853d0a8"
-  integrity sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==
-
-esbuild-sunos-64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.18.tgz#fd528aa5da5374b7e1e93d36ef9b07c3dfed2971"
-  integrity sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==
-
-esbuild-windows-32@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-windows-32/-/esbuild-windows-32-0.15.18.tgz#0e92b66ecdf5435a76813c4bc5ccda0696f4efc3"
-  integrity sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==
-
-esbuild-windows-64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz#0fc761d785414284fc408e7914226d33f82420d0"
-  integrity sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==
-
-esbuild-windows-arm64@0.15.18:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.18.tgz#5b5bdc56d341d0922ee94965c89ee120a6a86eb7"
-  integrity sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==
-
-esbuild@^0.15.9:
-  version "0.15.18"
-  resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.15.18.tgz#ea894adaf3fbc036d32320a00d4d6e4978a2f36d"
-  integrity sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==
+esbuild@^0.18.10:
+  version "0.18.20"
+  resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
+  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
   optionalDependencies:
-    "@esbuild/android-arm" "0.15.18"
-    "@esbuild/linux-loong64" "0.15.18"
-    esbuild-android-64 "0.15.18"
-    esbuild-android-arm64 "0.15.18"
-    esbuild-darwin-64 "0.15.18"
-    esbuild-darwin-arm64 "0.15.18"
-    esbuild-freebsd-64 "0.15.18"
-    esbuild-freebsd-arm64 "0.15.18"
-    esbuild-linux-32 "0.15.18"
-    esbuild-linux-64 "0.15.18"
-    esbuild-linux-arm "0.15.18"
-    esbuild-linux-arm64 "0.15.18"
-    esbuild-linux-mips64le "0.15.18"
-    esbuild-linux-ppc64le "0.15.18"
-    esbuild-linux-riscv64 "0.15.18"
-    esbuild-linux-s390x "0.15.18"
-    esbuild-netbsd-64 "0.15.18"
-    esbuild-openbsd-64 "0.15.18"
-    esbuild-sunos-64 "0.15.18"
-    esbuild-windows-32 "0.15.18"
-    esbuild-windows-64 "0.15.18"
-    esbuild-windows-arm64 "0.15.18"
+    "@esbuild/android-arm" "0.18.20"
+    "@esbuild/android-arm64" "0.18.20"
+    "@esbuild/android-x64" "0.18.20"
+    "@esbuild/darwin-arm64" "0.18.20"
+    "@esbuild/darwin-x64" "0.18.20"
+    "@esbuild/freebsd-arm64" "0.18.20"
+    "@esbuild/freebsd-x64" "0.18.20"
+    "@esbuild/linux-arm" "0.18.20"
+    "@esbuild/linux-arm64" "0.18.20"
+    "@esbuild/linux-ia32" "0.18.20"
+    "@esbuild/linux-loong64" "0.18.20"
+    "@esbuild/linux-mips64el" "0.18.20"
+    "@esbuild/linux-ppc64" "0.18.20"
+    "@esbuild/linux-riscv64" "0.18.20"
+    "@esbuild/linux-s390x" "0.18.20"
+    "@esbuild/linux-x64" "0.18.20"
+    "@esbuild/netbsd-x64" "0.18.20"
+    "@esbuild/openbsd-x64" "0.18.20"
+    "@esbuild/sunos-x64" "0.18.20"
+    "@esbuild/win32-arm64" "0.18.20"
+    "@esbuild/win32-ia32" "0.18.20"
+    "@esbuild/win32-x64" "0.18.20"
 
 escape-string-regexp@^5.0.0:
   version "5.0.0"
@@ -988,6 +1014,13 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+magic-string@^0.30.17:
+  version "0.30.17"
+  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
+  integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+
 magic-string@^0.30.3, magic-string@^0.30.5:
   version "0.30.5"
   resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
@@ -1061,10 +1094,10 @@ mutation-observer@^1.0.3:
   resolved "https://registry.npmmirror.com/mutation-observer/-/mutation-observer-1.0.3.tgz#42e9222b101bca82e5ba9d5a7acf4a14c0f263d0"
   integrity sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==
 
-nanoid@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+nanoid@^3.3.8:
+  version "3.3.11"
+  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
+  integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
 
 neo-async@^2.6.2:
   version "2.6.2"
@@ -1164,23 +1197,23 @@ pathe@^1.1.0, pathe@^1.1.1, pathe@^1.1.2:
   resolved "https://registry.npmmirror.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
   integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
 
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-pinia@^2.1.7:
-  version "2.1.7"
-  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc"
-  integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==
+pinia@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.3.1.tgz#54c476675b72f5abcfafa24a7582531ea8c23d94"
+  integrity sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==
   dependencies:
-    "@vue/devtools-api" "^6.5.0"
-    vue-demi ">=0.14.5"
+    "@vue/devtools-api" "^6.6.3"
+    vue-demi "^0.14.10"
 
 pkg-types@^1.0.3:
   version "1.0.3"
@@ -1203,14 +1236,14 @@ postcss-px-to-viewport-8-plugin@^1.2.3:
   dependencies:
     object-assign "^4.1.1"
 
-postcss@^8.4.18, postcss@^8.4.33:
-  version "8.4.33"
-  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
-  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+postcss@^8.4.27, postcss@^8.5.3:
+  version "8.5.3"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.5.3.tgz#1463b6f1c7fb16fe258736cba29a2de35237eafb"
+  integrity sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==
   dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
+    nanoid "^3.3.8"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
 
 proxy-from-env@^1.1.0:
   version "1.1.0"
@@ -1266,7 +1299,7 @@ require-main-filename@^2.0.0:
   resolved "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
-resolve@^1.22.1, resolve@^1.22.4:
+resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -1280,10 +1313,10 @@ reusify@^1.0.4:
   resolved "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rollup@^2.79.1:
-  version "2.79.1"
-  resolved "https://registry.npmmirror.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
-  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
+rollup@^3.27.1:
+  version "3.29.5"
+  resolved "https://registry.npmmirror.com/rollup/-/rollup-3.29.5.tgz#8a2e477a758b520fb78daf04bca4c522c1da8a54"
+  integrity sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -1345,11 +1378,16 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0":
   version "1.0.2"
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
@@ -1398,6 +1436,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swiper@^11.2.1:
+  version "11.2.7"
+  resolved "https://registry.npmmirror.com/swiper/-/swiper-11.2.7.tgz#9657e467047cf098b6c9a79d1864bc6810d2e4fb"
+  integrity sha512-oPJCwdcjFMw3SoBM7AdB1RJzjT7JaE4Mg7TWceTmJ/i2OtF8L01Ct+5eOf48nG3trgR0wXFekWdfnTdl0eg6Pg==
+
 terser@^5.10.0:
   version "5.27.0"
   resolved "https://registry.npmmirror.com/terser/-/terser-5.27.0.tgz#70108689d9ab25fef61c4e93e808e9fd092bf20c"
@@ -1495,9 +1538,9 @@ unplugin@^1.4.0, unplugin@^1.5.1, unplugin@^1.6.0:
     webpack-virtual-modules "^0.6.1"
 
 vant@^3.6.12:
-  version "3.6.12"
-  resolved "https://registry.npmmirror.com/vant/-/vant-3.6.12.tgz#a46045c74961744f27d5a6ffbc3bed592f0f4d0b"
-  integrity sha512-fLzwhpV0ZPQqxrTx6RU8mJVUqP7DSkpdXNeByKubp+O9vKYGcWRX9wFdEwApyy7qLZLLu+rU1Jw52d6lktPL4w==
+  version "3.6.16"
+  resolved "https://registry.npmmirror.com/vant/-/vant-3.6.16.tgz#7442bff8ca8c481d10c3b0bff5b00ceb9a527cf5"
+  integrity sha512-9pZao0NEeZQ0ZEb6N7SZxtqcdTp24o8IizhZS1G+FtStlXeKOFzCl+Nf1pIWRneQ9Kn+K+mNrfi2eiIZjVVppw==
   dependencies:
     "@vant/icons" "^1.8.0"
     "@vant/popperjs" "^1.2.1"
@@ -1522,7 +1565,7 @@ vite-plugin-compression@^0.5.1:
     debug "^4.3.3"
     fs-extra "^10.0.0"
 
-vite-plugin-html@^3.2.1:
+vite-plugin-html@^3.2.2:
   version "3.2.2"
   resolved "https://registry.npmmirror.com/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz#661834fa09015d3fda48ba694dbaa809396f5f7a"
   integrity sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==
@@ -1540,15 +1583,14 @@ vite-plugin-html@^3.2.1:
     node-html-parser "^5.3.3"
     pathe "^0.2.0"
 
-vite@^3.2.3:
-  version "3.2.8"
-  resolved "https://registry.npmmirror.com/vite/-/vite-3.2.8.tgz#0697e13addf99ed44b838b8462a3a922fdd9d37b"
-  integrity sha512-EtQU16PLIJpAZol2cTLttNP1mX6L0SyI0pgQB1VOoWeQnMSvtiwovV3D6NcjN8CZQWWyESD2v5NGnpz5RvgOZA==
+vite@4.5.10:
+  version "4.5.10"
+  resolved "https://registry.npmmirror.com/vite/-/vite-4.5.10.tgz#fc6823d5347fd171a25ae6379f05b0be700d303e"
+  integrity sha512-f2ueoukYTMI/5kMMT7wW+ol3zL6z6PjN28zYrGKAjnbzXhRXWXPThD3uN6muCp+TbfXaDgGvRuPsg6mwVLaWwQ==
   dependencies:
-    esbuild "^0.15.9"
-    postcss "^8.4.18"
-    resolve "^1.22.1"
-    rollup "^2.79.1"
+    esbuild "^0.18.10"
+    postcss "^8.4.27"
+    rollup "^3.27.1"
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -1559,21 +1601,21 @@ vue-clipboard3@^2.0.0:
   dependencies:
     clipboard "^2.0.6"
 
-vue-demi@>=0.14.5:
-  version "0.14.6"
-  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
-  integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+vue-demi@^0.14.10:
+  version "0.14.10"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
+  integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
 
-vue@^3.2.41:
-  version "3.4.15"
-  resolved "https://registry.npmmirror.com/vue/-/vue-3.4.15.tgz#91f979844ffca9239dff622ba4c79c5d5524b88c"
-  integrity sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==
+vue@^3.4.0:
+  version "3.5.14"
+  resolved "https://registry.npmmirror.com/vue/-/vue-3.5.14.tgz#0ddf16d20cc20adaedfb5e77bca64c488bf5ee27"
+  integrity sha512-LbOm50/vZFG6Mhy6KscQYXZMQ0LMCC/y40HDJPPvGFQ+i/lUH+PJHR6C3assgOQiXdl6tAfsXHbXYVBZZu65ew==
   dependencies:
-    "@vue/compiler-dom" "3.4.15"
-    "@vue/compiler-sfc" "3.4.15"
-    "@vue/runtime-dom" "3.4.15"
-    "@vue/server-renderer" "3.4.15"
-    "@vue/shared" "3.4.15"
+    "@vue/compiler-dom" "3.5.14"
+    "@vue/compiler-sfc" "3.5.14"
+    "@vue/runtime-dom" "3.5.14"
+    "@vue/server-renderer" "3.5.14"
+    "@vue/shared" "3.5.14"
 
 webpack-sources@^3.2.3:
   version "3.2.3"

字体压缩.txt

@@ -1,15 +1,142 @@
-锦鲤花灯：
-多资产、多策略，有望更好在不同市场环境中，实现风险与收益的平衡
-多金多财多好运，好年好景好时光 
 
-宫灯
-坚持长期主义，用耐心积累实力
-花灯璀璨福星照，金银满袋喜气绕
-
-圆灯：
-锚定“绝对收益”目标，追求在震荡市场中提供相对稳定的收益
-花好月圆迎佳节，富贵安康乐绵延
-
-分享配置：
-标题：今夜宜赏灯，来测测你的专属元宵花灯
-摘要：赏花灯，赢惊喜，欢天喜地闹元宵！
+<template>
+    <div class="RulePage" @touchmove.prevent>
+        <div class="rule-container">      <div class="index-agreement">
+          风险提示: 本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
+          class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
+          class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
+      </div>
+            <div class="content">
+                <div class="rule-content">
+                    <div class="rule-text-area wrapper">
+                        <div>
+                        <div class="part">
+                            <div>活动时间：2024年7月31日——8月2日</div>
+                            <div>活动奖励：微信红包</div>
+                        </div>
+                        <div class="part">第{{ questionList[currentId].id }}题
+                            <div>活动攻略：</div>
+                            <div>
+                                1、进入活动参加【好理在手 邂逅清凉一夏】答题，共设计3道题目，全部选择完毕后即可参与抽奖活动；
+                            </div>
+                            <div>2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。</div>
+                        </div>
+                        <div class="part">
+                            <div>领奖说明：</div>
+                            <div>
+                                <span class="blod">1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“清凉一夏”获取兑换链接，进入链接输入兑换码兑换奖品。</span>如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
+                            </div>
+                            <div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
+                            <div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
+                            <div class="part">其他：</div>
+                            <div>
+                                活动期间如遇到任何问题，请在<span class="blod">[平安理财服务号]</span>后台咨询，我们会在一个工作日内回复。
+                            </div>
+                            <div class="part">说明：平安理财有权对活动规则进行解释</div>
+                        </div>
+                        <div class="part">
+                            <div>活动规则：</div>
+                            <div>
+                                1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
+                            </div>
+                            <div>
+                                (1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
+                            </div>
+                            <div>
+                                (2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
+                            </div>
+                            <div>
+                                (3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
+                            </div>
+                            <div>
+                                2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
+                            </div>
+                            <div>
+                                3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
+                            </div>
+                        </div>
+                        <div class="margin-bottom-area"></div>
+                    </div>
+                    </div>
+                </div>
+                <div class="rule-bottom-bg"></div>
+                <div class="rule-arrow"></div>
+                <div class="rule-icon"></div>
+            </div>
+        </div>
+        <div class="rule-cls-btn" @click="hide($event)"></div>
+    </div>
+</template>  
+1234567890,./
+export const data = [
+    {
+        id: 1,
+        question: [
+            '激情夏日温度攀升，理财投资热情高涨。当理财市场有波动、收益上涨，别人劝你搏一搏时，正确的做法是:',
+        ],
+        answer: [
+            {
+                aid: 'A',
+                text: [
+                    '当然all in，我就是热点中心',
+                ],
+                result:'incorrect',
+            },
+            {
+                aid: 'B',
+                text: [
+                    '鸡蛋不放在一个篮子里，样样都来点儿',
+                ],
+                result:'correct',
+            },
+        ],
+        analysis: ['解析：选择B。虽然市场热点可能带来诱人的收益，但理财的基本原则是风险管理。通过将投资分散在不同的理财产品和市场，可以降低单一投资的风险，争取资产增长的机会。']
+    },
+    {
+        id: 2,
+        question: [
+            '2、夏日闲钱早规划，get生活小确幸。长期来看，选择哪类型理财，可以较稳健地进行闲钱进阶？',
+        ],
+        answer: [
+            {
+                aid: 'A',
+                text: [
+                    '较低风险的现金类产品',
+                ],
+                result:'incorrect',
+            },
+            {
+                aid: 'B',
+                text: [
+                    '策略稳健的固收类理财产品',
+                ],
+                result:'correct',
+            },
+        ],
+        analysis: ['解析：选择B。现金类产品具有高流动性的特征，更适合日常流动资金。但在长期限选择中，固收理财拥有较大的投资范围和空间，运用策略提供稳健体验，有效平衡风险，力争增厚收益机会，闲钱再进阶。因此不同的资金用途记得匹配不同产品噢。']
+    },
+    {
+        id: 3,
+        question: [
+            '3、夏天的快乐是多巴胺旅行给的！想要一场说走就走的快乐，平时的旅行备用金该如何准备才好呢？',
+        ],
+        answer: [
+            {
+                aid: 'A',
+                text: [
+                    '购买最短持有期理财产品，享灵活与收益空间',
+                ],
+                result:'correct',
+            },
+            {
+                aid: 'B',
+                text: [
+                    '船到桥头自然直',
+                ],
+                result:'incorrect',
+            },
+        ],
+        analysis: ['解析：选择A。最短持有期理财产品拥有较为灵活的申赎机制，在持有时间超过最短持有的时间要求后，随时可发起赎回，闲置时力争收益机会，用钱时满足你的流动性需求。']
+    },
+]
+abAbB元