From f53b40c6c7ba1f66dd0ad11f13150f8d954ea110 Mon Sep 17 00:00:00 2001 From: yuliang_guo Date: Wed, 28 Jan 2026 14:16:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(exam):=20=E4=BC=98=E5=8C=96=E7=AD=94?= =?UTF-8?q?=E6=A1=88=E8=A7=A3=E6=9E=90=E5=BC=B9=E7=AA=97=E5=92=8C=E5=88=A4?= =?UTF-8?q?=E6=96=AD=E9=A2=98/=E5=A1=AB=E7=A9=BA=E9=A2=98=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 答案解析弹窗限制最大高度45vh，超出可滚动 - 判断题改为卡片式按钮，带图标和状态反馈 - 填空题增大输入框，添加图标和提示 --- frontend/src/views/exam/practice.vue | 267 ++++++++++++++++++++++----- 1 file changed, 219 insertions(+), 48 deletions(-) diff --git a/frontend/src/views/exam/practice.vue b/frontend/src/views/exam/practice.vue index a70ace4..238c9cb 100644 --- a/frontend/src/views/exam/practice.vue +++ b/frontend/src/views/exam/practice.vue @@ -67,20 +67,57 @@
- - 正确 - 错误 - +
+
+
+ +
+ 正确 +
+
+
+ +
+ 错误 +
+
- +
+ + + +

按 Enter 键提交答案

+
@@ -150,28 +187,31 @@ :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" + class="answer-dialog" >
- +

回答错误

-
-

题目：

-

{{ dialogQuestion.title }}

-
- -
-

正确答案：

-
-
- -
-

解析：

-
+
+
+

题目：

+

{{ dialogQuestion.title }}

+
+ +
+

正确答案：

+
+
+ +
+

解析：

+
+
@@ -190,7 +230,7 @@ import { ref, reactive, computed, onMounted, onUnmounted } from 'vue' import { useRoute, useRouter } from 'vue-router' import { ElMessage, ElMessageBox, ElDialog, ElLoading } from 'element-plus' -import { Loading, CircleCheck, CircleClose } from '@element-plus/icons-vue' +import { Loading, CircleCheck, CircleClose, Edit } from '@element-plus/icons-vue' import { courseApi } from '@/api/course' import { generateExam, judgeAnswer, recordMistake, getMistakes, updateRoundScore, type MistakeRecordItem } from '@/api/exam' import { marked } from 'marked' @@ -903,6 +943,14 @@ const handleJudgeChange = () => { checkAndHandleAnswer() } +/** + * 判断题卡片点击 + */ +const selectJudge = (value: boolean) => { + userAnswer.judge = value + checkAndHandleAnswer() +} + /** * 填空题回车提交处理 */ @@ -1355,21 +1403,118 @@ onUnmounted(() => { } .judge-options { - .el-radio-group { - .el-radio { - margin-right: 32px; - - :deep(.el-radio__label) { + .judge-cards { + display: flex; + gap: 20px; + justify-content: center; + + .judge-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 140px; + height: 120px; + border: 2px solid #e4e7ed; + border-radius: 12px; + cursor: pointer; + transition: all 0.3s ease; + background: #fff; + + &:hover:not(.disabled) { + border-color: #409eff; + box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15); + } + + &.active { + border-color: #409eff; + background: linear-gradient(135deg, #ecf5ff 0%, #f5f9ff 100%); + + .judge-icon { + transform: scale(1.1); + } + } + + &.disabled { + cursor: not-allowed; + opacity: 0.8; + } + + &.correct { + border-color: #67c23a; + background: linear-gradient(135deg, #f0f9eb 0%, #f5faf2 100%); + + .judge-text { + color: #67c23a; + } + } + + &.wrong { + border-color: #f56c6c; + background: linear-gradient(135deg, #fef0f0 0%, #fdf5f5 100%); + + .judge-text { + color: #f56c6c; + } + } + + .judge-icon { + margin-bottom: 10px; + transition: transform 0.3s ease; + + &.correct-icon { + color: #67c23a; + } + + &.wrong-icon { + color: #f56c6c; + } + } + + .judge-text { font-size: 16px; + font-weight: 500; + color: #606266; } } } } .blank-answer { - .el-input { - width: 100%; - max-width: 400px; + .blank-input-wrapper { + max-width: 500px; + + .el-input { + :deep(.el-input__wrapper) { + padding: 8px 15px; + box-shadow: 0 0 0 1px #dcdfe6 inset; + border-radius: 8px; + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 0 0 1px #c0c4cc inset; + } + + &.is-focus { + box-shadow: 0 0 0 1px #409eff inset; + } + } + + :deep(.el-input__inner) { + font-size: 16px; + } + + :deep(.el-input__prefix) { + color: #909399; + } + } + + .blank-hint { + margin-top: 8px; + font-size: 12px; + color: #909399; + text-align: right; + } } } @@ -1470,15 +1615,22 @@ onUnmounted(() => { } // 答案解析弹窗样式 +:deep(.answer-dialog) { + .el-dialog__body { + padding-top: 10px; + padding-bottom: 10px; + } +} + .answer-dialog-content { .result-section { text-align: center; - margin-bottom: 24px; + margin-bottom: 16px; .result-icon-large { - width: 80px; - height: 80px; - margin: 0 auto 16px; + width: 64px; + height: 64px; + margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; @@ -1491,39 +1643,58 @@ onUnmounted(() => { } .result-text { - font-size: 20px; + font-size: 18px; font-weight: 600; color: #f56c6c; margin: 0; } } + .dialog-scroll-area { + max-height: 45vh; + overflow-y: auto; + padding-right: 8px; + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #dcdfe6; + border-radius: 3px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + } + .question-review, .answer-review, .explanation-review { - margin-bottom: 24px; + margin-bottom: 16px; h4 { - font-size: 16px; + font-size: 14px; font-weight: 600; color: #333; - margin-bottom: 12px; + margin-bottom: 8px; } p { font-size: 14px; - line-height: 1.8; + line-height: 1.6; margin: 0; color: #666; } .correct-answer-text { - font-size: 15px; - line-height: 1.8; + font-size: 14px; + line-height: 1.6; color: #333; background: #f0f9ff; border-left: 4px solid #67c23a; - padding: 12px 16px; + padding: 10px 14px; border-radius: 6px; strong { @@ -1533,11 +1704,11 @@ onUnmounted(() => { } .explanation-text { - font-size: 14px; - line-height: 1.8; + font-size: 13px; + line-height: 1.6; color: #666; background: #f5f7fa; - padding: 16px; + padding: 12px; border-radius: 8px; strong {