update

src/components/Index.vue

@@ -3,6 +3,8 @@ import { Toast } from "vant";
 import { debounceTap } from "@/plugins";
 import gsap from "gsap";
 import { useMainStore } from "@/store";
+import Preloader from "@/plugins/Preloader";
+import { pageQAImg } from "@/data/imgList";
 
 const emit = defineEmits(["IndexPage"]);
 const userStore = useMainStore();
@@ -33,11 +35,13 @@ const showRule = (event) => {
   });
 };
 
-
 onMounted(() => {
-  gsap.from(".index-bg,.index-island,.index-cloud-1,.index-cloud-2,.index-tree-1", { duration: 1, scale: 1.2, autoAlpha: 0 });
+  gsap.from(
-  gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0  });
+    ".index-bg,.index-island,.index-cloud-1,.index-cloud-2,.index-tree-1",
-  gsap.from(".index-sub-title", { duration: 1, x: 20, autoAlpha: 0  });
+    { duration: 1, scale: 1.2, autoAlpha: 0 }
+  );
+  gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0 });
+  gsap.from(".index-sub-title", { duration: 1, x: 20, autoAlpha: 0 });
   gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
   gsap.from(".index-prize-btn", {
     duration: 1,
@@ -56,21 +60,62 @@ onMounted(() => {
     scale: 0.4,
     autoAlpha: 0,
     delay: 0.5,
-    onComplete:()=>{
+    onComplete: () => {
-      gsap.to('.index-start-btn',{duration:1,scale:'0.9',repeat:-1,yoyo:true,ease:'bounce.in'})
+      gsap.to(".index-start-btn", {
-      gsap.to('.index-cloud-1',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
+        duration: 1,
-      gsap.to('.index-cloud-2',{duration:2,x:30,repeat:-1,yoyo:true,ease:'none'})
+        scale: "0.9",
-      gsap.to('.index-tree-1',{duration:2,y:10,repeat:-1,yoyo:true,ease:'none'})
+        repeat: -1,
-      gsap.to('.index-title',{duration:2.5,y:-20,repeat:-1,yoyo:true,ease:'none'})
+        yoyo: true,
-      gsap.to('.index-sub-title',{duration:3,x:10,repeat:-1,yoyo:true,ease:'none'})
+        ease: "bounce.in",
+      });
+      gsap.to(".index-cloud-1", {
+        duration: 2,
+        x: -30,
+        repeat: -1,
+        yoyo: true,
+        ease: "none",
+      });
+      gsap.to(".index-cloud-2", {
+        duration: 2,
+        x: 30,
+        repeat: -1,
+        yoyo: true,
+        ease: "none",
+      });
+      gsap.to(".index-tree-1", {
+        duration: 2,
+        y: 10,
+        repeat: -1,
+        yoyo: true,
+        ease: "none",
+      });
+      gsap.to(".index-title", {
+        duration: 2.5,
+        y: -20,
+        repeat: -1,
+        yoyo: true,
+        ease: "none",
+      });
+      gsap.to(".index-sub-title", {
+        duration: 3,
+        x: 10,
+        repeat: -1,
+        yoyo: true,
+        ease: "none",
+      });
 
-    }
+      // 开始加载答题页面资源
+      Preloader({
+        name: "加载答题页资源",
+        imgs: pageQAImg,
+        callback: (progress) => {
+          // console.log("进度：", progress);
+        },
+      }).then((res) => {
+        console.log("done!");
+      });
+    },
   });
-
-
-
-
-
 });
 
 const vcNum = ref(false);
@@ -95,12 +140,20 @@ const showVC = () => {
       <div class="index-sub-title"></div>
       <div class="index-rule-btn" @click="showRule($event)"></div>
       <!-- v-if="userStore.hasPrize" -->
-      <div class="index-prize-btn"  @click="showMyPrize($event)"></div>
+      <div class="index-prize-btn" @click="showMyPrize($event)"></div>
       <div class="index-start-btn" @click="start"></div>
       <div class="index-agreement">
-          风险提示: 本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
+        <div class="agreement">
-          class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
+          风险提示:
-          class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
+          本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
+            class="b"
+            >本资料内容及观点仅供参考，不构成对任何人的投资建议。</span
+          >以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
+            class="b"
+            >理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span
+          ><span class="orange">理财非存款，产品有风险，投资须谨慎。</span
+          >金融消费者不得利用金融产品和服务从事违法活动。
+        </div>
       </div>
     </div>
   </div>
@@ -122,7 +175,6 @@ const showVC = () => {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
 
-
     // .index-logo{
     //   pointer-events: none;
     //   @include pos(632px, 94px, 59px, 267px);
@@ -131,29 +183,29 @@ const showVC = () => {
 
     .index-title {
       // pointer-events: none;
-      @include pos(632px, 253px, 46px, 254px);
+      @include pos(633px, 253px, 46px, 254px);
       @include bg_pos("index/title.png");
     }
 
-    .index-island{
+    .index-island {
       pointer-events: none;
       @include pos(714px, 867px, 15px, 542px);
       @include bg_pos("index/island.png");
     }
 
-    .index-cloud-1{
+    .index-cloud-1 {
       pointer-events: none;
       @include pos(210px, 147px, -15px, 535px);
       @include bg_pos("index/cloud-1.png");
     }
 
-    .index-cloud-2{
+    .index-cloud-2 {
       pointer-events: none;
       @include pos(151px, 172px, 656px, 486px);
       @include bg_pos("index/cloud-2.png");
     }
 
-    .index-tree-1{
+    .index-tree-1 {
       pointer-events: none;
       @include pos(228px, 199px, -45px, 492px);
       @include bg_pos("index/tree-1.png");
@@ -181,29 +233,32 @@ const showVC = () => {
     }
 
     .index-agreement {
-      font-family: 'HarmonyOS_Sans_SC_Regular';
+      font-family: "HarmonyOS_Sans_SC_Regular";
       pointer-events: none;
       @include pos(736px, 182px, 7px, 1230px);
-      background-color: rgba(255, 255, 255,0.75);
-      font-size: 14px;
-      text-align: justify;
-      letter-spacing: 0.1px;
-      color: #124284;
-      padding: 10px;
-      box-sizing: border-box;
-      border-radius: 2px;
-      line-height: 20px;
 
-      .b {
+      .agreement {
-        font-weight: 700;
+        background-color: rgba(255, 255, 255, 0.75);
-      }
 
-      .orange {
+        font-size: 14px;
-        color: #f5430c;
+        text-align: justify;
-        font-weight: 700;
+        letter-spacing: 0.1px;
+        color: #124284;
+        padding: 10px;
+        box-sizing: border-box;
+        border-radius: 2px;
+        line-height: 20px;
+
+        .b {
+          font-weight: 700;
+        }
+
+        .orange {
+          color: #f5430c;
+          font-weight: 700;
+        }
       }
     }
-
   }
 }
 </style>

src/components/Question.vue

@@ -5,6 +5,8 @@ import { data } from "@/data";
 import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
 import { useMainStore } from "@/store";
 import { subAnswer } from "@/api";
+import Preloader from "@/plugins/Preloader";
+import { pageResultImg } from "@/data/imgList";
 
 // 页面配置初始化
 const emit = defineEmits(["QuestionPage"]);
@@ -22,7 +24,7 @@ const isChecked = ref(false);
 const answerFn = (item, event) => {
   let e = event.target.parentElement;
   activeId.value = item.aid; //更新选中状态
-  console.log("选项", item);
+  // console.log("选项", item);
   debounceTap(e, () => {
     let cid = questionList.value[currentId.value].id;
     let has = answerList.value.findIndex((obj) => obj.id === cid);
@@ -41,9 +43,9 @@ const answerFn = (item, event) => {
     gsap.set(".option-tips,.analysis", { autoAlpha: 1 });
     gsap.set(".answer-box", { pointerEvents: "none" });
     isChecked.value = true;
-    console.log("currentId.value", currentId.value);
+    // console.log("currentId.value", currentId.value);
     if (currentId.value == 2) {
-      console.log("over");
+      // console.log("over");
       gsap.set(".create-btn", { autoAlpha: 1 });
     } else {
       gsap.set(".next-btn", { autoAlpha: 1 });
@@ -121,8 +123,31 @@ const getRandomNumber = (arr) => {
 onMounted(() => {
   gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
   gsap.from(".question-box", { duration: 0.5, y: 30, autoAlpha: 0 });
-  gsap.from(".answer-box", { duration: 0.5, y: 30, autoAlpha: 0 });
+  gsap.from(".answer-box", {
-  gsap.to('.question-tree', { duration: 3, transformOrigin: '0% 70%', rotation: '-10deg', repeat: -1, yoyo: true, ease: 'none' })
+    duration: 0.5,
+    y: 30,
+    autoAlpha: 0,
+    onComplete: () => {
+      // 开始加载答题页面资源
+      Preloader({
+        name: "加载结果页资源",
+        imgs: pageResultImg,
+        callback: (progress) => {
+          // console.log("进度：", progress);
+        },
+      }).then((res) => {
+        console.log("done!");
+      });
+    },
+  });
+  gsap.to(".question-tree", {
+    duration: 3,
+    transformOrigin: "0% 70%",
+    rotation: "-10deg",
+    repeat: -1,
+    yoyo: true,
+    ease: "none",
+  });
 });
 </script>
 
@@ -133,20 +158,19 @@ onMounted(() => {
       <div class="question-box">
         <div class="question-tree"></div>
         <div class="question-con">
- <!-- 问题序号 -->
+          <!-- 问题序号 -->
- <div class="qa-number">第{{ questionList[currentId].id }}题</div>
+          <div class="qa-number">第{{ questionList[currentId].id }}题</div>
-        <div class="qa-question-box">
+          <div class="qa-question-box">
-          <!-- 问题 -->
+            <!-- 问题 -->
-          <div
+            <div
-            class="question-text"
+              class="question-text"
-            v-for="item in questionList[currentId].question"
+              v-for="item in questionList[currentId].question"
-            :key="item"
+              :key="item"
-          >
+            >
-            {{ item }}
+              {{ item }}
+            </div>
           </div>
         </div>
-        </div>
-       
       </div>
       <!-- 选项 -->
       <div class="answer-box">
@@ -156,7 +180,7 @@ onMounted(() => {
           :class="[
             isChecked ? item.result + '-text' : '',
             isChecked ? item.result + '-box' : '',
-            ]"
+          ]"
           :key="item.aid"
         >
           <div class="answer-text" v-for="a in item.text" :key="a">
@@ -173,12 +197,12 @@ onMounted(() => {
         </div>
       </div>
       <!-- 解析 -->
-      <div class="analysis">
+      <!-- <div class="analysis">
         <div v-for="li in questionList[currentId].analysis" :key="li">
           <span class="analysis-icon"></span>
           {{ li }}
         </div>
-      </div>
+      </div> -->
       <div class="next-btn" @click="nextQuestion($event)"></div>
       <div class="create-btn" @click="viewResult($event)"></div>
     </div>
@@ -201,7 +225,6 @@ onMounted(() => {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
     @include bg_pos("qa/bg.jpg");
-
   }
 
   .question-container {
@@ -210,55 +233,54 @@ onMounted(() => {
     @include flexCen();
     justify-content: space-around;
 
-    .question-box{
+    .question-box {
       @include box(696px, 441px);
       @include bg_pos("qa/question-box.png");
       position: relative;
 
-      .question-tree{
+      .question-tree {
-        @include pos(277px, 232px,-100px,-141px);
+        @include pos(277px, 232px, -100px, -141px);
         @include bg_pos("qa/tree.png");
       }
 
       .question-con {
-      @include pos(696px, 441px,0px,0px);
+        @include pos(696px, 441px, 0px, 0px);
-      @include bg_pos("qa/question-box.png");
+        @include bg_pos("qa/question-box.png");
 
-      .qa-number {
+        .qa-number {
-        @include pos(696px, 86px, 0px, 0px);
+          @include pos(696px, 86px, 0px, 0px);
-        font-size: 40px;
+          font-size: 40px;
-        color: #ffffff;
+          color: #ffffff;
-        font-weight: 700;
+          font-weight: 700;
-        display: flex;
+          display: flex;
-        justify-content: center;
+          justify-content: center;
-        align-items: center;
+          align-items: center;
-        text-align: justifyLeft;
+          text-align: justifyLeft;
-        text-shadow: 0px 6px 6px rgba(49, 116, 246, 0.9);
+          text-shadow: 0px 6px 6px rgba(49, 116, 246, 0.9);
-      }
+        }
 
-      .qa-question-box {
+        .qa-question-box {
-        @include pos(626px, 243px, 37px, 177px);
+          @include pos(626px, 243px, 37px, 177px);
-        display: flex;
+          display: flex;
-        flex-direction: column;
+          flex-direction: column;
-        justify-content: center;
+          justify-content: center;
-        align-items: center;
+          align-items: center;
 
-        // 问题样式
+          // 问题样式
-        .question-text {
+          .question-text {
-          width: 100%;
+            width: 100%;
-          font-family: "HarmonyOS_Sans_SC_Regular";
+            font-family: "HarmonyOS_Sans_SC_Regular";
-          font-size: 30px;
+            font-size: 30px;
-          letter-spacing: 1.5px;
+            letter-spacing: 1.5px;
-          color: #065ac6;
+            color: #065ac6;
-          text-align: center;
+            text-align: center;
-          padding: 40px;
+            padding: 40px;
-          text-align: justify;
+            text-align: justify;
-          line-height: 55px;
+            line-height: 55px;
+          }
         }
       }
     }
-    }
-
 
     // 选项样式
     .answer-box {
@@ -289,6 +311,10 @@ onMounted(() => {
         position: relative;
         box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.361) inset;
 
+        .answer-text {
+          white-space: nowrap;
+        }
+
         .bubble-1 {
           @include pos(55px, 5px, 88px, 7px);
           @include bg_pos("qa/bubble-1.png");
@@ -326,8 +352,7 @@ onMounted(() => {
       .correct-text {
         color: #e74c00;
         // background-color: rgba(255, 255, 255, 0.471);
-        box-shadow: 5px  5px 5px rgba(255, 240, 192, 0.471) inset;
+        box-shadow: 5px 5px 5px rgba(255, 240, 192, 0.471) inset;
-
       }
 
       .option-tips {

src/components/Result.vue

@@ -88,7 +88,7 @@ const createPoster = (event) => {
         {
           name: "text",
           src: posterTextSrc,
-          pos: { w: 337, h: 117, x: 81, y: 1133 },
+          pos: { w: 347, h: 155, x: 81, y: 1113 },
         },
       ]
     );
@@ -217,7 +217,7 @@ const hideShare = () => {
       @include bg_pos("result/text-1.png");
     }
     .r-text-2 {
-      @include pos(643px, 814px, 67px, 396px);
+      @include pos(648px, 794px, 59px, 407px);
       @include bg_pos("result/text-2.png");
     }
     .r-text-3 {

src/data/imgList.js

@@ -13,6 +13,27 @@ const page = [
   "index/title.png",
   "index/island.png",
 
+  "rule/cls-btn.png",
+  "rule/arrow.png",
+  "rule/rule-box.png",
+  "rule/icon.png",
+];
+
+// 问题页面
+const pageQA = [
+  "qa/bubble-1.png",
+  "qa/analysis-icon.png",
+  "qa/create-btn.png",
+  "qa/next-btn.png",
+  "qa/incorrect.png",
+  "qa/correct.png",
+  "qa/question-box.png",
+  "qa/tree.png",
+  "qa/bg.jpg",
+]
+
+// 结果页面
+const pageResult = [
   "prize/copy-btn2.png",
   "prize/copy-btn.png",
   "prize/cls-btn.png",
@@ -27,17 +48,6 @@ const page = [
   "prize/prize-box.png",
   "prize/myPrize-box.png",
   "prize/draw-box.png",
-
-  "qa/bubble-1.png",
-  "qa/analysis-icon.png",
-  "qa/create-btn.png",
-  "qa/next-btn.png",
-  "qa/incorrect.png",
-  "qa/correct.png",
-  "qa/question-box.png",
-  "qa/tree.png",
-  "qa/bg.jpg",
-
   "result/cls-btn.png",
   "result/poster-text.png",
   "result/go-draw-btn.png",
@@ -50,15 +60,10 @@ const page = [
   "result/r-bg-2.jpg",
   "result/r-bg-1.jpg",
   "result/r-bg-3.jpg",
-  "result/poster-1.jpg",
+  // "result/poster-1.jpg",
-  "result/poster-3.jpg",
+  // "result/poster-3.jpg",
-  "result/poster-2.jpg",
+  // "result/poster-2.jpg",
-
+]
-  "rule/cls-btn.png",
-  "rule/arrow.png",
-  "rule/rule-box.png",
-  "rule/icon.png",
-];
 
 // 处理为vite引入图片格式
 function imgCreate(url, img) {
@@ -66,8 +71,15 @@ function imgCreate(url, img) {
   img.push(i);
 }
 
+
+
+
+
 const loadImg = [];
 const pageImg = [];
+const pageQAImg = [];
+const pageResultImg = [];
+
 
 load.forEach((element) => {
   imgCreate(element, loadImg);
@@ -77,4 +89,12 @@ page.forEach((element) => {
   imgCreate(element, pageImg);
 });
 
-export { loadImg, pageImg };
+pageQA.forEach((element) => {
+  imgCreate(element, pageQAImg);
+});
+
+pageResult.forEach((element) => {
+  imgCreate(element, pageResultImg);
+});
+
+export { loadImg, pageImg,pageQAImg,pageResultImg };

src/data/index.js

@@ -33,14 +33,14 @@ export const data = [
                 text: [
                     '最短持有期类理财产品',
                 ],
-                result:'incorrect',
+                result:'correct',
             },
             {
                 aid: 'B',
                 text: [
                     '混合类理财产品',
                 ],
-                result:'correct',
+                result:'incorrect',
             },
         ],
         analysis: ['解析：选择B。现金类产品具有高流动性的特征，更适合日常流动资金。但在长期限选择中，固收理财拥有较大的投资范围和空间，运用策略提供稳健体验，有效平衡风险，力争增厚收益机会，闲钱再进阶。因此不同的资金用途记得匹配不同产品噢。']

vite.config.js

@@ -33,7 +33,7 @@ export default defineConfig(({ command, mode }) => {
             template: 'index.html',
             injectOptions: {
               data: {
-                title: '平安理财 邂逅清凉一夏',
+                title: '好“理”在手 邂逅清凉一夏',
               },
             }
           },