Archived
100 lines
5.4 KiB
HTML
100 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>活动视图 · 询价接收与结构化</title>
|
|
<!--
|
|
活动视图占位页(2026-08-25,L2 沙箱 v1):
|
|
模拟「服务器返回的 HTML」—— 由 iframe + sandbox="allow-scripts" 隔离渲染,
|
|
与宿主页面零样式/脚本互通;正式版由接口按活动定义返回。
|
|
-->
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font: 14px/1.7 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
color: #161a22; background: #f6f7f9; padding: 24px;
|
|
}
|
|
.wrap { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
|
|
.head { display: flex; align-items: center; gap: 12px; }
|
|
.head .logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
|
|
background: linear-gradient(150deg, #eaf1ff, #fff); color: #3370ff; box-shadow: inset 0 0 0 1px rgba(51,112,255,.18); }
|
|
.head h1 { font-size: 18px; font-weight: 700; letter-spacing: .01em; }
|
|
.head p { font-size: 12px; color: #8b93a3; font-family: ui-monospace, monospace; }
|
|
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
.stat { background: #fff; border: 1px solid #dfe3ea; border-radius: 8px; padding: 12px 14px; }
|
|
.stat em { display: block; font-style: normal; font-size: 11px; color: #8b93a3; }
|
|
.stat b { display: block; margin-top: 2px; font: 600 20px/1.2 ui-monospace, monospace; color: #161a22; }
|
|
.stat.hot b { color: #3370ff; }
|
|
.card { background: #fff; border: 1px solid #dfe3ea; border-radius: 8px; overflow: hidden; }
|
|
.card h2 { padding: 12px 16px; font-size: 13px; font-weight: 700; color: #4a5160;
|
|
border-bottom: 1px solid #eef1f5; letter-spacing: .03em; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
thead th { text-align: left; padding: 8px 16px; background: #f5f7fa; color: #4a5160;
|
|
font-size: 11px; font-weight: 700; border-bottom: 1px solid #e2e7ee; }
|
|
tbody td { padding: 10px 16px; border-bottom: 1px solid #eef1f5; }
|
|
tbody tr:nth-child(even) { background: #f8fafc; }
|
|
tbody tr:last-child td { border-bottom: 0; }
|
|
.mono { font-family: ui-monospace, monospace; font-size: 12px; }
|
|
.ok { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #e6f6ee; color: #0c8154; font-size: 11px; font-weight: 600; }
|
|
.wait { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fdf3e3; color: #b0822d; font-size: 11px; font-weight: 600; }
|
|
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
|
|
.field em { display: block; font-style: normal; font-size: 11px; color: #8b93a3; margin-bottom: 4px; }
|
|
.field .box { height: 34px; border: 1px solid #dfe3ea; border-radius: 6px; background: #fbfcfd;
|
|
display: flex; align-items: center; padding: 0 10px; font-size: 12.5px; color: #4a5160; }
|
|
.field.wide { grid-column: 1 / -1; }
|
|
.cta { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
|
|
.btn { height: 34px; padding: 0 16px; border: 1px solid #dfe3ea; border-radius: 6px; background: #fff;
|
|
font-size: 13px; color: #4a5160; }
|
|
.btn.primary { background: #3370ff; border-color: #3370ff; color: #fff; font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="head">
|
|
<span class="logo">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
|
|
</span>
|
|
<div>
|
|
<h1>询价接收与结构化</h1>
|
|
<p>quote-intake · 活动视图(服务器返回 HTML · 沙箱隔离渲染)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat"><em>今日接收</em><b>6</b></div>
|
|
<div class="stat hot"><em>待人工补全</em><b>1</b></div>
|
|
<div class="stat"><em>结构化成功</em><b>5</b></div>
|
|
<div class="stat"><em>平均耗时</em><b>42s</b></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>最近的询价原文</h2>
|
|
<table>
|
|
<thead>
|
|
<tr><th>来源</th><th>物料数</th><th>接收时间</th><th>结构化结果</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Itelma 采购部 · 邮件</td><td class="mono">3 项</td><td class="mono">10:12</td><td><span class="wait">待补全</span></td></tr>
|
|
<tr><td>伏尔加集团 · 聊天记录</td><td class="mono">12 项</td><td class="mono">09:40</td><td><span class="ok">已结构化</span></td></tr>
|
|
<tr><td>GAZ 采购 · 邮件附件</td><td class="mono">7 项</td><td class="mono">昨天 17:03</td><td><span class="ok">已结构化</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>人工补全(待执行 · INS-2417)</h2>
|
|
<div class="form">
|
|
<div class="field"><em>物料编码</em><div class="box">MCU-STM32F407VET6</div></div>
|
|
<div class="field"><em>数量</em><div class="box mono">2,400 pcs</div></div>
|
|
<div class="field wide"><em>交期要求</em><div class="box">2026-09-30 前到莫斯科仓</div></div>
|
|
<div class="cta">
|
|
<button class="btn">暂存</button>
|
|
<button class="btn primary">确认提交</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|