完成所有切图

package.json

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

src/components/Draw.vue

@@ -156,7 +156,7 @@ onMounted(() => {
           <span class="code">{{ code }}</span>
           <span class="copy-btn" @click="copyFn($event)"></span>
         </div>
-        <div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“五一快乐”获取兑奖链接，输入兑换码兑换奖品</div>
+        <div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“端午安康”获取兑奖链接，输入兑换码兑换奖品</div>
         <div class="exchnage-tips2">（兑换码可在主页面“我的奖品” 再次查看并复制）</div>
         <div class="cls-btn" @click="hide($event)"></div>
       </div>

src/components/Index.vue

@@ -36,16 +36,8 @@ const showRule = (event) => {
 
 onMounted(() => {
   gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
-  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-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, delay: 1.3 });
   gsap.from(".index-prize-btn", {
@@ -87,23 +79,12 @@ const showVC = () => {
     <div class="index-bg"></div>
     <div class="index-container">
       <div class="index-logo"></div>
-      <div class="index-paper">
+      <div class="index-title" @click="showVC"></div>
-        <div class="index-title" @click="showVC"></div>
+      <div class="index-time"></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">
-        <div class="tips">数据来源：平安理财，数据截至2025年4月23日，产品历史业绩不代表未来表现</div>
         <span>风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。</span>
         <span class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>
         <span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。</span>
@@ -136,75 +117,29 @@ const showVC = () => {
 
     .index-logo {
       pointer-events: none;
-      @include pos(632px, 94px, 59px, 180px);
+      @include pos(632px, 94px, 59px, 266px);
       @include bg_pos("index/logo.png");
     }
 
-    .index-paper {
+    .index-title {
-      @include pos(706px, 777px, 19px, 394px);
+      // pointer-events: none;
-      @include bg_pos("index/paper.png");
+      @include pos(593px, 156px, 85px, 387px);
-
+      @include bg_pos("index/title.png");
-      .index-title {
-        // pointer-events: none;
-        @include pos(611px, 233px, 59px, -56px);
-        @include bg_pos("index/title.png");
-      }
-
-      .index-time {
-        @include pos(385px, 70px, 257px, 161px);
-        @include bg_pos("index/time.png");
-      }
-
-      .index-card-1 {
-        @include pos(207px, 182px, 45px, 194px);
-        @include bg_pos("index/card-1.png");
-      }
-
-      .index-card-2 {
-        @include pos(198px, 188px, 270px, 230px);
-        @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-time {
-    .index-megaphone {
+      @include pos(433px, 58px, 295px, 565px);
-      @include pos(104px, 113px, 646px, 540px);
+      @include bg_pos("index/time.png");
-      @include bg_pos("index/megaphone.png");
     }
 
-    .index-left-btn{
+    .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;
+      justify-content: center;
       padding-left: 20px;
       color: #ffffff;
       letter-spacing: 1.5px;
@@ -220,28 +155,23 @@ const showVC = () => {
     }
 
     .index-start-btn {
-      @include pos(339px, 117px, 203px, 1077px);
+      @include pos(288px, 93px, 231px, 1097px);
       @include bg_pos("index/btn.png");
     }
 
     .index-agreement {
-      font-family: "HarmonyOS_Sans_SC_Regular";
+      font-family: "FZZY_Regular";
       pointer-events: none;
       @include pos(736px, 182px, 7px, 1208px);
       font-size: 14px;
       text-align: justify;
       letter-spacing: 0.1px;
-      color: #815e3c;
+      color: #ffffff;
       padding: 10px;
       box-sizing: border-box;
       border-radius: 10px;
       line-height: 20px;
 
-      .tips {
-        text-align: center;
-        margin: 10px;
-        color: #ab7133;
-      }
 
       .b {
         font-weight: 700;

src/components/Loading.vue

@@ -86,7 +86,8 @@ onMounted(() => {
   .load-bg {
     @include pos(750px, 100%, 0px, 50%);
     transform: translateY(-50%);
-    @include bg_pos("index/bg.jpg");
+    background-image: -webkit-linear-gradient(-90deg, #ffffff 15%, #4ebbe5 100%);
+
   }
 
   .load-container {
@@ -95,7 +96,7 @@ onMounted(() => {
     // transform: translateY(-50%);
 
     .load-icon {
-      @include pos(363px, 136px, 335px, 320px);
+      @include pos(409px, 215px,199px, 350px);
       @include bg_pos("load/icon.png");
     }
 
@@ -118,7 +119,6 @@ onMounted(() => {
 
     .load-num {
       @include pos(235px, 80px, 256px, 511px);
-      @include bg_pos("load/icon-2.png");
 
       @include flexCen();
 

src/components/MyPrize.vue

@@ -2,27 +2,26 @@
 import { debounceTap } from "@/plugins";
 import gsap from "gsap";
 import { Toast } from "vant";
-import useClipboard from 'vue-clipboard3'
+import useClipboard from "vue-clipboard3";
 import { useMainStore } from "@/store";
 import { onMounted } from "vue";
 
 // 页面配置初始化
 const emit = defineEmits(["MyPrizePage"]);
 const userStore = useMainStore();
-const { toClipboard } = useClipboard()
+const { toClipboard } = useClipboard();
 
 const money = ref(userStore.prizeMoney);
 const code = ref(userStore.prizeCode);
 
 const copyFn = (event) => {
   let e = event.target;
-  toClipboard(code.value)
+  toClipboard(code.value);
   debounceTap(e, () => {
     Toast(`复制成功：${code.value}`);
   });
 };
 
-
 const hide = (event) => {
   let e = event.target;
   debounceTap(e, () => {
@@ -57,8 +56,12 @@ onMounted(() => {
         <div class="code">{{ code }}</div>
         <div class="myPrize-copy-btn" @click="copyFn($event)"></div>
       </div>
-      <div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“五一快乐”获取兑奖链接，输入兑换码兑换奖品</div>
+      <div class="exchange-tips">
-      <div class="exchnage-tips2">（兑换码可在主页面“我的奖品” 再次查看并复制）</div>
+        兑换流程：前往微信搜索【平安理财服务号】公众号发送“端午安康”获取兑奖链接，输入兑换码兑换奖品
+      </div>
+      <div class="exchnage-tips2">
+        （兑换码可在主页面“我的奖品” 再次查看并复制）
+      </div>
       <div class="myPrize-cls-btn" @click="hide($event)"></div>
     </div>
   </div>
@@ -93,7 +96,6 @@ onMounted(() => {
       letter-spacing: 0;
       // background-color: aqua;
       @include flexCen();
-
     }
 
     .myPrize-money {
@@ -117,13 +119,11 @@ onMounted(() => {
       font-weight: 700;
       color: #fff6cc;
 
-
       span {
         // height: 77px;
         line-height: 65px;
       }
 
-
       .code {
         font-size: 25px;
         font-weight: 700;
@@ -162,7 +162,6 @@ onMounted(() => {
       // background-color: aqua;
     }
 
-
     .myPrize-cls-btn {
       @include pos(82px, 82px, 517px, 114px);
       @include bg_pos("prize/cls-btn.png");

src/components/Question.vue

@@ -5,76 +5,66 @@ import { data } from "@/data";
 import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
 import { useMainStore } from "@/store";
 import { subAnswer } from "@/api";
-import { computed } from "vue";
 
 // 页面配置初始化
-const emit = defineEmits(["hide", "showResult", "QuestionPage"]);
+const emit = defineEmits([ "QuestionPage"]);
 const userStore = useMainStore();
 
-const props = defineProps({
-  questionId: {
-    default: 0,
-    required: true,
-  }
-})
 
 // 当前题目
-const currentId = ref(props.questionId); //当前id 0~11
+// const currentId = ref(props.questionId); //当前id 0~4
-
+const currentId = ref(0); //当前id 0~3
-
 
 const questionList = ref(data); //随机打乱题库
-const isChecked = ref(false)
+const isChecked = ref(false);
-const checkedOption = ref('')
+const checkedOption = ref("");
+const QaResult = ref(1); //当前答题结果
 
 // 答题事件
 const answerFn = (item, event) => {
   let e = event.target.parentElement;
 
   debounceTap(e, () => {
-    gsap.set('.answer-box', { pointerEvents: 'none' })
+    gsap.set(".answer-box", { pointerEvents: "none" });
-    isChecked.value = true
+    isChecked.value = true;
-    checkedOption.value = item
+    checkedOption.value = item;
-    console.log('checkedOption', checkedOption.value);
+    console.log("checkedOption", checkedOption.value);
-
+    QaResult.value = item.result;
-    if (item.result) {
+    gsap.to(".qp-result ", { duration: 0.5, autoAlpha: 1, delay: 1 });
-      gsap.set('.create-btn', { display: 'block' })
+  });
-    } else {
+};
-      gsap.set('.return-btn', { display: 'block' })
-    }
-  })
-
-}
 
 // 下一题
 const nextQuestion = (event) => {
   let e = event.target;
   debounceTap(e, () => {
-    gsap.to('.question-box', {
+    gsap.to(".qp-result", {
-      duration: 0.5, autoAlpha: 0, scale: 0.3, onComplete: () => {
+      duration: 0.5,
-        emit('hide')
+      autoAlpha: 0,
-      }
+      onComplete: () => {
-
+        isChecked.value = false;
-    })
+        checkedOption.value = "";
-
+        gsap.set(".answer-box", { pointerEvents: "auto" });
-  })
+        currentId.value++;
-
+      },
-}
+    });
+  });
+};
 
 // 查看结果事件
 const viewResult = (event) => {
   let e = event.target;
   debounceTap(e, () => {
     // 更新海报id
-    userStore.posterId = currentId.value + 1
+    userStore.posterId = currentId.value + 1;
 
-    gsap.set('.question-box', { pointerEvents: 'none' })
+    gsap.set(".question-box", { pointerEvents: "none" });
-    Toast('答题结束')
+    Toast("答题结束");
     Toast.loading({
-      message: '结果生成中',
+      message: "结果生成中",
       duration: 0,
       forbidClick: true,
-    })
+    });
 
     if (import.meta.env.VITE_MODE != "dev") {
       // 提交完成记录
@@ -85,46 +75,43 @@ const viewResult = (event) => {
         }
 
         setTimeout(() => {
-          Toast.clear()
+          Toast.clear();
-          gsap.to('.QuestionPage', {
+          gsap.to(".QuestionPage", {
-            duration: 0.5, autoAlpha: 0, onComplete: () => {
+            duration: 0.5,
+            autoAlpha: 0,
+            onComplete: () => {
               emit("showResult", { action: "showResult" });
-            }
+            },
-          })
+          });
-        }, 1000)
+        }, 1000);
       });
     } else {
       setTimeout(() => {
-        Toast.clear()
+        Toast.clear();
-        gsap.to('.QuestionPage', {
+        gsap.to(".QuestionPage,.qp-result", {
-          duration: 0.5, autoAlpha: 0, onComplete: () => {
+          duration: 0.5,
-            emit("showResult", { pid: currentId.value });
+          autoAlpha: 0,
-          }
+          onComplete: () => {
-        })
+            emit("QuestionPage", { action: 'showResult' });
-      }, 1000)
+          },
+        });
+      }, 1000);
     }
-  })
+  });
-}
+};
-
 
 onMounted(() => {
-  gsap.from('.question-bg', { duration: 0.5, autoAlpha: 0, })
+  gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
-  gsap.from('.question-box', { duration: 0.5, scale: 0.4, autoAlpha: 0, })
+  gsap.from(".question-box", { duration: 0.5, scale: 0.4, autoAlpha: 0 });
-
 });
 
-
-
 const getClass = (item) => {
   if (isChecked.value) {
     if (checkedOption.value.aid == item.aid) {
-      return item.result ? 'correct' : 'incorrect'
+      return item.result ? "correct" : "incorrect";
     }
   }
-}
+};
-
-
-
 </script>
 
 <template>
@@ -132,85 +119,145 @@ const getClass = (item) => {
     <div class="question-bg"></div>
     <div class="question-container">
       <div class="question-box">
-        <!-- 问题序号 -->
+        <div class="question-serial">
+          <div>
+            <div class="serial-icon"></div>
+            <div class="serial-text">{{ ['题目一','题目二','题目三','题目四'][currentId] }}</div>
+          </div>
+          <div class="serial-num">{{ currentId+1 }}/{{ questionList.length }}</div>
+        </div>
         <div class="qa-question-box">
-          <!-- 问题 -->
           <div class="question">
-            <div class="question-text" v-for="item in questionList[currentId].question" :key="item">
+            <div
+              class="question-text"
+              v-for="item in questionList[currentId].question"
+              :key="item"
+            >
               {{ item }}
             </div>
           </div>
           <!-- 选项 -->
           <div class="answer-box">
-            <div class="answer" :class="getClass(item)" v-for="item in questionList[currentId].answer" :key="item.aid">
+            <div
-              <div class="answer-text">
+              class="answer"
-                {{ item.aid }}.{{ item.text }}
+              :class="getClass(item)"
-              </div>
+              v-for="item in questionList[currentId].answer"
-              <div class="result-icon" v-if="isChecked && (item.aid == checkedOption.aid)">
+              :key="item.aid"
-                <div :class="item.result ? 'icon-correct' : 'icon-incorrect'"></div>
+            >
+              <div class="answer-text">{{ item.aid }}.{{ item.text }}</div>
+              <div
+                class="result-icon"
+                v-if="isChecked && item.aid == checkedOption.aid"
+              >
+                <div
+                  :class="item.result ? 'icon-correct' : 'icon-incorrect'"
+                ></div>
               </div>
               <!-- 可点击区域 -->
               <div class="click-area" @click="answerFn(item, $event)"></div>
             </div>
           </div>
-          <div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">
+          <!-- <div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">
             <div v-if='questionList[currentId].tips.length == 1'>
-            {{ isChecked ? `${['回答错误！', '回答正确！'][checkedOption.result]}` : `提示：${t}` }}
+              {{ isChecked ? `${['回答错误！', '回答正确！'][checkedOption.result]}` : `提示：${t}` }}
             </div>
             <div v-else>
-            {{ isChecked ? `${i==0?['回答错误！', '回答正确！'][checkedOption.result]:''}` : `${i==0?'提示：':''}${t}` }}
+              {{ isChecked ? `${i == 0 ? ['回答错误！', '回答正确！'][checkedOption.result] : ''}` : `${i == 0 ? '提示：' : ''}${t}` }}
             </div>
-          </div>
+          </div> -->
         </div>
         <div class="return-btn" @click="nextQuestion($event)"></div>
         <div class="create-btn" @click="viewResult($event)"></div>
-        <div class="qa-megaphone"></div>
       </div>
       <div class="question-gold-icon-1"></div>
     </div>
   </div>
+  <div class="qp-result">
+    <div class="qp-result-box">
+      <div
+        class="qp-result-icon"
+        :class="!QaResult ? 'is-incorrect' : ''"
+      ></div>
+      <div class="qp-result-text">{{ QaResult ? "答对啦" : "答错啦" }}</div>
+      <div class="qp-tips-text">{{ questionList[currentId].tips[0] }}</div>
+      <div class="qp-result-btn"></div>
+    </div>
+    <div
+      class="next-btn"
+      @click="
+        currentId == questionList.length - 1
+          ? viewResult($event)
+          : nextQuestion($event)
+      "
+    >
+      {{ currentId == questionList.length - 1 ? "查看结果" : "下一题" }}
+    </div>
+  </div>
 </template>
 
-<style lang='scss' scope>
+<style lang="scss" scope>
 .QuestionPage {
   @include pos(100%, 1624px, 0px, 0px);
   overflow: hidden;
 
   .question-bg {
     @include pos(750px, 1624px, 0px, 0px);
-    // transform: translateY(-50%);
+    background-image: -webkit-linear-gradient(
-    @include bg_pos("index/bg.jpg");
+      -90deg,
+      #ffffff 15%,
+      #4ebbe5 100%
+    );
   }
 
-
   .question-container {
     @include pos(750px, 1624px, 0px, 0px);
     @include flexCen();
     background-color: rgba($color: #000000, $alpha: 0.3);
 
     .question-box {
-      @include pos(721px, 857px, 20px, 340px);
+      @include pos(727px, 769px, 22px, 308px);
       @include bg_pos("qa/paper.png");
 
+      .question-serial {
+        @include pos(560px, 90px, 110px, 34px);
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        .serial-text {
+          color: #ffffff;
+          font-size: 40px;
+        }
+        .serial-num {
+          font-size: 60px;
+          padding-right: 20px;
+          color: transparent;
+          -webkit-text-stroke: 3px #ffffff; /* 控制描边粗细和颜色 */
+          text-stroke: 3px #ffffff;
+          opacity: 0.5;
+        }
+      }
+
       .qa-question-box {
-        @include pos(563px, 660px, 74px, 106px);
+        @include pos(563px, 660px, 74px, 116px);
         display: flex;
         flex-direction: column;
-        justify-content: space-around;
+        justify-content: flex-start;
-        // justify-content: flex-start;
         align-items: center;
 
         // 问题样式
         .question {
+          margin: 40px auto;
 
           .question-text {
-            font-family: 'HarmonyOS_Sans_SC_Regular';
+            font-family: "FZZY_Regular";
             font-size: 34px;
-            color: #9e4b00;
+            color: #55240d;
             line-height: 50px;
             text-align: justify;
+            font-weight: 700;
           }
-
         }
 
         // 选项样式
@@ -219,12 +266,11 @@ const getClass = (item) => {
           flex-direction: column;
           align-items: center;
           justify-content: space-around;
-          height: 200px;
+          // height: 200px;
-
 
           // 选项通用样式
           .answer {
-            @include box(350px, 65px);
+            width: 504px;
             position: relative;
             border-radius: 32.5px;
             display: flex;
@@ -233,77 +279,112 @@ const getClass = (item) => {
             border: 1px solid #fff;
             color: #9e4b00;
             background-color: #fff2b9;
-            font-weight: 700;
+            margin-bottom: 30px;
+            padding: 10px 20px;
 
             .answer-text {
               font-size: 30px;
-              @include flexCen()
+              line-height: 40px;
+              @include flexCen();
             }
 
             .click-area {
-              @include pos(350px, 65px, 0px, 0px);
+              width: 100%;
+              height: 100%;
               border-radius: 32.5px;
+              position: absolute;
             }
 
             .result-icon {
-
+              position: absolute;
-              @include box(49px, 45px);
+              @include box(504px, 45px);
-              margin-left: 20px;
+              top: 50%;
-
+              transform: translateY(-55%);
+              left: 460px;
 
               .icon-correct {
-                @include box(100%, 100%);
+                @include box(76px, 56px);
                 @include bg_pos("qa/correct.png");
               }
 
               .icon-incorrect {
-                @include box(49px, 45px);
+                @include box(52px, 54px);
                 @include bg_pos("qa/incorrect.png");
               }
             }
           }
 
           .correct {
-            color: #d42122;
+            color: #ffe8b4;
+            font-weight: 700;
+            // background: linear-gradient(-45deg, #facc22, #f83600);
+            background-color: #f83600;
+            border: 2px solid #f0d0ad;
+            // 外发光效果
+            box-shadow: 0px 5px 10px rgba($color: #0188d5, $alpha: 0.5);
+            border-radius: 32.5px;
           }
 
           .incorrect {
-            color: #fff2b9;
+            color: #f83600;
-            background-color: #d42122;
+            font-weight: 700;
-
           }
         }
 
         .question-tips {
           font-size: 25px;
           width: 100%;
-          font-family: 'HarmonyOS_Sans_SC_Regular';
+          font-family: "FZZY_Regular";
           color: #ab7133;
           text-align: center;
           padding: 5px;
         }
-
-
       }
     }
-
+  }
-    .return-btn {
+}
-      @include pos(363px, 113px, 179px, 887px);
+
-      @include bg_pos("qa/cls-btn.png");
+.qp-result {
-      display: none;
+  @include pos(100%, 1624px, 0px, 0px);
-    }
+  overflow: hidden;
-
+  @include flexCen();
-    .create-btn {
+  background-color: rgba($color: #000000, $alpha: 0.6);
-      @include pos(363px, 113px, 179px, 887px);
+  visibility: hidden;
-      @include bg_pos("qa/create-btn.png");
+  .qp-result-box {
-      display: none;
+    @include box(569px, 399px);
-    }
+    @include bg_pos("qa/result-box.png");
-
+    position: relative;
-    .qa-megaphone {
+    .qp-result-icon {
-      @include pos(171px, 208px, 562px, 512px);
+      @include pos(112px, 112px, 222px, -28px);
-      @include bg_pos("qa/megaphone.png");
+      @include bg_pos("qa/correct-icon.png");
-      pointer-events: none;
+    }
-    }
+    .is-incorrect {
+      @include bg_pos("qa/incorrect-icon.png");
+    }
+    .qp-result-text {
+      @include pos(569px, 50px, 0px, 104px);
+      @include flexCen();
+      font-size: 35px;
+      color: #ffffff;
+    }
+    .qp-tips-text {
+      @include pos(569px, 220px, 0px, 150px);
+      padding: 20px;
+      font-size: 25px;
+      line-height: 35px;
+      text-align: justify;
+      color: #b3640d;
+    }
+  }
+
+  .next-btn {
+    @include box(190px, 65px);
+    border: 1px solid #ffffff;
+    @include flexCen();
+    font-size: 35px;
+    color: #ffffff;
+    border-radius: 31px;
+    margin-top: 50px;
   }
 }
 </style>

src/components/QuestionList.vue

@@ -1,213 +0,0 @@
-<template>
-    <div class="QuestionList">
-        <div class="question-list-bg"></div>
-        <div class="question-list-container">
-            <div class="ql-logo"></div>
-            <div class="ql-swiper-box">
-                <swiper class="card-swiper" :slides-per-view="1" :space-between="30" navigation :loop="true">
-                    <swiper-slide v-for="item in 5"
-                        :style="{ width: '100%', display: 'flex', justifyContent: 'center', }">
-                        <div class="card-slide" :class="'card-slide-' + item">
-                            <img class="card-img" :class="'card-img-' + item" :src="getCardImg(item)" alt="" srcset="">
-                        </div>
-                    </swiper-slide>
-                </swiper>
-            </div>
-            <div class="ql-icon"></div>
-            <div class="ql-start-btn" @click="onShowQuestion($event)"></div>
-        </div>
-    </div>
-    <Question v-if="showQuestion" :question-id="questionId" @showResult="onShowResult" @hide="showQuestion = false" />
-</template>
-
-<script setup>
-import { register } from 'swiper/element/bundle';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import 'swiper/css';
-import 'swiper/css/navigation';
-import Question from './Question.vue';
-import { debounceTap } from "@/plugins";
-import gsap from "gsap"
-
-
-const emit = defineEmits(['QuestionList', "showResult"]);
-
-const showQuestion = ref(false)
-const questionId = ref(1)
-
-// 获取灯笼图片
-function getCardImg(item) {
-    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('.card-swiper').swiper;
-        // swiper开启了loop
-        const activeIndex = swiper.realIndex + 1;
-        console.log('activeIndex', activeIndex);
-        questionId.value = activeIndex - 1
-        showQuestion.value = true
-        // emit('QuestionList', activeIndex);
-    })
-}
-
-
-onMounted(() => {
-    entryAnimation()
-})
-
-
-const entryAnimation = () => {
-    gsap.from(".QuestionList", {
-        duration: 0.5,
-        autoAlpha: 0,
-    });
-    gsap.from(".ql-swiper-box", {
-        duration: 0.75,
-        autoAlpha: 0,
-        y: -50,
-        delay: 0.2,
-    });
-    gsap.from(".ql-icon", {
-        duration: 0.75,
-        autoAlpha: 0,
-        x: 50,
-        delay: 0.2,
-    });
-    gsap.from(".ql-start-btn", {
-        duration: 0.75,
-        autoAlpha: 0,
-        y: 50,
-        delay: 0.5,
-        onComplete: () => {
-            gsap.fromTo('.ql-icon', { x: 0 }, { duration: 1, scale: 1.1, x: 25, repeat: -1, yoyo: true, ease: 'bount.in' })
-        }
-    });
-
-
-
-}
-
-
-// 展示结果
-const onShowResult = (result) => {
-    emit('showResult', result)
-    showQuestion.value = false
-}
-
-
-register();
-</script>
-
-<style lang='scss' scoped>
-.QuestionList {
-    @include pos(100%, 1624px, 0px, 0px);
-    overflow: hidden;
-    background: linear-gradient(135deg, #a11b15, #f80c00);
-    // visibility: hidden;
-
-    .question-list-bg {
-        @include pos(750px, 1624px, 0px, 0px);
-        // transform: translateY(-50%);
-        @include bg_pos("index/bg.jpg");
-    }
-
-    .question-list-container {
-        @include pos(750px, 1624px, 0px, 50%);
-        transform: translateY(-50%);
-
-        .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(689px, 522px, 31px, 514px);
-            // background-color: aliceblue;
-            // overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            // pointer-events: none;
-
-
-            .card-swiper {
-                @include box(689px, 522px);
-                position: relative;
-
-
-                .card-slide {
-                    pointer-events: none;
-                    @include box(555px, 522px);
-
-                }
-
-
-                .card-img {
-                    @include box(100%, 100%);
-                    pointer-events: none;
-                }
-
-            }
-
-        }
-
-        .ql-start-btn {
-            @include pos(376px, 114px, 188px, 1129px);
-            @include bg_pos("index/btn.png");
-            z-index: 99;
-        }
-    }
-
-
-
-    /* 自定义 Swiper 左右按钮样式 */
-    ::v-deep .swiper-button-next,
-    ::v-deep .swiper-button-prev {
-        color: white;
-        /* 设置按钮颜色 */
-        // background-color: rgba(0, 0, 0, 0.5); /* 设置按钮背景颜色 */
-        // border-radius: 50%; /* 设置按钮圆角 */
-        @include box(44px, 54px);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        // top: 50%;
-        transform: translateY(-50%);
-    }
-
-    ::v-deep .swiper-button-next::after,
-    ::v-deep .swiper-button-prev::after {
-        font-size: 24px;
-        /* 设置按钮图标大小 */
-        opacity: 0;
-    }
-
-    ::v-deep .swiper-button-prev {
-        // left: 20px; /* 设置按钮位置 */
-        @include bg_pos("question-list/arrow-l.png");
-    }
-
-    ::v-deep .swiper-button-next {
-        // right: 20px; /* 设置按钮位置 */
-        @include bg_pos("question-list/arrow-r.png");
-        // right: 0px;
-    }
-
-
-
-}
-</style>

src/components/Result.vue

@@ -12,394 +12,320 @@ const emit = defineEmits(["ResultPage"]);
 const userStore = useMainStore();
 const posterId = ref(userStore.posterId); //海报背景id：1～11
 
-console.log('海报id', posterId.value);
+console.log("海报id", posterId.value);
 
-// 二维码坐标
+const posterImgSrc = new URL(
-const eqcodePosition = [
+  `../assets/images/result/poster.jpg`,
-    {w:750,h:2107,x: 527, y: 1882},
+  import.meta.url
-    {w:750,h:2111,x: 529, y: 1873},
+).href;
-    {w:750,h:2194,x: 527, y: 1973},
-    {w:750,h:2045,x: 527, y: 1824},
-    {w:750,h:2194,x: 527, y: 1979},
-]
-
-const posterImgList = reactive([
-    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-4.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-5.jpg`, import.meta.url).href,
-
-])
 
 // 生成二维码逻辑
 const eqcodePic = ref();
 onMounted(async () => {
-
+  // 执行任务队列
-    // 执行任务队列
+  await executeTasks();
-    await executeTasks();
-
 });
 
-
 // 这是新加的函数封装异步任务
 const executeTasks = async () => {
-    console.log("二维码生成中...");
+  console.log("二维码生成中...");
 
-    // 生成二维码
+  // 生成二维码
-    const eqCodeUrl = import.meta.env.VITE_URL;
+  const eqCodeUrl = import.meta.env.VITE_URL;
-    eqcodePic.value = await QRCode.toDataURL(eqCodeUrl);
+  eqcodePic.value = await QRCode.toDataURL(eqCodeUrl);
 
-    console.log("生成海报中...");
+  console.log("生成海报中...");
-
-    // 生成海报
-    console.log('pid', posterImgList[posterId.value - 1]);
-
-
-    if (posterImgList[posterId.value - 1] && eqcodePic.value) {
-
-        posterCreate(
-            { width: 750, height: eqcodePosition[posterId.value-1].h },
-            [
-                { name: "bg", src: posterImgList[posterId.value - 1], pos: { w: 750, h: eqcodePosition[posterId.value-1].h, x: 0, y: 0 } },
-                { name: "eqcode", src: eqcodePic.value, pos: { w: 187, h: 187, x: eqcodePosition[posterId.value-1].x, y: eqcodePosition[posterId.value-1].y } },
-            ]
-        );
-    } else {
-        Toast.fail({ message: '生成失败' })
-        emit("ResultPage", { action: 'hide' })
-    }
 
+  if (posterImgSrc && eqcodePic.value) {
+    posterCreate({ width: 750, height: 2502 }, [
+      { name: "bg", src: posterImgSrc, pos: { w: 750, h: 2502, x: 0, y: 0 } },
+      {
+        name: "eqcode",
+        src: eqcodePic.value,
+        pos: { w: 187, h: 187, x: 527, y: 2227 },
+      },
+    ]);
+  } else {
+    Toast.fail({ message: "生成失败" });
+    emit("ResultPage", { action: "hide" });
+  }
 };
 
-
 const showPoster = () => {
-    gsap.to(".posterPop", {
+  gsap.to(".posterPop", {
-        duration: 0.3,
+    duration: 0.3,
-        autoAlpha: 1,
+    autoAlpha: 1,
-    });
+  });
-    gsap.from(".cls-btn-box", {
+  gsap.from(".poster-title", {
-        duration: 0.7,
+    duration: 0.7,
-        scale: 1.2,
+    scale: 0.3,
-        autoAlpha: 0,
+    autoAlpha: 0,
-    });
+  });
-    gsap.from(".poster-box", {
+  gsap.from(".poster-box", {
-        duration: 0.7,
+    duration: 0.7,
-        scale: 0.6,
+    scale: 0.6,
-        autoAlpha: 0,
+    autoAlpha: 0,
-    });
+  });
-    gsap.from(".save-tips", {
+  gsap.from(".save-tips", {
-        duration: 0.7,
+    duration: 0.7,
-        scale: 0.7,
+    scale: 0.7,
-        autoAlpha: 0,
+    autoAlpha: 0,
-        delay: 0.3
+    delay: 0.3,
-    });
+  });
-    gsap.from(".go-draw", {
+  gsap.from(".go-draw", {
-        duration: 0.7,
+    duration: 0.7,
-        y: -30,
+    y: -30,
-        autoAlpha: 0,
+    autoAlpha: 0,
-        delay: 0.5
+    delay: 0.5,
-    });
+  });
-    gsap.from(".go-share", {
+  gsap.from(".go-share", {
-        duration: 0.7,
+    duration: 0.7,
-        y: -30,
+    y: -30,
-        autoAlpha: 0,
+    autoAlpha: 0,
-        delay: 0.7
+    delay: 0.7,
-    });
+  });
-
+};
-}
-
 
 // 去抽奖
 const goDraw = (event) => {
-    let e = event.target;
+  let e = event.target;
-    debounceTap(e, () => {
+  debounceTap(e, () => {
-        if (userStore.hasDraw) {
+    if (userStore.hasDraw) {
-            emit("ResultPage", { action: "showDraw" });
+      emit("ResultPage", { action: "showDraw" });
-        } else {
+    } else {
-            Toast("今日暂无抽奖机会");
+      Toast("今日暂无抽奖机会");
-        }
+    }
-    });
+  });
 };
 
 // 隐藏海报弹窗
 const hidePop = (event) => {
-    let e = event.target;
+  let e = event.target;
-    debounceTap(e, () => {
+  debounceTap(e, () => {
-        gsap.to(".posterPop", {
+    gsap.to(".posterPop", {
-            duration: 0.5, autoAlpha: 0,
+      duration: 0.5,
-            onComplete: () => {
+      autoAlpha: 0,
-                emit('ResultPage', { action: 'hide' })
+      onComplete: () => {
-            }
+        emit("ResultPage", { action: "hide" });
-        });
+      },
     });
+  });
 };
 
-const hide =(event)=>{
+const hide = (event) => {
-    let e = event.target;
+  let e = event.target;
-    debounceTap(e, () => {
+  debounceTap(e, () => {
-        gsap.to(".posterPop", {
+    gsap.to(".posterPop", {
-            duration: 0.5, autoAlpha: 0,
+      duration: 0.5,
-            onComplete: () => {
+      autoAlpha: 0,
-                emit('ResultPage', { action: 'showQuestion' })
+      onComplete: () => {
-            }
+        emit("ResultPage", { action: "showQuestion" });
-        });
+      },
     });
-}
+  });
-
+};
 
 // 展示分享
 const goShare = (event) => {
-    let e = event.target;
+  let e = event.target;
-    debounceTap(e, () => {
+  debounceTap(e, () => {
-        gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
+    gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
-    });
+  });
 };
 
 // 隐藏分享提示
 const hideShare = () => {
-    gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
+  gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
 };
 
-
-
 // 海报生成
 const posterCreate = (option, imageArr) => {
-    let posterUrl = ''
+  let posterUrl = "";
-    const { width, height } = option
+  const { width, height } = option;
-    Toast.loading({
+  Toast.loading({
-        message: '海报生成中',
+    message: "海报生成中",
-        duration: 0,
+    duration: 0,
-        forbidClick: true
+    forbidClick: true,
+  });
+
+  let mycanvas = document.createElement("canvas"); // 创建一个canvas画布元素
+  let ctx = mycanvas.getContext("2d");
+  mycanvas.style.width = `${width}px`; //设置canvas的宽
+  mycanvas.style.height = `${height}px`; //设置canvas的高
+  mycanvas.width = width;
+  mycanvas.height = height;
+  //Promise对象加载资源
+  let loader_p = [];
+  imageArr.map((item) => {
+    const _p = new Promise((resolve) => {
+      const img = new Image();
+      img.crossOrigin = "Anonymous";
+      img.onload = () => {
+        resolve(img);
+      };
+      img.src = item.src;
+    });
+    loader_p.push(_p);
+  });
+  //Promise的.all方法，当所有预加载的图像加载好的回调函数
+  Promise.all(loader_p)
+    .then((imgList) => {
+      console.log("imgList", imgList);
+
+      // 图片素材遍历绘制
+      imgList.map((item, index) => {
+        ctx.drawImage(
+          item,
+          imageArr[index].pos.x,
+          imageArr[index].pos.y,
+          imageArr[index].pos.w,
+          imageArr[index].pos.h
+        ); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
+      });
+
+      //海报绘制完 ，转成图片对象
+      return mycanvas.toDataURL("image/jpeg", 1);
     })
-
+    .then((baseURL) => {
-
+      //返回的图片地址，就是最后海报的地址，可以放在DOM显示
-    let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素 
+      let posterImg = document.querySelector("#posterSrc");
-    let ctx = mycanvas.getContext('2d')
+      posterImg.src = baseURL;
-    mycanvas.style.width = `${width}px`; //设置canvas的宽
+      setTimeout(() => {
-    mycanvas.style.height = `${height}px`; //设置canvas的高
+        // 展示海报
-    mycanvas.width = width
+        showPoster();
-    mycanvas.height = height
+        Toast.success({ message: "生成成功！" });
-    //Promise对象加载资源
+      }, 500);
-    let loader_p = [];
-    imageArr.map((item) => {
-        const _p = new Promise(resolve => {
-            const img = new Image();
-            img.crossOrigin = 'Anonymous'
-            img.onload = () => {
-                resolve(img)
-            };
-            img.src = item.src;
-        });
-        loader_p.push(_p);
     })
-    //Promise的.all方法，当所有预加载的图像加载好的回调函数 
+    .catch((error) => {
-    Promise.all(loader_p)
+      console.error("生成海报失败");
-        .then(imgList => {
+      gsap.to(".posterPop", {
-            console.log('imgList', imgList);
+        duration: 0.5,
-
+        autoAlpha: 0,
-            // 图片素材遍历绘制
+        onComplete: () => {
-            imgList.map((item, index) => {
+          emit("ResultPage", { action: "hide" });
-                ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
+        },
-            })
+      });
-
+      Toast.fail({ message: "生成失败，请重试！" });
-            //海报绘制完 ，转成图片对象
+    });
-            return mycanvas.toDataURL('image/jpeg', 1);
-        })
-        .then(baseURL => {
-            //返回的图片地址，就是最后海报的地址，可以放在DOM显示
-            let posterImg = document.querySelector('#posterSrc')
-            posterImg.src = baseURL
-            setTimeout(() => {
-                // 展示海报
-                showPoster();
-                Toast.success({ message: '生成成功！' })
-
-            }, 500)
-        })
-        .catch(error => {
-            console.error("生成海报失败");
-            gsap.to(".posterPop", {
-                duration: 0.5,
-                autoAlpha: 0,
-                onComplete: () => {
-                    emit('ResultPage', { action: 'hide' })
-                }
-            });
-            Toast.fail({ message: '生成失败，请重试！' });
-        });
-
-    // return posterUrl
-}
 
+  // return posterUrl
+};
 </script>
 
 <template>
-    <div class="posterPop" @touchmove.prevent>
+  <div class="posterPop" @touchmove.prevent>
-        <div class="poster-bg"></div>
+    <div class="poster-bg"></div>
-        <div class="poster-container">
+    <div class="poster-container">
-            <div class="cls-btn-box">
+      <div class="poster-title"></div>
-                <div class="cls-btn" @click="hidePop($event)"></div>
+      <div class="poster-box">
-            </div>
+        <div class="poster">
-            <div class="poster-box" :class="'poster-box-' + posterId">
+          <img id="posterSrc" src="" alt="" srcset="" />
-                <div class="poster" :class="'poster-' + posterId">
-                    <img id="posterSrc" src="" alt="" srcset="">
-                </div>
-                <div class="poster-cls-btn" @click="hide($event)"></div>
-            </div>
-            <div class="save-tips">*长按保存海报</div>
-            <div class="btn-box">
-                <div class="go-draw" @click="goDraw($event)"></div>
-                <div class="go-share" @click="goShare($event)"></div>
-            </div>
         </div>
-
+        <!-- <div class="poster-cls-btn" @click="hide($event)"></div> -->
-    </div>
+      </div>
-    <!-- 分享提示 -->
+      <div class="save-tips">*长按保存海报</div>
-    <div class="sharePop" @click="hideShare">
+      <div class="btn-box">
-        <div class="tips-pic"></div>
+        <div class="go-draw" @click="goDraw($event)"></div>
-        <div class="tips-text">点击右上角分享给你的好友！</div>
+        <div class="go-share" @click="goShare($event)"></div>
+      </div>
     </div>
+  </div>
+  <!-- 分享提示 -->
+  <div class="sharePop" @click="hideShare">
+    <div class="tips-pic"></div>
+    <div class="tips-text">点击右上角分享给你的好友！</div>
+  </div>
 </template>
 
-
 <style lang="scss" scoped>
 .posterPop {
-    @include pos(100%, 1624px, 0px, 0px);
+  @include pos(100%, 1624px, 0px, 0px);
-    overflow: hidden;
+  overflow: hidden;
-    background: linear-gradient(135deg, #d6d1ca, #e5dccf);
+  background: linear-gradient(135deg, #d6d1ca, #e5dccf);
-    visibility: hidden;
+  visibility: hidden;
 
-    .poster-bg {
+  .poster-bg {
-        @include pos(750px, 1624px, 0px, 0px);
+    @include pos(750px, 1624px, 0px, 0px);
-        // transform: translateY(-50%);
+    // transform: translateY(-50%);
-        @include bg_pos("index/bg.jpg");
+    @include bg_pos("index/bg.jpg");
+  }
+
+  .poster-container {
+    @include pos(750px, 1624px, 0px, 0px);
+    @include flexCen();
+    background-color: rgba($color: #000000, $alpha: 0.3);
+
+    .poster-title {
+      @include box(592px, 156px);
+      @include bg_pos("index/title.png");
     }
 
-    .poster-container {
+    .save-tips {
-        @include pos(750px, 1624px, 0px, 0px);
+      font-size: 20px;
-        // transform: translateY(-50%);
+      line-height: 20px;
-        @include flexCen();
+      color: #ffffff;
-        background-color: rgba($color: #000000, $alpha: 0.3);
+      letter-spacing: 2px;
-
-        .cls-btn-box {
-            width: 617px;
-            display: flex;
-            justify-content: flex-end;
-
-            // .cls-btn {
-            //     @include box(49px, 49px);
-            //     @include bg_pos("question-list/cls-btn.png");
-            //     margin-right: -20px;
-            // }
-        }
-
-        .save-tips {
-            font-size: 20px;
-            line-height: 20px;
-            margin-top: 20px;
-            color: #9e4b00;
-            letter-spacing: 2px;
-        }
-
-        .poster-box {
-            @include box(713px, 995px);
-            margin-top: 20px;
-            overflow: hidden;
-            position: relative;
-            
-            .poster-cls-btn{
-                @include pos(53px, 53px,660px,10px);
-                @include bg_pos("result/cls-btn.png");
-            }
-
-            .poster {
-                @include box(100%, 100%);
-                overflow: hidden;
-
-                #posterSrc {
-                    @include box(100%, 100%);
-                    opacity: 0;
-                }
-            }
-
-            .poster-1 {
-                @include bg_pos("result/card-1.png");
-                
-            }
-
-            .poster-2 {
-                @include bg_pos("result/card-2.png");
-            }
-
-            .poster-3 {
-                @include bg_pos("result/card-3.png");
-            }
-
-            .poster-4 {
-                @include bg_pos("result/card-4.png");
-            }
-
-            .poster-5 {
-                @include bg_pos("result/card-5.png");
-            }
-
-        }
-        
-        .poster-box-1{
-            @include box(713px, 995px);
-        }
-        .poster-box-2{
-            @include box(711px, 1010px);
-        }
-        .poster-box-3{
-            @include box(713px, 995px);
-        }
-        .poster-box-4{
-            @include box(713px, 995px);
-        }
-        .poster-box-5{
-            @include box(713px, 995px);
-        }
-
-        .btn-box {
-            @include box(550px, 104px);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 20px;
-
-            .go-draw {
-                @include box(257px, 104px);
-                @include bg_pos("result/go-draw-btn.png");
-            }
-
-            .go-share {
-                @include box(274px, 95px);
-                @include bg_pos("result/go-share-btn.png");
-            }
-        }
     }
 
+    .poster-box {
+      @include box(720px, 882px);
+      margin-top: 20px;
+      overflow: hidden;
+      position: relative;
 
+      .poster-cls-btn {
+        @include pos(53px, 53px, 660px, 10px);
+        @include bg_pos("result/cls-btn.png");
+      }
+
+      .poster {
+        @include box(100%, 100%);
+        overflow: hidden;
+        @include bg_pos("result/card.png");
+
+        #posterSrc {
+          @include box(100%, 100%);
+          opacity: 0;
+        }
+      }
+    }
+
+    .btn-box {
+      @include box(550px, 91px);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 20px;
+
+      .go-draw {
+        @include box(243px, 91px);
+        @include bg_pos("result/go-draw-btn.png");
+      }
+
+      .go-share {
+        @include box(243px, 91px);
+        @include bg_pos("result/go-share-btn.png");
+      }
+    }
+  }
 }
 
 .sharePop {
-    @include fixed();
+  @include fixed();
-    background-color: rgba($color: #000000, $alpha: 0.54);
+  background-color: rgba($color: #000000, $alpha: 0.54);
-    visibility: hidden;
+  visibility: hidden;
 
-    .tips-pic {
+  .tips-pic {
-        @include pos(100px, 100px, 600px, 180px);
+    @include pos(100px, 100px, 600px, 180px);
-        @include bg_pos("result/share-tips.svg");
+    @include bg_pos("result/share-tips.svg");
-        stroke: #ffffff;
+    stroke: #ffffff;
-    }
+  }
 
-    .tips-text {
+  .tips-text {
-        font-size: 25px;
+    font-size: 25px;
-        @include pos(750px, 100px, 0px, 300px);
+    @include pos(750px, 100px, 0px, 300px);
-        color: #ffffff;
+    color: #ffffff;
-        text-align: right;
+    text-align: right;
-    }
+  }
 }
 </style>

src/components/Rule.vue

@@ -33,13 +33,13 @@ onMounted(() => {
                     <div class="rule-text-area wrapper">
                         <div>
                             <div class="part">
-                                <div>活动时间：2025年4月27日——4月30日</div>
+                                <div>活动时间：2025年5月28日——5月31日</div>
                                 <div>活动奖励：微信红包</div>
                             </div>
                             <div class="part">
                                 <div>活动攻略：</div>
                                 <div>
-                                    1、【打卡理想假期，五一好礼等你】活动共设计5道题目，首页进入后左右滑动选择您想打卡的地点，点击进行答题，答对后即可获取专属打卡海报，并参与抽奖；答错时将跳转回选择打卡地点的页面，重新答题。
+                                    1、【龙舟争渡 稳健为先——端午赛龙舟中的投资哲学】活动共设计4道题目，首页进入后点击进行答题，全部答对即可获取专属赛龙舟海报，并参与抽奖；答错时刷新即可重新回答本题。
                                 </div>
                                 <div>2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。</div>
                             </div>
@@ -47,7 +47,7 @@ onMounted(() => {
                                 <div>领奖说明：</div>
                                 <div>
                                     1、中奖后在中奖页面复制兑换码，前往<span
-                                        class="blod">[平安理财服务号]</span>消息框输入“五一快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品]
+                                        class="blod">[平安理财服务号]</span>消息框输入“端午安康”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品]
                                     内查看兑换码；
                                 </div>
                                 <div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
@@ -98,12 +98,12 @@ onMounted(() => {
 
     .rule-container {
         position: relative;
-        @include box(685px, 876px);
+        @include box(708px, 880px);
         overflow: hidden;
 
         .content {
             .rule-content {
-                @include box(685px, 876px);
+                @include box(708px, 880px);
                 @include bg_pos("rule/rule-box.png");
                 position: relative;
                 overflow: hidden;
@@ -151,7 +151,7 @@ onMounted(() => {
             }
 
             .rule-icon {
-                @include pos(97px, 120px, 561px, 25px);
+                @include pos(121px, 104px, 501px, 25px);
                 @include bg_pos("rule/icon.png");
                 pointer-events: none;
             }

src/data/imgList.js

@@ -1,73 +1,48 @@
 const load = [
   "load/icon.png",
-  "load/icon-2.png",
-  "index/bg.jpg",
   "music-on.png",
+  "music-off.png",
   "share.jpg",
+  "orientation-icon.png",
 ];
 
 const page = [
   "index/title.png",
   "index/time.png",
-  "index/paper.png",
-  "index/text.png",
-  "index/megaphone.png",
-  "index/logo.png",
-  "index/line.png",
-  "index/card-5.png",
-  "index/card-3.png",
-  "index/card-4.png",
-  "index/card-2.png",
-  "index/card-1.png",
-  "index/bg.jpg",
   "index/btn.png",
+  "index/logo.png",
+  "index/bg.jpg",
 
   "prize/tips.png",
   "prize/star.png",
-  "prize/draw-text.png",
-  "prize/light.png",
   "prize/myPrize-box2.png",
   "prize/no-prize.png",
+  "prize/light.png",
+  "prize/myPrize-box.png",
+  "prize/draw-text.png",
   "prize/cls-btn.png",
   "prize/copy-btn.png",
   "prize/draw-box.png",
 
-  "qa/paper.png",
+  "qa/text-bg.png",
-  "qa/megaphone.png",
+  "qa/result-box.png",
-  "qa/cls-btn.png",
-  "qa/correct.png",
-  "qa/create-btn.png",
   "qa/incorrect.png",
+  "qa/paper.png",
+  "qa/incorrect-icon.png",
+  "qa/correct-icon.png",
+  "qa/correct.png",
 
-  "question-list/megaphone.png",
+  "result/poster.jpg",
-  "question-list/btn.png",
+  "result/card.png",
-  "question-list/card-1.png",
-  "question-list/card-2.png",
-  "question-list/card-3.png",
-  "question-list/card-4.png",
-  "question-list/card-5.png",
-  "question-list/arrow-l.png",
-  "question-list/arrow-r.png",
-
-  "result/share-tips.svg",
-  "result/go-share-btn.png",
-  "result/poster-1.jpg",
-  "result/poster-2.jpg",
-  "result/poster-3.jpg",
-  "result/poster-4.jpg",
-  "result/poster-5.jpg",
-  "result/go-draw-btn.png",
   "result/cls-btn.png",
-  "result/card-1.png",
+  "result/go-draw-btn.png",
-  "result/card-2.png",
+  "result/go-share-btn.png",
-  "result/card-3.png",
+  "result/bg.jpg",
-  "result/card-4.png",
-  "result/card-5.png",
 
   "rule/rule-box.png",
-  "rule/icon.png",
   "rule/arrow.png",
   "rule/cls-btn.png",
+  "rule/icon.png",
 ];
 
 // 处理为vite引入图片格式

src/data/index.js

@@ -2,96 +2,77 @@ export const data = [
   {
     id: 1,
     question: [
-      "欢迎你打卡这座8D魔幻山城：轨道交通在楼宇腹中游走，立交桥如基因链螺旋攀升，万家灯火在悬崖上生长出十三层吊脚楼。这座将三维空间玩到极致的城市是？",
+      "赛龙舟时，鼓手用节奏统一行动，舵手把控方向，划手齐心发力，三者缺一不可。这体现了哪种投资模式？",
     ],
     answer: [
       {
         aid: "A",
-        text: "重庆",
+        text: "平台化高效协作投资模式，集体智慧",
         result: 1,
       },
       {
         aid: "B",
-        text: "成都",
+        text: "明星基金经理的单打独斗，个人英雄主义",
         result: 0,
       },
     ],
-    tips: [`一座被火锅“包围”的城市`],
+    tips: [`平安理财采取平台化、模块化的投资模式，通过团队作战能更好协调更优势、更广泛的资源，并最终为客户创造可持续的投资收益，截至 2025 年 5月15日已累计为 1700 万名客户创造1092亿元投资收益。`],
   },
   {
     id: 2,
     question: [
-      "千年明珠镶嵌在碧波之中，翠绿的龙井茶园与华美丝绸交织成如诗画卷。湖畔飘荡着茶香，钱塘江潮见证着岁月轮回。古塔倒影中藏着南宋古都的繁华记忆，运河的船桨声与古寺钟声和谐共鸣。这座把诗画意境刻进骨子里的千年古城是？",
+      "赛龙舟经常会遇上河道弯曲或河流湍急，常常出现翻船风险，为了确保顺利抵达终点，在拐弯及面对急流时所使用的技巧与投资中的哪种情况相符？",
     ],
     answer: [
       {
         aid: "A",
-        text: "杭州",
+        text: "追求单车变摩托，冒险前进，重仓搏一把",
-        result: 1,
+        result: 0,
       },
       {
         aid: "B",
-        text: "南昌",
+        text: "坚持绝对收益目标，严格风险控制，稳健为先",
-        result: 0,
+        result: 1,
       },
     ],
-    tips: [`有“人间天堂”美称的城市`],
+    tips: [`稳健是资产长期增值的关键，平安理财坚持以绝对收益为目标，截至2025年5月15日，旗下定开/封闭式多个产品线实现历史到期兑付100%正收益（如启航系列、稳健精选系列、启元系列、新安鑫系列、卓越成长系列、卓越稳健系列等）。`],
   },
   {
     id: 3,
     question: [
-      "欢迎你打卡这座『四季如春』的童话城：鲜花在冬天抢了春天的戏，海鸥与彩云齐飞，石头森林藏着万年奇景，蓝花雨巷把街道染成紫色星河。问：这座被春天永久收藏的城市是？",
+      "赛龙舟中，队伍需在发令枪响的瞬间同步起桨，冲刺阶段更需高频划桨。这与下列哪种投资策略相符？",
     ],
     answer: [
       {
         aid: "A",
-        text: "贵阳",
+        text: "精准把握市场机会，适当追求超额收益",
-        result: 0,
+        result: 1,
       },
       {
         aid: "B",
-        text: "昆明",
+        text: "一旦配置长期不动，顺其自然随遇而安",
-        result: 1,
+        result: 0,
       },
     ],
-    tips: [`“彩云之南”的首府`],
+    tips: [`稳健为先的前提下，平安理财通过多资产、多策略的能力优势，在低利率时代中力争为投资者创造相对不错的超额收益。如鑫享全球动量策略日开180天持有1号A今年以来年`],
   },
   {
     id: 4,
     question: [
-      "欢迎你闯入这座通宵狂欢的『古今混搭城』：唐代楼阁挂满灯笼，网红不倒翁小姐姐在人群中飘摇。猜猜这是哪座古都的网红步行街，能把长安城的盛世繁华变成24小时不打烊的嘉年华？",
+      "赛龙舟通常500米，但有一种达到了30公里，号称龙舟马拉松。如果说500米赛龙舟对应的是投资中短期主义，那么龙舟马拉松对应的是哪种情怀？",
     ],
     answer: [
       {
         aid: "A",
-        text: "太原",
+        text: "投机主义，左右摇摆或见风使舵",
         result: 0,
       },
       {
         aid: "B",
-        text: "西安",
+        text: "长期主义精神，坚持长期稳健经营理念",
         result: 1,
       },
     ],
-    tips: [`拥有被称为“世界第八大奇迹”的`, `秦始皇陵兵马俑`],
+    tips: [`行稳方能致远。长期主义是以长远视角进行决策和行动的价值观，其核心在于追求可持续的价值增长，而非短期利益的最大化。这是平安理财自成立以来一直坚持的投资和经营理念。`],
-  },
-  {
-    id: 5,
-    question: [
-      "欢迎你来到这座『科技主题乐园』——摩天大楼间闪着AI电子屏瀑布，无人机表演在夜空中拼出会动的二维码，华强北的电子零件能拼出太空卫星，问：哪座城市用代码写诗，让城市灯光秀变成通往未来的动画片？",
-    ],
-    answer: [
-      {
-        aid: "A",
-        text: "深圳",
-        result: 1,
-      },
-      {
-        aid: "B",
-        text: "南宁",
-        result: 0,
-      },
-    ],
-    tips: [`全国最早实行对外开放的`, `四个经济特区之一`],
   },
 ];

src/page/Home/App.vue

@@ -2,8 +2,6 @@
   <div class="home" @click.once="firstClick">
     <div class="home-container">
       <Index v-if="showIndex" @IndexPage="indexFn"></Index>
-      <QuestionList v-if="showQuestionList" ref="QuestionListRef" @QuestionList="questionListFn"
-        @showResult="onShowResult"></QuestionList>
       <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
       <Result v-if="showResult" @ResultPage="resultFn"></Result>
       <MyPrize v-if="showMyPrize" @MyPrizePage="myPrizeFn"></MyPrize>
@@ -12,8 +10,14 @@
       <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
       <!-- 音乐图标 -->
       <div class="music_icon" @click="musicPlay">
-        <audio style="display: none; height: 0" id="bg-music" autoplay="autoplay" preload="auto" :src="musicUrl"
+        <audio
-          loop="loop"></audio>
+          style="display: none; height: 0"
+          id="bg-music"
+          autoplay="autoplay"
+          preload="auto"
+          :src="musicUrl"
+          loop="loop"
+        ></audio>
       </div>
     </div>
   </div>
@@ -24,24 +28,18 @@ import gsap from "gsap";
 import Loading from "@/components/Loading";
 import Index from "@/components/Index";
 import Question from "@/components/Question";
-import QuestionList from "@/components/QuestionList";
 import MyPrize from "@/components/MyPrize";
 import Draw from "@/components/Draw";
 import Result from "@/components/Result";
 import Rule from "@/components/Rule";
-import {
+import { getQueryString, screenOrientation, fontAdpat } from "@/plugins";
-  getQueryString,
-  screenOrientation,
-  fontAdpat,
-} from "@/plugins";
 import { authorize, getUserInfo } from "@/api";
 import { Toast } from "vant";
 import { useMainStore } from "@/store";
 
-
 const userStore = useMainStore();
 
-const musicUrl = new URL(`@/assets/media/bgm.mp3`, import.meta.url).href
+const musicUrl = new URL(`@/assets/media/bgm.mp3`, import.meta.url).href;
 
 const showLoad = ref(false);
 const loadFn = (item) => {
@@ -60,7 +58,7 @@ const indexFn = (item) => {
     showMyPrize.value = true;
   }
   if (item.action == "start") {
-    showQuestionList.value = true;
+    showQuestion.value = true;
   }
 
   if (item.action == "showRule") {
@@ -87,21 +85,6 @@ const myPrizeFn = (item) => {
   }
 };
 
-const QuestionListRef = ref(null)
-const showQuestionList = ref(false);
-const questionListFn = (item) => {
-  if (item.action == "hide") {
-    showQuestionList.value = false;
-  }
-};
-const posterId = ref(1)
-const onShowResult = (item) => {
-  // posterId.value = item.pid || 1
-  posterId.value = 1
-  showResult.value = true;
-}
-
-
 const showDraw = ref(false);
 const drawFn = (item) => {
   if (item.action == "hide") {
@@ -113,12 +96,9 @@ const showResult = ref(false);
 const resultFn = (item) => {
   if (item.action == "hide") {
     showResult.value = false;
-    console.log('hide', showResult.value);
+    console.log("hide", showResult.value);
-  }
-  if(item.action == "showQuestion"){
-    showQuestionList.value = true;
-    showResult.value = false;
   }
+
   if (item.action == "showDraw") {
     showDraw.value = true;
   }
@@ -147,8 +127,8 @@ onMounted(() => {
           userStore.updateToken(res.data);
           // 开始加载组件
           showLoad.value = true;
-          iosMusic() //自动播放音乐
+          iosMusic(); //自动播放音乐
-          gsap.set('.music_icon', { autoAlpha: 1 })
+          gsap.set(".music_icon", { autoAlpha: 1 });
           return;
         } else {
           authorize({ scopeType: 1, redirectUri: url }).then((res) => {
@@ -224,13 +204,11 @@ onMounted(() => {
     }
   } else {
     showLoad.value = true;
-    iosMusic() //自动播放音乐
+    iosMusic(); //自动播放音乐
-    gsap.set('.music_icon', { autoAlpha: 1 })
+    gsap.set(".music_icon", { autoAlpha: 1 });
   }
 });
 
-
-
 // ios端音乐自动播放
 const iosMusic = () => {
   // ios自动播放音乐
@@ -259,7 +237,6 @@ const iosMusic = () => {
   musicBtnAni.play();
 };
 
-
 // 音乐播放
 const musicBtnAni = gsap.timeline();
 const playStatu = ref(true);
@@ -285,24 +262,22 @@ const firstClick = () => {
   audio.play();
   playStatu.value = true;
   console.log("播放");
-}
+};
-
 </script>
 
 <style lang="scss">
 #app {
   overflow: hidden;
   background: linear-gradient(135deg, #d6d1ca, #e5dccf);
-  font-family: "HarmonyOS_Sans_SC_Regular";
+  font-family: "FZZY_Regular";
 }
 
 #__vconsole {
   visibility: hidden;
 }
 
-
 .music_icon {
-  @include pos(60px, 60px, 50px, 245px);
+  @include pos(60px, 60px, 20px, 175px);
   @include bg_pos("music-on.png");
   z-index: 99;
   visibility: hidden;
@@ -316,10 +291,8 @@ const firstClick = () => {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
   }
-
 }
 
-
 // 音乐-on样式
 .music-on {
   @include bg_pos("music-on.png");

src/page/Home/main.js

@@ -19,8 +19,8 @@ app.config.globalProperties.imgUrl = (url) => {
 
 // 微信分享配置
 wxShare({
-    title: '打卡理想假期 五一好礼等你',
+    title: '龙舟争渡 稳健为先',
-    desc: '穿越城市地标，解锁你的财富基因',
+    desc: '端午赛龙舟中的投资哲学',
 })
 
 // 测试环境开vconsole

src/styles/global.scss

@@ -45,15 +45,12 @@ body {
 }
 
 
-
+/*--------------------
-
+   自定义样式
+ -------------------*/
 @font-face {
-  font-family: "HarmonyOS_Sans_SC_Regular";
+  font-family: "FZZY_Regular";
-  src: url(@/assets/font/HarmonyOS_Sans_SC_Regular.ttf) format("truetype");
+  src: url(@/assets/font/FZZY_Regular.ttf) format("truetype");
-}
-@font-face {
-  font-family: "DouyinSansBold";
-  src: url(@/assets/font/DouyinSansBold.ttf) format("truetype");
 }
 
 * {

vite.config.js

@@ -33,7 +33,7 @@ export default defineConfig(({ command, mode }) => {
             template: 'index.html',
             injectOptions: {
               data: {
-                title: '打卡理想假期',
+                title: '龙舟争渡 稳健为先',
               },
             }
           },