- ui-demo:控件、表单、卡片、列表、工作台、读标六页按 v0.2 重刷;侧栏与顶栏框架、项目行、署名行、可键入日期输入、对照布局等收回 demo.css / demo.js 共用 - system:tokens 补悬停 / 按下 / 遮罩色、数字字阶与原文排版变量;components.css 按 v0.2 改写并清除裸色值 - design-system.md:写入 Q1–Q13 答案,新增开关、分页、下拉、日期选择等组件规则,类别标签、待确认区、选中态、对照布局按 v0.2 修订 - Q13:额度流水记录 0 点的「免扣」行,FR-M6-03 与领域模型同步;U 键改为撤销当前条 - decisions.md 记录 Q1–Q12、Q13 与 U 键;AGENTS.md 同步进度 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
343 lines
25 KiB
HTML
343 lines
25 KiB
HTML
<!doctype html>
|
||
<!--
|
||
陈列页 · ③ 卡片(v0.2)
|
||
卡片规格以定稿样张 explore/workbench-d5.html 为准:一律用分区卡片 .card.flush + .card-h / .card-b / .card-f。
|
||
本页 <style> 只放陈列用的布局和本页特有的小件(任务失败说明、项目信息卡)。
|
||
-->
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>卡片 · 标博士 UI demo</title>
|
||
<link rel="icon" href="../logo/favicon.svg">
|
||
<link rel="stylesheet" href="../system/tokens.css">
|
||
<link rel="stylesheet" href="../system/fonts-local.css">
|
||
<link rel="stylesheet" href="../system/components.css">
|
||
<link rel="stylesheet" href="demo.css">
|
||
<style>
|
||
/* 陈列:统计格两种用法上下排 */
|
||
.d-sec .stats + .d-label{margin-top:var(--sp-6)}
|
||
|
||
/* 卡片头右侧的辅助信息 */
|
||
.card-h .aside{margin-left:auto;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);white-space:nowrap}
|
||
.card-f .r{margin-left:auto;display:flex;gap:var(--sp-4);align-items:center}
|
||
.d-grid.eq > .card{display:flex;flex-direction:column}
|
||
.d-grid.eq > .card > .card-f{margin-top:auto}
|
||
|
||
/* 额度卡:单项额度(80% / 用完) */
|
||
.quota .one .big.warn{font-weight:var(--fw-bold)}
|
||
.quota .one .bar{margin:var(--sp-2) 0}
|
||
.quota p.warn{display:flex;gap:var(--sp-1);align-items:flex-start}
|
||
.quota p.warn .ic{flex:none;margin-top:2px;width:14px;height:14px}
|
||
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:flex-start}
|
||
.chips > div{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
|
||
.chips .quota-chip{background:var(--bg-surface);border:var(--line) solid var(--border-subtle)}
|
||
.chips .tip-hold{padding-bottom:64px}
|
||
|
||
/* 任务进度卡 */
|
||
.file{display:flex;gap:var(--sp-2);align-items:center;margin:0 0 var(--sp-2);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
|
||
.file .ic{width:14px;height:14px}
|
||
.fail-why{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:var(--line) solid var(--border-subtle)}
|
||
.fail-why > .ic{flex:none;margin-top:3px;color:var(--warn)}
|
||
.fail-why b{color:var(--warn-text);font-weight:var(--fw-bold)}
|
||
.fail-why p{margin:0}
|
||
.fail-why .sub{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
|
||
.queued{display:flex;gap:var(--sp-2);align-items:center}
|
||
.queued .ic{color:var(--text-secondary)}
|
||
.queued b{font-weight:var(--fw-bold)}
|
||
.queued .aside{margin-left:auto}
|
||
|
||
/* AI 摘要卡:署名行(共用 .sign.sm)放在 .ai-block 里,和正文左边对齐 */
|
||
.ai-card .kv{grid-template-columns:88px minmax(0,1fr)}
|
||
.ai-card .kv dd > .fig{font-weight:var(--fw-medium)}
|
||
|
||
/* 关键日期卡:日期按「11月20日 09:30」写,列放宽 */
|
||
.dates li{grid-template-columns:128px minmax(0,1fr) auto}
|
||
.dates li > span:nth-child(2) > b{font-weight:var(--fw-bold)}
|
||
.dates .left .fig{font-weight:var(--fw-medium)}
|
||
|
||
/* 项目信息卡(只在项目概览页用) */
|
||
.pinfo .kv{grid-template-columns:88px minmax(0,1fr)}
|
||
.pinfo .kv dd > .fig{font-weight:var(--fw-medium)}
|
||
.pinfo .state{display:flex;gap:var(--sp-2);align-items:center}
|
||
.pinfo .flowline{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:var(--line) solid var(--border-subtle)}
|
||
.pinfo .skel + .skel{margin-top:var(--sp-3)}
|
||
</style>
|
||
</head>
|
||
<body class="demo">
|
||
<header data-demo-top></header>
|
||
<main class="d-page">
|
||
<div class="d-head">
|
||
<h1>③ 卡片</h1>
|
||
<p>只有一种容器:白卡片,1px 发丝线,圆角 12,无阴影,卡片里不再套面板。工作台只用列表,不做项目卡片视图(Q11)。</p>
|
||
<nav class="d-toc" aria-label="本页目录"><a href="#s-stat">01 统计卡</a><a href="#s-quota">02 额度卡</a><a href="#s-task">03 任务进度卡</a><a href="#s-ai">04 AI 摘要卡</a><a href="#s-date">05 关键日期卡</a><a href="#s-info">06 项目信息卡</a></nav>
|
||
</div>
|
||
|
||
<!-- 01 统计卡 -->
|
||
<section class="d-sec" id="s-stat">
|
||
<div class="d-sec-h"><span class="no">01</span><h2>统计卡</h2><span class="ref">规范 §4.2 · §9.5</span></div>
|
||
<span class="d-label">可点筛选(工作台):按下后标题加粗、底边出墨色线</span>
|
||
<section class="stats" aria-label="项目统计,点击可筛选" data-stats>
|
||
<button class="stat" aria-pressed="true"><small>进行中的项目</small><span class="big">4</span><i data-ic="filter"></i></button>
|
||
<button class="stat" aria-pressed="false"><small>7 天内截止</small><span class="big due">2</span><i data-ic="filter"></i></button>
|
||
<button class="stat" aria-pressed="false"><small>待处理的致命问题</small><span class="big fatal">3</span><i data-ic="filter"></i></button>
|
||
<button class="stat" aria-pressed="false"><small>待确认的清单条目</small><span class="big">4</span><i data-ic="filter"></i></button>
|
||
</section>
|
||
<span class="d-label">只读(额度页):数字后可带单位</span>
|
||
<section class="stats c3" aria-label="本期用量">
|
||
<div class="stat"><small>本期解析</small><span><span class="big">13</span><span class="unit">/ 50 次</span></span></div>
|
||
<div class="stat"><small>本期检查</small><span><span class="big">8</span><span class="unit">/ 20 次</span></span></div>
|
||
<div class="stat"><small>本期退回</small><span><span class="big">2</span><span class="unit">次</span></span></div>
|
||
</section>
|
||
<ul class="d-rules"><li>只写标题和数字,不加说明小字(§9.5)。数字 Barlow 28(<code>--fs-figure</code>),单位辅助灰。</li><li>致命数用致命红、7 天内截止用赭色,其余墨色。</li></ul>
|
||
</section>
|
||
|
||
<!-- 02 额度卡 -->
|
||
<section class="d-sec" id="s-quota">
|
||
<div class="d-sec-h"><span class="no">02</span><h2>额度卡</h2><span class="ref">规范 §7.10 · §8.3 · 红线 9</span></div>
|
||
<div class="d-grid c3 eq">
|
||
<section class="card flush quota" aria-labelledby="q1">
|
||
<div class="card-h"><h3 id="q1">本期额度</h3><span class="aside">至 <span class="fig xs m">2027-10-31</span></span></div>
|
||
<div class="card-b">
|
||
<div class="q2">
|
||
<div><small>解析剩余</small><span class="big">37</span><span class="unit">/ 50</span><div class="bar" aria-hidden="true"><i style="width:26%"></i></div></div>
|
||
<div><small>检查剩余</small><span class="big">12</span><span class="unit">/ 20</span><div class="bar" aria-hidden="true"><i style="width:40%"></i></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-f cap"><a class="lnk" href="#" data-demo>扣点规则</a><a class="lnk" href="#" data-demo>查看流水</a></div>
|
||
</section>
|
||
<section class="card flush quota" aria-labelledby="q2">
|
||
<div class="card-h"><h3 id="q2">检查额度</h3><span class="aside">已用 80%</span></div>
|
||
<div class="card-b one">
|
||
<small>检查剩余</small><span class="big warn">4</span><span class="unit">/ 20</span>
|
||
<div class="bar warn" aria-hidden="true"><i style="width:80%"></i></div>
|
||
<p class="warn"><i data-ic="alert-circle"></i>同一项目 24 小时内复查不扣额度。</p>
|
||
</div>
|
||
<div class="card-f cap"><a class="lnk" href="#" data-demo>扣点规则</a><a class="lnk" href="#" data-demo>查看流水</a></div>
|
||
</section>
|
||
<section class="card flush quota" aria-labelledby="q3">
|
||
<div class="card-h"><h3 id="q3">检查额度</h3><span class="aside">已用完</span></div>
|
||
<div class="card-b one">
|
||
<small>检查剩余</small><span class="big warn">0</span><span class="unit">/ 20</span>
|
||
<div class="bar warn" aria-hidden="true"><i style="width:100%"></i></div>
|
||
<p class="warn"><i data-ic="alert-circle"></i>本期检查额度已用完,可在额度页提交续费申请,或等下期发放。</p>
|
||
</div>
|
||
<div class="card-f cap"><button class="btn sm" data-renew>提交续费申请</button><span class="r"><a class="lnk" href="#" data-demo>查看流水</a></span></div>
|
||
</section>
|
||
</div>
|
||
|
||
<span class="d-label" style="margin-top:var(--sp-6)">顶栏额度(白底只为陈列;真实顶栏见 <a class="lnk" href="page-workbench.html?quota=warn">工作台 · 80%</a> / <a class="lnk" href="page-workbench.html?quota=out">用完</a>)</span>
|
||
<div class="chips">
|
||
<div><span class="d-cap">正常</span><a class="quota-chip" href="#" data-demo><span class="q">解析<span class="fig">37</span></span><span class="sep"></span><span class="q">检查<span class="fig">12</span></span></a></div>
|
||
<div><span class="d-cap">检查用到 80%</span><a class="quota-chip" href="#" data-demo><span class="q">解析<span class="fig">37</span></span><span class="sep"></span><span class="q warn">检查<span class="fig">4</span></span></a></div>
|
||
<div class="tip-hold"><span class="d-cap">检查用完(悬停说明续费)</span><a class="quota-chip tip-below tip-start tip-on" href="#" data-demo data-tip="本期剩余额度:解析 37 / 50 次,检查 0 / 20 次。本期检查额度已用完,可在额度页提交续费申请,或等下期发放" aria-label="本期剩余额度:解析 37 / 50 次,检查 0 / 20 次。本期检查额度已用完,可在额度页提交续费申请,或等下期发放"><span class="q">解析<span class="fig">37</span></span><span class="sep"></span><span class="q warn">检查<span class="fig">0</span></span></a></div>
|
||
</div>
|
||
<ul class="d-rules"><li>已用部分墨色;用到 80% 起额度条、剩余数和顶栏数字变赭色(加粗),并出现一行提醒;用完时说明续费方式:在额度页提交续费申请(专业版:在线申请 → 对公转账 → 运营开通,决策 G8)。全程不用红(Q9)。</li></ul>
|
||
</section>
|
||
|
||
<!-- 03 任务进度卡 -->
|
||
<section class="d-sec" id="s-task">
|
||
<div class="d-sec-h"><span class="no">03</span><h2>任务进度卡</h2><span class="ref">规范 §7.11</span></div>
|
||
<div class="d-grid c3">
|
||
<section class="card flush" aria-labelledby="t1">
|
||
<div class="card-h"><h3 id="t1">正在解析招标文件</h3><span class="aside">已用时 1 分 40 秒</span></div>
|
||
<div class="card-b">
|
||
<p class="file"><i data-ic="file"></i>ZC-2026-0418 采购文件.pdf · <span class="fig xs">186</span> 页</p>
|
||
<ol class="steps">
|
||
<li class="done"><span class="dot">✓</span><span>识别文件格式</span></li>
|
||
<li class="done"><span class="dot">✓</span><span>提取文字</span><span class="fig">186 页</span></li>
|
||
<li class="done"><span class="dot">✓</span><span>识别分包</span><span class="fig">2 个包</span></li>
|
||
<li class="now"><span class="dot"></span><span>提取清单</span></li>
|
||
<li class="todo"><span class="dot"></span><span>核对出处</span></li>
|
||
</ol>
|
||
<div class="progress" style="margin-top:var(--sp-2)"><div class="bar" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" aria-label="解析进度"><i style="width:62%"></i></div><span class="fig">62%</span></div>
|
||
<p class="note">可以离开本页,完成后会发站内通知。</p>
|
||
</div>
|
||
<div class="card-f"><button class="btn sm" data-cancel>取消解析</button><span class="cost">取消后退回 1 次解析</span></div>
|
||
</section>
|
||
|
||
<section class="card flush" aria-labelledby="t2">
|
||
<div class="card-h"><h3 id="t2">解析失败</h3><span class="aside">11月2日 <span class="fig xs">14:31</span></span></div>
|
||
<div class="card-b">
|
||
<p class="file"><i data-ic="file"></i>关于 ZC-2026-0418 的更正公告.pdf</p>
|
||
<ol class="steps">
|
||
<li class="done"><span class="dot">✓</span><span>识别文件格式</span></li>
|
||
<li class="fail"><span class="dot">!</span><span>提取文字</span></li>
|
||
<li class="todo"><span class="dot"></span><span>识别分包</span></li>
|
||
<li class="todo"><span class="dot"></span><span>提取清单</span></li>
|
||
</ol>
|
||
<div class="fail-why" role="note"><i data-ic="alert-circle"></i><p><b>文件已加密,无法读取文字。</b>已退回 1 次解析额度。<span class="sub">请上传未加密的版本。</span></p></div>
|
||
</div>
|
||
<div class="card-f"><button class="btn sm"><i data-ic="upload"></i>重新上传</button><span class="r"><span class="errno">E-20261102-3M8A</span></span></div>
|
||
</section>
|
||
|
||
<div class="stack">
|
||
<section class="card flush" aria-labelledby="t3">
|
||
<div class="card-h"><h3 id="t3">解析完成</h3><span class="aside">用时 3 分 12 秒</span></div>
|
||
<div class="card-b">
|
||
<dl class="kv">
|
||
<dt>提取要求</dt><dd><span class="fig">26</span> 条 · 其中 ★ <span class="fig">4</span> 条</dd>
|
||
<dt>待确认</dt><dd><span class="fig">2</span> 条(没有可靠出处)</dd>
|
||
<dt>分包</dt><dd><span class="fig">2</span> 个采购包</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="card-f"><a class="btn sm" href="page-reading.html">去读标</a><span class="r cost">已扣 1 次解析</span></div>
|
||
</section>
|
||
<section class="card flush" aria-label="检查排队中">
|
||
<div class="card-h queued"><i data-ic="clock"></i><b>检查排队中</b><span class="aside">前面 <span class="fig xs">2</span> 个任务 · 约 4 分钟</span></div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<ul class="d-rules"><li>阶段:✓ 完成(墨色实心)、当前(加粗)、未开始(辅助灰);失败用赭色「!」并说明原因和退回额度,不用红。</li></ul>
|
||
</section>
|
||
|
||
<!-- 04 AI 摘要卡 -->
|
||
<section class="d-sec" id="s-ai">
|
||
<div class="d-sec-h"><span class="no">04</span><h2>AI 摘要卡</h2><span class="ref">规范 §7.16 · §8.1 · 红线 1、2</span></div>
|
||
<div class="d-grid c2 eq">
|
||
<section class="card flush ai-card" aria-labelledby="a1" data-ai-card>
|
||
<div class="card-h"><h3 id="a1">项目要点</h3><span class="tag ai" data-ai-tag>AI 摘要</span></div>
|
||
<div class="card-b">
|
||
<div class="ai-block" data-ai-block>
|
||
<dl class="kv">
|
||
<dt>法律体系</dt><dd>政府采购 · 公开招标(按「投标无效」口径检查)</dd>
|
||
<dt>预算 / 限价</dt><dd>采购包 1:<span class="fig">286.00</span> 万元(最高限价同预算)<a class="cite-src inline" href="#" data-demo>第 <span class="fig">2</span> 页</a></dd>
|
||
<dt>评标方法</dt><dd>综合评分法:价格 10、技术 40、实施方案 20、售后 10、认证 6、业绩 8<a class="cite-src inline" href="#" data-demo>第 <span class="fig">31</span> 页</a></dd>
|
||
<dt>联合体</dt><dd>不接受<a class="cite-src inline" href="#" data-demo>第 <span class="fig">2</span> 页</a></dd>
|
||
<dt>保证金</dt><dd>不收取<a class="cite-src inline" href="#" data-demo>第 <span class="fig">21</span> 页</a></dd>
|
||
<dt>样品</dt><dd class="muted">未找到要求 · 已查找:第二章、第三章、第六章</dd>
|
||
</dl>
|
||
<div data-ai-sign></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-f" data-ai-foot><button class="btn sm" data-ai-ok>确认无误</button><button class="btn sm text">修改</button><span class="r cap"><a class="lnk" href="#" data-demo>判断有误?</a></span></div>
|
||
</section>
|
||
|
||
<section class="card flush ai-card" aria-labelledby="a2">
|
||
<div class="card-h"><h3 id="a2">项目要点</h3></div>
|
||
<div class="card-b">
|
||
<div class="ai-block done">
|
||
<dl class="kv">
|
||
<dt>法律体系</dt><dd>政府采购 · 公开招标(按「投标无效」口径检查)</dd>
|
||
<dt>预算 / 限价</dt><dd>采购包 1:<span class="fig">286.00</span> 万元(最高限价同预算)<a class="cite-src inline" href="#" data-demo>第 <span class="fig">2</span> 页</a></dd>
|
||
<dt>评标方法</dt><dd>综合评分法:价格 10、技术 40、实施方案 20、售后 10、认证 6、业绩 8<a class="cite-src inline" href="#" data-demo>第 <span class="fig">31</span> 页</a></dd>
|
||
<dt>联合体</dt><dd>不接受 <span class="flag box">已修改</span><a class="cite-src inline" href="#" data-demo>第 <span class="fig">2</span> 页</a></dd>
|
||
<dt>保证金</dt><dd>不收取<a class="cite-src inline" href="#" data-demo>第 <span class="fig">21</span> 页</a></dd>
|
||
<dt>样品</dt><dd class="muted">未找到要求 · 已查找:第二章、第三章、第六章</dd>
|
||
</dl>
|
||
<div class="sign sm"><span class="ok" aria-hidden="true">✓</span><b>王敏</b><span class="fig">11月2日 14:20</span><span>确认无误</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-f"><button class="btn sm text"><i data-ic="history"></i>处理记录</button><span class="r"><button class="btn sm text">撤销确认</button></span></div>
|
||
</section>
|
||
</div>
|
||
<ul class="d-rules"><li>正文始终墨色。确认前:标题旁「AI 摘要」标签 + 左侧 2px 蓝铅笔虚线;确认后:两者去掉,正文下方出署名行(绿 ✓ + 姓名 + 时间 + 动作),正文位置不动(Q2)。左卡可点「确认无误」试一下。</li><li>出处蓝色,可点开原文核对;找不到的写「未找到 · 已查找:…」,不猜测、不留空(红线 2、5)。</li></ul>
|
||
</section>
|
||
|
||
<!-- 05 关键日期卡 -->
|
||
<section class="d-sec" id="s-date">
|
||
<div class="d-sec-h"><span class="no">05</span><h2>关键日期卡</h2><span class="ref">规范 §7.9 倒计时 · §9.3</span></div>
|
||
<div class="d-grid c2">
|
||
<section class="card flush" aria-labelledby="d1">
|
||
<div class="card-h"><h3 id="d1">关键日期</h3><span class="aside">已按补遗 1 更新</span></div>
|
||
<div class="card-b">
|
||
<ul class="dates">
|
||
<li class="past"><span class="fig">10月28日</span><span>采购文件公告发布</span><span></span></li>
|
||
<li><span class="fig">11月9日</span><span>询问、质疑截止<span class="left">剩 <span class="fig">6</span> 天</span></span><a class="cite-src" href="#" data-demo>第 <span class="fig">6</span> 页</a></li>
|
||
<li class="key"><span class="fig">11月20日 09:30</span><span><b>投标截止 / 开标</b><span class="left">剩 <span class="fig">17</span> 天 · 补遗 1 更新,原为 11月18日 09:30</span></span><a class="cite-src" href="#" data-demo>补遗 1 · 第 <span class="fig">1</span> 页</a></li>
|
||
<li><span class="fig">2027年2月18日</span><span>投标有效期至<span class="left">截止日起 <span class="fig">90</span> 天</span></span><a class="cite-src" href="#" data-demo>第 <span class="fig">21</span> 页</a></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
<section class="card flush" aria-labelledby="d2">
|
||
<div class="card-h"><h3 id="d2">7 天内截止</h3><a class="lnk cap" style="margin-left:auto" href="page-workbench.html">全部项目</a></div>
|
||
<div class="card-b">
|
||
<ul class="dates">
|
||
<li><span class="fig">今天 17:00</span><span><b>某县数据中心机房改造项目</b><span class="left due-today">剩 6 小时 · 编制中</span></span><span class="cap muted">标段 1</span></li>
|
||
<li><span class="fig">11月5日 16:00</span><span><b>某区智慧社区平台运维服务</b><span class="left due-soon">剩 2 天 5 小时 · 已检查</span></span><span class="cap muted">全部</span></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<ul class="d-rules"><li>日期 Barlow 15(<code>--fs-figure-sm</code>),跨年带年份。倒计时:> 72 小时墨色;≤ 72 小时赭色小字;≤ 24 小时赭色加粗;已过辅助灰。不用红、不闪烁。</li></ul>
|
||
</section>
|
||
|
||
<!-- 06 项目信息卡 -->
|
||
<section class="d-sec" id="s-info">
|
||
<div class="d-sec-h"><span class="no">06</span><h2>项目信息卡</h2><span class="ref">规范 §7.9 · §9.1</span></div>
|
||
<div class="d-grid c3 eq">
|
||
<section class="card flush pinfo" aria-labelledby="p1">
|
||
<div class="card-h"><h3 id="p1">项目信息</h3><button class="btn sm text" style="margin-left:auto"><i data-ic="pencil"></i>编辑</button></div>
|
||
<div class="card-b">
|
||
<dl class="kv">
|
||
<dt>采购人</dt><dd>某市政务服务管理办公室</dd>
|
||
<dt>项目编号</dt><dd><span class="fig">ZC-2026-0418</span></dd>
|
||
<dt>体系</dt><dd>政府采购 · 公开招标</dd>
|
||
<dt>所投包</dt><dd>采购包 1</dd>
|
||
<dt>投标截止</dt><dd>11月20日 <span class="fig">09:30</span> · 剩 <span class="fig">17</span> 天</dd>
|
||
<dt>状态</dt><dd class="state"><span class="tag">已检查</span>未就绪</dd>
|
||
</dl>
|
||
<div class="flowline sm" aria-label="项目状态:已检查"><span class="st done"><i></i>跟进中</span><span class="ln"></span><span class="st done"><i></i>编制中</span><span class="ln"></span><span class="st now"><i></i>已检查</span><span class="ln"></span><span class="st"><i></i>已递交</span></div>
|
||
</div>
|
||
</section>
|
||
<section class="card flush pinfo" aria-labelledby="p2">
|
||
<div class="card-h"><h3 id="p2">项目信息</h3><button class="btn sm text" style="margin-left:auto"><i data-ic="pencil"></i>编辑</button></div>
|
||
<div class="card-b">
|
||
<dl class="kv">
|
||
<dt>招标人</dt><dd>某县大数据管理局</dd>
|
||
<dt>项目编号</dt><dd><span class="fig">JS-2026-1107</span></dd>
|
||
<dt>体系</dt><dd>招标投标 · 公开招标</dd>
|
||
<dt>所投标段</dt><dd>标段 1</dd>
|
||
<dt>投标截止</dt><dd class="due-today">今天 17:00 截止</dd>
|
||
<dt>状态</dt><dd class="state"><span class="tag">编制中</span></dd>
|
||
</dl>
|
||
<div class="flowline sm" aria-label="项目状态:编制中"><span class="st done"><i></i>跟进中</span><span class="ln"></span><span class="st now"><i></i>编制中</span><span class="ln"></span><span class="st"><i></i>已检查</span><span class="ln"></span><span class="st"><i></i>已递交</span></div>
|
||
</div>
|
||
</section>
|
||
<section class="card flush pinfo" aria-busy="true" aria-labelledby="p3">
|
||
<div class="card-h"><h3 id="p3">项目信息</h3></div>
|
||
<div class="card-b">
|
||
<span class="skel w60"></span><span class="skel w80"></span><span class="skel w60"></span><span class="skel w30"></span><span class="skel w80"></span>
|
||
<p class="d-cap" style="margin:var(--sp-4) 0 0">加载中:骨架屏静止,不做明暗起伏(Q8)</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<ul class="d-rules"><li>只在项目概览页右栏用;工作台不做项目卡片,只用列表(见 <a class="lnk" href="page-workbench.html">⑤ 工作台</a>)。</li><li>术语跟着体系走:政府采购写「采购人」「采购包」,招标投标写「招标人」「标段」(§9.1)。</li></ul>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="demo.js"></script>
|
||
<script>
|
||
const { $, toast, dialog } = Demo;
|
||
Demo.demoTop("cards.html");
|
||
const DEMO = "(演示)这里只做了样式";
|
||
document.addEventListener("click", (e) => { if (e.target.closest("[data-demo]")) { e.preventDefault(); toast(DEMO, { ok: false }); } });
|
||
|
||
/* 统计格:单选,再点一次回到「进行中」 */
|
||
$("[data-stats]").addEventListener("click", (e) => {
|
||
const b = e.target.closest(".stat"); if (!b) return;
|
||
const all = [...$("[data-stats]").children], on = b.getAttribute("aria-pressed") === "true" && b !== all[0];
|
||
all.forEach((x) => x.setAttribute("aria-pressed", on ? x === all[0] : x === b));
|
||
});
|
||
|
||
$("[data-cancel]").onclick = () => dialog({ title: "取消解析?", ok: "取消解析", cancel: "继续解析", body: "<p>已完成的阶段不会保留。取消后退回 1 次解析额度,可以稍后重新上传。</p>", onOk: () => toast("已取消解析 · 已退回 1 次解析额度") });
|
||
$("[data-renew]").onclick = () => toast("(演示)打开额度页的续费申请:在线申请 → 对公转账 → 运营开通", { ok: false });
|
||
|
||
/* AI 摘要卡:确认前 ⇄ 确认后(Q2) */
|
||
const card = $("[data-ai-card]"), foot = $("[data-ai-foot]").innerHTML;
|
||
function setDone(done) {
|
||
$("[data-ai-block]", card).classList.toggle("done", done);
|
||
$("[data-ai-tag]", card).hidden = done;
|
||
$("[data-ai-sign]", card).innerHTML = done ? '<div class="sign sm"><span class="ok" aria-hidden="true">✓</span><b>王敏</b><span class="fig">11月3日 15:02</span><span>确认无误</span></div>' : "";
|
||
$("[data-ai-foot]", card).innerHTML = done
|
||
? `<button class="btn sm text">${Demo.icon("history")}处理记录</button><span class="r"><button class="btn sm text" data-ai-undo>撤销确认</button></span>`
|
||
: foot;
|
||
}
|
||
card.addEventListener("click", (e) => {
|
||
if (e.target.closest("[data-ai-ok]")) { setDone(true); toast("已确认项目要点", { undo: () => setDone(false) }); $("[data-ai-undo]", card).focus(); }
|
||
else if (e.target.closest("[data-ai-undo]")) { setDone(false); toast("已撤销确认", { ok: false }); $("[data-ai-ok]", card).focus(); }
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|