From 44dd95a12482dec4601adec1857a0755ef27df1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com> Date: Sat, 2 Aug 2025 21:49:25 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9D=A2=E5=8C=85=E5=B1=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Profile.vue | 167 ++++++++++++++++++++++++++++++------------ 1 file changed, 121 insertions(+), 46 deletions(-) diff --git a/src/views/Profile.vue b/src/views/Profile.vue index c45440f..0967482 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -1031,15 +1031,13 @@ @@ -1055,9 +1053,7 @@
@@ -4255,25 +4251,37 @@ height: 33px; .exam-detail-container { max-width: 1200px; margin: 0 auto; - background: white; + background: #f5f5f5; min-height: 100vh; } .exam-detail-header { - background: white; padding: 16px 24px; - border-bottom: 1px solid #e8e8e8; + background: #f5f5f5; } .breadcrumb { font-size: 14px; color: #666; + white-space: nowrap; + overflow: hidden; + display: flex; + align-items: center; } .breadcrumb-link { - color: #1890ff; + height: 20px; + font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 14px; + color: #333333; + line-height: 20px; + text-align: left; + font-style: normal; + text-transform: none; cursor: pointer; text-decoration: none; + white-space: nowrap; + flex-shrink: 0; } .breadcrumb-link:hover { @@ -4282,26 +4290,43 @@ height: 33px; .breadcrumb-separator { margin: 0 8px; - color: #999; + color: #999999; + flex-shrink: 0; } .breadcrumb-current { - color: #333; + height: 20px; + font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 14px; + color: #999999; + line-height: 20px; + text-align: left; + font-style: normal; + text-transform: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + min-width: 0; } .exam-detail-content { display: flex; gap: 24px; padding: 24px; + background: #f5f5f5; } .exam-questions-section { flex: 1; background: white; + padding: 24px; } .exam-title-section { margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid #e8e8e8; } .exam-main-title { @@ -4317,8 +4342,6 @@ height: 33px; .question-item { background: white; - border: 1px solid #e8e8e8; - border-radius: 8px; padding: 20px; margin-bottom: 20px; } @@ -4330,10 +4353,7 @@ height: 33px; } .question-number { - background: #1890ff; - color: white; - padding: 4px 8px; - border-radius: 4px; + color: #0088D1; font-size: 14px; font-weight: 500; margin-right: 12px; @@ -4347,9 +4367,17 @@ height: 33px; } .question-score { - color: #ff4d4f; - font-size: 14px; + width: 36px; + height: 20px; + background: #EEF9FF; + color: #1890ff; + font-size: 12px; + font-weight: 500; margin-left: auto; + display: flex; + align-items: center; + justify-content: center; + border-radius: 25%; } .question-content { @@ -4365,41 +4393,64 @@ height: 33px; .option-item { display: flex; - align-items: flex-start; - padding: 12px; - border: 1px solid #e8e8e8; - border-radius: 6px; + align-items: center; + width: 1053px; + height: 50px; + background: #F5F8FB; + padding: 0 16px; margin-bottom: 8px; transition: all 0.3s ease; } .option-item.option-selected { - background: #e6f7ff; - border-color: #1890ff; + background: #F5F8FB !important; } .option-item.option-correct { background: #f6ffed; - border-color: #52c41a; } .option-item.option-wrong { background: #fff2f0; - border-color: #ff4d4f; } .option-checkbox { margin-right: 12px; - margin-top: 2px; + flex-shrink: 0; } .option-checkbox input[type="checkbox"] { - width: 16px; - height: 16px; + width: 14px; + height: 14px; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background: white; + border: 1px solid #d9d9d9; + cursor: pointer; + position: relative; +} + +.option-checkbox input[type="checkbox"]:checked { + background: #1890ff; + border-color: #1890ff; +} + +.option-checkbox input[type="checkbox"]:checked::after { + content: '✓'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-size: 10px; + font-weight: bold; } .option-content { flex: 1; + display: flex; + align-items: center; } .option-text { @@ -4421,16 +4472,40 @@ height: 33px; .question-footer { display: flex; - justify-content: space-between; align-items: center; + gap: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0; } +.answer-status-box { + width: 100px; + height: 33px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 14px; + color: #FFFFFF; + line-height: 20px; + text-align: center; + font-style: normal; + text-transform: none; +} + +.answer-status-box.status-correct { + background: #0288D1; +} + +.answer-status-box.status-wrong { + background: #ff4d4f; +} + .question-stats { display: flex; - flex-direction: column; - gap: 4px; + gap: 16px; + flex: 1; } .correct-answer, .user-answer { @@ -4467,7 +4542,7 @@ height: 33px; .analysis-content { font-size: 14px; - color: #666; + color: #497087; line-height: 1.6; } @@ -4511,11 +4586,15 @@ height: 33px; .exam-info-section { width: 300px; flex-shrink: 0; + display: flex; + flex-direction: column; + gap: 16px; } .score-circle-container { + background: white; + padding: 24px; text-align: center; - margin-bottom: 24px; } .score-circle { @@ -4553,10 +4632,7 @@ height: 33px; .exam-stats { background: white; - border: 1px solid #e8e8e8; - border-radius: 8px; - padding: 16px; - margin-bottom: 20px; + padding: 24px; } .stat-item { @@ -4580,7 +4656,8 @@ height: 33px; } .answer-stats { - margin-bottom: 20px; + background: white; + padding: 24px; } .stats-row { @@ -4635,9 +4712,7 @@ height: 33px; .answer-card { background: white; - border: 1px solid #e8e8e8; - border-radius: 8px; - padding: 16px; + padding: 24px; } .card-title {