完成所有切图

package.json

@@ -17,7 +17,6 @@
     "howler": "^2.2.4",
     "pinia": "^2.2.0",
     "qrcode": "^1.5.3",
-    "swiper": "^11.2.1",
     "qs": "^6.11.2",
     "vant": "^3.6.12",
     "vconsole": "^3.15.1",

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,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

@@ -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");

vite.config.js

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

yarn.lock

@@ -1436,11 +1436,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swiper@^11.2.1:
-  version "11.2.7"
-  resolved "https://registry.npmmirror.com/swiper/-/swiper-11.2.7.tgz#9657e467047cf098b6c9a79d1864bc6810d2e4fb"
-  integrity sha512-oPJCwdcjFMw3SoBM7AdB1RJzjT7JaE4Mg7TWceTmJ/i2OtF8L01Ct+5eOf48nG3trgR0wXFekWdfnTdl0eg6Pg==
-
 terser@^5.10.0:
   version "5.27.0"
   resolved "https://registry.npmmirror.com/terser/-/terser-5.27.0.tgz#70108689d9ab25fef61c4e93e808e9fd092bf20c"

字体压缩.txt

@@ -1,142 +0,0 @@
-
-<template>
-    <div class="RulePage" @touchmove.prevent>
-        <div class="rule-container">      <div class="index-agreement">
-          风险提示: 本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
-          class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
-          class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
-      </div>
-            <div class="content">
-                <div class="rule-content">
-                    <div class="rule-text-area wrapper">
-                        <div>
-                        <div class="part">
-                            <div>活动时间：2024年7月31日——8月2日</div>
-                            <div>活动奖励：微信红包</div>
-                        </div>
-                        <div class="part">第{{ questionList[currentId].id }}题
-                            <div>活动攻略：</div>
-                            <div>
-                                1、进入活动参加【好理在手 邂逅清凉一夏】答题，共设计3道题目，全部选择完毕后即可参与抽奖活动；
-                            </div>
-                            <div>2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。</div>
-                        </div>
-                        <div class="part">
-                            <div>领奖说明：</div>
-                            <div>
-                                <span class="blod">1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“清凉一夏”获取兑换链接，进入链接输入兑换码兑换奖品。</span>如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
-                            </div>
-                            <div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
-                            <div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
-                            <div class="part">其他：</div>
-                            <div>
-                                活动期间如遇到任何问题，请在<span class="blod">[平安理财服务号]</span>后台咨询，我们会在一个工作日内回复。
-                            </div>
-                            <div class="part">说明：平安理财有权对活动规则进行解释</div>
-                        </div>
-                        <div class="part">
-                            <div>活动规则：</div>
-                            <div>
-                                1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
-                            </div>
-                            <div>
-                                (1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
-                            </div>
-                            <div>
-                                (2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
-                            </div>
-                            <div>
-                                (3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
-                            </div>
-                            <div>
-                                2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
-                            </div>
-                            <div>
-                                3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
-                            </div>
-                        </div>
-                        <div class="margin-bottom-area"></div>
-                    </div>
-                    </div>
-                </div>
-                <div class="rule-bottom-bg"></div>
-                <div class="rule-arrow"></div>
-                <div class="rule-icon"></div>
-            </div>
-        </div>
-        <div class="rule-cls-btn" @click="hide($event)"></div>
-    </div>
-</template>  
-1234567890,./
-export const data = [
-    {
-        id: 1,
-        question: [
-            '激情夏日温度攀升，理财投资热情高涨。当理财市场有波动、收益上涨，别人劝你搏一搏时，正确的做法是:',
-        ],
-        answer: [
-            {
-                aid: 'A',
-                text: [
-                    '当然all in，我就是热点中心',
-                ],
-                result:'incorrect',
-            },
-            {
-                aid: 'B',
-                text: [
-                    '鸡蛋不放在一个篮子里，样样都来点儿',
-                ],
-                result:'correct',
-            },
-        ],
-        analysis: ['解析：选择B。虽然市场热点可能带来诱人的收益，但理财的基本原则是风险管理。通过将投资分散在不同的理财产品和市场，可以降低单一投资的风险，争取资产增长的机会。']
-    },
-    {
-        id: 2,
-        question: [
-            '2、夏日闲钱早规划，get生活小确幸。长期来看，选择哪类型理财，可以较稳健地进行闲钱进阶？',
-        ],
-        answer: [
-            {
-                aid: 'A',
-                text: [
-                    '较低风险的现金类产品',
-                ],
-                result:'incorrect',
-            },
-            {
-                aid: 'B',
-                text: [
-                    '策略稳健的固收类理财产品',
-                ],
-                result:'correct',
-            },
-        ],
-        analysis: ['解析：选择B。现金类产品具有高流动性的特征，更适合日常流动资金。但在长期限选择中，固收理财拥有较大的投资范围和空间，运用策略提供稳健体验，有效平衡风险，力争增厚收益机会，闲钱再进阶。因此不同的资金用途记得匹配不同产品噢。']
-    },
-    {
-        id: 3,
-        question: [
-            '3、夏天的快乐是多巴胺旅行给的！想要一场说走就走的快乐，平时的旅行备用金该如何准备才好呢？',
-        ],
-        answer: [
-            {
-                aid: 'A',
-                text: [
-                    '购买最短持有期理财产品，享灵活与收益空间',
-                ],
-                result:'correct',
-            },
-            {
-                aid: 'B',
-                text: [
-                    '船到桥头自然直',
-                ],
-                result:'incorrect',
-            },
-        ],
-        analysis: ['解析：选择A。最短持有期理财产品拥有较为灵活的申赎机制，在持有时间超过最短持有的时间要求后，随时可发起赎回，闲置时力争收益机会，用钱时满足你的流动性需求。']
-    },
-]
-abAbB元