| | |
| | | <ExamInfo class="mb-5" :questionIndex="currentIndex" :activeQuestion="activeQuestion"></ExamInfo> |
| | | |
| | | <div class="answer-content"> |
| | | <div class="answer-item flex" v-for="item, index in activeQuestion.questionItemList" @click="answerClick(item)" |
| | | <div class="answer-item flex" v-for="item, index in activeQuestion.questionItemList" |
| | | :class="answerState(item)"> |
| | | <div class="answer-icon flex flex-col justify-center items-center flex-shrink-0">{{ item.prefix }}</div> |
| | | <div class="answer-text text-gray-700">{{ item.content }}</div> |
| | | <div class="answer-text text-gray-700"> |
| | | <el-input v-model="answerList[`answer${index}`]" @focus="answerClick(item)" maxlength="30" placeholder="请输入内容"></el-input> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref } from 'vue'; |
| | | import { ref,watchEffect } from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import ExamInfo from '@/components/ExamInfo/index.vue'; |
| | | import { useExamStore } from '@/store/index.js'; |
| | | const examStore = useExamStore(); |
| | | |
| | | const answerList = ref({ |
| | | 'answer0': '' |
| | | }); |
| | | |
| | | |
| | | const { currentType, currentIndex } = storeToRefs(examStore); |
| | | |
| | | const activeQuestion = ref(examStore.getActiveQuestion); |
| | | |
| | | const answerClick = (item) => { |
| | | return; |
| | | if (item) { |
| | | if (item.isActive) { |
| | | item.isActive = !item.isActive; |
| | |
| | | return activeQuestion.value.questionItemList.find(item => item.isActive); |
| | | } |
| | | |
| | | watchEffect(() => { |
| | | activeQuestion.value.questionItemList.forEach((item,index) => { |
| | | answerList[`answer${index}`] = ''; |
| | | }) |
| | | }) |
| | | |
| | | |
| | | </script> |
| | | |
| | |
| | | border: 1px solid #DCDFE6; |
| | | overflow: hidden; |
| | | margin-bottom: 20px; |
| | | cursor: pointer; |
| | | |
| | | &:last-of-type { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | &:hover { |
| | | border-color: #3680fa; |
| | | |
| | | .answer-icon { |
| | | color: #3680fa; |
| | | border-color: #3680fa; |
| | | } |
| | | } |
| | | |
| | | |