diff --git a/src/assets/images/index/title.png b/src/assets/images/index/title.png index 4263fb4..810ba65 100644 Binary files a/src/assets/images/index/title.png and b/src/assets/images/index/title.png differ diff --git a/src/assets/images/result/poster-2.jpg b/src/assets/images/result/poster-2.jpg index db9cbb0..129eb1b 100644 Binary files a/src/assets/images/result/poster-2.jpg and b/src/assets/images/result/poster-2.jpg differ diff --git a/src/assets/images/result/poster-3.jpg b/src/assets/images/result/poster-3.jpg index 0c859f3..7a4244c 100644 Binary files a/src/assets/images/result/poster-3.jpg and b/src/assets/images/result/poster-3.jpg differ diff --git a/src/assets/images/result/poster-text.png b/src/assets/images/result/poster-text.png index 403de55..a55617a 100644 Binary files a/src/assets/images/result/poster-text.png and b/src/assets/images/result/poster-text.png differ diff --git a/src/assets/images/result/text-2.png b/src/assets/images/result/text-2.png index 8b1a30b..b2f8a1f 100644 Binary files a/src/assets/images/result/text-2.png and b/src/assets/images/result/text-2.png differ diff --git a/src/assets/images/result/text-3.png b/src/assets/images/result/text-3.png index 9132c25..2ce665a 100644 Binary files a/src/assets/images/result/text-3.png and b/src/assets/images/result/text-3.png differ diff --git a/src/components/Index.vue b/src/components/Index.vue index 66ca986..b933a64 100644 --- a/src/components/Index.vue +++ b/src/components/Index.vue @@ -3,6 +3,8 @@ import { Toast } from "vant"; import { debounceTap } from "@/plugins"; import gsap from "gsap"; import { useMainStore } from "@/store"; +import Preloader from "@/plugins/Preloader"; +import { pageQAImg } from "@/data/imgList"; const emit = defineEmits(["IndexPage"]); const userStore = useMainStore(); @@ -12,7 +14,7 @@ const start = (event) => { gsap.to(".IndexPage", { duration: 0.5, autoAlpha: 0, - onComplete: () => { + onComplete: () => { emit("IndexPage", { action: "start" }); }, }); @@ -33,11 +35,13 @@ const showRule = (event) => { }); }; - onMounted(() => { - gsap.from(".index-bg,.index-island,.index-cloud-1,.index-cloud-2,.index-tree-1", { duration: 1, scale: 1.2, autoAlpha: 0 }); - gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0 }); - gsap.from(".index-sub-title", { duration: 1, x: 20, autoAlpha: 0 }); + gsap.from( + ".index-bg,.index-island,.index-cloud-1,.index-cloud-2,.index-tree-1", + { duration: 1, scale: 1.2, autoAlpha: 0 } + ); + gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0 }); + gsap.from(".index-sub-title", { duration: 1, x: 20, autoAlpha: 0 }); gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 }); gsap.from(".index-prize-btn", { duration: 1, @@ -56,21 +60,62 @@ onMounted(() => { scale: 0.4, autoAlpha: 0, delay: 0.5, - onComplete:()=>{ - gsap.to('.index-start-btn',{duration:1,scale:'0.9',repeat:-1,yoyo:true,ease:'bounce.in'}) - gsap.to('.index-cloud-1',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'}) - gsap.to('.index-cloud-2',{duration:2,x:30,repeat:-1,yoyo:true,ease:'none'}) - gsap.to('.index-tree-1',{duration:2,y:10,repeat:-1,yoyo:true,ease:'none'}) - gsap.to('.index-title',{duration:2.5,y:-20,repeat:-1,yoyo:true,ease:'none'}) - gsap.to('.index-sub-title',{duration:3,x:10,repeat:-1,yoyo:true,ease:'none'}) + onComplete: () => { + gsap.to(".index-start-btn", { + duration: 1, + scale: "0.9", + repeat: -1, + yoyo: true, + ease: "bounce.in", + }); + gsap.to(".index-cloud-1", { + duration: 2, + x: -30, + repeat: -1, + yoyo: true, + ease: "none", + }); + gsap.to(".index-cloud-2", { + duration: 2, + x: 30, + repeat: -1, + yoyo: true, + ease: "none", + }); + gsap.to(".index-tree-1", { + duration: 2, + y: 10, + repeat: -1, + yoyo: true, + ease: "none", + }); + gsap.to(".index-title", { + duration: 2.5, + y: -20, + repeat: -1, + yoyo: true, + ease: "none", + }); + gsap.to(".index-sub-title", { + duration: 3, + x: 10, + repeat: -1, + yoyo: true, + ease: "none", + }); - } + // 开始加载答题页面资源 + Preloader({ + name: "加载答题页资源", + imgs: pageQAImg, + callback: (progress) => { + // console.log("进度:", progress); + }, + }).then((res) => { + console.log("done!"); + }); + }, }); - - - - - }); const vcNum = ref(false); @@ -95,12 +140,20 @@ const showVC = () => {
-
+
- 风险提示: 本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。本资料内容及观点仅供参考,不构成对任何人的投资建议。以上产品投资管理机构/管理人为平安理财,代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的,产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品,具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标,业绩比较基准不是预期收益率,不代表产品的未来表现和实际收益,不构成对产品收益的承诺。理财产品过往业绩不代表其未来表现,不等于理财产品实际收益,投资须谨慎。过往业绩相关数据已经托管人核对。理财非存款,产品有风险,投资须谨慎。金融消费者不得利用金融产品和服务从事违法活动。 +
+ 风险提示: + 本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。本资料内容及观点仅供参考,不构成对任何人的投资建议。以上产品投资管理机构/管理人为平安理财,代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的,产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品,具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标,业绩比较基准不是预期收益率,不代表产品的未来表现和实际收益,不构成对产品收益的承诺。理财产品过往业绩不代表其未来表现,不等于理财产品实际收益,投资须谨慎。过往业绩相关数据已经托管人核对。理财非存款,产品有风险,投资须谨慎。金融消费者不得利用金融产品和服务从事违法活动。 +
@@ -122,7 +175,6 @@ const showVC = () => { @include pos(750px, 1624px, 0px, 50%); transform: translateY(-50%); - // .index-logo{ // pointer-events: none; // @include pos(632px, 94px, 59px, 267px); @@ -131,29 +183,29 @@ const showVC = () => { .index-title { // pointer-events: none; - @include pos(632px, 253px, 46px, 254px); + @include pos(633px, 253px, 46px, 254px); @include bg_pos("index/title.png"); } - .index-island{ + .index-island { pointer-events: none; @include pos(714px, 867px, 15px, 542px); @include bg_pos("index/island.png"); } - .index-cloud-1{ + .index-cloud-1 { pointer-events: none; @include pos(210px, 147px, -15px, 535px); @include bg_pos("index/cloud-1.png"); } - .index-cloud-2{ + .index-cloud-2 { pointer-events: none; @include pos(151px, 172px, 656px, 486px); @include bg_pos("index/cloud-2.png"); } - .index-tree-1{ + .index-tree-1 { pointer-events: none; @include pos(228px, 199px, -45px, 492px); @include bg_pos("index/tree-1.png"); @@ -181,29 +233,32 @@ const showVC = () => { } .index-agreement { - font-family: 'HarmonyOS_Sans_SC_Regular'; + font-family: "HarmonyOS_Sans_SC_Regular"; pointer-events: none; @include pos(736px, 182px, 7px, 1230px); - background-color: rgba(255, 255, 255,0.75); - font-size: 14px; - text-align: justify; - letter-spacing: 0.1px; - color: #124284; - padding: 10px; - box-sizing: border-box; - border-radius: 2px; - line-height: 20px; - .b { - font-weight: 700; - } + .agreement { + background-color: rgba(255, 255, 255, 0.75); - .orange { - color: #f5430c; - font-weight: 700; + font-size: 14px; + text-align: justify; + letter-spacing: 0.1px; + color: #124284; + padding: 10px; + box-sizing: border-box; + border-radius: 2px; + line-height: 20px; + + .b { + font-weight: 700; + } + + .orange { + color: #f5430c; + font-weight: 700; + } } } - } } diff --git a/src/components/Question.vue b/src/components/Question.vue index af56b69..c121f27 100644 --- a/src/components/Question.vue +++ b/src/components/Question.vue @@ -5,6 +5,8 @@ import { data } from "@/data"; import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins"; import { useMainStore } from "@/store"; import { subAnswer } from "@/api"; +import Preloader from "@/plugins/Preloader"; +import { pageResultImg } from "@/data/imgList"; // 页面配置初始化 const emit = defineEmits(["QuestionPage"]); @@ -22,7 +24,7 @@ const isChecked = ref(false); const answerFn = (item, event) => { let e = event.target.parentElement; activeId.value = item.aid; //更新选中状态 - console.log("选项", item); + // console.log("选项", item); debounceTap(e, () => { let cid = questionList.value[currentId.value].id; let has = answerList.value.findIndex((obj) => obj.id === cid); @@ -41,9 +43,9 @@ const answerFn = (item, event) => { gsap.set(".option-tips,.analysis", { autoAlpha: 1 }); gsap.set(".answer-box", { pointerEvents: "none" }); isChecked.value = true; - console.log("currentId.value", currentId.value); + // console.log("currentId.value", currentId.value); if (currentId.value == 2) { - console.log("over"); + // console.log("over"); gsap.set(".create-btn", { autoAlpha: 1 }); } else { gsap.set(".next-btn", { autoAlpha: 1 }); @@ -121,8 +123,31 @@ const getRandomNumber = (arr) => { onMounted(() => { gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 }); gsap.from(".question-box", { duration: 0.5, y: 30, autoAlpha: 0 }); - gsap.from(".answer-box", { duration: 0.5, y: 30, autoAlpha: 0 }); - gsap.to('.question-tree', { duration: 3, transformOrigin: '0% 70%', rotation: '-10deg', repeat: -1, yoyo: true, ease: 'none' }) + gsap.from(".answer-box", { + duration: 0.5, + y: 30, + autoAlpha: 0, + onComplete: () => { + // 开始加载答题页面资源 + Preloader({ + name: "加载结果页资源", + imgs: pageResultImg, + callback: (progress) => { + // console.log("进度:", progress); + }, + }).then((res) => { + console.log("done!"); + }); + }, + }); + gsap.to(".question-tree", { + duration: 3, + transformOrigin: "0% 70%", + rotation: "-10deg", + repeat: -1, + yoyo: true, + ease: "none", + }); }); @@ -133,20 +158,19 @@ onMounted(() => {
- -
第{{ questionList[currentId].id }}题
-
- -
- {{ item }} + +
第{{ questionList[currentId].id }}题
+
+ +
+ {{ item }} +
-
-
@@ -156,7 +180,7 @@ onMounted(() => { :class="[ isChecked ? item.result + '-text' : '', isChecked ? item.result + '-box' : '', - ]" + ]" :key="item.aid" >
@@ -173,12 +197,12 @@ onMounted(() => {
-
+
@@ -201,7 +225,6 @@ onMounted(() => { @include pos(750px, 1624px, 0px, 50%); transform: translateY(-50%); @include bg_pos("qa/bg.jpg"); - } .question-container { @@ -210,55 +233,54 @@ onMounted(() => { @include flexCen(); justify-content: space-around; - .question-box{ + .question-box { @include box(696px, 441px); @include bg_pos("qa/question-box.png"); position: relative; - .question-tree{ - @include pos(277px, 232px,-100px,-141px); + .question-tree { + @include pos(277px, 232px, -100px, -141px); @include bg_pos("qa/tree.png"); } .question-con { - @include pos(696px, 441px,0px,0px); - @include bg_pos("qa/question-box.png"); + @include pos(696px, 441px, 0px, 0px); + @include bg_pos("qa/question-box.png"); - .qa-number { - @include pos(696px, 86px, 0px, 0px); - font-size: 40px; - color: #ffffff; - font-weight: 700; - display: flex; - justify-content: center; - align-items: center; - text-align: justifyLeft; - text-shadow: 0px 6px 6px rgba(49, 116, 246, 0.9); - } + .qa-number { + @include pos(696px, 86px, 0px, 0px); + font-size: 40px; + color: #ffffff; + font-weight: 700; + display: flex; + justify-content: center; + align-items: center; + text-align: justifyLeft; + text-shadow: 0px 6px 6px rgba(49, 116, 246, 0.9); + } - .qa-question-box { - @include pos(626px, 243px, 37px, 177px); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + .qa-question-box { + @include pos(626px, 243px, 37px, 177px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; - // 问题样式 - .question-text { - width: 100%; - font-family: "HarmonyOS_Sans_SC_Regular"; - font-size: 30px; - letter-spacing: 1.5px; - color: #065ac6; - text-align: center; - padding: 40px; - text-align: justify; - line-height: 55px; + // 问题样式 + .question-text { + width: 100%; + font-family: "HarmonyOS_Sans_SC_Regular"; + font-size: 30px; + letter-spacing: 1.5px; + color: #065ac6; + text-align: center; + padding: 40px; + text-align: justify; + line-height: 55px; + } } } } - } - // 选项样式 .answer-box { @@ -289,6 +311,10 @@ onMounted(() => { position: relative; box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.361) inset; + .answer-text { + white-space: nowrap; + } + .bubble-1 { @include pos(55px, 5px, 88px, 7px); @include bg_pos("qa/bubble-1.png"); @@ -326,8 +352,7 @@ onMounted(() => { .correct-text { color: #e74c00; // background-color: rgba(255, 255, 255, 0.471); - box-shadow: 5px 5px 5px rgba(255, 240, 192, 0.471) inset; - + box-shadow: 5px 5px 5px rgba(255, 240, 192, 0.471) inset; } .option-tips { diff --git a/src/components/Result.vue b/src/components/Result.vue index ccd93fc..ed21f27 100644 --- a/src/components/Result.vue +++ b/src/components/Result.vue @@ -88,7 +88,7 @@ const createPoster = (event) => { { name: "text", src: posterTextSrc, - pos: { w: 337, h: 117, x: 81, y: 1133 }, + pos: { w: 347, h: 155, x: 81, y: 1113 }, }, ] ); @@ -217,7 +217,7 @@ const hideShare = () => { @include bg_pos("result/text-1.png"); } .r-text-2 { - @include pos(643px, 814px, 67px, 396px); + @include pos(648px, 794px, 59px, 407px); @include bg_pos("result/text-2.png"); } .r-text-3 { diff --git a/src/data/imgList.js b/src/data/imgList.js index 34730c1..b0d29cd 100644 --- a/src/data/imgList.js +++ b/src/data/imgList.js @@ -12,7 +12,28 @@ const page = [ "index/tree-1.png", "index/title.png", "index/island.png", - + + "rule/cls-btn.png", + "rule/arrow.png", + "rule/rule-box.png", + "rule/icon.png", +]; + +// 问题页面 +const pageQA = [ + "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", +] + +// 结果页面 +const pageResult = [ "prize/copy-btn2.png", "prize/copy-btn.png", "prize/cls-btn.png", @@ -27,17 +48,6 @@ const page = [ "prize/prize-box.png", "prize/myPrize-box.png", "prize/draw-box.png", - - "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", @@ -50,15 +60,10 @@ const page = [ "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", -]; + // "result/poster-1.jpg", + // "result/poster-3.jpg", + // "result/poster-2.jpg", +] // 处理为vite引入图片格式 function imgCreate(url, img) { @@ -66,8 +71,15 @@ function imgCreate(url, img) { img.push(i); } + + + + const loadImg = []; const pageImg = []; +const pageQAImg = []; +const pageResultImg = []; + load.forEach((element) => { imgCreate(element, loadImg); @@ -77,4 +89,12 @@ page.forEach((element) => { imgCreate(element, pageImg); }); -export { loadImg, pageImg }; +pageQA.forEach((element) => { + imgCreate(element, pageQAImg); +}); + +pageResult.forEach((element) => { + imgCreate(element, pageResultImg); +}); + +export { loadImg, pageImg,pageQAImg,pageResultImg }; diff --git a/src/data/index.js b/src/data/index.js index fcbeb55..107095f 100644 --- a/src/data/index.js +++ b/src/data/index.js @@ -33,14 +33,14 @@ export const data = [ text: [ '最短持有期类理财产品', ], - result:'incorrect', + result:'correct', }, { aid: 'B', text: [ '混合类理财产品', ], - result:'correct', + result:'incorrect', }, ], analysis: ['解析:选择B。现金类产品具有高流动性的特征,更适合日常流动资金。但在长期限选择中,固收理财拥有较大的投资范围和空间,运用策略提供稳健体验,有效平衡风险,力争增厚收益机会,闲钱再进阶。因此不同的资金用途记得匹配不同产品噢。'] diff --git a/vite.config.js b/vite.config.js index 0042e48..a910a0d 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: '好“理”在手 邂逅清凉一夏', }, } },