-
-
题目：
-
{{ 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 {