From cf87d6fd9a43139a10e0b6bf10a233cbde66820f Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期三, 19 六月 2024 16:22:41 +0800 Subject: [PATCH] feat(考试):考试收卷提示 --- src/views/exam/index.vue | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 50 insertions(+), 6 deletions(-) diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue index 733daf1..2866539 100644 --- a/src/views/exam/index.vue +++ b/src/views/exam/index.vue @@ -5,9 +5,9 @@ <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> - <AnswerTime></AnswerTime> + <AnswerTime @timeOut="timeOut"></AnswerTime> <div class="return-container grow flex justify-end"> <el-button type="danger" size="large" circle @click="closeClick"> @@ -50,7 +50,9 @@ <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] }} ({{ examStore.getActiveQuestion.score}}鍒�)</div> + <div class="title text-xl font-semibold ">{{ examType[currentType] }} ({{ + examStore.getActiveQuestion.score }}鍒�) + </div> </div> <div class="main-wrapper w-full grow relative my-5"> @@ -109,13 +111,31 @@ </div> </template> </el-dialog> + + <!-- 鑰冭瘯鏃堕棿寮圭獥 --> + <el-dialog + v-model="timeDialog" + align-center width="500" + :close-on-click-modal="false" + :close-on-press-escape="false" + :show-close="false" + > + <div class="dialog-container flex flex-col items-center"> + <div class="icon-container"> + <el-icon :size="50" color="#3680fa"><Timer /></el-icon> + </div> + <div class="dialog-info"> + 鑰冭瘯鏃堕棿鍒帮紝绯荤粺鑷姩鏀跺嵎涓�....... + </div> + </div> + </el-dialog> </div> </template> <script setup> import { ref, watchEffect } from 'vue'; import { storeToRefs } from 'pinia'; -import { Close } from '@element-plus/icons-vue'; +import { Close,Timer } 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'; @@ -131,7 +151,7 @@ const router = useRouter(); const examStore = useExamStore(); -const { currentType, currentIndex, examDetail, examType } = storeToRefs(examStore); +const { currentType, currentIndex, examDetail, examType, examInfo } = storeToRefs(examStore); const typeComponent = { 1: AnswerSingle, @@ -141,6 +161,7 @@ const quitDialog = ref(false); const submitDialog = ref(false); +const timeDialog = ref(false); const prevQuestion = () => { currentIndex.value--; @@ -211,14 +232,26 @@ // 浜ゅ嵎 const submitExam = () => { submitDialog.value = true; -} +}; const confirmSubmit = () => { submitDialog.value = false; router.back(); }; +const resetAllDialog = () => { + quitDialog.value = false; + submitDialog.value = false; +} +// 鏃堕棿缁撴潫 +const timeOut = () => { + resetAllDialog(); + timeDialog.value = true; + setTimeout(() => { + router.back(); + },2000); +}; watchEffect(() => { let progress = 0; @@ -282,4 +315,15 @@ .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> \ No newline at end of file -- Gitblit v1.8.0