完成加载页、首页、答题页逻辑，待处理动画

src/components/Draw.vue

@@ -100,7 +100,7 @@ const hide = (event) => {
       duration: 0.3,
       autoAlpha: 0,
       onComplete: () => {
-        emit("DrawPage", "hide");
+        emit("DrawPage", {action:"hide"});
       },
     });
   });

src/components/Index.vue

@@ -32,26 +32,6 @@ const showRule = (event) => {
   });
 };
 
-const clockAni = () => {
-  gsap.to(".index-clock-h", {
-    duration: 12,
-    rotation: "+=360",
-    repeat: -1,
-    ease: "none",
-  });
-  gsap.to(".index-clock-m", {
-    duration: 8,
-    rotation: "+=360",
-    repeat: -1,
-    ease: "none",
-  });
-  gsap.to(".index-clock-s", {
-    duration: 3,
-    rotation: "+=360",
-    repeat: -1,
-    ease: "none",
-  });
-};
 
 onMounted(() => {
   gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
@@ -75,14 +55,8 @@ onMounted(() => {
     autoAlpha: 0,
     delay: 0.5,
   });
-  gsap.from(".index-tips", {
-    duration: 1,
-    // scale: 0.4,
-    autoAlpha: 0,
-    delay: 0.5,
-  });
 
-  clockAni();
+
 });
 
 const vcNum = ref(false);
@@ -96,20 +70,21 @@ const showVC = () => {
 
 <template>
   <div class="IndexPage" @touchmove.prevent>
-    <div class="index-bg">
-      <div class="index-clock-box">
-        <div class="index-clock-h"></div>
-        <div class="index-clock-m"></div>
-        <div class="index-clock-s"></div>
-        <div class="index-clock-circle"></div>
-      </div>
-    </div>
+    <div class="index-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-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-start-btn" @click="start"></div>
-      <div class="index-tips"> ———本活动测试结果仅供娱乐，不能代替投资者风险承受能力评级结果———</div>
       <div class="index-agreement">
         风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
           class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
@@ -129,67 +104,93 @@ const showVC = () => {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
     @include bg_pos("index/bg.jpg");
-
-    .index-clock-box {
-      @include pos(125px, 125px, 213px, 700px);
-      @include bg_pos("load/clock-bg.png");
-
-      .index-clock-circle {
-        @include pos(13px, 13px, 57px, 55px);
-        @include bg_pos("load/clock-circle.png");
-      }
-
-      .index-clock-s {
-        @include pos(125px, 125px, 0px, 0px);
-        @include bg_pos("load/clock-second.png");
-      }
-
-      .index-clock-m {
-        @include pos(125px, 125px, 0px, 0px);
-        @include bg_pos("load/clock-minute.png");
-      }
-
-      .index-clock-h {
-        @include pos(125px, 125px, 0px, 0px);
-        @include bg_pos("load/clock-hour.png");
-      }
-    }
   }
 
   .index-container {
     @include pos(750px, 1624px, 0px, 50%);
     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{
+      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-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, 269px);
+      @include bg_pos("index/cloud.png");
+    }
+
+    .index-firework{
+      pointer-events: none;
+      @include pos(120px, 120px, 605px, 437px);
+      @include bg_pos("index/firework.png");
+    }
+
+    .index-windows{
+      pointer-events: none;
+      @include pos(743px, 744px, 4px, 440px);
+      @include bg_pos("index/windows.png");
+    }
+
+    .index-pet{
+      pointer-events: none;
+      @include pos(234px, 421px, 353px, 614px);
+      @include bg_pos("index/pet-icon.png");
+    }
+
     .index-title {
       // pointer-events: none;
-      @include pos(632px, 151px, 61px, 285px);
+      @include pos(603px, 167px, 75px, 247px);
       @include bg_pos("index/title.png");
     }
 
     .index-rule-btn {
-      @include pos(168px, 51px, -67px, 474px);
+      @include pos(184px, 49px, -37px, 446px);
       @include bg_pos("index/rule-btn.png");
     }
 
     .index-prize-btn {
-      @include pos(168px, 51px, -67px, 536px);
+      @include pos(184px, 49px, -37px, 515px);
       @include bg_pos("index/prize-btn.png");
     }
 
     .index-start-btn {
-      @include pos(278px, 79px, 226px, 1081px);
+      @include pos(311px, 90px, 220px, 1168px);
       @include bg_pos("index/start-btn.png");
     }
 
     .index-agreement {
-      font-family: "SourceHanSansCN";
+      font-family: "HarmonyOS_Sans_SC_Regular";
       pointer-events: none;
-      @include pos(736px, 182px, 7px, 1219px);
-      background: rgba($color: #f49e6a, $alpha: 0.55);
+      @include pos(736px, 182px, 7px, 1258px);
+      // background: rgba($color: #f49e6a, $alpha: 0.55);
       font-size: 14px;
       text-align: justify;
       letter-spacing: 0.1px;
-      color: #000000;
+      color: #ff8c84;
       padding: 10px;
       box-sizing: border-box;
       border-radius: 10px;
@@ -200,21 +201,11 @@ const showVC = () => {
       }
 
       .orange {
-        color: #ea5404;
+        color: #fdf9de;
         font-weight: 700;
       }
     }
 
-    .index-tips {
-      font-family: "SourceHanSansCN" !important;
-      pointer-events: none;
-      @include pos(750px, 30px, 0px, 1172px);
-      color: #fdedd3;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-    }
   }
 }
 </style>

src/components/Loading.vue

@@ -12,28 +12,8 @@ const userStore = useMainStore();
 
 const loadNum = ref(0);
 
-const entryAni = () => {
-  gsap.to(".clock-h", {
-    duration: 10,
-    rotation: "+=360",
-    repeat: -1,
-    ease: "none",
-  });
-  gsap.to(".clock-m", {
-    duration: 3,
-    rotation: "+=360",
-    repeat: -1,
-    ease: "none",
-  });
-  gsap.to(".clock-s", {
-    duration: 1,
-    rotation: "+=360",
-    repeat: -1,
-    ease: "none",
-  });
-};
 onMounted(() => {
-  entryAni();
+
   Preloader({
     name: "加载页资源",
     imgs: loadImg,
@@ -86,12 +66,7 @@ onMounted(() => {
   <div class="LoadPage" @touchmove.prevent>
     <div class="load-bg"></div>
     <div class="load-container">
-      <div class="clock-box">
-        <div class="clock-h"></div>
-        <div class="clock-m"></div>
-        <div class="clock-s"></div>
-        <div class="clock-circle"></div>
-      </div>
+    <div class="load-icon"></div>
       <div class="load-box">
         <div class="bar"></div>
       </div>
@@ -118,43 +93,25 @@ onMounted(() => {
     @include box(750px, 1180px);
     // transform: translateY(-50%);
 
-    .clock-box {
-      @include pos(125px, 125px, 313px, 299px);
-      @include bg_pos("load/clock-bg.png");
-
-      .clock-circle {
-        @include pos(13px, 13px, 57px, 55px);
-        @include bg_pos("load/clock-circle.png");
-      }
-
-      .clock-s {
-        @include pos(125px, 125px, 0px, 0px);
-        @include bg_pos("load/clock-second.png");
-      }
-
-      .clock-m {
-        @include pos(125px, 125px, 0px, 0px);
-        @include bg_pos("load/clock-minute.png");
-      }
-
-      .clock-h {
-        @include pos(125px, 125px, 0px, 0px);
-        @include bg_pos("load/clock-hour.png");
-      }
+    .load-icon{
+      @include pos(101px, 55px, 325px, 370px);
+      @include bg_pos("load/icon.png");
     }
 
     .load-box {
-      @include pos(512px, 38px, 119px, 450px);
+      @include pos(512px, 35px, 119px, 450px);
       border-style: solid;
       border-width: 2px;
       border-color: #e17c4d;
       border-radius: 20px;
-      overflow: hidden;
+      padding: 2px;
 
       .bar {
-        @include box(10%, 38px);
+        @include box(0%, 26px);
         border-radius: 20px;
-        background: linear-gradient(45deg, #f2733a, #ffd667);
+        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%);
+
       }
     }
 
@@ -169,8 +126,7 @@ onMounted(() => {
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      letter-spacing: 2px;
-      font-style: italic;
+      // letter-spacing: 2px;
     }
 
     .btn {

src/components/Question.vue

@@ -12,18 +12,42 @@ const userStore = useMainStore();
 
 // 当前题目
 const currentId = ref(0); //当前id 0~11
-const questionList = ref(FYShuffle(data)); //随机打乱题库
+const questionList = ref(data); //随机打乱题库
 const answerList = ref([]); // 答案库统计
 const activeId = ref(""); // 当前题目所选答案选项
 const showResultBtn = ref(false);
 // 答题事件
 const answerFn = (item, event) => {
-  console.log('current：', currentId.value);
-  let e = event.target.parentElement.parentElement;
-
+  let e = event.target.parentElement;
+  activeId.value = item.aid;  //更新选中状态
+  console.log('选项', item);
   debounceTap(e, () => {
-    activeId.value = item.aid;  //更新下一题
-    // console.log("答案库", answerList.value);
+    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,
+      });
+    } else {
+      answerList.value[has].aid = item.aid;
+      answerList.value[has].answer = item.text;
+    }
+
+    // 判断是否为最后一题
+    if (currentId.value < questionList.value.length - 1) {
+      currentId.value++
+      activeId.value = ''
+
+    } else {
+      Toast('答题结束')
+      gsap.set('.question-box',{pointerEvents:'none'})
+    }
+
+
+    console.log("答案库", answerList.value);
   });
 };
 
@@ -79,25 +103,6 @@ const showResult = () => {
 
 };
 
-// 上一页函数
-const prevePage = (event) => {
-  let e = event.target;
-  debounceTap(e, () => {
-    if (currentId.value == 1) {
-      gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
-    }
-    if (currentId.value >= 11) {
-      // resultBtnAni.reverse();
-      gsap.set(".answer", { pointerEvents: "initial" });
-    }
-    activeId.value = "";
-    currentId.value--;
-
-    // 查询上一题做的选择
-    console.log('当前题库：', answerList.value[currentId.value]);
-    activeId.value = answerList.value[currentId.value].aid
-  });
-};
 
 
 // 查看结果事件及动画
@@ -110,9 +115,48 @@ onMounted(() => {
 
 <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-container">
+      <div class="container-fan-1"></div>
+      <div class="container-fan-2"></div>
 
-    <Progress :percentage="(currentId + 1) / 12 * 100" pivot-color="#7232dd" :show-pivot="false"
-      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" />
+      <div class="question-box">
+        <!-- 问题序号 -->
+        <div class="qa-number">{{ questionList[currentId].id }}</div>
+        <div class="qa-question-box">
+          <!-- 问题 -->
+          <div class="question">
+            <div class="question-text" v-for="item in questionList[currentId].question" :key="item">
+              {{ item }}
+            </div>
+          </div>
+          <!-- 选项 -->
+          <div class="answer-box">
+            <div class="answer" :class="activeId == item.aid ? 'answer-active' : ''"
+              v-for="item in questionList[currentId].answer" :key="item.aid">
+              <div class="answer-option">{{ item.aid }}</div>
+              <div class="answer-text-box">
+                <div class="answer-text" v-for="a in item.text" :key="a">
+                  {{ a }}
+                </div>
+              </div>
+              <!-- 可点击区域 -->
+              <div class="click-area" @click="answerFn(item, $event)"></div>
+            </div>
+          </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) / 12 * 100" pivot-color="#7232dd" :show-pivot="false"
+      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" /> -->
   </div>
 </template>
 
@@ -122,135 +166,184 @@ onMounted(() => {
   overflow: hidden;
 
   .question-bg {
-    @include pos(750px, 4500px, 0px, 50%);
+    @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
-    background: linear-gradient(135deg, #f6d365, #fda085);
+    @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");
+    }
+
+    .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, 100%, 0px, 50%);
+    @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
     @include flexCen();
 
-    .question-content {
-      @include box(100%, 100%);
-      @include flexCen();
+    .question-lantern-icon {
+      pointer-events: none;
+      @include pos(349px, 443px, 489px, 49px);
+      @include bg_pos('qa/lantern-icon.png');
+    }
 
-      .question {
-        font-family: "alimama";
-        position: relative;
-        @include box(713px, 428px);
-        @include bg_pos("qa/question.png");
-        font-family: "alimama";
-        color: #c6672c;
+    .container-fan-1 {
+      pointer-events: none;
+      @include pos(235px, 574px, 0px, 60px);
+      @include bg_pos("index/fan-1.png");
+    }
 
-        .question-order {
-          @include pos(544px, 75px, 87px, 112px);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 66px;
-          font-weight: 700;
-          line-height: 80px;
-        }
+    .container-fan-2 {
+      pointer-events: none;
+      @include pos(316px, 317px, -205px, 405px);
+      @include bg_pos("index/fan-2.png");
+    }
 
-        .question-text {
-          @include pos(544px, 170px, 87px, 192px);
-          box-sizing: border-box;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 40px;
-          // font-weight: 700;
-          // line-height: 50px;
-          font-family: "alimama";
+    .question-box {
+      @include pos(656px, 913px, 47px, 339px);
+      @include bg_pos("qa/question-box.png");
 
-          .text {
-            width: 90%;
-            display: flex;
-            justify-content: center;
-            align-content: center;
-          }
-        }
+      .qa-number {
+        @include pos(100px, 56px, 278px, 89px);
+        font-size: 40px;
+        font-style: italic;
+        color: #c61a1a;
+        font-weight: 700;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      .answer-box {
-        // display: flex;
-        // flex-direction: column;
-        @include box(750px, 886px);
-        // margin-top: 10px;
-        position: relative;
+      .qa-question-box {
+        @include pos(570px, 620px, 43px, 194px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
 
-        .answer {
-          @include box(481px, 471px);
-          position: absolute;
-          //   font-family: "alimama";
-          color: #c6672c;
+        // 问题样式
+        .question {
+          display: flex;
+          flex-direction: column;
 
-          .answer-bg {
-            @include pos(481px, 471px, 0px, 0px);
-            @include bg_pos("qa/answer-box-1.png");
-            pointer-events: none;
-          }
-
-          .active {
-            @include bg_pos("qa/answer-box-2.png");
-
-            //   color: rgb(255, 255, 255);
-          }
-
-          .answer-text {
-            // @include pos(367px, 357px, 0px, 0px);
-            position: relative;
-            left: 58px;
-            top: 58px;
-            @include box(367px, 357px);
-            padding: 10px;
-            border-radius: 50%;
-            font-family: "SourceHanSansCNMedium";
+          .question-text {
+            width: 100%;
+            font-family: 'DouyinSansBold';
             font-size: 35px;
-            font-weight: 700;
-            border-radius: 50%;
+            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);
+            // -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0);
+          }
+        }
 
-            .text {
-              @include box(367px, 357px);
-              padding: 0px 20px;
-              box-sizing: border-box;
-              position: absolute;
-              text-align: center;
+        // 选项样式
+        .answer-box {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          // 选中状态
+          .answer-active {
+            border: 2px 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;
+            }
+
+
+          }
+
+          .answer {
+            @include box(476px, 92px);
+            position: relative;
+            border-radius: 47.5px;
+            border: 2px solid rgb(255, 225, 172);
+            margin-bottom: 35px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            .click-area {
+              @include pos(476px, 92px, 0px, 0px);
+              border-radius: 47.5px;
+            }
+
+
+            .answer-option {
+              @include box(92px, 77px);
+              border-radius: 38.5px;
+              background-color: rgb(233, 197, 143);
+              font-size: 52px;
               display: flex;
               justify-content: center;
               align-items: center;
-              padding-bottom: 20px;
+              color: #cc1615;
+              font-weight: 700;
+              margin-left: 5px;
+            }
+
+            .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 {
+                width: 100%;
+              }
+
             }
           }
+
+
+
+
+
         }
 
-        .answer:nth-child(1) {
-          top: 0px;
-          left: 6px;
-        }
-
-        .answer:nth-child(2) {
-          top: 414px;
-          left: 258px;
-        }
-      }
-
-      .prev-btn {
-        @include pos(148px, 61px, 50px, 600px);
-        @include bg_pos("qa/prev-btn.png");
-        visibility: hidden;
-      }
-
-      .showResult-btn {
-        @include box(478px, 246px);
-        position: fixed;
-        left: 149px;
-        bottom: 0px;
-        @include bg_pos("qa/showResult-btn.png");
       }
     }
+
+    .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");
+    }
+
   }
 }
 </style>

src/components/Result.vue

@@ -326,17 +326,14 @@ const hideShare = () => {
         .mbti-title {
             @include pos(600px, 120px, 90px, 418px);
             font-size: 80px;
-            font-family: "HYYaKuHei";
             text-align: center;
             text-shadow: 3.109px 2.517px 4px rgba(215, 70, 56, 0.47);
             text-stroke: 1px #ffffff;
             -webkit-text-stroke: 1px #ffffff;
-            // -webkit-transform: matrix(2.63538838101382, -0.15627262233171, 0.15650043026188, 2.63155221026798, 0, 0);
             font-weight: bolder;
             transform: rotate(-4deg);
             display: flex;
 
-            span {}
         }
 
         .mbti-des-box {
@@ -344,7 +341,6 @@ const hideShare = () => {
             display: flex;
             flex-direction: column;
             justify-content: space-around;
-            font-family: "fzzy";
 
             .des {
                 color: #af6f49;
@@ -358,7 +354,6 @@ const hideShare = () => {
             display: flex;
             flex-direction: column;
             justify-content: space-around;
-            font-family: "fzcy";
 
             .blessings {
                 font-size: 50px;
@@ -373,7 +368,6 @@ const hideShare = () => {
 
         .mbti-product {
             @include pos(630px, 140px, 134px, 948px);
-            font-family: "fzcy";
 
             .product {
                 font-size: 45px;
@@ -485,7 +479,6 @@ const hideShare = () => {
 
     .save-tips {
         font-size: 20px;
-        font-family: "fzcy";
         line-height: 20px;
         margin-top: 20px;
         color: #fff;
@@ -534,7 +527,6 @@ const hideShare = () => {
     }
 
     .tips-text {
-        font-family: "fzcy";
         font-size: 25px;
         @include pos(750px, 100px, 0px, 220px);
         color: #ffffff;

src/components/Rule.vue

@@ -13,6 +13,7 @@ const hide = (event) => {
 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  });
 });
 </script>
 
@@ -23,20 +24,20 @@ onMounted(() => {
                 <div class="rule-content">
                     <div class="rule-text-area">
                         <div class="part">
-                            <div>【活动时间】：2024年2月4日——2月8日</div>
-                            <div>【活动奖励】：微信红包</div>
+                            <div>活动时间：2024年2月23日——2月25日</div>
+                            <div>活动奖励：微信红包</div>
                         </div>
                         <div class="part">
-                            <div>【活动攻略】：</div>
+                            <div>活动攻略：</div>
                             <div>
-                                1、进入活动参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
+                                1、进入活动参加【元宵赏灯会，测测你的专属花灯！】共设计3道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
                             </div>
                             <div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
                         </div>
                         <div class="part">
-                            <div>【领奖说明】：</div>
+                            <div>领奖说明：</div>
                             <div>
-                                1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“2024”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
+                                1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“元宵快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
                             </div>
                             <div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
                             <div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
@@ -44,20 +45,21 @@ onMounted(() => {
                             <div>
                                 活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
                             </div>
-                            <div class="part">说明：</div>
-                            <div>平安理财有权对活动规则进行解释</div>
-                            <div class="part">【活动规则】：</div>
+                            <div class="part">说明：平安理财有权对活动规则进行解释</div>
+                        </div>
+                        <div class="part">
+                            <div>活动规则：</div>
                             <div>
                                 1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
                             </div>
                             <div>
-                                (1)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
+                                (1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
                             </div>
                             <div>
-                                (2)同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
+                                (2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
                             </div>
                             <div>
-                                (3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
+                                (3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
                             </div>
                             <div>
                                 2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
@@ -66,13 +68,16 @@ onMounted(() => {
                                 3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
                             </div>
                         </div>
+                            
+                        <div class="margin-bottom-area"></div>
                     </div>
                 </div>
-                <div class="rule-cls-btn" @click="hide($event)"></div>
+                <div class="rule-bottom-bg"></div>
                 <div class="rule-arrow"></div>
+                <div class="rule-icon"></div>
             </div>
-            <div class="rule-caidai"></div>
         </div>
+        <div class="rule-cls-btn" @click="hide($event)"></div>
     </div>
 </template>  
 
@@ -84,48 +89,65 @@ onMounted(() => {
 
     .rule-container {
         position: relative;
-        @include box(492px, 712px);
+        @include box(612px, 794px);
+        overflow: hidden;
 
         .content {
             .rule-content {
-                @include box(490px, 709px);
+                @include box(612px, 794px);
                 @include bg_pos("rule/rule-box.png");
                 position: relative;
+                overflow: hidden;
 
                 .rule-text-area {
-                    @include pos(405px, 523px, 41px, 101px);
+                    @include pos(612px, 676px, 0px, 101px);
                     // background-color: #000000;
                     overflow: hidden;
                     overflow-y: scroll;
+                    padding: 0px 20px;
+                    
 
                     .part {
-                        font-family: "fzcy";
-                        color: #ac4d31;
+                        color: #a31b15;
                         font-size: 20px;
-                        line-height: 30px;
+                        line-height: 35px;
                         margin-top: 30px;
                         text-align: justify;
                         padding: 0 10px;
+                        font-family: 'HarmonyOS_Sans_SC_Regular';
+                    }
+
+                    .margin-bottom-area{
+                        margin-bottom: 100px;
                     }
                 }
             }
 
             .rule-arrow {
-                @include pos(38px, 23px, 224px, 641px);
+                @include pos(149px, 84px, 231px, 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%);
+            }
+            .rule-icon {
+                @include pos(118px, 146px, 511px, 25px);
+                @include bg_pos("rule/icon.png");
+                pointer-events: none;
             }
             
-            .rule-cls-btn {
-                @include pos(48px, 48px, 441px, -76px);
-                @include bg_pos("rule/cls-btn.png");
-            }
         }
 
-        .rule-caidai {
-            @include pos(135px, 185px, 357px, 557px);
-            @include bg_pos("rule/caidai.png");
-            pointer-events: none;
-        }
+    }
+
+    .rule-cls-btn {
+        @include box(43px, 43px);
+        @include bg_pos("rule/cls-btn.png");
+        margin-top: 40px;
     }
 }
 </style>

src/data/imgList.js

@@ -1,10 +1,6 @@
 
 const load = [
-    'load/clock-second.png',
-    'load/clock-minute.png',
-    'load/clock-hour.png',
-    'load/clock-circle.png',
-    'load/clock-bg.png',
+    'load/icon.png',
     'load/bg.jpg',
 ]
 

src/data/index.js

@@ -1,205 +1,72 @@
 export const data = [
     {
         id: 1,
-        type: 'mbti',
-        question: '当朋友约你外出，你会？',
+        question: [
+            '元宵幸福是来源于阖家团圆',
+            '你的投资“幸福感”从何而来？',
+        ],
         answer: [
             {
                 aid: 'A',
-                text: '询问计划具体时间段做什么',
-                secore: 'J',
+                text: [
+                    '低波动低回撤',
+                    '追求稳稳的幸福',
+                ],
             },
             {
                 aid: 'B',
-                text: '说走就走',
-                secore: 'P',
+                text: [
+                    '流动性好',
+                    '存取超方便',
+                ],
             },
         ],
     },
     {
         id: 2,
-        type: 'mbti',
-        question: '你更喜欢什么样的社交生活？',
+        question: [
+            '“投资就像猜灯谜，不能碰运气',
+            '学会评估才是关键”',
+            '你倾向于什么方式评估？',
+        ],
         answer: [
             {
                 aid: 'A',
-                text: '独处回血爽歪歪',
-                secore: 'I',
+                text: [
+                    '根据详细的市场报告',
+                    '及历史数据具体分析',
+                ],
             },
             {
                 aid: 'B',
-                text: '呼朋唤友快乐多',
-                secore: 'E',
+                text: [
+                    '根据整体市场趋势',
+                    '进行未来预测',
+                ],
             },
         ],
     },
     {
         id: 3,
-        type: 'mbti',
-        question: '当你想要做一个计划时，你会？',
-        answer: [
-            {
-                aid: 'A',
-                text: '收集尽量多的信息',
-                secore: 'S',
-            },
-            {
-                aid: 'B',
-                text: '偏向依靠经验',
-                secore: 'N',
-            },
+        question: [
+            '元宵是新年开运吉日',
+            '此时开启一项新投资',
+            '你更追求？',
         ],
-    },
-    {
-        id: 4,
-        type: 'mbti',
-        question: '得知朋友因心情不好买了很多饼干，你第一想到的是？',
         answer: [
             {
                 aid: 'A',
-                text: '买了多少？一个人能吃完吗',
-                secore: 'T',
+                text: [
+                    '尽可能保证本金安全',
+                    '追求“落袋为安”',
+                ],
             },
             {
                 aid: 'B',
-                text: '为什么心情不好呢',
-                secore: 'F',
-            },
-        ],
-    },
-    {
-        id: 5,
-        type: 'lc',
-        question: '当你考虑投资一个新的金融产品时，你更倾向于？',
-        answer: [
-            {
-                aid: 'A',
-                text: '与朋友、同事或专业顾问讨论， 通过外部交流获得信息和建议',
-                secore: 'E',
-            },
-            {
-                aid: 'B',
-                text: '独立研究，通过阅读、在线课程和个人分析来形成决策',
-                secore: 'I',
-            },
-        ],
-    },
-    {
-        id: 6,
-        type: 'lc',
-        question: '当评估一项投资机会时，你更倾向于？',
-        answer: [
-            {
-                aid: 'A',
-                text: '依赖详细的市场报告、历史数据和具体分析',
-                secore: 'S',
-            },
-            {
-                aid: 'B',
-                text: '依赖整体市场趋势、未来预测和直觉感受 ',
-                secore: 'N',
-            },
-        ],
-    },
-    {
-        id: 7,
-        type: 'lc',
-        question: '在选择一个投资合伙人时，你更看重？',
-        answer: [
-            {
-                aid: 'A',
-                text: '他们的专业能力、以往的业绩和逻辑决策过程',
-                secore: 'T',
-            },
-            {
-                aid: 'B',
-                text: '他们的个人价值观、信任度和与你的情感共鸣',
-                secore: 'F',
-            },
-        ],
-    },
-    {
-        id: 8,
-        type: 'lc',
-        question: '当面对投资市场的不确定性和变化时，你更倾向于？',
-        answer: [
-            {
-                aid: 'A',
-                text: '坚持你的投资计划和策略，不轻易改变已经制定的计划',
-                secore: 'J',
-            },
-            {
-                aid: 'B',
-                text: '保持灵活性，根据市场的最新变化调整你的投资策略',
-                secore: 'P',
-            },
-        ],
-    },
-    {
-        id: 9,
-        type: 'lc',
-        question: '在做某项决定时，你认为比较重要的是？',
-        answer: [
-            {
-                aid: 'A',
-                text: '根据实际情况衡量考虑',
-                secore: 'J',
-            },
-            {
-                aid: 'B',
-                text: '考虑他人的感受和意见',
-                secore: 'P',
-            },
-        ],
-    },
-    {
-        id: 10,
-        type: 'mbti',
-        question: '你认为别人一般会？',
-        answer: [
-            {
-                aid: 'A',
-                text: '花很长时间才认识你',
-                secore: 'I',
-            },
-            {
-                aid: 'B',
-                text: '很短的时间便了解你',
-                secore: 'E',
-            },
-        ],
-    },
-    {
-        id: 11,
-        type: 'mbti',
-        question: '哪些人会更吸引你？',
-        answer: [
-            {
-                aid: 'A',
-                text: '一个思想敏捷及非常聪颖的人',
-                secore: 'N',
-            },
-            {
-                aid: 'B',
-                text: '实事求是，具有丰富常识的人',
-                secore: 'S',
-            },
-        ],
-    },
-    {
-        id: 12,
-        type: 'mbti',
-        question: '你是否经常让',
-        answer: [
-            {
-                aid: 'A',
-                text: '你的情感支配你的理智',
-                secore: 'F',
-            },
-            {
-                aid: 'B',
-                text: '你的理智主宰你的情感',
-                secore: 'T',
+                text: [
+                    '产生较多的收益',
+                    '可以承担一定的投资风险',
+                ],
             },
         ],
     },

src/page/Home/App.vue

@@ -57,7 +57,7 @@ const indexFn = (item) => {
   }
 };
 
-const showQuestion = ref(false);
+const showQuestion = ref(true);
 const questionFn = (item) => {
   if (item.action == "hide") {
     showQuestion.value = false;
@@ -211,7 +211,7 @@ onMounted(() => {
       });
     }
   } else {
-    showLoad.value = true;
+    // showLoad.value = true;
     createBGM();
   }
 });

src/store/index.js

@@ -7,7 +7,7 @@ export const useMainStore = defineStore("counter", {
             hasDraw: true, //是否有抽奖机会
             token: '',
             MBTI: 'ESFJ',    //测试结果
-            hasPrize: false,  //是否有奖品
+            hasPrize: true,  //是否有奖品
             prizeCode: 'oggSVMbeLgSK', //兑换码
             prizeMoney: '8.88', //金额
             drawKey: '',

src/styles/global.scss

@@ -44,37 +44,18 @@ body {
   /* -webkit-user-select: none;*/
 }
 
-@font-face {
-  font-family: "alimama";
-  src: url(@/assets/font/AlimamaShuHeiTi.ttf) format("truetype");
-}
+
+
 
 @font-face {
-  font-family: "HYYakuHei";
-  src: url(@/assets/font/HYYakuHei-85W.ttf) format("truetype");
+  font-family: "HarmonyOS_Sans_SC_Regular";
+  src: url(@/assets/font/HarmonyOS_Sans_SC_Regular.ttf) format("truetype");
 }
-
 @font-face {
-  font-family: "fzcy";
-  src: url(@/assets/font/fzcy.ttf) format("truetype");
+  font-family: "DouyinSansBold";
+  src: url(@/assets/font/DouyinSansBold.otf) format("OpenType");
 }
 
-@font-face {
-  font-family: "fzzy";
-  src: url(@/assets/font/fzzy.ttf) format("truetype");
-}
-
-@font-face {
-  font-family: "SourceHanSansCN";
-  src: url(@/assets/font/SourceHanSansCN-Regular.ttf) format("truetype");
-}
-
-@font-face {
-  font-family: "SourceHanSansCNMedium";
-  src: url(@/assets/font/SourceHanSansCNMedium.ttf) format("truetype");
-}
-SourceHanSansCN Medium
-
 * {
   padding: 0;
   margin: 0;