整合流程

This commit is contained in:
XGL-THINKPAD-X1\rucky 2024-02-06 15:31:30 +08:00
parent 48f8c0aa95
commit 1248739427
17 changed files with 88 additions and 176 deletions

View File

@ -6,7 +6,6 @@
<meta name="viewport" <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title><%- title%></title> <title><%- title%></title>
<link rel="shortcut icon" href="./public/icon.svg">
</head> </head>
<body> <body>

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Binary file not shown.

View File

@ -9,11 +9,12 @@ const userStore = useMainStore();
const start = (event) => { const start = (event) => {
debounceTap(event.target, () => { debounceTap(event.target, () => {
emit("IndexPage", { action: "start" });
gsap.to(".IndexPage", { gsap.to(".IndexPage", {
duration: 0.5, duration: 0.5,
autoAlpha: 0, autoAlpha: 0,
onComplete: () => { }, onComplete: () => {
emit("IndexPage", { action: "start" });
},
}); });
}); });
}; };
@ -35,7 +36,14 @@ const showRule = (event) => {
onMounted(() => { onMounted(() => {
gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 }); gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0 }); gsap.from(".index-bottom-bg", { duration: 1, y: 100, });
gsap.from(".index-windows", { duration: 1, scale: 0.5,autoAlpha:0, });
gsap.from(".index-pet", { duration: 1, y: -50,autoAlpha:0,delay:0.5 });
gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0,delay:1.5 });
gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0,delay:0.5 });
gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0,delay:0.5 });
gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0,delay:0.75 });
gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0,delay:0.75 });
gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 }); gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
gsap.from(".index-prize-btn", { gsap.from(".index-prize-btn", {
duration: 1, duration: 1,
@ -54,9 +62,20 @@ onMounted(() => {
scale: 0.4, scale: 0.4,
autoAlpha: 0, autoAlpha: 0,
delay: 0.5, delay: 0.5,
onComplete:()=>{
gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-fan-1',{duration:2,x:'-=30',repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-fan-2',{duration:1.5,x:'-=20',repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-fan-3',{duration:1.5,y:'+=20',repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-fan-4',{duration:2,x:'+=20',repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-pet',{duration:2,y:'-=10',repeat:-1,yoyo:true,ease:'none'})
}
}); });
}); });
const vcNum = ref(false); const vcNum = ref(false);
@ -99,6 +118,7 @@ const showVC = () => {
.IndexPage { .IndexPage {
@include pos(100%, 100vh, 0px, 0px); @include pos(100%, 100vh, 0px, 0px);
overflow: hidden; overflow: hidden;
background: linear-gradient(135deg, #a11b15, #f80c00);
.index-bg { .index-bg {
@include pos(750px, 1624px, 0px, 50%); @include pos(750px, 1624px, 0px, 50%);

View File

@ -82,8 +82,7 @@ const answerFn = (item, event) => {
const showResult = () => { const showResult = () => {
gsap.set(".answer-box", { pointerEvents: "none" }) gsap.set(".answer-box", { pointerEvents: "none" })
// Toast("MBTI:" + mbti);
// resultBtnAni.reverse();
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 }); gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
questionOut.timeScale(2); questionOut.timeScale(2);
questionOut.restart(); questionOut.restart();
@ -108,6 +107,9 @@ const getRandomNumber = (arr) => {
// //
// const resultBtnAni = gsap.timeline({ paused: true }); // const resultBtnAni = gsap.timeline({ paused: true });
onMounted(() => { onMounted(() => {
gsap.from('.question-bg',{duration:0.5,autoAlpha:0,})
gsap.from('.question-box',{duration:0.5,scale:0.4,autoAlpha:0,})
gsap.to('.question-lantern-icon',{duration:5,transformOrigin:'100% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
}); });
@ -155,8 +157,8 @@ onMounted(() => {
<div class="question-gold-icon-2"></div> <div class="question-gold-icon-2"></div>
</div> </div>
<!-- 进度条 --> <!-- 进度条 -->
<!-- <Progress :percentage="(currentId + 1) / 12 * 100" pivot-color="#7232dd" :show-pivot="false" <Progress :percentage="(currentId + 1) / 3 * 100" pivot-color="#7232dd" :show-pivot="false"
color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" /> --> color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" />
</div> </div>
</template> </template>

View File

@ -2,7 +2,6 @@
import { gsap } from "gsap"; import { gsap } from "gsap";
import { debounceTap } from "@/plugins"; import { debounceTap } from "@/plugins";
import { useMainStore } from "@/store"; import { useMainStore } from "@/store";
import { mbtiList } from "@/data";
import { posterCreate } from "@/plugins"; import { posterCreate } from "@/plugins";
import { Toast } from "vant"; import { Toast } from "vant";
import QRCode from "qrcode"; import QRCode from "qrcode";
@ -40,6 +39,55 @@ onMounted(() => {
autoAlpha: 0, 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'})
}
});
}); });
// //

View File

@ -67,8 +67,10 @@ const page = [
'result/larnten-2.png', 'result/larnten-2.png',
'result/larnten-3.png', 'result/larnten-3.png',
'result/bg.jpg', 'result/bg.jpg',
'rule/arrow.png',
'rule/cls-btn.png',
'rule/icon.png',
'rule/rule-box.png',
] ]
// 处理为vite引入图片格式 // 处理为vite引入图片格式

View File

@ -71,161 +71,3 @@ export const data = [
], ],
}, },
] ]
export const mbtiList = [
{
type: 'ISTJ',
job: '物流师',
des: ['实际且注重事实的个人,', '可靠性不容怀疑'],
blessings: ['脚下有风眼里有光', '心里有爱袋里有财'],
product: '灵活成长存款存单91天持有',
productPic: new URL('../assets/images/result/product/ISTJ.png', import.meta.url).href,
picPos:{w:432,h:98}
},
{
type: 'ISTP',
job: '鉴赏家',
des: ['大胆而实际的实验家,', '擅长使用任何形式的工具'],
blessings: ['多吃不胖积极向上', '有钱有颜喜乐连年'],
product: '启航增强持有',
productPic: new URL('../assets/images/result/product/ISTP.png', import.meta.url).href,
picPos:{w:491,h:109}
},
{
type: 'ESTP',
job: '企业家',
des: ['充满活力热衷于突破,','强大的洞察力,常常发现新事物和想法'],
blessings: ['人间四月芳菲尽', '吃喝玩乐要尽兴'],
product: '7天成长',
productPic: new URL('../assets/images/result/product/ESTP.png', import.meta.url).href,
picPos:{w:420,h:101}
},
{
type: 'ESTJ',
job: '总经理',
des: ['出色的管理者,', '在管理事情或人的方面无与伦比'],
blessings: ['朝辞白帝彩云间', '日进斗金赛神仙'],
product: '灵活成长90天持有',
productPic: new URL('../assets/images/result/product/ESTJ.png', import.meta.url).href,
picPos:{w:441,h:93}
},
{
type: 'ISFJ',
job: '守卫者',
des: ['非常专注而温暖的守护者,', '时刻准备保护爱着的人'],
blessings: ['万般熙攘化清风明月', '四方梦想皆如愿以偿'],
product: '灵活成长30天持有',
productPic: new URL('../assets/images/result/product/ISFJ.png', import.meta.url).href,
picPos:{w:441,h:93}
},
{
type: 'ISFP',
job: '探险家',
des: ['灵活有魅力的艺术家,', '时刻准备着探索和体验新鲜事物'],
blessings: ['与时光共新生', '万象更新美好再叙'],
product: '启元策略360天持有',
productPic: new URL('../assets/images/result/product/ISFP.png', import.meta.url).href,
picPos:{w:395,h:115}
},
{
type: 'ESFP',
job: '表演者',
des: ['外向随和,', '对生活充满热情,享受物质生活'],
blessings: ['岁岁常欢愉', '年年皆胜意'],
product: '启元添利90天持有',
productPic: new URL('../assets/images/result/product/ESFP.png', import.meta.url).href,
picPos:{w:438,h:93}
},
{
type: 'ESFJ',
job: '执行官',
des: ['极有同情心,爱交往受欢迎的人们,', '总是热心提供帮助'],
blessings: ['心有繁花仪锦,', '归来不负韶华'],
product: '灵活成长日开3号',
productPic: new URL('../assets/images/result/product/ESFJ.png', import.meta.url).href,
picPos:{w:469,h:68}
},
{
type: 'INFJ',
job: '提倡者',
des: ['安静而神秘,同时鼓舞人心,', '且不知疲倦的理想主义者'],
blessings: ['前路浩浩荡荡', '万事尽可期待'],
product: '启明日申季赎',
productPic: new URL('../assets/images/result/product/INFJ.png', import.meta.url).href,
picPos:{w:537,h:99}
},
{
type: 'INFP',
job: '调停者',
des: ['诗意,善良的利他主义者,', '总是热情地为正当理由提供帮助'],
blessings: ['山外青山楼外楼', '容光焕发没忧愁'],
product: '启元稳利30天',
productPic: new URL('../assets/images/result/product/INFP.png', import.meta.url).href,
picPos:{w:470,h:121}
},
{
type: 'ENFP',
job: '竞选者',
des: ['热情,有创造力', '爱社交的自由自在的人'],
blessings: ['生活自在内心澎湃', '万物可爱满怀期待'],
product: '灵活成长添利180天持有',
productPic: new URL('../assets/images/result/product/ENFP.png', import.meta.url).href,
picPos:{w:452,h:93}
},
{
type: 'ENFJ',
job: '主人公',
des: ['富有魅力鼓舞人心的领导者', '有使听众着迷的能力'],
blessings: ['是金子总会发光', '何况你是龙的传人'],
product: '安鑫系列',
productPic: new URL('../assets/images/result/product/ENFJ.png', import.meta.url).href,
picPos:{w:447,h:65}
},
{
type: 'INTJ',
job: '建筑师',
des: ['富有想象力和战略性的思想家,', '一切皆在计划之中'],
blessings: ['岁岁年年,共欢同乐,', '嘉庆与时新'],
product: '启元策略周享270天持有',
productPic: new URL('../assets/images/result/product/INTJ.png', import.meta.url).href,
picPos:{w:356,h:108}
},
{
type: 'INTP',
job: '逻辑学家',
des: ['具有创造力的发明家,', '对知识有着止不住的渴望'],
blessings: ['烟火向星辰', '所愿皆成真'],
product: '卓越稳健180天持有',
productPic: new URL('../assets/images/result/product/INTP.png', import.meta.url).href,
picPos:{w:372,h:95}
},
{
type: 'ENTP',
job: '辩论家',
des: ['聪明好奇的思想者,', '不会放弃任何智力上的挑战'],
blessings: ['忽如一夜春风来', '今年势必发大财'],
product: '灵活策略90天持有',
productPic: new URL('../assets/images/result/product/ENTP.png', import.meta.url).href,
picPos:{w:433,h:93}
},
{
type: 'ENTJ',
job: '指挥官',
des: ['大胆,富有想象力且意志强大的领导者,', '总能找到或创造解决方法'],
blessings: ['天生我材必有用', '福禄寿喜财全来'],
product: '星辰添利270天持有',
productPic: new URL('../assets/images/result/product/ENTJ.png', import.meta.url).href,
picPos:{w:409,h:112}
},
]

View File

@ -231,7 +231,7 @@ const playMusic = () => {
} }
#musicBtn { #musicBtn {
@include pos(60px, 60px, 650px, 30px); @include pos(60px, 60px, 50px, 40px);
z-index: 99; z-index: 99;
} }

View File

@ -19,8 +19,8 @@ app.config.globalProperties.imgUrl = (url) => {
// 微信分享配置 // 微信分享配置
wxShare({ wxShare({
title: '1分钟测出你的理财性格', title: '今夜宜赏灯,来测测你的专属元宵花灯',
desc: '快来匹配你的专属理财搭子,赢惊喜福利', desc: '赏花灯,赢惊喜,欢天喜地闹元宵',
}) })
// 测试环境开vconsole // 测试环境开vconsole

View File

@ -6,7 +6,7 @@ export const useMainStore = defineStore("counter", {
return { return {
hasDraw: true, //是否有抽奖机会 hasDraw: true, //是否有抽奖机会
token: '', token: '',
posterId: 3, //测试结果 posterId: 2, //测试结果
hasPrize: false, //是否有奖品 hasPrize: false, //是否有奖品
prizeCode: 'oggSVMbeLgSK', //兑换码 prizeCode: 'oggSVMbeLgSK', //兑换码
prizeMoney: '8.88', //金额 prizeMoney: '8.88', //金额

View File

@ -53,7 +53,7 @@ body {
} }
@font-face { @font-face {
font-family: "DouyinSansBold"; font-family: "DouyinSansBold";
src: url(@/assets/font/DouyinSansBold.otf) format("OpenType"); src: url(@/assets/font/DouyinSansBold.ttf) format("truetype");
} }
* { * {

View File

@ -33,7 +33,7 @@ export default defineConfig(({ command, mode }) => {
template: 'index.html', template: 'index.html',
injectOptions: { injectOptions: {
data: { data: {
title: '测测你的花式性格', title: '测测你的专属元宵花灯',
}, },
} }
}, },