<template>
|
<div class="sheet-container w-full h-full">
|
<el-scrollbar>
|
<el-collapse v-model="activeNames">
|
<template v-for="item in examDetail">
|
<el-collapse-item :title="examType[item.questionType]" :name="item.questionType">
|
<div class="sheet-list grid grid-cols-5 gap-4 justify-items-center">
|
<div class="sheet-item cursor-pointer flex justify-center items-center" v-for="question,index in item.questionList" @click="sheetClick(item.questionType,index)" :class="itemClass(question,item.questionType, index)">
|
{{ index + 1 }}
|
</div>
|
</div>
|
</el-collapse-item>
|
</template>
|
</el-collapse>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import {storeToRefs} from 'pinia';
|
import {useExamStore} from '@/store/index.js';
|
const examStore = useExamStore();
|
|
const {examType, examDetail,currentType,currentIndex} = storeToRefs(examStore);
|
|
const activeNames = ref(examDetail.value.map(item => item.questionType));
|
|
const itemClass = (question,type,index) => {
|
return {
|
answer: question.correct,
|
active: currentType.value === type && currentIndex.value === index
|
}
|
}
|
|
const sheetClick = (type,index) => {
|
currentType.value = type;
|
currentIndex.value = index;
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.sheet-list {
|
width: 97%;
|
}
|
.sheet-item {
|
width: 35px;
|
height: 35px;
|
border: 1px solid #DCDFE6;
|
background-color: #fff;
|
color: #374151;
|
}
|
|
.active {
|
border-color: #3680fa;
|
}
|
.answer {
|
border-color: #3680fa !important;
|
background-color: #3680fa !important;
|
color: #fff !important;
|
}
|
</style>
|
