完成所有切图

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

@@ -38,7 +38,6 @@ onMounted(() => {
   gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
   gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0, delay: 1 });
   gsap.from(".index-time", { duration: 1, x: 40, autoAlpha: 0, delay: 1 });
-  gsap.from(".index-text", { duration: 1, scale: 2, autoAlpha: 0, delay: 1 });
   gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0, delay: 0.75 });
   gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0, delay: 1.3 });
   gsap.from(".index-prize-btn", {
@@ -124,7 +123,7 @@ const showVC = () => {
 
     .index-title {
       // pointer-events: none;
-      @include pos(593px, 155px, 85px, 387px);
+      @include pos(593px, 156px, 85px, 387px);
       @include bg_pos("index/title.png");
     }
 

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="exchnage-tips2">（兑换码可在主页面“我的奖品” 再次查看并复制）</div>
+      <div class="exchange-tips">
+        兑换流程：前往微信搜索【平安理财服务号】公众号发送“端午安康”获取兑奖链接，输入兑换码兑换奖品
+      </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,11 +162,10 @@ onMounted(() => {
       // background-color: aqua;
     }
 
-
     .myPrize-cls-btn {
       @include pos(82px, 82px, 517px, 114px);
       @include bg_pos("prize/cls-btn.png");
     }
   }
 }
-</style>
+</style>

src/components/Question.vue

@@ -122,7 +122,7 @@ const getClass = (item) => {
         <div class="question-serial">
           <div>
             <div class="serial-icon"></div>
-            <div class="serial-text">第{{ currentId + 1 }}题</div>
+            <div class="serial-text">{{ ['题目一','题目二','题目三','题目四'][currentId] }}</div>
           </div>
           <div class="serial-num">{{ currentId+1 }}/{{ questionList.length }}</div>
         </div>
@@ -235,6 +235,7 @@ const getClass = (item) => {
           color: transparent;
           -webkit-text-stroke: 3px #ffffff; /* 控制描边粗细和颜色 */
           text-stroke: 3px #ffffff;
+          opacity: 0.5;
         }
       }
 

src/components/Result.vue

@@ -56,9 +56,9 @@ const showPoster = () => {
     duration: 0.3,
     autoAlpha: 1,
   });
-  gsap.from(".cls-btn-box", {
+  gsap.from(".poster-title", {
     duration: 0.7,
-    scale: 1.2,
+    scale: 0.3,
     autoAlpha: 0,
   });
   gsap.from(".poster-box", {
@@ -216,6 +216,7 @@ const posterCreate = (option, imageArr) => {
   <div class="posterPop" @touchmove.prevent>
     <div class="poster-bg"></div>
     <div class="poster-container">
+      <div class="poster-title"></div>
       <div class="poster-box">
         <div class="poster">
           <img id="posterSrc" src="" alt="" srcset="" />
@@ -251,14 +252,12 @@ const posterCreate = (option, imageArr) => {
 
   .poster-container {
     @include pos(750px, 1624px, 0px, 0px);
-    // transform: translateY(-50%);
     @include flexCen();
     background-color: rgba($color: #000000, $alpha: 0.3);
 
-    .cls-btn-box {
-      width: 617px;
-      display: flex;
-      justify-content: flex-end;
+    .poster-title {
+      @include box(592px, 156px);
+      @include bg_pos("index/title.png");
     }
 
     .save-tips {

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;
@@ -122,7 +122,7 @@ onMounted(() => {
                         margin-top: 30px;
                         text-align: justify;
                         padding: 0 10px;
-                        font-family: 'FZZY_Regular';
+                        font-family: 'HarmonyOS_Sans_SC_Regular';
                     }
 
                     .blod {
@@ -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,24 +1,48 @@
 const load = [
   "load/icon.png",
-
-  "index/bg.jpg",
   "music-on.png",
+  "music-off.png",
   "share.jpg",
+  "orientation-icon.png",
 ];
 
 const page = [
+  "index/title.png",
+  "index/time.png",
+  "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/text-bg.png",
+  "qa/result-box.png",
+  "qa/incorrect.png",
+  "qa/paper.png",
+  "qa/incorrect-icon.png",
+  "qa/correct-icon.png",
+  "qa/correct.png",
 
+  "result/poster.jpg",
+  "result/card.png",
+  "result/cls-btn.png",
+  "result/go-draw-btn.png",
+  "result/go-share-btn.png",
+  "result/bg.jpg",
+
+  "rule/rule-box.png",
+  "rule/arrow.png",
+  "rule/cls-btn.png",
+  "rule/icon.png",
 ];
 
 // 处理为vite引入图片格式

src/page/Home/App.vue

@@ -85,8 +85,6 @@ const myPrizeFn = (item) => {
   }
 };
 
-const posterId = ref(1);
-
 const showDraw = ref(false);
 const drawFn = (item) => {
   if (item.action == "hide") {
@@ -94,7 +92,7 @@ const drawFn = (item) => {
   }
 };
 
-const showResult = ref(true);
+const showResult = ref(false);
 const resultFn = (item) => {
   if (item.action == "hide") {
     showResult.value = false;
@@ -205,7 +203,7 @@ onMounted(() => {
       });
     }
   } else {
-    // showLoad.value = true;
+    showLoad.value = true;
     iosMusic(); //自动播放音乐
     gsap.set(".music_icon", { autoAlpha: 1 });
   }
@@ -271,7 +269,7 @@ const firstClick = () => {
 #app {
   overflow: hidden;
   background: linear-gradient(135deg, #d6d1ca, #e5dccf);
-  // font-family: "FZZY_Regular";
+  font-family: "FZZY_Regular";
 }
 
 #__vconsole {
@@ -279,7 +277,7 @@ const firstClick = () => {
 }
 
 .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;

src/page/Home/main.js

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

src/styles/global.scss

@@ -44,14 +44,10 @@ body {
   /* -webkit-user-select: none;*/
 }
 
-@font-face {
-  font-family: "HarmonyOS_Sans_SC_Regular";
-  src: url(@/assets/font/HarmonyOS_Sans_SC_Regular.ttf) format("truetype");
-}
-@font-face {
-  font-family: "DouyinSansBold";
-  src: url(@/assets/font/DouyinSansBold.ttf) format("truetype");
-}
+
+/*--------------------
+   自定义样式
+ -------------------*/
 @font-face {
   font-family: "FZZY_Regular";
   src: url(@/assets/font/FZZY_Regular.ttf) format("truetype");