liangzejun/palc-newyear2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

初始化2025元宵节活动

Browse Source
This commit is contained in:
梁泽军
2025-01-13 14:12:47 +08:00
parent d239b3f8fb
commit cc3a3df9bc
109 changed files with 927 additions and 944 deletions
Download Patch File Download Diff File Expand all files Collapse all files

590
src/components/Question.vue
View File

@@ -5,8 +5,6 @@ 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"]);
@@ -18,13 +16,13 @@ const questionList = ref(data); //随机打乱题库
const answerList = ref([]); // 答案库统计
const activeId = ref(""); // 当前题目所选答案选项
const showResultBtn = ref(false);
const isChecked = ref(false);
const isChecked = ref(false)
// 答题事件
const answerFn = (item, event) => {
let e = event.target.parentElement;
activeId.value = item.aid; //更新选中状态
// console.log("选项", item);
activeId.value = item.aid; //更新选中状态
console.log('选项', item);
debounceTap(e, () => {
let cid = questionList.value[currentId.value].id;
let has = answerList.value.findIndex((obj) => obj.id === cid);
@@ -40,45 +38,51 @@ const answerFn = (item, event) => {
answerList.value[has].answer = item.text;
}
gsap.set(".option-tips,.analysis", { autoAlpha: 1 });
gsap.set(".answer-box", { pointerEvents: "none" });
isChecked.value = true;
// console.log("currentId.value", currentId.value);
if (currentId.value == 2) {
// console.log("over");
gsap.set(".create-btn", { autoAlpha: 1 });
} else {
gsap.set(".next-btn", { autoAlpha: 1 });
gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
gsap.set('.answer-box', { pointerEvents: 'none' })
isChecked.value = true
console.log('currentId.value',currentId.value);
if(currentId.value == 2 ){
gsap.set('.create-btn', { display: 'block' })
}else{
gsap.set('.next-btn', { display: 'block' })
}
});
};
})
}
// 下一题
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(".answer-box", { pointerEvents: "initial" });
gsap.set(".next-btn", { autoAlpha: 0 });
});
};
isChecked.value = false
gsap.set('.option-tips,.analysis', { autoAlpha: 0 })
currentId.value++
activeId.value = ''
gsap.set('.answer-box', { pointerEvents: 'initial' })
gsap.set('.next-btn', { display: 'none' })
})
}
// 查看结果事件
const viewResult = (event) => {
let e = event.target;
debounceTap(e, () => {
// 随机生成海报id
userStore.updatePosterId(getRandomNumber([1, 2, 3]));
gsap.set(".question-box", { pointerEvents: "none" });
Toast("答题结束");
userStore.updatePosterId(getRandomNumber([1, 2, 3]))
gsap.set('.question-box', { pointerEvents: 'none' })
Toast('答题结束')
Toast.loading({
message: "结果生成中",
message: '结果生成中',
duration: 0,
forbidClick: true,
});
})
if (import.meta.env.VITE_MODE != "dev") {
// 提交完成记录
@@ -89,130 +93,96 @@ const viewResult = (event) => {
}
setTimeout(() => {
Toast.clear();
gsap.to(".QuestionPage", {
duration: 0.5,
autoAlpha: 0,
onComplete: () => {
Toast.clear()
gsap.to('.QuestionPage', {
duration: 0.5, autoAlpha: 0, onComplete: () => {
emit("QuestionPage", { action: "showResult" });
},
});
}, 1000);
}
})
}, 1000)
});
} else {
setTimeout(() => {
Toast.clear();
gsap.to(".QuestionPage", {
duration: 0.5,
autoAlpha: 0,
onComplete: () => {
Toast.clear()
gsap.to('.QuestionPage', {
duration: 0.5, autoAlpha: 0, onComplete: () => {
emit("QuestionPage", { action: "showResult" });
},
});
}, 1000);
}
})
}, 1000)
}
});
};
})
}
// 从数组中随机生成一个数字
const getRandomNumber = (arr) => {
var randomIndex = Math.floor(Math.random() * arr.length);
return arr[randomIndex];
};
}
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,
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",
});
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' })
});
</script>
<template>
<div class="QuestionPage" @touchmove.prevent>
<div class="question-bg"></div>
<div class="question-bg">
<div class="bottom-fan-1"></div>
<div class="bottom-fan-2"></div>
<div class="question-bottom-bg"></div>
</div>
<div class="question-container">
<div class="container-fan-1"></div>
<div class="container-fan-2"></div>
<div class="question-box">
<div class="question-tree"></div>
<div class="question-con">
<!-- 问题序号 -->
<div class="qa-number">第{{ questionList[currentId].id }}题</div>
<div class="qa-question-box">
<!-- 问题 -->
<div
class="question-text"
v-for="item in questionList[currentId].question"
:key="item"
>
<!-- 问题序号 -->
<div class="qa-number">{{ questionList[currentId].id }}</div>
<div class="qa-question-box">
<!-- 问题 -->
<div class="question">
<div class="question-text" v-for="item in questionList[currentId].question" :key="item">
{{ item }}
</div>
<div class="question-tips">打一系列产品</div>
</div>
<!-- 选项 -->
<div class="answer-box">
<div class="answer" :class="isChecked ? item.result + '-bg' : ''"
v-for="item in questionList[currentId].answer" :key="item.aid">
<div class="answer-text-box">
<div class="answer-text" v-for="a in item.text" :key="a">
{{ item.aid }}.{{ a }}
</div>
</div>
<div class="option-tips">
<div :class="item.result"></div>
</div>
<!-- 可点击区域 -->
<div class="click-area" @click="answerFn(item, $event)"></div>
</div>
</div>
<!-- 解析 -->
<div class="analysis" >
<div v-for="li in questionList[currentId].analysis" :key="li">{{li}}</div>
</div>
<div class="next-btn" @click="nextQuestion($event)"></div>
<div class="create-btn" @click="viewResult($event)"></div>
</div>
</div>
<!-- 选项 -->
<div class="answer-box">
<div
class="answer"
v-for="(item, index) in questionList[currentId].answer"
:class="[
isChecked ? item.result + '-text' : '',
isChecked ? item.result + '-box' : '',
]"
:key="item.aid"
>
<div class="answer-text" v-for="a in item.text" :key="a">
{{ item.aid }}.{{ a }}
</div>
<div class="option-tips">
<div :class="item.result"></div>
</div>
<!-- 对话框气泡 -->
<div class="bubble-1"></div>
<div :class="index == 0 ? 'bubble-left' : 'bubble-right'"></div>
<!-- 可点击区域 -->
<div class="click-area" @click="answerFn(item, $event)"></div>
</div>
</div>
<!-- 解析 -->
<!-- <div class="analysis">
<div v-for="li in questionList[currentId].analysis" :key="li">
<span class="analysis-icon"></span>
{{ li }}
</div>
</div> -->
<div class="next-btn" @click="nextQuestion($event)"></div>
<div class="create-btn" @click="viewResult($event)"></div>
<div class="question-lantern-icon"></div>
<div class="question-gold-icon-1"></div>
<div class="question-gold-icon-2"></div>
</div>
<!-- 进度条 -->
<Progress
:percentage="((currentId + 1) / 3) * 100"
pivot-color="#7232dd"
:show-pivot="false"
color="linear-gradient(to right, rgb(49, 116, 246), rgb(83, 131, 227))"
/>
<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))" />
</div>
</template>
@@ -224,188 +194,248 @@ onMounted(() => {
.question-bg {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
@include bg_pos("qa/bg.jpg");
@include bg_pos('qa/bg.jpg');
.question-bottom-bg {
pointer-events: none;
@include box(750px, 393px);
position: absolute;
left: 0px;
bottom: 0px;
@include bg_pos("qa/bottom-bg.png");
}
.bottom-fan-1 {
@include pos(370px, 334px, 545px, 1022px);
@include bg_pos('index/fan-3.png');
}
.bottom-fan-2 {
@include pos(350px, 205px, 494px, 1128px);
@include bg_pos('index/fan-4.png');
}
}
.question-container {
@include pos(750px, 1180px, 0px, 50%);
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
@include flexCen();
justify-content: space-around;
.question-lantern-icon {
// pointer-events: none;
@include pos(349px, 443px, 489px, 49px);
@include bg_pos('qa/lantern-icon.png');
}
.container-fan-1 {
pointer-events: none;
@include pos(235px, 574px, 0px, 60px);
@include bg_pos("index/fan-1.png");
}
.container-fan-2 {
pointer-events: none;
@include pos(316px, 317px, -205px, 405px);
@include bg_pos("index/fan-2.png");
}
.question-box {
@include box(696px, 441px);
@include pos(656px, 913px, 47px, 339px);
@include bg_pos("qa/question-box.png");
position: relative;
.question-tree {
@include pos(277px, 232px, -100px, -141px);
@include bg_pos("qa/tree.png");
.qa-number {
@include pos(100px, 56px, 278px, 89px);
font-size: 40px;
font-style: italic;
color: #c61a1a;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
}
.question-con {
@include pos(696px, 441px, 0px, 0px);
@include bg_pos("qa/question-box.png");
.qa-question-box {
@include pos(570px, 700px, 43px, 194px);
display: flex;
flex-direction: column;
// justify-content: space-around;
justify-content: flex-start;
align-items: center;
.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);
// 问题样式
.question {
display: flex;
flex-direction: column;
// margin-bottom: 10px;
height: 270px;
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;
font-family: 'DouyinSansBold';
font-size: 35px;
color: rgb(255, 255, 255);
text-align: center;
padding: 40px;
text-align: justify;
line-height: 55px;
padding: 10px;
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);
}
}
// 选项样式
.answer-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 200px;
// 选中状态
.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%);
.answer-option {
color: #96100f;
}
.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;
border-radius: 47.5px;
border: 2px solid rgb(255, 225, 172);
// margin-bottom: 35px;
justify-content: space-between;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.click-area {
@include pos(476px, 92px, 0px, 0px);
border-radius: 47.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';
color: #ffe2ad;
font-size: 28px;
display: flex;
flex-direction: column;
justify-content: center;
.answer-text {
width: 100%;
// text-align: center;
padding-left: 40px;
}
}
}
}
// 解析样式
.analysis {
visibility: hidden;
width: 95%;
font-family: 'HarmonyOS_Sans_SC_Regular';
font-size: 20px;
color: #ffe2ad;
text-align: center;
// padding: 20px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.next-btn{
@include box(234px,65px);
@include bg_pos("qa/next-btn.png");
display: none;
}
.create-btn{
@include box(234px,65px);
@include bg_pos("qa/create-btn.png");
display: none;
}
}
}
// 选项样式
.answer-box {
@include box(750px, 205px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
color: #065ac6;
font-size: 26px;
line-height: 80px;
margin-top: 40px;
padding: 0 50px;
font-family: "HarmonyOS_Sans_SC_Regular";
.answer {
display: flex;
flex-direction: row;
justify-content: space-around;
line-height: 75px;
height: 74px;
padding: 0px 30px;
border-radius: 50px;
border: 1px solid rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.361);
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");
}
.bubble-left {
@include pos(26px, 15px, 88px, 72px);
border: 10px solid transparent;
border-top-color: rgba(255, 255, 255, 0.9);
border-bottom: 0;
margin-left: -10px;
margin-bottom: -10px;
// @include bg_pos("qa/jiao-1.png");
}
.bubble-right {
@include box(26px, 15px);
border: 10px solid transparent;
border-top-color: rgba(255, 255, 255, 0.9);
border-bottom: 0;
margin-left: -5px;
margin-bottom: -5px;
position: absolute;
top: 72px;
right: 88px;
}
.click-area {
@include pos(100%, 100%, 0px, 0px);
border-radius: 47.5px;
// background: rgba($color: #000000, $alpha: 0.5);
}
}
.correct-text {
color: #e74c00;
// background-color: rgba(255, 255, 255, 0.471);
box-shadow: 5px 5px 5px rgba(255, 240, 192, 0.471) inset;
}
.option-tips {
@include box(40px, 40px);
visibility: hidden;
.correct {
@include box(74px, 74px);
@include bg_pos("qa/correct.png");
position: absolute;
right: -20px;
top: 0px;
}
.incorrect {
@include box(74px, 74px);
@include bg_pos("qa/incorrect.png");
position: absolute;
right: -20px;
top: 0px;
}
}
.question-gold-icon-1 {
pointer-events: none;
@include pos(135px, 128px, 604px, 773px);
@include bg_pos("qa/gold-icon.png");
}
// 解析样式
.analysis {
visibility: hidden;
width: 95%;
font-family: "HarmonyOS_Sans_SC_Regular";
font-size: 25px;
color: #e74c00;
text-align: justify;
padding: 10px 50px;
// height: 100px;
.analysis-icon {
display: inline-block;
@include box(32px, 31px);
@include bg_pos("qa/analysis-icon.png");
}
.question-gold-icon-2 {
pointer-events: none;
@include pos(276px, 241px, -70px, 1089px);
@include bg_pos("qa/gold-icon-2.png");
}
.next-btn {
@include box(256px, 70px);
@include bg_pos("qa/next-btn.png");
// display: none;
visibility: hidden;
}
.create-btn {
@include box(256px, 70px);
@include bg_pos("qa/create-btn.png");
// display: none;
visibility: hidden;
}
}
}
</style>