完成加载页、首页、选择页切图

src/components/Index.vue

@@ -36,30 +36,29 @@ 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-paper", { duration: 1, y: 20, autoAlpha: 0, delay: 0.3, });
+  gsap.from(".index-card-1", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.5, });
+  gsap.from(".index-card-2", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.7, });
+  gsap.from(".index-card-3", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.5, });
+  gsap.from(".index-card-4", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.7, });
+  gsap.from(".index-card-5", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.5, });
   gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0, delay: 1 });
-  gsap.from(".index-sub-title", { duration: 1, scale: 0, autoAlpha: 0, delay: 1.2 });
-  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-firework", { duration: 1, scale: 0, autoAlpha: 0, delay: 0.3 });
-  gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0, delay: 0.75 });
-  gsap.from(".index-gift", { duration: 1, y: 50, autoAlpha: 0, delay: 0.75 });
-  gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0, delay: 0.75 });
+  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-megaphone", { duration: 1, x: 140, 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 });
+  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,
@@ -67,14 +66,7 @@ onMounted(() => {
     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' })
-      gsap.to('.index-gift', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
-      gsap.to('.index-start-btn', { duration: 1, scale: '0.85', repeat: -1, yoyo: true, ease: 'bounce.out' })
+      gsap.to('.index-start-btn', { duration: 1, scale: '0.95', repeat: -1, yoyo: true, ease: 'bounce.out' })
     }
   });
 
@@ -94,27 +86,32 @@ 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-gift"></div>
-      <div class="index-firework"></div>
-      <div class="index-bottom-bg"></div>
-      <!-- <div class="index-cloud"></div> -->
-      <div class="index-windows"></div>
-      <div class="index-pet"></div>
+      <div class="index-paper">
         <div class="index-title" @click="showVC"></div>
-      <div class="index-sub-title"></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-card-1"></div>
+        <div class="index-card-2"></div>
+        <div class="index-card-3"></div>
+        <div class="index-card-4"></div>
+        <div class="index-card-5"></div>
+        <div class="index-line"></div>
+        <div class="index-text"></div>
+      </div>
+      <div class="index-megaphone"></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>金融消费者不得利用金融产品和服务从事违法活动。
+        <div class="tips">数据来源：平安理财，数据截至2025年4月11日，产品历史业绩不代表未来表现</div>
+        <span>风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。</span>
+        <span class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>
+        <span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。</span>
+        <span class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
+          class="orange">理财非存款，产品有风险，投资须谨慎。</span>
+        <span>
+          金融消费者不得利用金融产品和服务从事违法活动。
+        </span>
       </div>
     </div>
   </div>
@@ -124,7 +121,7 @@ const showVC = () => {
 .IndexPage {
   @include pos(100%, 100vh, 0px, 0px);
   overflow: hidden;
-  background: linear-gradient(135deg, #a11b15, #f80c00);
+  background: linear-gradient(135deg, #d6d1ca, #e5dccf);
 
   .index-bg {
     @include pos(750px, 1624px, 0px, 50%);
@@ -136,23 +133,6 @@ const showVC = () => {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
 
-    .index-bottom-bg {
-      pointer-events: none;
-      @include pos(750px, 549px, 0px, 1075px);
-      @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-logo {
       pointer-events: none;
@@ -160,95 +140,115 @@ const showVC = () => {
       @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-gift {
-      pointer-events: none;
-      @include pos(169px, 172px, 16px, 1004px);
-      @include bg_pos("index/gift-icon.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(378px, 452px, 187px, 614px);
-      @include bg_pos("index/pet-icon.png");
-    }
+    .index-paper {
+      @include pos(706px, 777px, 19px, 394px);
+      @include bg_pos("index/paper.png");
 
       .index-title {
         // pointer-events: none;
-      @include pos(528px, 198px, 111px, 231px);
+        @include pos(611px, 233px, 59px, -56px);
         @include bg_pos("index/title.png");
       }
 
-    .index-sub-title {
-      pointer-events: none;
-      @include pos(200px, 130px, 517px, 472px);
-      @include bg_pos("index/sub-title.png");
+      .index-time {
+        @include pos(385px, 70px, 257px, 161px);
+        @include bg_pos("index/time.png");
       }
 
-    .index-firework {
-      pointer-events: none;
-      @include pos(95px, 95px, -38px, 889px);
-      @include bg_pos("index/firework.png");
+      .index-card-1 {
+        @include pos(207px, 182px, 45px, 194px);
+        @include bg_pos("index/card-1.png");
+      }
+
+      .index-card-2 {
+        @include pos(227px, 159px, 275px, 260px);
+        @include bg_pos("index/card-2.png");
+      }
+
+      .index-card-3 {
+        @include pos(208px, 180px, 496px, 237px);
+        @include bg_pos("index/card-3.png");
+      }
+
+      .index-card-4 {
+        @include pos(204px, 168px, 77px, 460px);
+        @include bg_pos("index/card-4.png");
+      }
+
+      .index-card-5 {
+        @include pos(215px, 162px, 358px, 524px);
+        @include bg_pos("index/card-5.png");
+      }
+
+      .index-text {
+        @include pos(325px, 74px, 307px, 448px);
+        @include bg_pos("index/text.png");
+      }
+
+      .index-line {
+        @include pos(661px, 359px, 22px, 346px);
+        @include bg_pos("index/line.png");
+      }
+    }
+
+
+    .index-megaphone {
+      @include pos(104px, 113px, 646px, 540px);
+      @include bg_pos("index/megaphone.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(319px, 93px, 241px, 1169px);
-      @include bg_pos("index/start-btn.png");
+      @include pos(339px, 117px, 203px, 1077px);
+      @include bg_pos("index/btn.png");
     }
 
     .index-agreement {
       font-family: "HarmonyOS_Sans_SC_Regular";
       pointer-events: none;
       @include pos(736px, 182px, 7px, 1258px);
-      // background: rgba($color: #f49e6a, $alpha: 0.55);
       font-size: 14px;
       text-align: justify;
       letter-spacing: 0.1px;
-      color: #ff8c84;
+      color: #815e3c;
       padding: 10px;
       box-sizing: border-box;
       border-radius: 10px;
       line-height: 20px;
 
+      .tips {
+        text-align: center;
+        margin: 10px;
+        color: #ab7133;
+      }
+
       .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,7 @@ onMounted(() => {
   .load-bg {
     @include pos(750px, 100%, 0px, 50%);
     transform: translateY(-50%);
-    @include bg_pos("load/bg.jpg");
+    @include bg_pos("index/bg.jpg");
   }
 
   .load-container {
@@ -93,40 +94,48 @@ onMounted(() => {
     @include box(750px, 1180px);
     // transform: translateY(-50%);
 
-    .load-icon{
-      @include pos(101px, 55px, 325px, 370px);
+    .load-icon {
+      @include pos(363px, 136px, 335px, 320px);
       @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 bg_pos("load/icon-2.png");
+
+      @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/Question.vue

@@ -7,7 +7,7 @@ import { useMainStore } from "@/store";
 import { subAnswer } from "@/api";
 
 // 页面配置初始化
-const emit = defineEmits(["hide", "showResult","QuestionPage"]);
+const emit = defineEmits(["hide", "showResult", "QuestionPage"]);
 const userStore = useMainStore();
 
 const props = defineProps({
@@ -33,7 +33,6 @@ const answerFn = (item, event) => {
   // console.log('当前题目：', currentId.value + 1);
 
   debounceTap(e, () => {
-    gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
     gsap.set('.answer-box', { pointerEvents: 'none' })
     isChecked.value = true
     checkedOption.value = item.aid
@@ -110,7 +109,6 @@ const viewResult = (event) => {
 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' })
 
 });
 </script>
@@ -122,45 +120,32 @@ onMounted(() => {
 
       <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 class="question-tips">打一个字</div>
           </div>
           <!-- 选项 -->
           <div class="answer-box">
             <div class="answer"
-            :class="[(isChecked) ? item.result + '-bg' : '', checkedOption==item.aid ? 'checked':'no-checked']"
+              :class="[(isChecked) ? item.result + '-bg' : '', checkedOption == item.aid ? 'checked' : 'no-checked']"
               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 class="answer-text">
+                  {{ item.aid }}.{{ item.text }}
                 </div>
               </div>
-              <div class="option-tips">
-                <div :class="item.result"></div>
-              </div>
               <!-- 可点击区域 -->
               <div class="click-area" @click="answerFn(item, $event)"></div>
             </div>
           </div>
-          <!-- 解析 -->
-          <div class="analysis">
-            <div v-for="(li, index) in questionList[currentId].analysis" :key="li">
-              <span class="analysis-tips" v-if="index == 0">提示:</span>
-              <span v-html="li"></span>
-            </div>
-          </div>
+          <div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">{{ t }}</div>
+
           <div class="return-btn" @click="nextQuestion($event)"></div>
           <div class="create-btn" @click="viewResult($event)"></div>
         </div>
-        <div class="answer-larnten"></div>
-        <div class="answer-baozhu"></div>
-
       </div>
       <div class="question-gold-icon-1"></div>
     </div>
@@ -175,7 +160,7 @@ onMounted(() => {
   .question-bg {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
-    background-color: rgba($color: #000000, $alpha: 0.6);
+    background-color: rgba($color: #000000, $alpha: 0.3);
   }
 
 
@@ -192,35 +177,12 @@ onMounted(() => {
 
 
     .question-box {
-      @include pos(616px, 873px, 68px, 350px);
-      @include bg_pos("qa/question-box.png");
+      @include pos(721px, 857px, 20px, 340px);
+      @include bg_pos("qa/paper.png");
 
 
-      .answer-larnten {
-        @include pos(310px, 526px, -120px, -120px);
-        @include bg_pos('qa/lantern-icon.png');
-        pointer-events: none
-      }
-
-      .answer-baozhu {
-        @include pos(145px, 167px, 507px, 725px);
-        @include bg_pos('qa/baozhu.png');
-        pointer-events: none
-      }
-
-      .qa-number {
-        @include pos(100px, 56px, 255px, 79px);
-        font-size: 40px;
-        font-style: italic;
-        color: #c61a1a;
-        font-weight: 700;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
       .qa-question-box {
-        @include pos(570px, 700px, 22px, 194px);
+        @include pos(563px, 660px, 74px, 126px);
         display: flex;
         flex-direction: column;
         // justify-content: space-around;
@@ -229,32 +191,19 @@ onMounted(() => {
 
         // 问题样式
         .question {
-          display: flex;
-          flex-direction: column;
-          // margin-bottom: 10px;
-          height: 270px;
-          justify-content: center;
 
           .question-text {
             width: 100%;
-            font-family: 'DouyinSansBold';
-            font-size: 35px;
-            color: rgb(255, 255, 255);
-            text-align: center;
+            font-family: 'HarmonyOS_Sans_SC_Regular';
+            font-size: 34px;
+            color: #9e4b00;
+
             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);
-          }
+
         }
 
         // 选项样式
@@ -262,75 +211,53 @@ onMounted(() => {
           display: flex;
           flex-direction: column;
           align-items: center;
-          justify-content: space-between;
+          justify-content: space-around;
           height: 200px;
 
-
-
-
           // 选中状态
           .checked {
             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%);
+            background-color: #d42122;
 
             .answer-option {
               color: #96100f;
             }
 
             .answer-text-box {
-              color: #96100f !important;
+              color: #fff2b9 !important;
             }
 
           }
 
           .no-checked {
-            // 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);
-
-            box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85),inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
-            background-image: -webkit-linear-gradient( 177deg, rgb(195,59,22) 0%, rgb(209,84,51) 100%);
-
-
-
+            background-color: #fff2b9;
             .answer-option {
-              color: #ffe2ad;
+              color: #9e4b00;
             }
 
             .answer-text-box {
-              color: #ffe2ad !important;
+              color: #9e4b00 !important;
             }
 
           }
 
-          .checked{
-
-          }
-
-
-
           .answer {
-            @include box(350px, 92px);
-
+            @include box(350px, 65px);
             position: relative;
-            border-radius: 47.5px;
-            // border: 2px solid rgb(255, 225, 172);
-            // margin-bottom: 35px;
-            justify-content: space-between;
+            border-radius: 32.5px;
             display: flex;
-            flex-direction: row;
             justify-content: space-around;
-            align-items: center;
+            border: 1px solid #fff;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 
             .click-area {
-              @include pos(350px, 92px, 0px, 0px);
-              border-radius: 47.5px;
+              @include pos(350px, 65px, 0px, 0px);
+              border-radius: 32.5px;
             }
 
 
             .option-tips {
               @include box(60px, 60px);
-              visibility: hidden;
 
               .correct {
                 @include box(100%, 100%);
@@ -369,31 +296,20 @@ onMounted(() => {
 
         }
 
-        // 解析样式
-        .analysis {
-          // visibility: hidden;
-          width: 95%;
+
+        .question-tips {
+          font-size: 25px;
+          width: 100%;
           font-family: 'HarmonyOS_Sans_SC_Regular';
-          font-size: 20px;
-          color: #ffffff;
+          color: #ab7133;
           text-align: center;
-          height: 100px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
-
-          .analysis-tips {
-            background-color: rgb(175, 13, 12);
-            padding: 5px 10px;
-            margin-right: 3px;
-
-          }
+          padding: 10px;
         }
 
+
         .return-btn {
           @include box(246px, 73px);
-          @include bg_pos("qa/go-back.png");
+          @include bg_pos("rule/cls-btn.png");
           display: none;
 
         }
@@ -407,11 +323,6 @@ onMounted(() => {
       }
     }
 
-    .question-gold-icon-1 {
-      pointer-events: none;
-      @include pos(135px, 128px, 604px, 773px);
-      @include bg_pos("qa/gold-icon.png");
-    }
 
 
 

src/components/QuestionList.vue

@@ -2,32 +2,20 @@
     <div class="QuestionList">
         <div class="question-list-bg"></div>
         <div class="question-list-container">
-            <div class="ql--top-icon-1"></div>
-            <div class="ql--top-icon-3"></div>
-            <div class="ql--top-icon-2"></div>
-            <div class="ql--bottom-icon-2"></div>
-            <div class="ql--bottom-icon-1"></div>
-            <div class="ql--bottom-gift-2"></div>
-            <div class="ql--bottom-gift-1"></div>
-            <div class="ql-select-text">
-                <div class="select-text">选择一盏灯你喜欢的花灯</div>
-                <div class="select-text">开始猜谜吧</div>
-            </div>
+            <div class="ql-logo"></div>
             <div class="ql-swiper-box">
-                <div class="larnten-box-firework"></div>
-                <div class="larnten-box"></div>
-                <swiper class="larnten-swiper" :slides-per-view="1" :space-between="30" navigation :loop="true">
-                    <swiper-slide v-for="item in 11"
+                <swiper class="card-swiper" :slides-per-view="1" :space-between="30" navigation :loop="true">
+                    <swiper-slide v-for="item in 3"
                         :style="{ width: '100%', display: 'flex', justifyContent: 'center', }">
-                        <div class="larnten-slide" :class="'larnten-slide-' + item">
-                            <img class="larnten-img" :class="'larnten-img-' + item" :src="getLarntenImg(item)" alt=""
+                        <div class="card-slide" :class="'card-slide-' + item">
+                            <img class="card-img" :class="'card-img-' + item" :src="getLarntenImg(item)" alt=""
                                 srcset="">
                         </div>
                     </swiper-slide>
                 </swiper>
             </div>
+            <div class="ql-icon"></div>
             <div class="ql-start-btn" @click="onShowQuestion($event)"></div>
-            <div class="ql-bottom-bg"></div>
         </div>
     </div>
     <Question v-if="showQuestion" :question-id="questionId" @showResult="onShowResult" @hide="showQuestion = false" />
@@ -45,22 +33,20 @@ import gsap from "gsap"
 
 const emit = defineEmits(['QuestionList', "showResult"]);
 
-const showQuestion = ref(false)
+const showQuestion = ref(true)
 const questionId = ref(1)
 
 // 获取灯笼图片
 function getLarntenImg(item) {
-    return new URL(`../assets/images/question-list/larnten-${item}.png`, import.meta.url).href
+    return new URL(`../assets/images/question-list/card-${item}.png`, import.meta.url).href
 }
 
 
 const onShowQuestion = (event) => {
     let e = event.target;
-
-
     debounceTap(e, () => {
         // 获取当前选中灯笼的序号 1-11
-        const swiper = document.querySelector('.larnten-swiper').swiper;
+        const swiper = document.querySelector('.card-swiper').swiper;
         // swiper开启了loop
         const activeIndex = swiper.realIndex + 1;
         console.log('activeIndex', activeIndex);
@@ -81,88 +67,10 @@ const showPoster = () => {
         duration: 0.3,
         autoAlpha: 1,
     });
-    gsap.from(".ql-select-text", {
-        duration: 0.7,
-        scale: 1.2,
-        autoAlpha: 0,
-    });
-    gsap.from(".ql-swiper-box", {
-        duration: 0.7,
-        scale: 0.6,
-        autoAlpha: 0,
-    });
-    gsap.from(".ql--top-icon-1", {
-        duration: 0.7,
-        scale: 0.7,
-        autoAlpha: 0,
-        delay: 0.3
-    });
-    gsap.from(".ql--top-icon-2", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay: 0.5
-    });
-    gsap.from(".ql--top-icon-3", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay: 0.7
-    });
-    gsap.from(".ql--bottom-gift-1", {
-        duration: 0.7,
-        y: 30,
-        autoAlpha: 0,
-        delay: 0.7
-    });
-    gsap.from(".ql--bottom-gift-2", {
-        duration: 0.7,
-        x: -50,
-        autoAlpha: 0,
-        delay: 0.5
-    });
-    gsap.from(".ql--bottom-icon-1", {
-        duration: 0.7,
-        y: 30,
-        autoAlpha: 0,
-        delay: 0.5
-    });
-    gsap.from(".ql-start-btn", {
-        duration: 0.7,
-        scale: 0,
-        autoAlpha: 0,
-        delay: 0.7,
-    });
-    gsap.from(".ql-bottom-bg", {
-        duration: 0.7,
-        y: 130,
-        autoAlpha: 0,
-        delay: 0.2,
-    });
-    gsap.from(".ql--bottom-icon-2", {
-        duration: 0.7,
-        y: 30,
-        autoAlpha: 0,
-        delay: 0.7,
-        onComplete: () => {
-            // gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
-            gsap.to('.ql--top-icon-1', { duration: 2, y: '-=30', repeat: -1, yoyo: true, ease: 'none' })
-            gsap.to('.ql--top-icon-3', { duration: 1.5, x: '-=20', repeat: -1, yoyo: true, ease: 'none' })
-            gsap.to('.ql--top-icon-2', { duration: 1.5, y: '+=20', repeat: -1, yoyo: true, ease: 'none' })
-            gsap.to('.ql--bottom-gift-1', { duration: 2, y: '+=20', repeat: -1, yoyo: true, ease: 'none' })
-            gsap.to('.ql--bottom-gift-2', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
-            gsap.to('.ql--bottom-icon-2', { duration: 2, x: '-=10', repeat: -1, yoyo: true, ease: 'none' })
-            // 以图片为上边中间为中心旋转
+    // gsap.fromTo('.larnten-slide', { rotation: 0 }, { duration: 2, rotation: 5, transformOrigin: 'top center', repeat: -1, yoyo: true, ease: 'none' })
+
 
-            gsap.fromTo('.larnten-slide', { rotation: 0 }, { duration: 2, rotation: 5, transformOrigin: 'top center', repeat: -1, yoyo: true, ease: 'none' })
 
-            const gl = gsap.timeline({ repeat: -1 })
-            gl.to('.larnten-slide',{duration:2,rotation: -5,transformOrigin: 'top center',  ease: 'none'})
-            gl.to('.larnten-slide',{duration:2,rotation: 0,transformOrigin: 'top center',  ease: 'none'})
-            gl.to('.larnten-slide',{duration:2,rotation: 5,transformOrigin: 'top center',  ease: 'none'})
-            gl.to('.larnten-slide',{duration:2,rotation: 0,transformOrigin: 'top center',  ease: 'none'})
-        }
-    });
 
 }
 
@@ -187,35 +95,28 @@ register();
     .question-list-bg {
         @include pos(750px, 1624px, 0px, 50%);
         transform: translateY(-50%);
-        @include bg_pos("question-list/bg.jpg");
+        @include bg_pos("index/bg.jpg");
     }
 
     .question-list-container {
         @include pos(750px, 1624px, 0px, 50%);
         transform: translateY(-50%);
 
-
-        .ql-select-text {
-            font-family: 'DouyinSansBold';
-            position: absolute;
-            width: 100%;
-            top: 307px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-
-            .select-text {
-                line-height: 50px;
-                font-size: 33px;
-                color: rgb(255, 255, 255);
-                font-weight: bold;
-                text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
+        .ql-logo {
+            pointer-events: none;
+            @include pos(632px, 94px, 59px, 180px);
+            @include bg_pos("index/logo.png");
         }
+
+        .ql-icon {
+            @include pos(213px, 121px, 558px, 453px);
+            @include bg_pos("question-list/megaphone.png");
+            pointer-events: none;
+            z-index: 9;
         }
 
         .ql-swiper-box {
-            @include pos(655px, 778px, 49px, 448px);
+            @include pos(689px, 522px, 31px, 514px);
             // background-color: aliceblue;
             // overflow: hidden;
             display: flex;
@@ -223,73 +124,20 @@ register();
             justify-content: center;
             // pointer-events: none;
 
-            .larnten-box {
-                @include pos(428px, 639px, 113.5px, 0px);
-                @include bg_pos("question-list/box.png");
-            }
 
-            .larnten-box-firework {
-                @include pos(102px, 109px, 451.5px, 20px);
-                @include bg_pos("question-list/firework-icon.png");
-            }
-
-            .larnten-swiper {
-                @include box(655px, 778px);
+            .card-swiper {
+                @include box(689px, 522px);
                 position: relative;
-                // display: flex;
-                // align-items: center;
-                // justify-content: center;
 
-                .larnten-slide {
+
+                .card-slide {
                     pointer-events: none;
-                }
+                    @include box(555px, 522px);
 
-                .larnten-slide-1 {
-                    @include box(527px, 697px);
-                }
-
-                .larnten-slide-2 {
-                    @include box(482px, 743px);
-                }
-
-                .larnten-slide-3 {
-                    @include box(478px, 714px);
-                }
-
-                .larnten-slide-4 {
-                    @include box(441px, 722px);
-                }
-
-                .larnten-slide-5 {
-                    @include box(473px, 778px);
-                }
-
-                .larnten-slide-6 {
-                    @include box(437px, 751px);
-                }
-
-                .larnten-slide-7 {
-                    @include box(478px, 731px);
-                }
-
-                .larnten-slide-8 {
-                    @include box(446px, 743px);
-                }
-
-                .larnten-slide-9 {
-                    @include box(481px, 691px);
-                }
-
-                .larnten-slide-10 {
-                    @include box(460px, 713px);
-                }
-
-                .larnten-slide-11 {
-                    @include box(383px, 756px);
                 }
 
 
-                .larnten-img {
+                .card-img {
                     @include box(100%, 100%);
                     pointer-events: none;
                 }
@@ -298,57 +146,9 @@ register();
 
         }
 
-        .ql--top-icon-1 {
-            pointer-events: none;
-            @include pos(405px, 659px, -193px, -213px);
-            @include bg_pos("question-list/icon-1.png");
-        }
-
-        .ql--top-icon-2 {
-            pointer-events: none;
-            @include pos(412px, 240px, 503px, -55px);
-            @include bg_pos("question-list/icon-2.png");
-        }
-
-        .ql--top-icon-3 {
-            pointer-events: none;
-            @include pos(300px, 434px, 611px, -71px);
-            @include bg_pos("question-list/icon-3.png");
-        }
-
-        .ql-bottom-bg {
-            pointer-events: none;
-            @include pos(750px, 374px, 0px, 1250px);
-            @include bg_pos("question-list/bottom-bg.png");
-        }
-
-        .ql--bottom-icon-1 {
-            pointer-events: none;
-            @include pos(293px, 292px, -186px, 1109px);
-            @include bg_pos("question-list/bottom-icon-1.png");
-        }
-
-        .ql--bottom-icon-2 {
-            pointer-events: none;
-            @include pos(698px, 497px, -287px, 1130px);
-            @include bg_pos("question-list/bottom-icon-2.png");
-        }
-
-        .ql--bottom-gift-1 {
-            pointer-events: none;
-            @include pos(144px, 145px, 512px, 1215px);
-            @include bg_pos("question-list/gift-1.png");
-        }
-
-        .ql--bottom-gift-2 {
-            pointer-events: none;
-            @include pos(184px, 188px, 611px, 1129px);
-            @include bg_pos("question-list/gift-2.png");
-        }
-
         .ql-start-btn {
-            @include pos(319px, 93px, 235.5px, 1150px);
-            @include bg_pos("index/start-btn.png");
+            @include pos(376px, 114px, 188px, 1129px);
+            @include bg_pos("index/btn.png");
             z-index: 99;
         }
     }
@@ -362,12 +162,12 @@ register();
         /* 设置按钮颜色 */
         // background-color: rgba(0, 0, 0, 0.5); /* 设置按钮背景颜色 */
         // border-radius: 50%; /* 设置按钮圆角 */
-        @include box(59px, 81px);
+        @include box(44px, 54px);
         display: flex;
         align-items: center;
         justify-content: center;
         position: absolute;
-        top: 50%;
+        // top: 50%;
         transform: translateY(-50%);
     }
 
@@ -380,12 +180,12 @@ register();
 
     ::v-deep .swiper-button-prev {
         // left: 20px; /* 设置按钮位置 */
-        @include bg_pos("question-list/left-arrow.png");
+        @include bg_pos("question-list/arrow-l.png");
     }
 
     ::v-deep .swiper-button-next {
         // right: 20px; /* 设置按钮位置 */
-        @include bg_pos("question-list/right-arrow.png");
+        @include bg_pos("question-list/arrow-l.png");
         // right: 0px;
     }
 

src/components/Rule.vue

@@ -94,29 +94,29 @@ 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;
@@ -127,7 +127,7 @@ onMounted(() => {
 
                     .blod {
                         font-weight: 700;
-                        color: #6c0500;
+                        color: #a74f00;
                     }
 
                     .margin-bottom-area {
@@ -138,20 +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;
             }
@@ -161,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,102 +1,9 @@
 const load = ["load/icon.png", "load/bg.jpg"];
 
 const page = [
-  "index/prize-btn.png",
+  "index/card-1.png",
 
-  "index/bg.jpg",
-  "index/bottom-bg.png",
-  "index/cloud.png",
-  "index/fan-1.png",
-  "index/fan-2.png",
-  "index/fan-3.png",
-  "index/fan-4.png",
-  "index/firework.png",
-  "index/gift-icon.png",
-  "index/logo.png",
-  "index/pet-icon.png",
-  "index/prize-btn.png",
-  "index/rule-btn.png",
-  "index/start-btn.png",
-  "index/sub-title.png",
-  "index/title.png",
-  "index/windows.png",
 
-  "poster/card-1.png",
-  "poster/card-10.png",
-  "poster/card-11.png",
-  "poster/card-2.png",
-  "poster/card-3.png",
-  "poster/card-4.png",
-  "poster/card-5.png",
-  "poster/card-6.png",
-  "poster/card-7.png",
-  "poster/card-8.png",
-  "poster/card-9.png",
-  "poster/poster-1.jpg",
-  "poster/poster-10.jpg",
-  "poster/poster-11.jpg",
-  "poster/poster-2.jpg",
-  "poster/poster-3.jpg",
-  "poster/poster-4.jpg",
-  "poster/poster-5.jpg",
-  "poster/poster-6.jpg",
-  "poster/poster-7.jpg",
-  "poster/poster-8.jpg",
-  "poster/poster-9.jpg",
-
-  "prize/cls-btn.png",
-  "prize/copy-btn.png",
-  "prize/draw-box.png",
-  "prize/draw-text.png",
-  "prize/light.png",
-  "prize/myPrize-box.png",
-  "prize/no-prize.png",
-  "prize/star.png",
-  "prize/tips.png",
-
-  "qa/baozhu.png",
-  "qa/bg.jpg",
-  "qa/bottom-bg.png",
-  "qa/correct.png",
-  "qa/create-btn.png",
-  "qa/go-back.png",
-  "qa/gold-icon-2.png",
-  "qa/gold-icon.png",
-  "qa/incorrect.png",
-  "qa/lantern-icon.png",
-  "qa/next-btn.png",
-  "qa/question-box.png",
-
-  "question-list/bg.jpg",
-  "question-list/bottom-bg.png",
-  "question-list/bottom-icon-1.png",
-  "question-list/bottom-icon-2.png",
-  "question-list/box.png",
-  "question-list/cls-btn.png",
-  "question-list/firework-icon.png",
-  "question-list/gift-1.png",
-  "question-list/gift-2.png",
-  "question-list/icon-1.png",
-  "question-list/icon-2.png",
-  "question-list/icon-3.png",
-  "question-list/larnten-1.png",
-  "question-list/larnten-10.png",
-  "question-list/larnten-11.png",
-  "question-list/larnten-2.png",
-  "question-list/larnten-3.png",
-  "question-list/larnten-4.png",
-  "question-list/larnten-5.png",
-  "question-list/larnten-6.png",
-  "question-list/larnten-7.png",
-  "question-list/larnten-8.png",
-  "question-list/larnten-9.png",
-  "question-list/left-arrow.png",
-  "question-list/right-arrow.png",
-
-  "rule/arrow.png",
-  "rule/cls-btn.png",
-  "rule/icon.png",
-  "rule/rule-box.png",
 ];
 
 // 处理为vite引入图片格式

src/data/index.js

@@ -1,221 +1,97 @@
 export const data = [
   {
     id: 1,
-    question: ["把户口迁到一块"],
+    question: ["欢迎你打卡这座8D魔幻山城：轨道交通在楼宇腹中游走，立交桥如基因链螺旋攀升，万家灯火在悬崖上生长出十三层吊脚楼。这座将三维空间玩到极致的城市是？"],
     answer: [
       {
         aid: "A",
-        text: ["启"],
-        result: "correct",
+        text: "重庆",
+        result: 1,
       },
       {
         aid: "B",
-        text: ["航"],
-        result: "incorrect",
+        text: "成都",
+        result: 0,
       },
     ],
-    analysis: [
-      `<span style="color:#ffe2ad">启航</span>系列旗下产品连续3年获得金牛奖。`,
-      `（2022-2024年）`,
+    tips: [
+      `一座被火锅”包围“的城市`,
     ],
   },
   {
     id: 2,
-    question: ["演出时间，不要说话"],
+    question: ["欢迎你来到这处塞上秘境：沙海与翡翠绿洲相拥而眠，千年岩画镌刻着骆驼商队的丝路密码。母亲河在此织就翡翠腰带，烽燧残垣与星空共同丈量着天地琴弦。这处同时拥有流动史诗与永恒星辰的秘境是？"],
     answer: [
       {
         aid: "A",
-        text: ["灵"],
-        result: "incorrect",
+        text: "宁夏",
+        result: 1,
       },
       {
         aid: "B",
-        text: ["活"],
-        result: "correct",
+        text: "新疆",
+        result: 0,
       },
     ],
-    analysis: [
-      `<span style="color:#ffe2ad">灵活成长</span>系列是低波稳健的持有期固收产品，`,
-      `同时兼顾流动性和收益空间。`,
+    tips: [
+      `有”塞上江南“美称的少数民族自治区`,
     ],
   },
   {
     id: 3,
-    question: ["秋前隐后最可靠"],
+    question: ["欢迎你打卡这座『四季如春』的童话城：鲜花在冬天抢了春天的戏，海鸥与彩云齐飞，石头森林藏着万年奇景，蓝花雨巷把街道染成紫色星河。问：这座被春天永久收藏的城市是？"],
     answer: [
       {
         aid: "A",
-        text: ["稳"],
-        result: "correct",
+        text: "贵阳",
+        result: 0,
       },
       {
         aid: "B",
-        text: ["健"],
-        result: "incorrect",
+        text: "昆明",
+        result: 1,
       },
     ],
-    analysis: [
-      `<span style="color:#ffe2ad">稳健精选</span>是主投低波稳健类资产的封闭产品系列，`,
-      `历史到期兑付正收益概率100%（数据时间2025.1.9）。`,
+    tips: [
+      `”彩云之南“的首府`,
     ],
   },
   {
     id: 4,
-    question: ["上等木料来造桥"],
+    question: ["欢迎你闯入这座通宵狂欢的『古今混搭城』：唐代楼阁挂满灯笼，网红不倒翁小姐姐在人群中飘摇。猜猜这是哪座古都的网红步行街，能把长安城的盛世繁华变成24小时不打烊的嘉年华的城市是？"],
     answer: [
       {
         aid: "A",
-        text: ["策"],
-        result: "correct",
+        text: "太原",
+        result: 0,
       },
       {
         aid: "B",
-        text: ["略"],
-        result: "incorrect",
+        text: "西安",
+        result: 1,
       },
     ],
-    analysis: [
-      `<span style="color:#ffe2ad">启元策略系列</span>运用自研利率债量化交易模型，`,
-      `是利率时代有助提升收益的固收理财。`,
+    tips: [
+      `拥有被成为”世界第八大奇迹“的秦始皇陵兵马俑`,
     ],
   },
   {
     id: 5,
-    question: ["秋前别后再相聚"],
+    question: ["欢迎你来到这座『科技主题乐园』——摩天大楼间闪着AI电子屏瀑布，无人机表演在夜空中拼出会动的二维码，华强北的电子零件能拼出太空卫星，问：哪座城市用代码写诗，让城市灯光秀变成通往未来的动画片？"],
     answer: [
       {
         aid: "A",
-        text: ["稳"],
-        result: "incorrect",
+        text: "深圳",
+        result: 1,
       },
       {
         aid: "B",
-        text: ["利"],
-        result: "correct",
+        text: "广州",
+        result: 0,
       },
     ],
-    analysis: [
-      `<span style="color:#ffe2ad">启元稳利</span>以低波资产筑底，是闲钱理财升级好去处。`,
-    ],
-  },
-  {
-    id: 6,
-    question: ["宝玉不在姑娘在"],
-    answer: [
-      {
-        aid: "A",
-        text: ["安"],
-        result: "correct",
-      },
-      {
-        aid: "B",
-        text: ["鑫"],
-        result: "incorrect",
-      },
-    ],
-    analysis: [
-      `<span style="color:#ffe2ad">新安鑫</span>系列运用结构化工具风险向下有底，收益向上有空间，`,
-      `是投资者参与股市指数的“安鑫”之选。`,
-    ],
-  },
-  {
-    id: 7,
-    question: ["水帘洞二十三"],
-    answer: [
-      {
-        aid: "A",
-        text: ["坤"],
-        result: "incorrect",
-      },
-      {
-        aid: "B",
-        text: ["润"],
-        result: "correct",
-      },
-    ],
-    analysis: [
-      `<span style="color:#ffe2ad">坤润红利价值</span>的红利低波策略可筛选出低估值、`,
-      `高股息、高质量企业。`,
-    ],
-  },
-  {
-    id: 8,
-    question: ["太阳的儿子"],
-    answer: [
-      {
-        aid: "A",
-        text: ["星"],
-        result: "correct",
-      },
-      {
-        aid: "B",
-        text: ["辰"],
-        result: "incorrect",
-      },
-    ],
-    analysis: [
-      `<span style="color:#ffe2ad">星辰</span>系列以价值投资为基础，构建低风险低估值`,
-      `和持续成长的组合，是以绝对收益为目标的含权理财。`,
-    ],
-  },
-  {
-    id: 9,
-    question: ["人来凑成桌"],
-    answer: [
-      {
-        aid: "A",
-        text: ["卓"],
-        result: "correct",
-      },
-      {
-        aid: "B",
-        text: ["越"],
-        result: "incorrect",
-      },
-    ],
-    analysis: [
-      `<span style="color:#ffe2ad">卓越稳健</span>系列是适合中长期配置需求的“固收+理财”，`,
-      `在低息环境下通过合理的资产配置突显股债性价比。`,
-    ],
-  },
-  {
-    id: 10,
-    question: ["相逢立即成知音"],
-    answer: [
-      {
-        aid: "A",
-        text: ["智"],
-        result: "correct",
-      },
-      {
-        aid: "B",
-        text: ["享"],
-        result: "incorrect",
-      },
-    ],
-    analysis: [
-      `<span style="color:#ffe2ad">智享全周期</span>运用全天候策略均衡配置全球多元资产，`,
-      `助力投资者把握全球市场的交易机会。`,
-    ],
-  },
-  {
-    id: 11,
-    question: ["春来又听泉声响"],
-    answer: [
-      {
-        aid: "A",
-        text: ["智"],
-        result: "correct",
-      },
-      {
-        aid: "B",
-        text: ["享"],
-        result: "incorrect",
-      },
-    ],
-    analysis: [
-      `<span style="color:#ffe2ad">权心全益</span>是平安理财发挥多资产多策略投资优势，`,
-      `用心捕捉权益市场机会，打造稳健的含权产品体系。`,
+    tips: [
+      `全国最早实行对外开放的四个经济特区之一`,
     ],
   },
 ];

src/page/Home/App.vue

@@ -79,7 +79,7 @@ const myPrizeFn = (item) => {
 };
 
 const QuestionListRef=  ref(null)
-const showQuestionList = ref(false);
+const showQuestionList = ref(true);
 const questionListFn = (item) => {
   if (item.action == "hide") {
     showQuestionList.value = false;
@@ -243,7 +243,8 @@ const playMusic = () => {
 <style lang="scss">
 #app {
   overflow: hidden;
-  background: linear-gradient(135deg, #a11b15, #f80c00);
+  background: linear-gradient(135deg, #d6d1ca, #e5dccf);
+
 }
 
 #__vconsole {

src/page/Home/main.js

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

src/store/index.js

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