<template>
|
<div class="exam-container w-screen h-screen bg-slate-50 relative overflow-hidden">
|
<div class="top-bg bg-blue-500"></div>
|
<div class="exam-content">
|
<div class="exam-wrapper container mx-auto h-full flex flex-col">
|
<div class="exam-header flex items-center mt-12 mb-10">
|
<div class="title-container text-3xl font-semibold text-white mr-8">
|
{{ examInfo.examName }}
|
</div>
|
<AnswerGrade></AnswerGrade>
|
|
<div class="return-container grow flex justify-end">
|
<el-button type="danger" size="large" circle @click="closeClick">
|
<template #icon>
|
<el-icon :size="20">
|
<Close />
|
</el-icon>
|
</template>
|
</el-button>
|
</div>
|
</div>
|
|
<div class="exam-main grow flex justify-between">
|
<!-- 答题卡区 -->
|
<div class="answer-wrapper answer-left mr-8 shadow-xl p-4 box-border">
|
<div class="wrapper h-full flex flex-col items-center">
|
<div class="title-wrapper w-full flex justify-between items-center mb-5">
|
<div class="title text-xl font-semibold ">答题卡</div>
|
<AnswerTag></AnswerTag>
|
</div>
|
|
<div class="sheet-wrapper w-full grow relative my-5">
|
<div class="sheet-content absolute top-0 bottom-0 w-full">
|
<AnswerSheet></AnswerSheet>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
<!-- 答题内容区 -->
|
<div class="answer-wrapper answer-right grow shadow-xl p-4">
|
<div class="wrapper h-full flex flex-col">
|
<div class="title-wrapper w-full flex mb-5">
|
<div class="title text-xl font-semibold ">{{ examType[currentType] }} ({{
|
gradeStore.getActiveQuestion.score }}分)
|
</div>
|
</div>
|
|
<div class="main-wrapper w-full grow relative my-5">
|
<div class="main-content absolute top-0 bottom-0 w-full">
|
<Transition appear name="fade-transform" mode="out-in">
|
<component :is="typeComponent[currentType]" :key="currentIndex"></component>
|
</Transition>
|
</div>
|
</div>
|
|
<div class="tool-wrapper flex justify-end">
|
<div class="button-container flex items-center">
|
<div class="button-item">
|
<el-button class="tool-button" @click="prevQuestion">上一题</el-button>
|
</div>
|
<div class="button-item">
|
<el-button class="tool-button" type="primary" @click="nextQuestion">下一题</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { storeToRefs } from 'pinia';
|
import { Close } from '@element-plus/icons-vue';
|
|
import AnswerTag from './components/answer-tag/index.vue';
|
import AnswerSheet from './components/answer-sheet/index.vue';
|
import AnswerGrade from './components/answer-grade/index.vue';
|
|
import AnswerSingle from './components/answer-main/answer-single/index.vue';
|
import AnswerMultiple from './components/answer-main/answer-multiple/index.vue';
|
import AnswerAudio from './components/answer-main/answer-audio/index.vue';
|
import AnswerFill from './components/answer-main/answer-fill/index.vue';
|
import AnswerDetermine from './components/answer-main/answer-determine/index.vue';
|
import AnswerShort from './components/answer-main/answer-short/index.vue';
|
import AnswerCount from './components/answer-main/answer-count/index.vue';
|
|
import { useGradeStore } from '@/store/index.js';
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
const gradeStore = useGradeStore();
|
const { currentType, currentIndex, examDetail, examType, examInfo } = storeToRefs(gradeStore);
|
const typeComponent = {
|
1: AnswerSingle,
|
2: AnswerMultiple,
|
3: AnswerDetermine,
|
4: AnswerFill,
|
5: AnswerShort,
|
6: AnswerAudio,
|
7: AnswerCount,
|
8: AnswerShort,
|
};
|
|
|
const prevQuestion = () => {
|
currentIndex.value--;
|
checkList();
|
};
|
|
const nextQuestion = () => {
|
currentIndex.value++;
|
checkList();
|
};
|
|
const checkList = () => {
|
let tempIndex = 0;
|
const typeQuestion = examDetail.value.find((typeItem, index) => {
|
if (typeItem.questionType === currentType.value) {
|
tempIndex = index;
|
return typeItem;
|
} else {
|
return false;
|
}
|
});
|
if (typeQuestion) {
|
if (currentIndex.value >= typeQuestion.questionList.length) {
|
tempIndex++;
|
if (examDetail.value[tempIndex]) {
|
currentType.value = examDetail.value[tempIndex].questionType;
|
currentIndex.value = 0;
|
} else {
|
currentType.value = typeQuestion.questionType;
|
currentIndex.value = typeQuestion.questionList.length - 1;
|
}
|
|
} else if (currentIndex.value < 0) {
|
tempIndex--;
|
if (examDetail.value[tempIndex]) {
|
currentType.value = examDetail.value[tempIndex].questionType;
|
currentIndex.value = examDetail.value[tempIndex].questionList.length - 1;
|
} else {
|
currentType.value = typeQuestion.questionType;
|
currentIndex.value = 0;
|
}
|
}
|
}
|
|
};
|
|
|
const closeClick = () => {
|
router.back();
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
@media (min-width: 1836px) {
|
.container {
|
max-width: 1724px;
|
}
|
}
|
|
.top-bg {
|
width: 130%;
|
height: 200px;
|
position: absolute;
|
border-bottom-left-radius: 50%;
|
border-bottom-right-radius: 50%;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.exam-content {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 2;
|
}
|
|
.exam-header {
|
width: 100%;
|
}
|
|
.answer-wrapper {
|
background-color: #fff;
|
border-top-left-radius: 10px;
|
border-top-right-radius: 10px;
|
}
|
|
.answer-left {
|
width: 340px;
|
}
|
|
.submit-button,
|
.tool-button {
|
width: 160px;
|
height: 40px;
|
}
|
|
.tool-button {
|
margin: 0 20px;
|
}
|
|
.icon-container {
|
width: 70px;
|
height: 70px;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-color: rgba($color: #3680fa, $alpha: 0.2);
|
margin-bottom: 20px;
|
}
|
</style>
|
