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

待发布测试版本

Browse Source
This commit is contained in:
梁泽军
2025-01-20 12:05:33 +08:00
parent bbcd5ad611
commit cf2f362c98
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Question.vue
View File

@@ -24,6 +24,7 @@ const currentId = ref(props.questionId); //当前id 0~11
const questionList = ref(data); //随机打乱题库
const isChecked = ref(false)
const checkedOption = ref('')
// 答题事件
const answerFn = (item, event) => {
@@ -35,6 +36,7 @@ const answerFn = (item, event) => {
gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
gsap.set('.answer-box', { pointerEvents: 'none' })
isChecked.value = true
checkedOption.value = item.aid
if (item.result === 'correct') {
gsap.set('.create-btn', { display: 'block' })
} else {
@@ -131,7 +133,8 @@ onMounted(() => {
</div>
<!-- 选项 -->
<div class="answer-box">
<div class="answer" :class="isChecked ? item.result + '-bg' : ''"
<div class="answer"
:class="[(isChecked) ? item.result + '-bg' : '', checkedOption==item.aid ? 'checked':'no-checked']"
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">
@@ -147,7 +150,7 @@ onMounted(() => {
</div>
<!-- 解析 -->
<div class="analysis">
<div v-for="(li,index) in questionList[currentId].analysis" :key="li">
<div v-for="(li, index) in questionList[currentId].analysis" :key="li">
<span class="analysis-tips" v-if="index == 0">提示:</span>
<span v-html="li"></span>
</div>
@@ -266,7 +269,7 @@ onMounted(() => {
// 选中状态
.correct-bg {
.checked {
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%);
@@ -281,9 +284,14 @@ onMounted(() => {
}
.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);
.no-checked {
// 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);
box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85),inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
background-image: -webkit-linear-gradient( 177deg, rgb(195,59,22) 0%, rgb(209,84,51) 100%);
.answer-option {
color: #ffe2ad;
@@ -295,6 +303,10 @@ onMounted(() => {
}
.checked{
}
.answer {
@@ -302,7 +314,7 @@ onMounted(() => {
position: relative;
border-radius: 47.5px;
border: 2px solid rgb(255, 225, 172);
// border: 2px solid rgb(255, 225, 172);
// margin-bottom: 35px;
justify-content: space-between;
display: flex;