vincent
e4e66f3826
v1.0: 3 字段增量扩展（prize_amount/total_prize/prize_summary）+ 前端 3 处扩展 v1.1: 落实架构评审 3 点意见 - 金额字段统一'(单位:元)'与量级安全说明 - prize_summary key 改英文枚举（first_prize..sixth_prize），新增 prize_level 中文名 - floating 标记落 results[i] 与 prize_summary[key] 两粒度 - 兼容性条款：每次实时计算，不依赖持久化 Co-authored-by: multica-agent <github@multica.ai>
253 lines
9.1 KiB
HTML
253 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BIZ-102 比对弹窗原型 · 中奖金额展示</title>
|
||
<style>
|
||
:root {
|
||
--text-light: #888;
|
||
--border: #e8e8e8;
|
||
}
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
background: #f5f6f8;
|
||
margin: 0;
|
||
padding: 24px;
|
||
color: #333;
|
||
}
|
||
.modal-wrap {
|
||
max-width: 520px;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
border-radius: 14px;
|
||
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
||
overflow: hidden;
|
||
}
|
||
.modal-header {
|
||
padding: 16px 20px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.modal-body { padding: 18px 20px; }
|
||
|
||
/* 统计区（.compare-summary） */
|
||
.compare-summary {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.compare-summary .item {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
text-align: center;
|
||
}
|
||
.compare-summary .item .label { font-size: 12px; color: var(--text-light); margin-bottom: 4px; }
|
||
.compare-summary .item .value { font-size: 16px; font-weight: 700; }
|
||
/* 新增：总额与分布区 */
|
||
.prize-total {
|
||
grid-column: 1 / -1;
|
||
background: #eafaf0;
|
||
border: 1px solid #bdebcd;
|
||
color: #1e8e4a;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
}
|
||
.prize-breakdown {
|
||
grid-column: 1 / -1;
|
||
background: #fcfcfd;
|
||
border: 1px dashed #d8dde3;
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
font-size: 13px;
|
||
line-height: 1.9;
|
||
}
|
||
.prize-breakdown .row { display: flex; justify-content: space-between; }
|
||
.prize-breakdown .row .lv { font-weight: 600; }
|
||
.prize-breakdown .row .amt { color: #1e8e4a; font-weight: 700; }
|
||
.prize-breakdown .floating-note {
|
||
margin-top: 6px;
|
||
font-size: 11px;
|
||
color: #c0392b;
|
||
}
|
||
|
||
/* 开奖号码 */
|
||
.draw-line {
|
||
background: #f0f0f0;
|
||
padding: 10px;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 每注 */
|
||
.compare-ticket {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 10px;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 13px;
|
||
}
|
||
.compare-ticket.win { background: #f4fcf7; }
|
||
.compare-ticket .idx { color: var(--text-light); min-width: 30px; font-size: 12px; }
|
||
.ball {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px; height: 24px;
|
||
border-radius: 50%;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
}
|
||
.ball-red { background: #e74c3c; }
|
||
.ball-blue { background: #3498db; }
|
||
.prize-badge {
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.prize-badge.win { background: #27ae60; color: #fff; }
|
||
.prize-badge.lose { background: #eee; color: var(--text-light); }
|
||
/* 新增：每注金额 */
|
||
.ticket-amount {
|
||
margin-left: 2px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: #1e8e4a;
|
||
}
|
||
.ticket-amount.floating::after {
|
||
content: " · 浮动以官方为准";
|
||
font-size: 10px;
|
||
color: #c0392b;
|
||
font-weight: 400;
|
||
}
|
||
.compare-ticket-info { margin-left: auto; color: var(--text-light); font-size: 12px; }
|
||
|
||
.footer-msg {
|
||
text-align: center;
|
||
padding: 14px;
|
||
font-size: 14px;
|
||
color: #27ae60;
|
||
font-weight: 700;
|
||
}
|
||
.legend { max-width: 520px; margin: 14px auto 0; font-size: 12px; color: var(--text-light); line-height: 1.8; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ===== 比对弹窗（仅弹窗部分，便于设计师评审） ===== -->
|
||
<div class="modal-wrap">
|
||
<div class="modal-header">🎯 中奖比对</div>
|
||
<div class="modal-body">
|
||
|
||
<!-- 统计区：保留原有 4 项，新增总额 + 分布 -->
|
||
<div class="compare-summary">
|
||
<div class="item"><div class="label">生成时间</div><div class="value" style="font-size:14px;">2026-08-30 11:00:00</div></div>
|
||
<div class="item"><div class="label">比对开奖期</div><div class="value" style="font-size:14px;">2026098 · 2026-08-25</div></div>
|
||
<div class="item"><div class="label">总注数</div><div class="value">5</div></div>
|
||
<div class="item"><div class="label">中奖注数</div><div class="value" style="color:#27ae60;">4</div></div>
|
||
|
||
<!-- 新增 F-4：总中奖金额 -->
|
||
<div class="prize-total">总中奖金额 25 元</div>
|
||
|
||
<!-- 新增 F-5：各奖级分布（数据源 prize_summary，key 为英文枚举） -->
|
||
<div class="prize-breakdown">
|
||
<!-- 示例对应 prize_summary.fifth_prize -->
|
||
<div class="row"><span class="lv">1 注 五等奖</span><span class="amt">共 10 元</span></div>
|
||
<!-- 示例对应 prize_summary.sixth_prize -->
|
||
<div class="row"><span class="lv">3 注 六等奖</span><span class="amt">共 15 元</span></div>
|
||
<!-- 示例对应 prize_summary.first_prize（floating: true） -->
|
||
<div class="row"><span class="lv">1 注 一等奖 · 浮动</span><span class="amt">共 5,000,000 元*</span></div>
|
||
<div class="floating-note">* 浮动奖金额为占位/官方公布值，以官方公布为准（数据源：prize_summary[key].floating）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开奖号码 -->
|
||
<div class="draw-line">
|
||
<strong>开奖号码：</strong>
|
||
<span class="ball ball-red">03</span><span class="ball ball-red">08</span><span class="ball ball-red">14</span><span class="ball ball-red">19</span><span class="ball ball-red">22</span><span class="ball ball-red">27</span>
|
||
<span class="ball ball-blue">11</span>
|
||
</div>
|
||
|
||
<!-- 每注：F-6 在奖项徽标旁显示该注金额 -->
|
||
<div class="compare-ticket win">
|
||
<span class="idx">001</span>
|
||
<span class="ball ball-red">03</span><span class="ball ball-red">08</span><span class="ball ball-red">14</span><span class="ball ball-red">19</span><span class="ball ball-red">22</span><span class="ball ball-red">27</span>
|
||
<span class="ball ball-blue">11</span>
|
||
<span class="prize-badge win">一等奖</span>
|
||
<span class="ticket-amount floating">5,000,000元</span>
|
||
<span class="compare-ticket-info">红6 蓝✓</span>
|
||
</div>
|
||
<div class="compare-ticket win">
|
||
<span class="idx">002</span>
|
||
<span class="ball ball-red">03</span><span class="ball ball-red">08</span><span class="ball ball-red">14</span><span class="ball ball-red">19</span>
|
||
<span class="ball ball-blue">11</span>
|
||
<span class="prize-badge win">五等奖</span>
|
||
<span class="ticket-amount">10元</span>
|
||
<span class="compare-ticket-info">红4 蓝✓</span>
|
||
</div>
|
||
<div class="compare-ticket win">
|
||
<span class="idx">003</span>
|
||
<span class="ball ball-red">03</span><span class="ball ball-red">08</span>
|
||
<span class="ball ball-blue">11</span>
|
||
<span class="prize-badge win">六等奖</span>
|
||
<span class="ticket-amount">5元</span>
|
||
<span class="compare-ticket-info">红2 蓝✓</span>
|
||
</div>
|
||
<div class="compare-ticket win">
|
||
<span class="idx">004</span>
|
||
<span class="ball ball-red">08</span>
|
||
<span class="ball ball-blue">11</span>
|
||
<span class="prize-badge win">六等奖</span>
|
||
<span class="ticket-amount">5元</span>
|
||
<span class="compare-ticket-info">红1 蓝✓</span>
|
||
</div>
|
||
<div class="compare-ticket">
|
||
<span class="idx">005</span>
|
||
<span class="ball ball-red">01</span><span class="ball ball-red">02</span><span class="ball ball-red">03</span>
|
||
<span class="ball ball-blue">09</span>
|
||
<span class="prize-badge lose">未中奖</span>
|
||
<span class="compare-ticket-info">红0 蓝✗</span>
|
||
</div>
|
||
|
||
<div class="footer-msg">🎉 共 4 注中奖！</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
原型说明（BIZ-102 / PRD v1.1）：<br>
|
||
· 绿色总额条 = 新增 F-4（<code>data.total_prize</code>）；虚线框 = 新增 F-5（遍历 <code>data.prize_summary</code>，key 为英文枚举 <code>first_prize</code>...<code>sixth_prize</code>，展示名取 <code>prize_level</code>）；<br>
|
||
· 每注徽标后的绿色金额 = 新增 F-6（<code>results[i].prize_amount</code>）；<br>
|
||
· 浮动奖（一/二/三等奖）金额旁红色「浮动以官方为准」角标，数据源 <code>results[i].floating === true</code> 与 <code>prize_summary[key].floating === true</code>（PRD 第 3.1 / 3.3 节）；<br>
|
||
· 未中奖注不显示金额。原型数据为演示用占位值。<br>
|
||
· mock JSON 示例：
|
||
<pre style="background:#f8f9fa;padding:8px;border-radius:6px;font-size:11px;line-height:1.6;margin:6px 0 0;">
|
||
{
|
||
"total_prize": 25,
|
||
"prize_summary": {
|
||
"fifth_prize": {"count": 1, "amount": 10, "prize_level": "五等奖", "floating": false},
|
||
"sixth_prize": {"count": 3, "amount": 15, "prize_level": "六等奖", "floating": false}
|
||
},
|
||
"results": [
|
||
{"index": 1, "prize_level": "五等奖", "prize_amount": 10, "floating": false, "is_win": true},
|
||
{"index": 2, "prize_level": "六等奖", "prize_amount": 5, "floating": false, "is_win": true}
|
||
]
|
||
}
|
||
</pre>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|