- 品牌策略:定位「投前审校员」、性格、语气,口号「标博士,你的AI投标专家」 - 三个视觉方向对比(A 校样 / B 卷宗 / C 检验单),已选 A - docs/design/README.md:设计文档索引与品牌速查 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
418 lines
27 KiB
HTML
418 lines
27 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>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--frame-bg:#ECEDEA; --frame-ink:#22252A; --frame-sub:#5E636B; --frame-line:#D3D6D2;
|
||
--sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
|
||
--serif:"Noto Serif SC","Songti SC","SimSun",serif;
|
||
--fangsong:"STFangsong","FangSong","FangSong_GB2312","Noto Serif SC",serif;
|
||
--figures:"Barlow Semi Condensed","Noto Sans SC",sans-serif;
|
||
}
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:var(--frame-bg);color:var(--frame-ink);font:15px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
|
||
a{color:inherit}
|
||
:focus-visible{outline:2px solid #2B59C3;outline-offset:2px}
|
||
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
|
||
|
||
/* ---------- 封面 ---------- */
|
||
.intro{padding-top:72px;padding-bottom:40px}
|
||
.intro h1{font:900 clamp(40px,7vw,76px)/1.05 var(--serif);letter-spacing:.02em;margin:0 0 20px}
|
||
.intro .lede{max-width:40em;font-size:17px;color:var(--frame-sub);margin:0}
|
||
.brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--frame-line);border:1px solid var(--frame-line);margin-top:40px}
|
||
.brief div{background:#F7F7F5;padding:18px 20px}
|
||
.brief h3{font:700 14px/1.4 var(--sans);margin:0 0 6px;color:var(--frame-sub)}
|
||
.brief p{margin:0;font-size:15px}
|
||
.brief strong{font-family:var(--serif);font-size:20px;display:block;margin-bottom:2px}
|
||
|
||
.section-title{font:700 22px/1.4 var(--sans);margin:64px 0 8px}
|
||
.section-sub{color:var(--frame-sub);margin:0 0 24px;max-width:46em}
|
||
|
||
/* ---------- 方向通用骨架 ---------- */
|
||
.dir{margin:28px 0 56px;border-radius:2px;overflow:hidden;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06)}
|
||
.dir-head{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:end;padding:36px 40px 28px;border-bottom:1px solid var(--rule)}
|
||
.dir-letter{font:900 72px/0.9 var(--serif);color:var(--accent);grid-row:span 2}
|
||
.dir-name{font:700 30px/1.2 var(--display);margin:0}
|
||
.dir-idea{margin:0;color:var(--sub);max-width:46em}
|
||
.dir-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0}
|
||
.dir-ids{padding:32px 40px;border-right:1px solid var(--rule)}
|
||
.dir-ui{padding:32px 40px;background:var(--panel)}
|
||
.block-title{font:700 13px/1.4 var(--sans);color:var(--sub);margin:0 0 14px}
|
||
.block + .block{margin-top:32px}
|
||
|
||
.logo{display:flex;align-items:center;gap:18px}
|
||
.logo svg{flex:none}
|
||
.logo .wordmark{font:900 36px/1 var(--display);letter-spacing:.06em}
|
||
.logo .en{display:block;font:600 13px/1 var(--figures);letter-spacing:.12em;color:var(--sub);margin-top:8px}
|
||
|
||
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
|
||
.sw{font-size:12.5px;line-height:1.45}
|
||
.sw i{display:block;height:46px;border-radius:2px;margin-bottom:6px;border:1px solid rgba(0,0,0,.08)}
|
||
.sw b{display:block;font-weight:700;font-size:13px}
|
||
.sw span{color:var(--sub);font-family:var(--figures);font-size:13px;letter-spacing:.02em}
|
||
|
||
.type-spec .t1{font:700 26px/1.3 var(--display);margin:0 0 6px}
|
||
.type-spec .t2{margin:0 0 6px;font-size:15px}
|
||
.type-spec .t3{margin:0;font:600 22px/1 var(--figures);letter-spacing:.01em}
|
||
.type-spec small{display:block;color:var(--sub);font-size:12.5px;margin-top:10px}
|
||
|
||
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 40px 32px;border-top:1px solid var(--rule);font-size:14px}
|
||
.fit h4{margin:0 0 6px;font-size:14px}
|
||
.fit p{margin:0;color:var(--sub)}
|
||
|
||
/* 迷你界面通用 */
|
||
.ui-bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
|
||
.ui-bar h3{margin:0;font:700 17px/1.4 var(--sans)}
|
||
.ui-bar .proj{font-size:13px;color:var(--sub)}
|
||
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
|
||
.btn{font:500 13px/1 var(--sans);padding:8px 12px;border-radius:var(--radius);border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--ink);cursor:pointer}
|
||
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
|
||
.sample-note{font-size:12px;color:var(--sub);margin-top:14px}
|
||
|
||
/* ---------- 方向 A · 校样 ---------- */
|
||
.dir-a{
|
||
--paper:#F5F6F3; --panel:#FFFFFF; --ink:#1D2733; --sub:#5C6670; --rule:#D9DDD8;
|
||
--accent:#C4122F; --pencil:#2F5BD3; --pencil-soft:#E7EDFB; --ok:#2E6B4F; --amber:#A66300;
|
||
--display:var(--serif); --radius:2px; --btn-line:#C9CEC9; --btn-bg:#fff;
|
||
}
|
||
.dir-a .finding{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;padding:18px 0;border-top:1px solid var(--rule)}
|
||
.dir-a .finding:first-of-type{border-top:0;padding-top:4px}
|
||
.dir-a .sev{display:inline-block;font:700 12px/1 var(--sans);padding:4px 7px;border:1.5px solid currentColor;border-radius:2px;margin-right:8px;vertical-align:2px}
|
||
.dir-a .sev.fatal{color:var(--accent)}
|
||
.dir-a .sev.major{color:var(--amber)}
|
||
.dir-a .f-title{font-weight:700;font-size:15px}
|
||
.dir-a .f-text{margin:6px 0 0;font-size:14px;color:var(--sub)}
|
||
.dir-a .margin-note{position:relative;font:500 13px/1.55 var(--sans);color:var(--pencil);border-left:2px solid var(--pencil);padding:2px 0 2px 12px}
|
||
.dir-a .margin-note::before{content:"";position:absolute;left:-22px;top:12px;width:20px;border-top:1.5px dashed var(--pencil)}
|
||
.dir-a .margin-note q{display:block;color:var(--ink);quotes:none;background:linear-gradient(transparent 62%,var(--pencil-soft) 62%);margin-top:4px}
|
||
.dir-a .cite{font:600 13px/1 var(--figures);letter-spacing:.02em}
|
||
.dir-a .confirmed{margin-top:10px;font-size:13px;color:var(--ok)}
|
||
.dir-a .confirmed b{font-family:var(--serif)}
|
||
.dir-a .legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--sub);margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
|
||
.dir-a .legend i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:6px}
|
||
|
||
/* ---------- 方向 B · 卷宗 ---------- */
|
||
.dir-b{
|
||
--paper:#FFFFFF; --panel:#F4EFE6; --ink:#22304A; --sub:#636B78; --rule:#E2DBCF;
|
||
--accent:#B98B52; --kraft:#B98B52; --cinnabar:#B3261E; --moss:#4F7A55; --amber:#9A6A12;
|
||
--display:var(--serif); --radius:3px; --btn-line:#CDBFA8; --btn-bg:#FFFDF8;
|
||
}
|
||
.dir-b .dossier{display:grid;grid-template-columns:44px minmax(0,1fr);background:#fff;border:1px solid var(--rule);border-radius:3px}
|
||
.dir-b .binding{background:var(--kraft);display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:18px 0}
|
||
.dir-b .binding i{width:12px;height:12px;border-radius:50%;background:var(--panel);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
|
||
.dir-b .tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--rule);overflow-x:auto}
|
||
.dir-b .tab{font-size:13px;padding:10px 12px 8px;color:var(--sub);border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0;white-space:nowrap;position:relative;top:1px}
|
||
.dir-b .tab.on{color:var(--ink);background:#fff;border-color:var(--rule);font-weight:700}
|
||
.dir-b .rows{padding:6px 18px 16px}
|
||
.dir-b .row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:1px dashed var(--rule);align-items:start}
|
||
.dir-b .row:last-child{border-bottom:0}
|
||
.dir-b .no{font:600 22px/1 var(--figures);color:var(--kraft)}
|
||
.dir-b .r-title{font-weight:700}
|
||
.dir-b .r-text{font:15px/1.75 var(--fangsong);margin:4px 0 0;color:#3A4352}
|
||
.dir-b .tag{font-size:12px;padding:3px 8px;border-radius:3px;white-space:nowrap;font-weight:700}
|
||
.dir-b .tag.fatal{background:#F6E1DE;color:var(--cinnabar)}
|
||
.dir-b .tag.major{background:#F4EAD3;color:var(--amber)}
|
||
.dir-b .cite{font:600 13px/1 var(--figures);color:var(--sub)}
|
||
|
||
/* ---------- 方向 C · 检验单 ---------- */
|
||
.dir-c{
|
||
--paper:#FFFFFF; --panel:#F3F6F6; --ink:#20262C; --sub:#5D6870; --rule:#DCE3E5;
|
||
--accent:#0B7A75; --teal:#0B7A75; --flag:#C9262F; --amber:#A8650A; --ok:#2F7A45;
|
||
--display:var(--sans); --radius:4px; --btn-line:#C8D2D5; --btn-bg:#fff;
|
||
}
|
||
.dir-c .dir-name{font-weight:700}
|
||
.dir-c .labsheet{background:#fff;border:1px solid var(--rule);border-radius:4px;overflow-x:auto}
|
||
.dir-c table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
|
||
.dir-c th{font-weight:700;text-align:left;color:var(--sub);font-size:12.5px;padding:10px 12px;border-bottom:2px solid var(--ink)}
|
||
.dir-c td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top}
|
||
.dir-c tr:last-child td{border-bottom:0}
|
||
.dir-c .num{font:600 15px/1.2 var(--figures);letter-spacing:.01em;white-space:nowrap}
|
||
.dir-c .flag{font:700 15px/1 var(--figures);white-space:nowrap}
|
||
.dir-c .flag.low{color:var(--flag)}
|
||
.dir-c .flag.miss{color:var(--amber)}
|
||
.dir-c .flag.high{color:var(--flag)}
|
||
.dir-c .item b{display:block}
|
||
.dir-c .item small{color:var(--sub)}
|
||
.dir-c .cite{font:600 13px/1 var(--figures);color:var(--teal);white-space:nowrap}
|
||
.dir-c .sheet-head{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--rule);font-size:13px;color:var(--sub);gap:12px;flex-wrap:wrap}
|
||
.dir-c .sheet-head b{color:var(--ink)}
|
||
|
||
/* ---------- 对比与推荐 ---------- */
|
||
.compare{width:100%;border-collapse:collapse;background:#F7F7F5;font-size:14px}
|
||
.compare th,.compare td{padding:12px 14px;border:1px solid var(--frame-line);text-align:left;vertical-align:top}
|
||
.compare th{background:#E4E6E2;font-weight:700}
|
||
.recommend{margin:28px 0 80px;padding:28px 32px;background:#1D2733;color:#F5F6F3;border-radius:2px}
|
||
.recommend h3{font:700 22px/1.4 var(--serif);margin:0 0 10px}
|
||
.recommend p{margin:0 0 10px;max-width:52em;color:#D5DAE0}
|
||
.recommend p:last-child{margin-bottom:0}
|
||
footer{padding:0 0 48px;color:var(--frame-sub);font-size:13px}
|
||
|
||
@media (max-width:860px){
|
||
.dir-body{grid-template-columns:1fr}
|
||
.dir-ids{border-right:0;border-bottom:1px solid var(--rule)}
|
||
.dir-head,.dir-ids,.dir-ui,.fit{padding-left:20px;padding-right:20px}
|
||
.dir-a .finding{grid-template-columns:1fr}
|
||
.dir-a .margin-note::before{display:none}
|
||
.fit{grid-template-columns:1fr}
|
||
.dir-letter{font-size:52px}
|
||
.wrap{padding:0 16px}
|
||
}
|
||
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="wrap intro">
|
||
<h1>标博士</h1>
|
||
<p class="lede">品牌方向提案(v0.1,2026-11-02)。三个方向都基于同一套品牌策略,区别只在视觉上的比喻。每个方向都用真实样本里的条款做了一屏「检查结果」示意,请对比着看,选一个继续细化。</p>
|
||
<div class="brief">
|
||
<div><h3>定位</h3><strong>投前审校员</strong><p>把招标文件的每一条要求和投标文件逐条对上,指明出处,由人确认。</p></div>
|
||
<div><h3>性格</h3><strong>较真、有据、沉着</strong><p>逐条不跳过;说什么都带出处;截止前不添乱、不吓人。</p></div>
|
||
<div><h3>口号(定稿)</h3><strong>标博士,你的AI投标专家</strong><p>点明身份:懂投标、会查标的 AI 助手。2026-11-02 定稿,见决策 B5。</p></div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="wrap">
|
||
|
||
<h2 class="section-title">三个视觉方向</h2>
|
||
<p class="section-sub">示意界面里的条款文字取自苏采云样本(S02、S10);页码和投标响应值是虚构的示意数据。</p>
|
||
|
||
<!-- ============ A 校样 ============ -->
|
||
<section class="dir dir-a" aria-labelledby="a-name">
|
||
<div class="dir-head">
|
||
<div class="dir-letter" aria-hidden="true">A</div>
|
||
<h3 class="dir-name" id="a-name">校样</h3>
|
||
<p class="dir-idea">借用出版社的校对传统:<b>蓝铅笔</b>是机器的批注和待确认的内容,<b>墨笔</b>是人确认后的定稿,<b>红笔</b>只用来标问题。颜色本身就说明了「谁说的、说完没有」。</p>
|
||
</div>
|
||
<div class="dir-body">
|
||
<div class="dir-ids">
|
||
<div class="block">
|
||
<p class="block-title">标志</p>
|
||
<div class="logo">
|
||
<svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="标博士标志:带校对圈的标字">
|
||
<rect x="1" y="1" width="62" height="62" fill="#1D2733"/>
|
||
<text x="32" y="43" text-anchor="middle" font-family="Noto Serif SC, serif" font-weight="900" font-size="30" fill="#F5F6F3">标</text>
|
||
<path d="M47.5 12.5 C40 6 20 6.5 12 17 C4.5 27 8 47 22 53 C35 58.5 53 53 55.5 38 C57 28 54 20 45 15" fill="none" stroke="#6F93F0" stroke-width="2.4" stroke-linecap="round"/>
|
||
</svg>
|
||
<div><span class="wordmark">标博士</span><span class="en">BID DOCTOR</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<p class="block-title">色彩</p>
|
||
<div class="swatches">
|
||
<div class="sw"><i style="background:#1D2733"></i><b>墨</b><span>#1D2733</span><br>正文、已确认</div>
|
||
<div class="sw"><i style="background:#2F5BD3"></i><b>蓝铅笔</b><span>#2F5BD3</span><br>AI 标注、出处</div>
|
||
<div class="sw"><i style="background:#C4122F"></i><b>校对红</b><span>#C4122F</span><br>只用于致命问题</div>
|
||
<div class="sw"><i style="background:#F5F6F3"></i><b>校样纸</b><span>#F5F6F3</span><br>冷灰白,非米色</div>
|
||
<div class="sw"><i style="background:#A66300"></i><b>赭</b><span>#A66300</span><br>重要问题</div>
|
||
<div class="sw"><i style="background:#2E6B4F"></i><b>定稿绿</b><span>#2E6B4F</span><br>确认署名</div>
|
||
</div>
|
||
</div>
|
||
<div class="block type-spec">
|
||
<p class="block-title">字体</p>
|
||
<p class="t1">思源宋体,用于标题与标志</p>
|
||
<p class="t2">正文用系统黑体(苹方 / 微软雅黑),保证清单密集时也好读。</p>
|
||
<p class="t3">第 38 页 ≥512G 132.00 万元</p>
|
||
<small>数字用 Barlow Semi Condensed:窄、等宽数字,页码和金额对得齐。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dir-ui">
|
||
<div class="ui-bar"><h3>采购包 2 的检查结果</h3><span class="proj">智慧规划资源 2025 标段三</span></div>
|
||
|
||
<div class="finding">
|
||
<div>
|
||
<span class="sev fatal">致命</span><span class="f-title">报价超过采购包 2 的最高限价</span>
|
||
<p class="f-text">开标一览表报价 133.60 万元,最高限价 132.00 万元,超出 1.60 万元。这一项会导致投标无效。</p>
|
||
<div class="btns"><button class="btn primary">确认无误</button><button class="btn">已修改</button><button class="btn">忽略并注明原因</button></div>
|
||
</div>
|
||
<aside class="margin-note">招标文件 <span class="cite">第 2 页</span><q>最高限价:184 万元(采购包 1:14 万元,采购包 2:132 万元,采购包 3:38 万元)</q></aside>
|
||
</div>
|
||
|
||
<div class="finding">
|
||
<div>
|
||
<span class="sev fatal">致命</span><span class="f-title">★ 条款疑似不满足:服务器内存</span>
|
||
<p class="f-text">技术偏离表第 12 行响应「内存 256G」,要求「≥512G」。</p>
|
||
<p class="confirmed"><b>王敏</b> 于 11 月 2 日 14:20 标记为已修改</p>
|
||
</div>
|
||
<aside class="margin-note">招标文件 <span class="cite">第 41 页</span><q>★ 2U 机架式服务器,CPU:配置 ≥2 颗海光架构 32C 2.7GHz,内存:≥512G DDR4</q></aside>
|
||
</div>
|
||
|
||
<div class="finding">
|
||
<div>
|
||
<span class="sev major">重要</span><span class="f-title">缺少 ★ 参数的证明材料</span>
|
||
<p class="f-text">已响应「支持硬件 BFD」,但没有找到官网参数截图等证明材料。</p>
|
||
</div>
|
||
<aside class="margin-note">招标文件 <span class="cite">第 44 页</span><q>★ 支持硬件 BFD,最小报文发送间隔 ≤50ms,提供相关证明材料</q></aside>
|
||
</div>
|
||
|
||
<div class="legend"><span><i style="background:#2F5BD3"></i>蓝铅笔:系统找到的出处</span><span><i style="background:#1D2733"></i>墨:人工确认后</span><span><i style="background:#C4122F"></i>红:只标致命问题</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="fit">
|
||
<div><h4>适合</h4><p>颜色规则和「AI 初稿 → 人工确认 → 留痕」是同一件事,用户不需要额外学习。页边批注把「出处」变成界面上最显眼的元素,正好对应我们的核心差异。</p></div>
|
||
<div><h4>风险</h4><p>纸张 + 衬线容易让人觉得「文艺」。办法:衬线只用在标题和标志上,界面主体用黑体;纸色用冷灰白。页边批注在窄屏上要改成折叠展开。</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ B 卷宗 ============ -->
|
||
<section class="dir dir-b" aria-labelledby="b-name">
|
||
<div class="dir-head">
|
||
<div class="dir-letter" aria-hidden="true">B</div>
|
||
<h3 class="dir-name" id="b-name">卷宗</h3>
|
||
<p class="dir-idea">借用标书装订和档案管理:每个投标项目是一份<b>卷宗</b>,左边是装订线,资格、无效条款、评分等是档案夹的分隔页。报告正文用系统自带的仿宋,投标人一看就熟悉。</p>
|
||
</div>
|
||
<div class="dir-body">
|
||
<div class="dir-ids">
|
||
<div class="block">
|
||
<p class="block-title">标志</p>
|
||
<div class="logo">
|
||
<svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="标博士标志:卷宗页签上的标字">
|
||
<path d="M4 14 h20 l5 -8 h31 v54 h-56 z" fill="#22304A"/>
|
||
<rect x="4" y="14" width="9" height="46" fill="#B98B52"/>
|
||
<circle cx="8.5" cy="25" r="2.2" fill="#22304A"/><circle cx="8.5" cy="49" r="2.2" fill="#22304A"/>
|
||
<text x="37" y="48" text-anchor="middle" font-family="Noto Serif SC, serif" font-weight="900" font-size="30" fill="#FFFFFF">标</text>
|
||
</svg>
|
||
<div><span class="wordmark">标博士</span><span class="en">BID DOCTOR</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<p class="block-title">色彩</p>
|
||
<div class="swatches">
|
||
<div class="sw"><i style="background:#22304A"></i><b>深靛</b><span>#22304A</span><br>品牌主色、正文</div>
|
||
<div class="sw"><i style="background:#B98B52"></i><b>牛皮纸</b><span>#B98B52</span><br>装订线、编号</div>
|
||
<div class="sw"><i style="background:#F4EFE6"></i><b>档案底</b><span>#F4EFE6</span><br>背景层</div>
|
||
<div class="sw"><i style="background:#B3261E"></i><b>朱砂</b><span>#B3261E</span><br>致命问题</div>
|
||
<div class="sw"><i style="background:#9A6A12"></i><b>赭黄</b><span>#9A6A12</span><br>重要问题</div>
|
||
<div class="sw"><i style="background:#4F7A55"></i><b>苔绿</b><span>#4F7A55</span><br>已确认</div>
|
||
</div>
|
||
</div>
|
||
<div class="block type-spec">
|
||
<p class="block-title">字体</p>
|
||
<p class="t1">思源宋体,用于标题</p>
|
||
<p class="t2" style="font-family:var(--fangsong);font-size:16px">仿宋用于报告与原文引用,与招标文件的阅读习惯一致。</p>
|
||
<p class="t3">第 03 项 第 41 页</p>
|
||
<small>仿宋直接用系统字体(macOS 华文仿宋 / Windows 仿宋),不需要额外加载字体文件。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dir-ui">
|
||
<div class="ui-bar"><h3>检查结果</h3><span class="proj">智慧规划资源 2025 标段三 · 采购包 2</span></div>
|
||
<div class="dossier">
|
||
<div class="binding" aria-hidden="true"><i></i><i></i><i></i></div>
|
||
<div>
|
||
<div class="tabs" role="tablist" aria-label="清单分类">
|
||
<span class="tab on" role="tab" aria-selected="true">全部问题 3</span><span class="tab" role="tab">资格</span><span class="tab" role="tab">无效条款</span><span class="tab" role="tab">技术参数</span><span class="tab" role="tab">报价</span>
|
||
</div>
|
||
<div class="rows">
|
||
<div class="row"><span class="no">01</span><div><span class="r-title">报价超过采购包 2 的最高限价</span><p class="r-text">开标一览表报价 133.60 万元,最高限价 132.00 万元。</p><span class="cite">招标文件 第 2 页</span></div><span class="tag fatal">致命</span></div>
|
||
<div class="row"><span class="no">02</span><div><span class="r-title">★ 条款疑似不满足:服务器内存</span><p class="r-text">要求「≥512G DDR4」,偏离表响应「256G」。</p><span class="cite">招标文件 第 41 页 ↔ 投标文件 技术册 第 12 页</span></div><span class="tag fatal">致命</span></div>
|
||
<div class="row"><span class="no">03</span><div><span class="r-title">缺少 ★ 参数的证明材料</span><p class="r-text">「支持硬件 BFD,最小报文发送间隔 ≤50ms,提供相关证明材料」</p><span class="cite">招标文件 第 44 页</span></div><span class="tag major">重要</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btns"><button class="btn primary">导出检查报告</button><button class="btn">按卷宗归档</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="fit">
|
||
<div><h4>适合</h4><p>「项目 = 卷宗」和全程留痕、归档、保存的诉求一致,对政企客户显得稳重可靠。仿宋报告拿给老板或归档都很自然。</p></div>
|
||
<div><h4>风险</h4><p>容易显得老气、偏后台系统风格;装订线和页签如果做得太具体,会显得像拟物设计。仿宋在小字号下不好读,只能用在报告和引用上。</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ C 检验单 ============ -->
|
||
<section class="dir dir-c" aria-labelledby="c-name">
|
||
<div class="dir-head">
|
||
<div class="dir-letter" aria-hidden="true">C</div>
|
||
<h3 class="dir-name" id="c-name">检验单</h3>
|
||
<p class="dir-idea">从「博士」引申到体检报告:每条要求是一个<b>检验项目</b>,招标要求是参考值,投标响应是检测结果,偏离用 ↑ ↓ 标出来。数字一目了然,技术参数核对尤其直观。</p>
|
||
</div>
|
||
<div class="dir-body">
|
||
<div class="dir-ids">
|
||
<div class="block">
|
||
<p class="block-title">标志</p>
|
||
<div class="logo">
|
||
<svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="标博士标志:刻度环绕的标字">
|
||
<circle cx="32" cy="32" r="30" fill="#0B7A75"/>
|
||
<g stroke="#FFFFFF" stroke-width="2" stroke-linecap="round">
|
||
<line x1="32" y1="5" x2="32" y2="10"/><line x1="51.1" y1="12.9" x2="47.6" y2="16.4"/><line x1="59" y1="32" x2="54" y2="32"/><line x1="12.9" y1="12.9" x2="16.4" y2="16.4"/><line x1="5" y1="32" x2="10" y2="32"/>
|
||
</g>
|
||
<text x="32" y="44" text-anchor="middle" font-family="Noto Sans SC, sans-serif" font-weight="700" font-size="28" fill="#FFFFFF">标</text>
|
||
</svg>
|
||
<div><span class="wordmark" style="font-family:var(--sans);font-weight:700">标博士</span><span class="en">BID DOCTOR</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<p class="block-title">色彩</p>
|
||
<div class="swatches">
|
||
<div class="sw"><i style="background:#0B7A75"></i><b>检验青</b><span>#0B7A75</span><br>品牌主色、出处</div>
|
||
<div class="sw"><i style="background:#20262C"></i><b>石墨</b><span>#20262C</span><br>正文</div>
|
||
<div class="sw"><i style="background:#F3F6F6"></i><b>化验单底</b><span>#F3F6F6</span><br>背景层</div>
|
||
<div class="sw"><i style="background:#C9262F"></i><b>异常红</b><span>#C9262F</span><br>致命、↑↓</div>
|
||
<div class="sw"><i style="background:#A8650A"></i><b>琥珀</b><span>#A8650A</span><br>重要、缺项</div>
|
||
<div class="sw"><i style="background:#2F7A45"></i><b>正常绿</b><span>#2F7A45</span><br>已确认</div>
|
||
</div>
|
||
</div>
|
||
<div class="block type-spec">
|
||
<p class="block-title">字体</p>
|
||
<p class="t1" style="font-family:var(--sans)">思源黑体,用于全部界面</p>
|
||
<p class="t2">只用一套无衬线字体,强调精确、干净。</p>
|
||
<p class="t3">≥512G ↓ 256G</p>
|
||
<small>数字用 Barlow Semi Condensed,表格里的数值、单位和判定符号对齐。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dir-ui">
|
||
<div class="ui-bar"><h3>检查结果 · 采购包 2</h3><span class="proj">智慧规划资源 2025 标段三</span></div>
|
||
<div class="labsheet">
|
||
<div class="sheet-head"><span>投标文件 <b>v3</b>,11 月 2 日 14:05 检查</span><span>致命 <b>2</b> 重要 <b>1</b></span></div>
|
||
<table>
|
||
<thead><tr><th>检查项目</th><th>招标要求</th><th>投标响应</th><th>判定</th><th>出处</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="item"><b>报价(采购包 2)</b><small>最高限价</small></td><td class="num">≤132.00 万元</td><td class="num">133.60 万元</td><td class="flag high">↑ 超限</td><td class="cite">第 2 页</td></tr>
|
||
<tr><td class="item"><b>★ 服务器内存</b><small>2U 机架式服务器</small></td><td class="num">≥512G</td><td class="num">256G</td><td class="flag low">↓ 不满足</td><td class="cite">第 41 页</td></tr>
|
||
<tr><td class="item"><b>★ 硬件 BFD</b><small>证明材料</small></td><td class="num">≤50ms,附证明</td><td class="num">已响应</td><td class="flag miss">缺证明</td><td class="cite">第 44 页</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="btns"><button class="btn primary">逐项确认</button><button class="btn">导出检查报告</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="fit">
|
||
<div><h4>适合</h4><p>技术参数类问题(IT 集成占比最高)用「要求 / 响应 / 判定」三列表达非常直观,和「博士」的名字也呼应。界面现代、干净,容易做好响应式。</p></div>
|
||
<div><h4>风险</h4><p>青色 + 表格是常见的 SaaS 面孔,辨识度最低;医疗比喻容易让人联想到「诊断结论」,暗示的确定性比我们承诺的更强。资格、形式类问题不适合放进数值表格。</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 class="section-title">对比</h2>
|
||
<div style="overflow-x:auto">
|
||
<table class="compare">
|
||
<thead><tr><th></th><th>A 校样</th><th>B 卷宗</th><th>C 检验单</th></tr></thead>
|
||
<tbody>
|
||
<tr><th>和核心差异「可复核」的关系</th><td>最强:出处是界面主角</td><td>中:出处是附注</td><td>中:出处是一列</td></tr>
|
||
<tr><th>和「AI 初稿 → 人工确认」的关系</th><td>最强:颜色即状态</td><td>弱</td><td>弱</td></tr>
|
||
<tr><th>辨识度</th><td>高</td><td>中高</td><td>低</td></tr>
|
||
<tr><th>政企客户的信任感</th><td>中高</td><td>最高</td><td>中</td></tr>
|
||
<tr><th>技术参数类问题的表达</th><td>中(可以借用 C 的三列)</td><td>中</td><td>最强</td></tr>
|
||
<tr><th>红线风险</th><td>低</td><td>低(避开了红头样式)</td><td>中:诊断暗示确定性</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="recommend">
|
||
<h3>推荐 A「校样」,借用 C 的参数对照表</h3>
|
||
<p>标博士和同类产品的根本区别是「每一条都查得到出处、AI 说的和人确认的分得清」。只有 A 把这件事做成了视觉语言本身:蓝铅笔、墨、红笔三种笔迹分别就是机器标注、人工确认和问题。</p>
|
||
<p>技术参数核对是 IT 集成项目里数量最多的问题,这一块借用 C 的「要求 / 响应 / 判定」三列表,放在 A 的视觉体系里。B 的「卷宗」可以留作检查报告 PDF 的版式参考:仿宋正文,便于归档。</p>
|
||
</div>
|
||
|
||
</main>
|
||
<footer class="wrap">标博士品牌方向 v0.1 · 配套文字说明见 brand-strategy.md</footer>
|
||
</body>
|
||
</html>
|