wyp
/
sg-answer-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!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>答题结果通知</title>
    <style th:inline="text">
        /* 基础样式 */
        .email-container {
            width: 100% !important;
            max-width: 600px;
            margin: 0 auto;
            font-family: 'Segoe UI', Tahoma, sans-serif;
            background: #f5f5f5;
            /*padding: 20px 0;*/
        }

        /* 响应式调整 */
        @media only screen and (max-width: 480px) {
            .mobile-adjust { padding: 12px 15px !important; }
            .section-title { font-size: 18px !important; }
            .info-card { padding: 12px !important; }
            .score-container { gap: 10px !important; }
            .score-box { padding: 12px !important; }
            .final-score { padding: 15px !important;}
            .time-record td { padding: 4px 0 !important; }
            .system-alert { margin: 16px 0 !important; }
            .action-button { padding: 12px 24px !important; }
        }
    </style>
</head>
<body>
<div class="email-container">
    <table role="presentation" style="width:100%;border-collapse:collapse;">
        <tr>
            <td class="mobile-adjust" style="padding:20px;background:white;">
                <!-- 头部信息 -->
                <div style="border-bottom:2px solid #2196F3; padding-bottom:12px; margin-bottom:16px;">
                    <h2 class="section-title" style="margin:0;font-size:24px;">✅ 答题结束通知</h2>
                    <p style="color:#7f8c8d; margin:6px 0; font-size:14px;">
                        用户：<strong th:text="${user.userName}"></strong> | 工号：<span th:text="${user.jobNo}"></span>
                    </p>
                </div>

                <!-- 答题概览 -->
                <div style="margin-bottom:20px;">
                    <div class="section-title" style="color:#2c3e50;font-size:20px;margin-bottom:12px;">📝 答题概览</div>
                    <div class="info-card" style="background:#f8f9fa;padding:15px;border-radius:8px;">
                        <p style="margin:4px 0;font-size:14px;">
                            <span style="color:#7f8c8d;">模式：</span>
                            <span th:text="${answer.batchFlag} ? '批量模式' : '单用户模式'"></span>
                        </p>
                        <p style="margin:4px 0;font-size:14px;">
                            <span style="color:#7f8c8d;">工种：</span>
                            <span style="color:#2196F3;font-weight:600;" th:text="${answer.jobTypeName}"></span>
                        </p>
                    </div>
                </div>

                <!-- 分数区块 -->
                <div class="score-container" style="display:flex;gap:15px;margin-bottom:20px;">
                    <div th:each="score : ${scores}" class="score-box"
                         style="flex:1;background:#f3f5f7;padding:15px;border-radius:8px;box-sizing:border-box;">
                        <p style="margin:2px 0;color:#7f8c8d;font-size:14px;"
                           th:text="${score.type}"></p>
                        <p th:style="'font-size:20px;font-weight:600; margin:6px 0; color:' + ${score.color}"
                           th:text="${score.value}"></p>
                    </div>
                </div>

                <!-- 增长分数 -->
                <div class="score-box" style="text-align:center;background:#4CAF50;padding:15px;border-radius:8px;">
                    <p style="margin:0;color:white;font-size:16px;font-weight:bold;">
                        +<span th:text="${user.addScores}"></span> 分数增长
                    </p>
                </div>

                <!-- 最终分数 -->
                <div class="final-score" style="text-align:center;background:white;padding:20px;margin:20px 0;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);">
                    <p style="margin:4px 0;color:#7f8c8d;font-size:14px;">最终得分</p>
                    <p style="font-size:32px;margin:8px 0;color:#4CAF50;font-weight:800;"
                       th:text="${user.finalScore}"></p>
                </div>

                <!-- 时间记录 -->
                <div>
                    <div class="section-title" style="color:#2c3e50;font-size:20px;margin:12px 0;">⏱ 时间记录</div>
                    <table class="time-record" style="width:100%;font-size:14px;">
                        <tr th:each="time : ${times}">
                            <td style="padding:4px 0;color:#2196F3;">▸</td>
                            <td style="padding:4px 0;"
                                th:text="${time.label} + '：' + ${time.value}"></td>
                        </tr>
                    </table>
                </div>

                <!-- 系统提示 -->
                <div th:if="${exception}" class="system-alert" style="margin:25px 0;padding:15px;background:#fff3e0;border-radius:8px;">
                    <p style="margin:4px 0;color:#EF6C00;font-size:14px;">
                        终止事件：<span th:text="${exception.message}"></span>
                    </p>
                </div>

                <!-- 操作按钮 -->
                <div style="text-align:center;margin-top:30px;">
                    <a th:href="@{${serverIp}/answer}" class="action-button"
                       style="display:inline-block;background:#2196F3;color:white!important;padding:16px 40px;text-decoration:none;border-radius:30px;font-size:16px;letter-spacing:1px;min-width:200px;">
                        🚀 前往答题系统查看
                    </a>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>