<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">
|
测试测试测试
|
</div>
|
<AnswerTime></AnswerTime>
|
|
<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="progress-wrapper w-full">
|
<AnswerProgress></AnswerProgress>
|
</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 class="submit-wrapper">
|
<el-button type="primary" class="submit-button">提交试卷</el-button>
|
</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 ">单选题 (3分)</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="questionIndex"></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>
|
|
|
<!-- 提示弹窗 -->
|
<el-dialog v-model="dialogVisible" title="注意" width="500">
|
<div class="dialog-container">
|
<p>请确认是否退出当前考试</p>
|
<p>当前考试试卷会自动提交,后续无法继续作答</p>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="confirmCancel">
|
确定
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { Close } from '@element-plus/icons-vue';
|
import AnswerTag from './components/answer-tag/index.vue';
|
import AnswerProgress from './components/answer-progress/index.vue';
|
import AnswerSheet from './components/answer-sheet/index.vue';
|
import AnswerSingle from './components/answer-main/answer-single/index.vue';
|
import AnswerMultiple from './components/answer-main/answer-multiple/index.vue';
|
import AnswerTime from './components/answer-time/index.vue';
|
|
const typeComponent = {
|
1: AnswerSingle,
|
2: AnswerMultiple,
|
};
|
|
const currentType = ref(1);
|
const questionIndex = ref(0);
|
|
const dialogVisible = ref(false);
|
|
const prevQuestion = () => {
|
questionIndex.value--;
|
};
|
|
const nextQuestion = () => {
|
questionIndex.value++;
|
};
|
|
const closeClick = () => {
|
dialogVisible.value = true;
|
};
|
|
const confirmCancel = () => {
|
dialogVisible.value = false;
|
}
|
</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;
|
}
|
</style>
|
