预加载、字体压缩

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
-    img.push(i)
+  let i = new URL(`../assets/images/${url}`, import.meta.url).href;
+  img.push(i);
 }
 
+const loadImg = [];
+const pageImg = [];
 
-const loadImg = []
-const pageImg = []
-
-load.forEach(element => {
-    imgCreate(element, loadImg)
+load.forEach((element) => {
+  imgCreate(element, loadImg);
 });
 
-page.forEach(element => {
-    imgCreate(element, pageImg)
+page.forEach((element) => {
+  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: '好理在手 邂逅清凉一夏',
-    desc: '答题闯关 “理”享不停',
+    title: '好“理”在手，邂逅清凉一夏',
+    desc: '答题闯关 ，惊喜享不停',
 })
 
 // 测试环境开vconsole