diff --git a/index.html b/index.html
index 2d7f63f..eb6c75e 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,6 @@
<%- title%>
-
diff --git a/public/icon.svg b/public/icon.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/assets/font/DouyinSansBold.ttf b/src/assets/font/DouyinSansBold.ttf
new file mode 100644
index 0000000..b53f5ad
Binary files /dev/null and b/src/assets/font/DouyinSansBold.ttf differ
diff --git a/src/assets/font/HarmonyOS_Sans_SC_Regular.ttf b/src/assets/font/HarmonyOS_Sans_SC_Regular.ttf
index aff150a..c17f497 100644
Binary files a/src/assets/font/HarmonyOS_Sans_SC_Regular.ttf and b/src/assets/font/HarmonyOS_Sans_SC_Regular.ttf differ
diff --git a/src/assets/font/DouyinSansBold.otf b/src/assets/font/源字体/DouyinSansBold.otf
similarity index 100%
rename from src/assets/font/DouyinSansBold.otf
rename to src/assets/font/源字体/DouyinSansBold.otf
diff --git a/src/assets/font/源字体/DouyinSansBold.ttf b/src/assets/font/源字体/DouyinSansBold.ttf
new file mode 100644
index 0000000..581b748
Binary files /dev/null and b/src/assets/font/源字体/DouyinSansBold.ttf differ
diff --git a/src/assets/font/源字体/HarmonyOS_Sans_SC_Regular.ttf b/src/assets/font/源字体/HarmonyOS_Sans_SC_Regular.ttf
new file mode 100644
index 0000000..aff150a
Binary files /dev/null and b/src/assets/font/源字体/HarmonyOS_Sans_SC_Regular.ttf differ
diff --git a/src/components/Index.vue b/src/components/Index.vue
index 32772ce..2b7c1fe 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -9,11 +9,12 @@ const userStore = useMainStore();
const start = (event) => {
debounceTap(event.target, () => {
- emit("IndexPage", { action: "start" });
gsap.to(".IndexPage", {
duration: 0.5,
autoAlpha: 0,
- onComplete: () => { },
+ onComplete: () => {
+ emit("IndexPage", { action: "start" });
+ },
});
});
};
@@ -35,7 +36,14 @@ const showRule = (event) => {
onMounted(() => {
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-prize-btn", {
duration: 1,
@@ -54,9 +62,20 @@ onMounted(() => {
scale: 0.4,
autoAlpha: 0,
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);
@@ -99,6 +118,7 @@ const showVC = () => {
.IndexPage {
@include pos(100%, 100vh, 0px, 0px);
overflow: hidden;
+ background: linear-gradient(135deg, #a11b15, #f80c00);
.index-bg {
@include pos(750px, 1624px, 0px, 50%);
diff --git a/src/components/Question.vue b/src/components/Question.vue
index 58e6117..f9cc7d2 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -82,8 +82,7 @@ const answerFn = (item, event) => {
const showResult = () => {
gsap.set(".answer-box", { pointerEvents: "none" })
- // Toast("你的MBTI测试结果:" + mbti);
- // resultBtnAni.reverse();
+
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
questionOut.timeScale(2);
questionOut.restart();
@@ -108,6 +107,9 @@ const getRandomNumber = (arr) => {
// 查看结果事件及动画
// const resultBtnAni = gsap.timeline({ paused: true });
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(() => {
-
+
diff --git a/src/components/Result.vue b/src/components/Result.vue
index f461139..308c5cb 100644
--- a/src/components/Result.vue
+++ b/src/components/Result.vue
@@ -2,7 +2,6 @@
import { gsap } from "gsap";
import { debounceTap } from "@/plugins";
import { useMainStore } from "@/store";
-import { mbtiList } from "@/data";
import { posterCreate } from "@/plugins";
import { Toast } from "vant";
import QRCode from "qrcode";
@@ -40,6 +39,55 @@ onMounted(() => {
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'})
+
+ }
+ });
});
// 生成海报逻辑
diff --git a/src/data/imgList.js b/src/data/imgList.js
index b94ac93..b5ff399 100644
--- a/src/data/imgList.js
+++ b/src/data/imgList.js
@@ -67,8 +67,10 @@ const page = [
'result/larnten-2.png',
'result/larnten-3.png',
'result/bg.jpg',
-
-
+ 'rule/arrow.png',
+ 'rule/cls-btn.png',
+ 'rule/icon.png',
+ 'rule/rule-box.png',
]
// 处理为vite引入图片格式
diff --git a/src/data/index.js b/src/data/index.js
index b722a8b..a6f9812 100644
--- a/src/data/index.js
+++ b/src/data/index.js
@@ -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}
- },
-
-]
\ No newline at end of file
diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue
index 9410ea6..90af6da 100644
--- a/src/page/Home/App.vue
+++ b/src/page/Home/App.vue
@@ -231,7 +231,7 @@ const playMusic = () => {
}
#musicBtn {
- @include pos(60px, 60px, 650px, 30px);
+ @include pos(60px, 60px, 50px, 40px);
z-index: 99;
}
diff --git a/src/page/Home/main.js b/src/page/Home/main.js
index cbd877b..c8950d2 100644
--- a/src/page/Home/main.js
+++ b/src/page/Home/main.js
@@ -19,8 +19,8 @@ app.config.globalProperties.imgUrl = (url) => {
// 微信分享配置
wxShare({
- title: '1分钟测出你的理财性格',
- desc: '快来匹配你的专属理财搭子，赢惊喜福利！',
+ title: '今夜宜赏灯，来测测你的专属元宵花灯',
+ desc: '赏花灯，赢惊喜，欢天喜地闹元宵！',
})
// 测试环境开vconsole
diff --git a/src/store/index.js b/src/store/index.js
index 3db64a4..8c060dd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,7 +6,7 @@ export const useMainStore = defineStore("counter", {
return {
hasDraw: true, //是否有抽奖机会
token: '',
- posterId: 3, //测试结果
+ posterId: 2, //测试结果
hasPrize: false, //是否有奖品
prizeCode: 'oggSVMbeLgSK', //兑换码
prizeMoney: '8.88', //金额
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 79f2b4a..04db062 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -53,7 +53,7 @@ body {
}
@font-face {
font-family: "DouyinSansBold";
- src: url(@/assets/font/DouyinSansBold.otf) format("OpenType");
+ src: url(@/assets/font/DouyinSansBold.ttf) format("truetype");
}
* {
diff --git a/vite.config.js b/vite.config.js
index a6b031c..225e11c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -33,7 +33,7 @@ export default defineConfig(({ command, mode }) => {
template: 'index.html',
injectOptions: {
data: {
- title: '测测你的花式性格',
+ title: '测测你的专属元宵花灯',
},
}
},