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

update

Browse Source
This commit is contained in:
梁泽军
2024-08-08 15:36:03 +08:00
parent 070a49155a
commit 3a20e989b3
12 changed files with 230 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/Question.vue
View File

@@ -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",
});
});
</script>
@@ -133,20 +158,19 @@ onMounted(() => {
<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"
>
{{ item }}
<!-- 问题序号 -->
<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"
>
{{ item }}
</div>
</div>
</div>
</div>
</div>
<!-- 选项 -->
<div class="answer-box">
@@ -156,7 +180,7 @@ onMounted(() => {
:class="[
isChecked ? item.result + '-text' : '',
isChecked ? item.result + '-box' : '',
]"
]"
:key="item.aid"
>
<div class="answer-text" v-for="a in item.text" :key="a">
@@ -173,12 +197,12 @@ onMounted(() => {
</div>
</div>
<!-- 解析 -->
<div class="analysis">
<!-- <div class="analysis">
<div v-for="li in questionList[currentId].analysis" :key="li">
<span class="analysis-icon"></span>
{{ li }}
</div>
</div>
</div> -->
<div class="next-btn" @click="nextQuestion($event)"></div>
<div class="create-btn" @click="viewResult($event)"></div>
</div>
@@ -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 {