verify-scholarship-fraud-sas/assets/html/example-report.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>{{TITLE}}</title>
  <style>
    /* 数据管理 iframe 预览布局基线 */
    html, body {
      margin: 0;
      padding: 16px;
      font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: #1f2329;
      background: #fafbfc;
      line-height: 1.6;
    }
    .report { max-width: 100%; }
    .header {
      padding: 20px;
      background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
      color: #fff;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    .header h1 { margin: 0 0 8px; font-size: 22px; }
    .header .meta { color: #fef3c7; font-size: 13px; }
    .summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }
    .stat {
      padding: 14px 18px;
      background: #fff;
      border: 1px solid #e5e6eb;
      border-radius: 8px;
    }
    .stat .label { color: #8c959f; font-size: 12px; }
    .stat .value { font-size: 24px; font-weight: 700; margin-top: 4px; color: #92400e; }
    .stat.danger .value { color: #c53030; }
    .stat.warning .value { color: #d97706; }
    .stat.success .value { color: #059669; }
    .section {
      padding: 16px 20px;
      background: #fff;
      border: 1px solid #e5e6eb;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    .section h2 { margin: 0 0 12px; font-size: 16px; color: #92400e; }
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      word-break: break-word;
    }
    th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #f0f1f3; font-size: 14px; }
    th { background: #fffbeb; color: #92400e; font-weight: 600; }
    tr:last-child td { border-bottom: 0; }
    .pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 500;
    }
    .pill.red { background: #fef2f2; color: #c53030; }
    .pill.yellow { background: #fffbeb; color: #d97706; }
    .pill.green { background: #ecfdf5; color: #059669; }
    .privacy-note {
      padding: 10px 14px;
      background: #f8fafc;
      border-left: 3px solid #94a3b8;
      border-radius: 4px;
      color: #475569;
      font-size: 13px;
      margin-bottom: 12px;
    }
    .footer { margin-top: 16px; color: #8c959f; font-size: 12px; text-align: right; }
  </style>
</head>
<body>
  <div class="report">
    <div class="header">
      <h1>{{TITLE}}</h1>
      <div class="meta">清单编号：{{LIST_ID}}　·　批次：{{BATCH_NAME}}　·　评定项目：{{AWARD_NAME}}</div>
      <div class="meta">辅导员：{{COUNSELOR_NAME}}　·　生成时间：{{GENERATED_AT}}</div>
    </div>

    <div class="privacy-note">
      🔒 本报告含学生家庭隐私数据，已脱敏处理（学号 / 姓名末位）。请按学校保密规定保管，不得外传。
    </div>

    <div class="summary">
      <div class="stat"><div class="label">校验候选人总数</div><div class="value">{{TOTAL_COUNT}}</div></div>
      <div class="stat danger"><div class="label">🔴 高风险个案</div><div class="value">{{HIGH_RISK_COUNT}}</div></div>
      <div class="stat warning"><div class="label">🟡 边缘个案</div><div class="value">{{EDGE_COUNT}}</div></div>
      <div class="stat success"><div class="label">🟢 无异常</div><div class="value">{{CLEAN_COUNT}}</div></div>
    </div>

    <div class="section">
      <h2>高风险个案复核清单</h2>
      <table>
        <thead>
          <tr>
            <th style="width: 18%">学生（脱敏）</th>
            <th style="width: 16%">异常类型</th>
            <th style="width: 30%">异常详情</th>
            <th style="width: 16%">建议处理</th>
            <th style="width: 20%">复核状态</th>
          </tr>
        </thead>
        <tbody>
          {{BODY}}
        </tbody>
      </table>
    </div>

    <div class="footer">本报告由「奖助学金评定逻辑防伪校验」技能自动生成 · 最终认定权归辅导员与学生处资助中心</div>
  </div>
</body>
</html>