预加载、字体压缩

src/components/Result copy.vue

@@ -1,381 +0,0 @@
-<script setup>
-import { gsap } from "gsap";
-import { debounceTap } from "@/plugins";
-import { useMainStore } from "@/store";
-import { posterCreate } from "@/plugins";
-import { Toast } from "vant";
-import QRCode from "qrcode";
-import { reactive } from "vue";
-
-// 页面配置初始化
-const emit = defineEmits(["ResultPage"]);
-const userStore = useMainStore();
-const posterId = ref(userStore.posterId); //海报背景id：1～4
-
-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,
-])
-
-// 生成二维码逻辑
-const eqcodePic = ref();
-onMounted(() => {
-    console.log('posterId:',posterId.value);
-    let eqCodeUrl = import.meta.env.VITE_URL;
-    QRCode.toDataURL(eqCodeUrl)
-        .then((url) => {
-            eqcodePic.value = url;
-            // console.log("eq", eqcodePic.value);
-        })
-        .catch((err) => {
-            console.error(err);
-        });
-
-    gsap.from(".result-bg", {
-        duration: 0.7,
-        scale: 1.2,
-        autoAlpha: 0,
-    });
-
-    gsap.from(".result-larnten-box", {
-        duration: 0.7,
-        scale: 1.4,
-        autoAlpha: 0,
-    });
-    gsap.from(".result-larnten", {
-        duration: 0.7,
-        scale: 0.7,
-        autoAlpha: 0,
-    });
-    gsap.from(".result-blessing-1", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:0.5
-    });
-    gsap.from(".result-blessing-2", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:0.7
-    });
-    gsap.from(".result-product", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:1
-    });
-    gsap.from(".result-tips", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:1.2
-    });
-    gsap.from(".create-poster", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:1.4,
-        onComplete:()=>{
-            // gsap.to('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
-            let gl = gsap.timeline({repeat:-1,yoyo:true})
-            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'3deg',ease:'none'})
-            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'0deg',ease:'none'})
-            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'-3deg',ease:'none'})
-            // gsap.fo('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
-
-        }
-    });
-});
-
-// 生成海报逻辑
-const createPoster = (event) => {
-    let e = event.target;
-    debounceTap(e, () => {
-        // 海报生成
-        posterCreate(
-            { width: 750, height: 1334 }, //海报尺寸
-            // 海报素材，按顺序依次渲染
-            [
-                // 背景
-                {
-                    name: "bg",
-                    src: posterImgList[posterId.value-1],
-                    pos: { w: 750, h: 1334, x: 0, y: 0 },
-                },
-                //   二维码
-                {
-                    name: "eqcode",
-                    src: eqcodePic.value,
-                    pos: { w: 164, h: 164, x: 159, y: 1122 },
-                },
-            ],
-        );
-
-        // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
-        
-    });
-};
-
-// 去抽奖
-const goDraw = (event) => {
-    let e = event.target;
-    debounceTap(e, () => {
-        if (userStore.hasDraw) {
-            emit("ResultPage", { action: "showDraw" });
-        } else {
-            Toast("今日暂无抽奖机会");
-        }
-    });
-};
-
-// 隐藏海报弹窗
-const hidePop = (event) => {
-    let e = event.target;
-    debounceTap(e, () => {
-        gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
-    });
-};
-
-// 展示分享
-const goShare = (event) => {
-    let e = event.target;
-    debounceTap(e, () => {
-        gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
-    });
-};
-
-// 隐藏分享提示
-const hideShare = () => {
-    gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
-};
-</script>
-
-<template>
-    <div class="ResultPage" @touchmove.prevent>
-        <div class="result-bg"></div>
-        <div class="result-container">
-            <div class="result-larnten-box" :class="'larnten-box-'+posterId"></div>
-            <div class="result-larnten" :class="'larnten-'+posterId"></div>
-            <!-- 新年祝福语 -->
-            <div class="result-blessing-1" :class="'blessing-'+posterId+'-1'"></div>
-            <div class="result-blessing-2" :class="'blessing-'+posterId+'-2'"></div>
-            <!-- 产品 -->
-            <div class="result-product" :class="'product-'+posterId"></div>
-            <!-- 提示语 -->
-            <div class="result-tips"></div>
-            <!-- 生成海报按钮 -->
-            <div class="create-poster" @click="createPoster($event)"></div>
-        </div>
-    </div>
-    <!-- 海报弹窗 -->
-    <div class="posterPop" @touchmove.prevent>
-        <div class="cls-btn-box">
-            <div class="cls-btn" @click="hidePop($event)"></div>
-        </div>
-        <div class="poster-box">
-            <div class="poster" :class="'poster-'+posterId">
-                <img id="posterSrc" src="" alt="" srcset="">
-            </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="sharePop" @click="hideShare">
-        <div class="tips-pic"></div>
-        <div class="tips-text">点击右上角分享给你的好友！</div>
-    </div>
-</template>  
-
-
-<style lang="scss" scoped>
-.ResultPage {
-    @include fixed();
-    background-color: azure;
-
-    .result-bg {
-        @include pos(750px, 1624px, 0px, 50%);
-        @include bg_pos("result/bg.jpg");
-        transform: translateY(-50%);
-        pointer-events: none;
-    }
-
-    .result-container {
-        @include pos(750px, 1624px, 0px, 50%);
-        transform: translateY(-50%);
-
-        .larnten-box-1{
-            @include pos(437px, 809px, 283px, 181px);
-            @include bg_pos("result/larnten-box-1.png");
-        }
-        .larnten-box-2{
-            @include pos(423px, 790px, 304px, 178px);
-            @include bg_pos("result/larnten-box-2.png");
-        }
-        .larnten-box-3{
-            @include pos(447px, 807px, 280px, 170px);
-            @include bg_pos("result/larnten-box-3.png");
-        }
-
-        .larnten-1{
-            @include pos(397px, 787px, 315px, 297px);
-            @include bg_pos("result/larnten-1.png");
-        }
-
-        .larnten-2{
-            @include pos(444px, 771px, 306px, 302px);
-            @include bg_pos("result/larnten-2.png");
-        }
-
-        .larnten-3{
-            @include pos(472px, 789px, 278px, 285px);
-            @include bg_pos("result/larnten-3.png");
-        }
-
-
-        .blessing-1-1{
-            @include pos(86px, 565px, 70px, 347px);
-            @include bg_pos("result/blessing-text-1-1.png");
-        }
-        .blessing-1-2{
-            @include pos(82px, 561px, 165px, 347px);
-            @include bg_pos("result/blessing-text-1-2.png");
-        }
-
-        .blessing-2-1{
-            @include pos(86px, 563px, 70px, 347px);
-            @include bg_pos("result/blessing-text-2-1.png");
-        }
-        .blessing-2-2{
-            @include pos(88px, 565px, 165px, 347px);
-            @include bg_pos("result/blessing-text-2-2.png");
-        }
-
-        .blessing-3-1{
-            @include pos(86px, 568px, 70px, 347px);
-            @include bg_pos("result/blessing-text-3-1.png");
-        }
-        .blessing-3-2{
-            @include pos(87px, 563px, 165px, 347px);
-            @include bg_pos("result/blessing-text-3-2.png");
-        }
-
-        .result-product{
-            @include pos(619px, 138px, 65px, 1015px);
-        }
-        .product-1{
-            @include bg_pos("result/product-1.png");
-        }
-        .product-2{
-            @include bg_pos("result/product-2.png");
-        }
-        .product-3{
-            @include bg_pos("result/product-3.png");
-        }
-
-        .result-tips{
-            @include pos(645px, 71px, 52px, 1183px);
-            @include bg_pos("result/text.png");
-        }
-
-        .create-poster{
-            @include pos(237px, 80px, 257px, 1284px);
-            @include bg_pos("result/create-btn.png");
-        }
-
-    }
-}
-
-.posterPop {
-    @include fixed();
-    @include flexCen();
-    background-color: rgba($color: #000000, $alpha: 0.6);
-    visibility: hidden;
-
-    .cls-btn-box {
-        width: 617px;
-        display: flex;
-        justify-content: flex-end;
-
-        .cls-btn {
-            @include box(49px, 49px);
-            @include bg_pos("result/cls-btn.png");
-            margin-right: -20px;
-        }
-    }
-
-    .save-tips {
-        font-size: 20px;
-        line-height: 20px;
-        margin-top: 20px;
-        color: #fff;
-        letter-spacing: 2px;
-    }
-
-    .poster-box {
-        @include box(617px, 881px);
-        margin-top: 20px;
-        overflow: hidden;
-
-        .poster {
-            @include box(100%, 100%);
-            overflow: hidden;
-            #posterSrc{
-                @include box(100%, 100%);
-                opacity: 0;
-            }
-        }
-        .poster-1{
-            @include bg_pos("result/preveiw-1.png");
-        }
-        .poster-2{
-            @include bg_pos("result/preveiw-2.png");
-        }
-        .poster-3{
-            @include bg_pos("result/preveiw-3.png");
-        }
-    }
-
-    .btn-box {
-        @include box(489px, 76px);
-        display: flex;
-        justify-content: space-between;
-        margin-top: 20px;
-
-        .go-draw {
-            @include box(226px, 76px);
-            @include bg_pos("result/go-draw-btn.png");
-        }
-
-        .go-share {
-            @include box(226px, 76px);
-            @include bg_pos("result/go-share-btn.png");
-        }
-    }
-}
-
-.sharePop {
-    @include fixed();
-    background-color: rgba($color: #000000, $alpha: 0.54);
-    visibility: hidden;
-
-    .tips-pic {
-        @include pos(100px, 100px, 600px, 100px);
-        @include bg_pos("result/share-tips.svg");
-        stroke: #ffffff;
-    }
-
-    .tips-text {
-        font-size: 25px;
-        @include pos(750px, 100px, 0px, 220px);
-        color: #ffffff;
-        text-align: right;
-    }
-}
-</style>

src/data/imgList.js

@@ -1,32 +1,79 @@
-
+const load = ["load/icon.png", "load/bg.jpg"];
-const load = [
-    'load/icon.png',
-    'load/bg.jpg',
-]
 
 const page = [
+  "index/logo.png",
+  "index/rule-btn.png",
+  "index/sub-title.png",
+  "index/cloud-2.png",
+  "index/prize-btn.png",
+  "index/cloud-1.png",
+  "index/bg.jpg",
+  "index/start-btn.png",
+  "index/tree-1.png",
+  "index/title.png",
+  "index/island.png",
 
+  "prize/copy-btn.png",
+  "prize/cls-btn.png",
+  "prize/got-btn.png",
+  "prize/no-get-btn.png",
+  "prize/draw-text.png",
+  "prize/tips.png",
+  "prize/no-prize.png",
+  "prize/lucky-bag.png",
+  "prize/star.png",
+  "prize/light.png",
+  "prize/prize-box.png",
+  "prize/myPrize-box.png",
+  "prize/draw-box.png",
 
-    'index/bg.jpg',
+  "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",
+  "result/go-share-btn.png",
+  "result/text-1.png",
+  "result/title.png",
+  "result/create-btn.png",
+  "result/text-3.png",
+  "result/text-2.png",
+  "result/r-bg-2.jpg",
+  "result/r-bg-1.jpg",
+  "result/r-bg-3.jpg",
+  "result/poster-1.jpg",
+  "result/poster-3.jpg",
+  "result/poster-2.jpg",
+
+  "rule/cls-btn.png",
+  "rule/arrow.png",
+  "rule/rule-box.png",
+  "rule/icon.png",
+];
 
 // 处理为vite引入图片格式
 function imgCreate(url, img) {
-    let i = new URL(`../assets/images/${url}`, import.meta.url).href
+  let i = new URL(`../assets/images/${url}`, import.meta.url).href;
-    img.push(i)
+  img.push(i);
 }
 
+const loadImg = [];
+const pageImg = [];
 
-const loadImg = []
+load.forEach((element) => {
-const pageImg = []
+  imgCreate(element, loadImg);
-
-load.forEach(element => {
-    imgCreate(element, loadImg)
 });
 
-page.forEach(element => {
+page.forEach((element) => {
-    imgCreate(element, pageImg)
+  imgCreate(element, pageImg);
 });
 
-export { loadImg, pageImg }
+export { loadImg, pageImg };

src/page/Home/main.js

@@ -19,8 +19,8 @@ app.config.globalProperties.imgUrl = (url) => {
 
 // 微信分享配置
 wxShare({
-    title: '好理在手 邂逅清凉一夏',
+    title: '好“理”在手，邂逅清凉一夏',
-    desc: '答题闯关 “理”享不停',
+    desc: '答题闯关 ，惊喜享不停',
 })
 
 // 测试环境开vconsole

字体压缩.txt

@@ -1,15 +1,142 @@
-锦鲤花灯：
-多资产、多策略，有望更好在不同市场环境中，实现风险与收益的平衡
-多金多财多好运，好年好景好时光 
 
-宫灯
+<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元