301 lines
9.8 KiB
HTML
301 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns:th="http://www.thymeleaf.org">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title th:text="${data != null ? data.examTitle + ' - 试卷答案' : '打印试卷'}">试卷答案</title>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body {
|
||
font-family: "SimSun", "宋体", serif;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
color: #333;
|
||
background: white;
|
||
padding: 20px;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
/* 打印样式 */
|
||
@media print {
|
||
body {
|
||
padding: 0;
|
||
font-size: 12pt;
|
||
}
|
||
.no-print {
|
||
display: none !important;
|
||
}
|
||
.page-break {
|
||
page-break-before: always;
|
||
}
|
||
}
|
||
/* 按钮样式（仅屏幕显示） */
|
||
.print-actions {
|
||
text-align: center;
|
||
padding: 20px;
|
||
background: #f5f5f5;
|
||
margin-bottom: 30px;
|
||
border-radius: 8px;
|
||
}
|
||
.btn {
|
||
padding: 10px 24px;
|
||
margin: 0 8px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.btn-print {
|
||
background: #fbbf24;
|
||
color: white;
|
||
}
|
||
.btn-back {
|
||
background: #f59e0b;
|
||
color: white;
|
||
}
|
||
/* 试卷标题 */
|
||
.exam-title {
|
||
text-align: center;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 2px solid #333;
|
||
}
|
||
/* 基本信息 */
|
||
.info-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
background: #f9f9f9;
|
||
border: 1px solid #ddd;
|
||
}
|
||
.info-item {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.info-label {
|
||
font-weight: bold;
|
||
}
|
||
.info-value {
|
||
border-bottom: 1px solid #333;
|
||
min-width: 100px;
|
||
padding: 0 10px;
|
||
}
|
||
/* 分数区域 */
|
||
.score-section {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 40px;
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
border: 2px solid #333;
|
||
background: #fafafa;
|
||
}
|
||
.score-item {
|
||
text-align: center;
|
||
}
|
||
.score-label {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
.score-value {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #c00;
|
||
}
|
||
/* 题目列表 */
|
||
.questions {
|
||
margin-top: 30px;
|
||
}
|
||
.question-item {
|
||
margin-bottom: 25px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px dashed #ccc;
|
||
}
|
||
.question-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.question-number {
|
||
font-weight: bold;
|
||
font-size: 15px;
|
||
}
|
||
.question-type {
|
||
font-size: 12px;
|
||
color: #666;
|
||
padding: 2px 8px;
|
||
background: #eee;
|
||
border-radius: 3px;
|
||
}
|
||
.question-score {
|
||
margin-left: auto;
|
||
font-weight: bold;
|
||
color: #c00;
|
||
}
|
||
.question-title {
|
||
margin-bottom: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
/* 答案区域 */
|
||
.answer-section {
|
||
margin-top: 10px;
|
||
padding: 10px 15px;
|
||
background: #f5f5f5;
|
||
border-left: 3px solid #f59e0b;
|
||
}
|
||
.answer-row {
|
||
display: flex;
|
||
margin-bottom: 5px;
|
||
}
|
||
.answer-label {
|
||
font-weight: bold;
|
||
min-width: 80px;
|
||
color: #555;
|
||
}
|
||
.answer-content {
|
||
flex: 1;
|
||
}
|
||
.answer-content.correct {
|
||
color: #fbbf24;
|
||
font-weight: bold;
|
||
}
|
||
.answer-content.wrong {
|
||
color: #c00;
|
||
}
|
||
.score-get {
|
||
color: #c00;
|
||
font-weight: bold;
|
||
}
|
||
/* 底部签名区 */
|
||
.signature-section {
|
||
margin-top: 50px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 30px;
|
||
border-top: 1px solid #ccc;
|
||
}
|
||
.signature-item {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
.signature-line {
|
||
border-bottom: 1px solid #333;
|
||
min-width: 120px;
|
||
}
|
||
/* 错误提示 */
|
||
.error-message {
|
||
text-align: center;
|
||
padding: 50px;
|
||
color: #c00;
|
||
font-size: 18px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 打印按钮区域（打印时隐藏） -->
|
||
<div class="print-actions no-print">
|
||
<button class="btn btn-print" onclick="window.print()">打印试卷</button>
|
||
<button class="btn btn-back" onclick="history.back()">返回</button>
|
||
</div>
|
||
|
||
<!-- 错误提示 -->
|
||
<div th:if="${error}" class="error-message" th:text="${error}"></div>
|
||
|
||
<!-- 试卷内容 -->
|
||
<div th:if="${data != null}">
|
||
<!-- 标题 -->
|
||
<div class="exam-title" th:text="${data.examTitle}">试卷标题</div>
|
||
|
||
<!-- 基本信息 -->
|
||
<div class="info-section">
|
||
<div class="info-item">
|
||
<span class="info-label">姓名：</span>
|
||
<span class="info-value" th:text="${data.studentName}"></span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">答题记录UID：</span>
|
||
<span th:text="${data.answerUid}"></span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">日期：</span>
|
||
<span th:text="${#dates.format(new java.util.Date(), 'yyyy年MM月dd日')}"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分数汇总 -->
|
||
<div class="score-section">
|
||
<div class="score-item">
|
||
<div class="score-label">选择题得分</div>
|
||
<div class="score-value" th:text="${data.choiceScore} + '分'"></div>
|
||
</div>
|
||
<div class="score-item">
|
||
<div class="score-label">简答题得分</div>
|
||
<div class="score-value" th:text="${data.finalScore != null ? (data.finalScore - data.choiceScore) : '-'} + '分'"></div>
|
||
</div>
|
||
<div class="score-item">
|
||
<div class="score-label">总得分</div>
|
||
<div class="score-value" th:text="${data.finalScore != null ? data.finalScore : data.choiceScore} + '/100' + '分'"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 题目答案列表 -->
|
||
<div class="questions">
|
||
<div th:each="q : ${data.questions}" class="question-item">
|
||
<div class="question-header">
|
||
<span class="question-number" th:text="'第' + ${q.exmaid} + '题'">第1题</span>
|
||
<span class="question-type" th:text="${q.type == 1 ? '选择题' : '简答题'}">选择题</span>
|
||
<span class="question-score" th:text="${q.score} + '分'">5分</span>
|
||
</div>
|
||
<div class="question-title" th:text="${q.title}">题目内容</div>
|
||
|
||
<div class="answer-section">
|
||
<!-- 选择题 -->
|
||
<div th:if="${q.type == 1}">
|
||
<div class="answer-row">
|
||
<span class="answer-label">答案：</span>
|
||
<span class="answer-content"
|
||
th:classappend="${q.isCorrect ? 'correct' : 'wrong'}"
|
||
th:text="${q.userAnswer != null && !q.userAnswer.isEmpty() ? q.userAnswer : '未作答'}">
|
||
</span>
|
||
</div>
|
||
<div class="answer-row">
|
||
<span class="answer-label">正确答案：</span>
|
||
<span class="answer-content correct" th:text="${q.correctAnswer}"></span>
|
||
</div>
|
||
<div class="answer-row">
|
||
<span class="answer-label">得分：</span>
|
||
<span class="score-get" th:text="${q.autoScore} + '/' + ${q.score} + '分'"></span>
|
||
<span th:if="${q.isCorrect}" style="color: #fbbf24; margin-left: 10px;">✓ 正确</span>
|
||
<span th:if="${!q.isCorrect}" style="color: #c00; margin-left: 10px;">✗ 错误</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 简答题 -->
|
||
<div th:if="${q.type == 2}">
|
||
<div class="answer-row">
|
||
<span class="answer-label">答案：</span>
|
||
<span class="answer-content" th:text="${q.userAnswer != null && !q.userAnswer.isEmpty() ? q.userAnswer : '未作答'}"></span>
|
||
</div>
|
||
<div class="answer-row" th:if="${data.isCorrected}">
|
||
<span class="answer-label">得分：</span>
|
||
<span class="score-get" th:text="${q.autoScore} + '/' + ${q.score} + '分'"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部签名区 -->
|
||
</div>
|
||
</body>
|
||
</html>
|