diff --git a/src/assets/font/DouyinSansBold.ttf b/src/assets/font/DouyinSansBold.ttf index 2b1045e..8cb1bbb 100644 Binary files a/src/assets/font/DouyinSansBold.ttf 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 c17f497..0f488b9 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/images/qa/bg.jpg b/src/assets/images/qa/bg.jpg index da679c0..581e26e 100644 Binary files a/src/assets/images/qa/bg.jpg and b/src/assets/images/qa/bg.jpg differ diff --git a/src/assets/images/qa/bottom-bg.png b/src/assets/images/qa/bottom-bg.png index 6300e01..c089c49 100644 Binary files a/src/assets/images/qa/bottom-bg.png and b/src/assets/images/qa/bottom-bg.png differ diff --git a/src/assets/images/qa/correct.png b/src/assets/images/qa/correct.png new file mode 100644 index 0000000..1eb36a1 Binary files /dev/null and b/src/assets/images/qa/correct.png differ diff --git a/src/assets/images/qa/create-btn.png b/src/assets/images/qa/create-btn.png new file mode 100644 index 0000000..13e46a6 Binary files /dev/null and b/src/assets/images/qa/create-btn.png differ diff --git a/src/assets/images/qa/gold-icon-2.png b/src/assets/images/qa/gold-icon-2.png index c3a896b..0336a36 100644 Binary files a/src/assets/images/qa/gold-icon-2.png and b/src/assets/images/qa/gold-icon-2.png differ diff --git a/src/assets/images/qa/gold-icon.png b/src/assets/images/qa/gold-icon.png index 89d695d..1ba5b45 100644 Binary files a/src/assets/images/qa/gold-icon.png and b/src/assets/images/qa/gold-icon.png differ diff --git a/src/assets/images/qa/incorrect.png b/src/assets/images/qa/incorrect.png new file mode 100644 index 0000000..ef46c8e Binary files /dev/null and b/src/assets/images/qa/incorrect.png differ diff --git a/src/assets/images/qa/lantern-icon.png b/src/assets/images/qa/lantern-icon.png index a62df4e..f5c13d3 100644 Binary files a/src/assets/images/qa/lantern-icon.png and b/src/assets/images/qa/lantern-icon.png differ diff --git a/src/assets/images/qa/next-btn.png b/src/assets/images/qa/next-btn.png new file mode 100644 index 0000000..218bd4d Binary files /dev/null and b/src/assets/images/qa/next-btn.png differ diff --git a/src/assets/images/qa/question-box.png b/src/assets/images/qa/question-box.png index 81ee241..6a28b45 100644 Binary files a/src/assets/images/qa/question-box.png and b/src/assets/images/qa/question-box.png differ diff --git a/src/components/Question.vue b/src/components/Question.vue index 5e4c1fc..df93345 100644 --- a/src/components/Question.vue +++ b/src/components/Question.vue @@ -16,6 +16,8 @@ const questionList = ref(data); //随机打乱题库 const answerList = ref([]); // 答案库统计 const activeId = ref(""); // 当前题目所选答案选项 const showResultBtn = ref(false); +const isChecked = ref(false) + // 答题事件 const answerFn = (item, event) => { let e = event.target.parentElement; @@ -37,39 +39,49 @@ const answerFn = (item, event) => { } // 判断是否为最后一题 - if (currentId.value < questionList.value.length - 1) { - currentId.value++ - activeId.value = '' + gsap.set('.option-tips,.analysis', { autoAlpha: 1 }) + gsap.set('.question-box', { pointerEvents: 'none' }) + isChecked.value = true + }) - } else { - // 随机生成海报id - userStore.updatePosterId(getRandomNumber([1, 2, 3])) - gsap.set('.question-box', { pointerEvents: 'none' }) - Toast('答题结束') - Toast.loading({ - message: '结果生成中', - duration: 0, - forbidClick: true, - }) +} - if (import.meta.env.VITE_MODE != "dev") { - // 提交完成记录 - subAnswer({}, userStore.token).then((res) => { - console.log("key:", res); - if (res.code == 0) { - userStore.updateDrawKey(res.data); - } - setTimeout(() => { - Toast.clear() - gsap.to('.QuestionPage', { - duration: 0.5, autoAlpha: 0, onComplete: () => { - emit("QuestionPage", { action: "showResult" }); - } - }) - }, 1000) - }); - } else { +// 下一题 +const nextQuestion = (event) => { + let e = event.target; + debounceTap(e, () => { + isChecked.value = false + gsap.set('.option-tips,.analysis', { autoAlpha: 0 }) + currentId.value++ + activeId.value = '' + gsap.set('.question-box', { pointerEvents: 'initial' }) + }) + +} + +// 查看结果事件 +const viewResult = (event) => { + let e = event.target; + debounceTap(e, () => { + // 随机生成海报id + userStore.updatePosterId(getRandomNumber([1, 2, 3])) + gsap.set('.question-box', { pointerEvents: 'none' }) + Toast('答题结束') + Toast.loading({ + message: '结果生成中', + duration: 0, + forbidClick: true, + }) + + if (import.meta.env.VITE_MODE != "dev") { + // 提交完成记录 + subAnswer({}, userStore.token).then((res) => { + console.log("key:", res); + if (res.code == 0) { + userStore.updateDrawKey(res.data); + } + setTimeout(() => { Toast.clear() gsap.to('.QuestionPage', { @@ -78,13 +90,19 @@ const answerFn = (item, event) => { } }) }, 1000) - } - + }); + } else { + setTimeout(() => { + Toast.clear() + gsap.to('.QuestionPage', { + duration: 0.5, autoAlpha: 0, onComplete: () => { + emit("QuestionPage", { action: "showResult" }); + } + }) + }, 1000) } - console.log("答案库", answerList.value); - }); -}; - + }) +} // 从数组中随机生成一个数字 const getRandomNumber = (arr) => { @@ -92,8 +110,7 @@ const getRandomNumber = (arr) => { return arr[randomIndex]; } -// 查看结果事件及动画 -// 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, }) @@ -123,21 +140,28 @@ onMounted(() => {
{{ item }}
+
打一系列产品
-
-
{{ item.aid }}
- {{ a }} + {{ item.aid }}.{{ a }}
+
+
+
+ +
{{ questionList[currentId].analysis }}
+
+
@@ -187,7 +211,7 @@ onMounted(() => { @include flexCen(); .question-lantern-icon { - pointer-events: none; + // pointer-events: none; @include pos(349px, 443px, 489px, 49px); @include bg_pos('qa/lantern-icon.png'); } @@ -220,7 +244,7 @@ onMounted(() => { } .qa-question-box { - @include pos(570px, 620px, 43px, 194px); + @include pos(570px, 700px, 43px, 194px); display: flex; flex-direction: column; justify-content: space-around; @@ -240,6 +264,16 @@ onMounted(() => { text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004); // -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0); } + + .question-tips { + font-size: 25px; + width: 100%; + font-family: 'DouyinSansBold'; + color: rgb(255, 255, 255); + text-align: center; + padding: 10px; + text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004); + } } // 选项样式 @@ -249,8 +283,8 @@ onMounted(() => { align-items: center; // 选中状态 - .answer-active { - border: 2px solid rgb(255, 238, 186) !important; + .correct-bg { + border: 1px solid rgb(255, 238, 186) !important; background-image: linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%); background-image: -webkit-linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%); @@ -259,13 +293,27 @@ onMounted(() => { } .answer-text-box { - color: #96100f !important; } + } + + .incorrect-bg { + background-image: -webkit-linear-gradient(177deg, rgb(195, 59, 22) 0%, rgb(209, 84, 51) 100%); + box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85), inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004); + + .answer-option { + color: #ffe2ad; + } + + .answer-text-box { + color: #ffe2ad !important; + } } + + .answer { @include box(476px, 92px); position: relative; @@ -274,7 +322,7 @@ onMounted(() => { margin-bottom: 35px; display: flex; flex-direction: row; - justify-content: space-between; + justify-content: space-around; align-items: center; .click-area { @@ -283,19 +331,23 @@ onMounted(() => { } - .answer-option { - @include box(92px, 77px); - border-radius: 38.5px; - background-color: rgb(233, 197, 143); - font-size: 52px; - display: flex; - justify-content: center; - align-items: center; - color: #cc1615; - font-weight: 700; - margin-left: 5px; + .option-tips { + @include box(60px, 60px); + visibility: hidden; + + .correct { + @include box(100%, 100%); + @include bg_pos("qa/correct.png"); + } + + .incorrect { + @include box(100%, 100%); + @include bg_pos("qa/incorrect.png"); + } } + + .answer-text-box { @include box(335px, 100%); font-family: 'HarmonyOS_Sans_SC_Regular'; @@ -307,6 +359,8 @@ onMounted(() => { .answer-text { width: 100%; + // text-align: center; + padding-left: 40px; } } @@ -316,6 +370,28 @@ onMounted(() => { + } + + // 解析样式 + .analysis { + width: 100%; + font-family: 'HarmonyOS_Sans_SC_Regular'; + font-size: 25px; + color: #ffe2ad; + text-align: center; + padding: 10px; + height: 150px; + line-height: 40px; + } + + .next-btn{ + @include box(234px,65px); + @include bg_pos("qa/next-btn.png"); + + } + .create-btn{ + @include box(234px,65px); + @include bg_pos("qa/create-btn.png"); } } diff --git a/src/data/imgList.js b/src/data/imgList.js index b5ff399..a77f800 100644 --- a/src/data/imgList.js +++ b/src/data/imgList.js @@ -31,12 +31,16 @@ const page = [ 'prize/no-prize.png', 'prize/star.png', + 'qa/correct.png', 'qa/gold-icon.png', - 'qa/question-box.png', - 'qa/lantern-icon.png', + 'qa/incorrect.png', 'qa/gold-icon-2.png', - 'qa/bg.jpg', + 'qa/next-btn.png', + 'qa/create-btn.png', + 'qa/lantern-icon.png', + 'qa/question-box.png', 'qa/bottom-bg.png', + 'qa/bg.jpg', 'result/tips.png', 'result/product-3.png', diff --git a/src/data/index.js b/src/data/index.js index a6f9812..39e1659 100644 --- a/src/data/index.js +++ b/src/data/index.js @@ -2,72 +2,72 @@ export const data = [ { id: 1, question: [ - '元宵幸福是来源于阖家团圆', - '你的投资“幸福感”从何而来？', + '兄弟好多个，个个都爱赢', + '目标很合适，止盈有方法', ], answer: [ { aid: 'A', text: [ - '低波动低回撤', - '追求稳稳的幸福', + '灵活策略目标盈', ], + result:'correct', }, { aid: 'B', text: [ - '流动性好', - '存取超方便', + '灵活策略目标强', ], + result:'incorrect', }, ], }, { id: 2, question: [ - '“投资就像猜灯谜，不能碰运气', - '学会评估才是关键”', - '你倾向于什么方式评估？', + '固收旗舰团，兄弟有志气', + '三个金牛奖，开启财富门', ], answer: [ { aid: 'A', text: [ - '根据详细的市场报告', - '及历史数据具体分析', + '启航', ], + result:'correct', }, { aid: 'B', text: [ - '根据整体市场趋势', - '进行未来预测', + '远航', ], + result:'incorrect', }, ], + analysis: '（注：截止2024年1月30日，启航系列历史到期正收益概率100%）' }, { id: 3, question: [ - '元宵是新年开运吉日', - '此时开启一项新投资', - '你更追求？', + '兄弟好多个，口碑都很好', + '考试常满分，稳重不轻浮', ], answer: [ { aid: 'A', text: [ - '尽可能保证本金安全', - '追求“落袋为安”', + '稳健精选', ], + result:'correct', }, { aid: 'B', text: [ - '产生较多的收益', - '可以承担一定的投资风险', + '稳妥精选', ], + result:'incorrect', }, ], + analysis: '（注：截止2024年1月30日，稳健精选系列历史到期业绩基准达标率100%）' }, ] diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue index 90af6da..10d449a 100644 --- a/src/page/Home/App.vue +++ b/src/page/Home/App.vue @@ -57,7 +57,7 @@ const indexFn = (item) => { } }; -const showQuestion = ref(false); +const showQuestion = ref(true); const questionFn = (item) => { if (item.action == "hide") { showQuestion.value = false; @@ -209,7 +209,7 @@ onMounted(() => { }); } } else { - showLoad.value = true; + // showLoad.value = true; createBGM(); } });