交付出件箱

← 返回出件箱

出图前必读 · 本项目出图 house style(全部扒自现网 + 历史图)

dev2 · 2026-08-21 v2 修正版 · 长官令「样式按系统来,不要风格不一样」
⚠️ v1 我判断错了:我拿 phase63 那张平板原型 demo 的 --primary:#2563eb 当成了
全站主色,还漏查了后台侧边栏外壳,更没打开线上看一眼 —— 长官发线上截图才纠正过来。
全站是绿色系,不是蓝色系。

一、🟢 唯一主色体系:绿(PC 与 H5 同一家族)

来源(实证) 令牌
web/app/(dashboard)/admin/AdminConsoleShell.tsx(后台侧边栏外壳,全局观感由它定) #28b38d / 深 #157c67 / 浅底 #e8f7f2 / 深字 #0f172a
settlement/web/.../payment-confirm/page.tsx(长官截图那页) #28b38d / #15846e / 中性 #64748b / 墨 #0b1224
web/app/h5/chat/page.tsx(H5 家长端) #2fa37c / 浅底 #eaf7f0 / 深墨 #1f3a30 / 次文 #7a9285

⇒ PC 与 H5 都是绿,只是深浅不同;不存在"PC 蓝 H5 绿" (v1 错误结论已作废)。

二、📐 出图版式 house style(照 signup-v3-prepay-first-mockup-20260818.html)

这是长官认过的那张图,本期出图直接照它的骨架:

body   { background:#eef2f1; color:#1f2d3d; padding:34px 0 60px;
         font-family:-apple-system,"PingFang SC","Noto Sans CJK SC",...; }
.wrap  { width:1180px; margin:0 auto; }                 /* 容器 1180 定死 */
.page-head { background:#fff; border-radius:18px; padding:26px 28px;
             box-shadow:0 10px 26px rgba(15,82,69,.06); }
.page-head h1 { font-size:24px; font-weight:900; color:#06483e; }
.sec   { background:#fff; border-radius:18px; padding:24px 28px 28px; margin-bottom:18px;
         box-shadow:0 10px 26px rgba(15,82,69,.06); }
.sec>h2{ font-size:18px; font-weight:900; color:#06483e; }
.bar   { border:1px solid #fde7c7; background:#fff8ed; color:#9a4a00;
         border-radius:10px; padding:10px 12px; }        /* 橙「本期改动」条 */
.bar.q { border-color:#cfe0f5; background:#f4f9ff; color:#1e4e8c; }  /* 蓝「待拍板」条 */
.pair  { display:grid; grid-template-columns:360px 360px 1fr; gap:24px; }  /* 前 ‖ 后 ‖ 说明 */
.trio  { display:grid; grid-template-columns:repeat(3,360px); gap:16px; }
.phone { width:360px; border:1px solid #dbe7e2; border-radius:18px;
         background:#f2f7f5; padding:12px; }             /* 手机帧 360 */
.hero  { background:linear-gradient(135deg,#155245 0%,#1e9c82 62%,#66cdaa 100%); }
.note  { font-size:11px; color:#8a9aab; text-align:center; }

补充令牌:主绿 #0f8a73 · 深墨绿 #0f302c / #06483e · 药丸边框 #9bdcc8 ·
橙标注 #e0762e / #9a4a00 · 中性 #64748b / #0f172a

版式规则(与 ~/.claude/rules/prototype-mockup-standards.md 一致):
- 编号节 §1 §2 … + 每节顶部橙条写清本期改动(带代码行号)
- 改动前 ‖ 改动后并排手机帧 + 右侧说明列
- 标注只有一种:橙虚线 2px dashed #e0762e + 右上「新增」标签;移除项用删除线
- 待长官拍板的问题用蓝条 .bar.q,单开一节放最后

三、可继承的交互样板(视觉按上面的令牌重画)

样板 拿来做什么 备注
phase63-tablet-refractive-record-demo 检查记录的信息组织:完成度环 / 待补录 / 与上次对比卡 / 字段行 OD-OS 双列 视觉是蓝的,只学结构不抄色
phase52-org-insight-ranking 后台统计卡 + 列表下钻 同上
phase68 / phase70 ❌ 不可用:依赖 cdn.tailwindcss.com + unpkg,云机渲染直接报错 交互照现网代码

四、出图前还要做的

云机环境 · 非验收证据。