diff --git a/src/assets/font/fzcy.ttf b/src/assets/font/fzcy.ttf index e9e0243..e6bf9e1 100644 Binary files a/src/assets/font/fzcy.ttf and b/src/assets/font/fzcy.ttf differ diff --git a/src/components/Result.vue b/src/components/Result.vue index 4e4b7fe..1aa2d89 100644 --- a/src/components/Result.vue +++ b/src/components/Result.vue @@ -13,10 +13,10 @@ const emit = defineEmits(["ResultPage"]); const userStore = useMainStore(); let bgId = ref(1); //海报背景id：1～4 const bgPic = computed(() => { - return new URL( - `../assets/images/result/bg-${bgId.value}.jpg`, - import.meta.url - ).href; + return new URL( + `../assets/images/result/bg-${bgId.value}.jpg`, + import.meta.url + ).href; }); // 主题配色 @@ -24,521 +24,521 @@ const theme = reactive(["#d3473a", "#fb7700", "#4172d8", "#eb5c37"]); const mbti = ref(userStore.MBTI); const mbtiObj = ref(mbtiList.find((item) => item.type == mbti.value)); const posterBg = reactive([ - new URL("@/assets/images/result/poster-bg-1.jpg", import.meta.url).href, - new URL("@/assets/images/result/poster-bg-2.jpg", import.meta.url).href, - new URL("@/assets/images/result/poster-bg-3.jpg", import.meta.url).href, - new URL("@/assets/images/result/poster-bg-4.jpg", import.meta.url).href, + new URL("@/assets/images/result/poster-bg-1.jpg", import.meta.url).href, + new URL("@/assets/images/result/poster-bg-2.jpg", import.meta.url).href, + new URL("@/assets/images/result/poster-bg-3.jpg", import.meta.url).href, + new URL("@/assets/images/result/poster-bg-4.jpg", import.meta.url).href, ]); // console.log("mbtiList", mbtiList.length); const changBg = (event, number) => { - let e = event.target; - if (number == bgId.value) return; - bgId.value = number; - debounceTap( - e, - () => { - // console.log("bgId", bgId.value); - }, - 0.3 - ); + let e = event.target; + if (number == bgId.value) return; + bgId.value = number; + debounceTap( + e, + () => { + // console.log("bgId", bgId.value); + }, + 0.3 + ); }; // With async/await const eqcodePic = ref(); onMounted(() => { - let eqCodeUrl = import.meta.env.VITE_URL; - console.log("url:", eqCodeUrl); - QRCode.toDataURL(eqCodeUrl) - .then((url) => { - eqcodePic.value = url; - // console.log("eq", eqcodePic.value); - }) - .catch((err) => { - console.error(err); - }); + let eqCodeUrl = import.meta.env.VITE_URL; + console.log("url:", eqCodeUrl); + 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(".mbti-title", { - duration: 0.7, - x: 100, - autoAlpha: 0, - delay: 0.3, - }); - gsap.from(".des", { - duration: 0.7, - x: 100, - autoAlpha: 0, - stagger: 0.3, - delay: 0.5, - }); - gsap.from(".blessings", { - duration: 0.7, - x: 100, - autoAlpha: 0, - stagger: 0.2, - delay: 0.6, - }); - gsap.from(".product", { - duration: 0.7, - x: 100, - autoAlpha: 0, - delay: 0.9, - }); - gsap.from(".produc-img", { - duration: 0.7, - x: 100, - autoAlpha: 0, - delay: 1.2, - }); - gsap.from(".theme-tab", { - duration: 0.7, - x: 100, - autoAlpha: 0, - stagger: 0.3, - delay: 1.4, - }); + gsap.from(".result-bg", { + duration: 0.7, + scale: 1.2, + autoAlpha: 0, + }); + gsap.from(".mbti-title", { + duration: 0.7, + x: 100, + autoAlpha: 0, + delay: 0.3, + }); + gsap.from(".des", { + duration: 0.7, + x: 100, + autoAlpha: 0, + stagger: 0.3, + delay: 0.5, + }); + gsap.from(".blessings", { + duration: 0.7, + x: 100, + autoAlpha: 0, + stagger: 0.2, + delay: 0.6, + }); + gsap.from(".product", { + duration: 0.7, + x: 100, + autoAlpha: 0, + delay: 0.9, + }); + gsap.from(".produc-img", { + duration: 0.7, + x: 100, + autoAlpha: 0, + delay: 1.2, + }); + gsap.from(".theme-tab", { + duration: 0.7, + x: 100, + autoAlpha: 0, + stagger: 0.3, + delay: 1.4, + }); }); const createPoster = (event) => { - let e = event.target; - debounceTap(e, () => { - // 海报生成 - posterCreate( - { width: 750, height: 1500 }, //海报尺寸 - // 海报素材，按顺序依次渲染 - [ - // 背景 - { - name: "bg", - src: posterBg[bgId.value - 1], - pos: { w: 750, h: 1500, x: 0, y: 0 }, - }, - // 产品 - { - name: "product", - src: mbtiObj.value.productPic, - pos: { w: mbtiObj.value.picPos.w, h: mbtiObj.value.picPos.h, x: 137, y: mbtiObj.value.type =='INFP'? 900 : 921 }, - }, - // 二维码 - { - name: "eqcode", - src: eqcodePic.value, - pos: { w: 140, h: 140, x: bgId.value == 3 ? 75 : 66, y: 1070 }, - }, - ], - // 字体素材 - [ - // mbti title及职业 - { - content: mbtiObj.value.type + " " + mbtiObj.value.job, - style: { - font: "normal 80px HYYakuHei", - pos: { x: 70, y: 340 }, - }, - }, - // mbti 描述 - { - content: mbtiObj.value.des[0], - style: { - font: "normal 30px fzzy", - color: "#af6f49", - pos: { x: 70, y: 470 }, - }, - }, - { - content: mbtiObj.value.des[1], - style: { - font: "normal 30px fzzy", - color: "#af6f49", - pos: { x: 70, y: 520 }, - }, - }, - // 新年寄语 - { - content: mbtiObj.value.blessings[0], - style: { - font: "normal 50px fzcy", - pos: { x: 70, y: 650 }, - }, - }, - { - content: mbtiObj.value.blessings[1], - style: { - font: "normal 50px fzcy", - pos: { x: 70, y: 725 }, - }, - }, - // 产品 - { - content: mbtiObj.value.product, - style: { - font: mbtiObj.value.type == 'ISTJ' || mbtiObj.value.type == 'INTJ' ? "normal 40px fzcy" : "normal 50px fzcy", - pos: { x: 70, y: 876 }, - }, - }, - ], - // 主题配色 - theme[bgId.value - 1] - ); - }); + let e = event.target; + debounceTap(e, () => { + // 海报生成 + posterCreate( + { width: 750, height: 1500 }, //海报尺寸 + // 海报素材，按顺序依次渲染 + [ + // 背景 + { + name: "bg", + src: posterBg[bgId.value - 1], + pos: { w: 750, h: 1500, x: 0, y: 0 }, + }, + // 产品 + { + name: "product", + src: mbtiObj.value.productPic, + pos: { w: mbtiObj.value.picPos.w, h: mbtiObj.value.picPos.h, x: 137, y: mbtiObj.value.type == 'INFP' ? 900 : 921 }, + }, + // 二维码 + { + name: "eqcode", + src: eqcodePic.value, + pos: { w: 140, h: 140, x: bgId.value == 3 ? 75 : 66, y: 1070 }, + }, + ], + // 字体素材 + [ + // mbti title及职业 + { + content: mbtiObj.value.type + " " + mbtiObj.value.job, + style: { + font: "normal 80px HYYakuHei", + pos: { x: 70, y: 340 }, + }, + }, + // mbti 描述 + { + content: mbtiObj.value.des[0], + style: { + font: "normal 30px fzzy", + color: "#af6f49", + pos: { x: 70, y: 470 }, + }, + }, + { + content: mbtiObj.value.des[1], + style: { + font: "normal 30px fzzy", + color: "#af6f49", + pos: { x: 70, y: 520 }, + }, + }, + // 新年寄语 + { + content: mbtiObj.value.blessings[0], + style: { + font: mbtiObj.value.type == 'ISFJ' ? "normal 45px fzcy" : "normal 50px fzcy", + pos: { x: 70, y: 650 }, + }, + }, + { + content: mbtiObj.value.blessings[1], + style: { + font: mbtiObj.value.type == 'ISFJ' ? "normal 45px fzcy" : "normal 50px fzcy", + pos: { x: 70, y: 725 }, + }, + }, + // 产品 + { + content: mbtiObj.value.product, + style: { + font: mbtiObj.value.type == 'ISTJ' || mbtiObj.value.type == 'INTJ' ? "normal 40px fzcy" : "normal 50px fzcy", + pos: { x: 70, y: 876 }, + }, + }, + ], + // 主题配色 + theme[bgId.value - 1] + ); + }); }; const goDraw = (event) => { - let e = event.target; - debounceTap(e, () => { - if (userStore.hasDraw) { - emit("ResultPage", { action: "showDraw" }); - } else { - Toast("今日暂无抽奖机会"); - } - }); + 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 }); - }); + 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 }); - }); + let e = event.target; + debounceTap(e, () => { + 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 }); }; \ No newline at end of file diff --git a/src/components/Rule.vue b/src/components/Rule.vue index 0497bbd..c2be93a 100644 --- a/src/components/Rule.vue +++ b/src/components/Rule.vue @@ -6,130 +6,126 @@ import gsap from "gsap"; const emit = defineEmits(["RulePage"]); const hide = (event) => { - debounceTap(event.target, () => { - emit("RulePage", { action: "hide" }); - }); + debounceTap(event.target, () => { + emit("RulePage", { action: "hide" }); + }); }; onMounted(() => { - gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 }); - gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 }); + gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 }); + gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 }); }); \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 007aae7..551eb53 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -6,7 +6,7 @@ export const useMainStore = defineStore("counter", { return { hasDraw: true, //是否有抽奖机会 token: '', - MBTI: 'ISTJ', //测试结果 + MBTI: 'ESFJ', //测试结果 hasPrize: false, //是否有奖品 prizeCode: 'oggSVMbeLgSK', //兑换码 prizeMoney: '8.88', //金额 @@ -31,7 +31,7 @@ export const useMainStore = defineStore("counter", { this.MBTI = type }, updateDrawKey(data) { - console.log('保存结果:',data); + console.log('保存结果:', data); this.drawKey = data.subKey this.hasDraw = data.drawFlag }, diff --git a/字体压缩.txt b/字体压缩.txt index c7b9596..10b0ef7 100644 --- a/字体压缩.txt +++ b/字体压缩.txt @@ -44,7 +44,49 @@ 点击右上角分享给你的好友！*长按保存海报 - +
+
【活动时间】：2024年2月5日——2月9日
+
【活动奖励】：0.5-8.88元微信红包
+
+
+
【活动攻略】：
+
+ 1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动； +
+
2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。
+
+
+
【领奖说明】：
+
+ 1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“2024”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码； +
+
2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；
+
3、中奖人请在活动结束前进行兑换，逾期视为弃权。
+
其他：
+
+ 活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。 +
+
说明：
+
本活动最终解释权归平安理财所有
+
【活动攻略】：
+
+ 1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利: +
+
+ (1)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动； +
+
+ (2)同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的; +
+
+ (3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为; +
+
+ 2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效; +
+
+ 3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。 +
2、AlimamaShuHeiTi id: 1,