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

'update'

Browse Source
This commit is contained in:
梁泽军 2025-05-22 15:39:52 +08:00
parent 68c4a94916
commit ef44ba761d
1 changed files with 50 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Question.vue
View File

@ -18,6 +18,7 @@ const questionList = ref(data); //随机打乱题库
const isChecked = ref(false); const isChecked = ref(false);
const checkedOption = ref(""); const checkedOption = ref("");
const QaResult = ref(1); //当前答题结果 const QaResult = ref(1); //当前答题结果
const correctObj = ref({}); //当前正确选项
// 答题事件 // 答题事件
const answerFn = (item, event) => { const answerFn = (item, event) => {
@ -29,6 +30,13 @@ const answerFn = (item, event) => {
checkedOption.value = item; checkedOption.value = item;
console.log("checkedOption", checkedOption.value); console.log("checkedOption", checkedOption.value);
QaResult.value = item.result; QaResult.value = item.result;
// 设置正确选项
correctObj.value = questionList.value[currentId.value].answer.find(
(item) => item.result == 1
);
console.log("correctObj", correctObj.value);
gsap.to(".qp-result ", { duration: 0.5, autoAlpha: 1, delay: 1 }); gsap.to(".qp-result ", { duration: 0.5, autoAlpha: 1, delay: 1 });
}); });
}; };
@ -176,14 +184,22 @@ const getClass = (item) => {
</div> </div>
</div> </div>
<div class="qp-result"> <div class="qp-result">
<div class="qp-result-box"> <div
class="qp-result-box"
:class="!QaResult ? 'qp-result-box-0' : 'qp-result-box-1'"
>
<div <div
class="qp-result-icon" class="qp-result-icon"
:class="!QaResult ? 'is-incorrect' : ''" :class="!QaResult ? 'is-incorrect' : ''"
></div> ></div>
<div class="qp-result-text">{{ QaResult ? "答对啦" : "答错啦" }}</div>
<div class="qp-tips-text">{{ questionList[currentId].tips[0] }}</div> <div class="qp-result-content">
<div class="qp-result-btn"></div> <div class="qp-result-text">{{ QaResult ? "答对啦" : "答错啦" }}</div>
<div class="qp-tips" v-if="!QaResult">
答案:{{ correctObj.aid }}.{{ correctObj.text }}
</div>
<div class="qp-tips-text">{{ questionList[currentId].tips[0] }}</div>
</div>
</div> </div>
<div <div
class="next-btn" class="next-btn"
@ -355,7 +371,7 @@ const getClass = (item) => {
visibility: hidden; visibility: hidden;
.qp-result-box { .qp-result-box {
@include box(569px, 399px); @include box(569px, 399px);
@include bg_pos("qa/result-box.png");
position: relative; position: relative;
.qp-result-icon { .qp-result-icon {
@include pos(112px, 112px, 222px, -28px); @include pos(112px, 112px, 222px, -28px);
@ -364,20 +380,44 @@ const getClass = (item) => {
.is-incorrect { .is-incorrect {
@include bg_pos("qa/incorrect-icon.png"); @include bg_pos("qa/incorrect-icon.png");
} }
.qp-result-text {
@include pos(569px, 50px, 0px, 104px); .qp-result-content{
@include flexCen(); @include pos(569px, 290px, 0px, 94px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.qp-result-text {
text-align: center;
width: 100%;
font-size: 35px; font-size: 35px;
color: #ffffff; color: #ffffff;
margin: 20px auto;
}
.qp-tips {
font-size: 25px;
color: #ff0000;
} }
.qp-tips-text { .qp-tips-text {
@include pos(569px, 220px, 0px, 150px); width: 100%;
padding: 20px; padding: 10px 20px;
font-size: 25px; font-size: 25px;
line-height: 35px; line-height: 35px;
text-align: justify; text-align: justify;
color: #b3640d; color: #b3640d;
} }
}
}
.qp-result-box-1 {
@include bg_pos("qa/result-box.png");
}
.qp-result-box-0 {
@include bg_pos("qa/result-box-2.png");
} }
.next-btn { .next-btn {