面包屑
This commit is contained in:
小张
parent
39baaf7ecc
commit
44dd95a124
@ -1031,15 +1031,13 @@
|
||||
|
||||
<!-- 题目底部信息 -->
|
||||
<div class="question-footer">
|
||||
<div class="answer-status-box" :class="question.isCorrect ? 'status-correct' : 'status-wrong'">
|
||||
{{ question.isCorrect ? '回答正确' : '回答错误' }}
|
||||
</div>
|
||||
<div class="question-stats">
|
||||
<span class="correct-answer">正确答案：{{ question.correctAnswers.join(', ') }}</span>
|
||||
<span class="user-answer">你的答案：{{ question.userAnswers.join(', ') || '未作答' }}</span>
|
||||
</div>
|
||||
<div class="question-result">
|
||||
<span :class="question.isCorrect ? 'result-correct' : 'result-wrong'">
|
||||
{{ question.isCorrect ? '✓' : '✗' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 题目解析 -->
|
||||
@ -1055,9 +1053,7 @@
|
||||
<!-- 底部提交按钮 -->
|
||||
<div class="exam-submit-section">
|
||||
<button class="submit-btn">
|
||||
<span class="submit-text">提交答题</span>
|
||||
<span class="submit-stats">正确答案：BC 你的答案：AE</span>
|
||||
<span class="submit-score">+0</span>
|
||||
重新练习
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user