| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
- <title>mobile-oa-h5 · 审批进度 Tag 配色 Demo</title>
- <style>
- :root {
- --brand: #0a9f6d;
- --brand-dark: #087f57;
- --brand-soft: #e9f9f2;
- --page-bg: #f5f8f7;
- --text: #1f2a26;
- --text-muted: #6b7b74;
- --border: #dcebe4;
- }
- * { box-sizing: border-box; }
- body {
- margin: 0;
- font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", -apple-system, system-ui, sans-serif;
- color: var(--text);
- background:
- radial-gradient(900px 420px at 8% -8%, rgba(10, 159, 109, 0.12), transparent 55%),
- radial-gradient(700px 380px at 92% 0%, rgba(214, 163, 67, 0.1), transparent 50%),
- linear-gradient(180deg, #f8fffc 0%, #f4f7fb 50%, #f7f8fa 100%);
- line-height: 1.45;
- }
- .stage { max-width: 1280px; margin: 0 auto; padding: 28px 16px 64px; }
- .hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 720; }
- .hero p { margin: 0; color: #64748b; font-size: 14px; max-width: 900px; }
- .goals {
- margin-top: 14px; padding: 12px 14px; border-radius: 12px;
- background: #ecfdf5; border: 1px solid #a7f3d0;
- font-size: 13px; color: #065f46;
- }
- .goals ul { margin: 6px 0 0; padding-left: 18px; }
- .grid {
- margin-top: 22px;
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 18px;
- align-items: start;
- }
- .card {
- background: rgba(255,255,255,.94);
- border: 1px solid #e2e8f0;
- border-radius: 16px;
- padding: 14px;
- box-shadow: 0 10px 28px rgba(15,23,42,.05);
- }
- .card h2 {
- margin: 0 0 4px;
- font-size: 15px;
- display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
- }
- .card .sub { margin: 0 0 12px; font-size: 12px; color: #64748b; }
- .pill {
- display: inline-block; padding: 2px 8px; border-radius: 999px;
- font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
- }
- .pill.now { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
- .pill.rec { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
- .pill.alt { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
- .phone {
- width: 100%; max-width: 360px; margin: 0 auto;
- border-radius: 28px; border: 1px solid #cbd5e1; background: #0f172a;
- padding: 10px; box-shadow: 0 18px 40px rgba(15,23,42,.12);
- }
- .phone__screen {
- border-radius: 20px; overflow: hidden; background: var(--page-bg);
- min-height: 420px; display: flex; flex-direction: column;
- }
- .nav {
- display: flex; align-items: center; gap: 8px; min-height: 48px;
- padding: 10px 12px;
- background: linear-gradient(180deg, #d1fae5 0%, #ecfdf5 100%);
- border-bottom: 1px solid #bbf7d0;
- }
- .nav__back {
- width: 28px; height: 28px; border-radius: 999px;
- display: grid; place-items: center;
- color: var(--brand-dark); font-weight: 700; font-size: 16px;
- background: rgba(255,255,255,.55);
- }
- .nav__title { flex: 1; font-size: 15px; font-weight: 700; color: #064e3b; }
- .body { padding: 12px; display: grid; gap: 10px; }
- .progress {
- background: #fff; border: 1px solid var(--border);
- border-radius: 12px; padding: 12px;
- }
- .progress__title {
- margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #0f291e;
- }
- .step { display: flex; gap: 10px; min-height: 52px; }
- .rail { display: flex; flex-direction: column; align-items: center; width: 16px; }
- .dot {
- width: 10px; height: 10px; margin-top: 6px; border-radius: 50%;
- background: #94a3b8;
- }
- .dot.ok { background: #189b65; }
- .dot.warn { background: #cf8a19; }
- .dot.danger { background: #d14343; }
- .dot.mute { background: #94a3b8; }
- .line { flex: 1; width: 2px; margin: 4px 0 0; background: #e2e8f0; min-height: 28px; }
- .step-card { flex: 1; min-width: 0; padding-bottom: 12px; }
- .row {
- display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
- }
- .name { font-size: 14px; font-weight: 600; color: #0f291e; }
- .person {
- margin-top: 6px; font-size: 12px; color: #5f7a6d;
- display: flex; justify-content: space-between; gap: 8px;
- }
- .person strong { color: #1f2a26; font-weight: 600; }
- /* ===== badge base ===== */
- .badge {
- flex-shrink: 0;
- padding: 1px 6px;
- border-radius: 4px;
- font-size: 11px;
- font-weight: 600;
- line-height: 1.45;
- border: 1px solid transparent;
- }
- /* —— 现状 —— */
- .now .badge.ok { color: #10b981; background: #ecfdf5; }
- .now .badge.warn { color: #d97706; background: #fffbeb; }
- .now .badge.danger { color: #ef4444; background: #fef2f2; }
- .now .badge.mute { color: #5f7a6d; background: #f1f5f9; }
- .now .badge.and { color: #2563eb; background: #eff6ff; }
- .now .badge.or { color: #d97706; background: #fff7ed; }
- .now .badge.cc { color: #0891b2; background: #ecfeff; }
- .now .badge.end { color: #5f7a6d; background: #f1f5f9; }
- /* —— 方案 A:三墙语义 + 类型独立色相(浅底实心) —— */
- .a .badge.ok { color: #087f57; background: #e9f9f2; }
- .a .badge.warn { color: #a66b10; background: #fff7e8; }
- .a .badge.danger { color: #b42318; background: #fef3f2; }
- .a .badge.mute { color: #5f7a6d; background: #f1f5f3; }
- .a .badge.and { color: #4338ca; background: #eef2ff; } /* 会签·靛蓝 */
- .a .badge.or { color: #0e7490; background: #ecfeff; } /* 或签·青蓝,避开琥珀冲突 */
- .a .badge.cc { color: #6d28d9; background: #f5f3ff; } /* 抄送·淡紫 */
- .a .badge.end { color: #64748b; background: #f1f5f9; }
- /* —— 方案 B:状态浅底 / 类型描边(推荐视觉区分) —— */
- .b .badge.ok { color: #087f57; background: #e9f9f2; }
- .b .badge.warn { color: #a66b10; background: #fff7e8; }
- .b .badge.danger { color: #b42318; background: #fef3f2; }
- .b .badge.mute { color: #5f7a6d; background: #f1f5f3; }
- .b .badge.and {
- color: #3730a3; background: #fff; border-color: #c7d2fe;
- }
- .b .badge.or {
- color: #0e7490; background: #fff; border-color: #a5f3fc;
- }
- .b .badge.cc {
- color: #6d28d9; background: #fff; border-color: #ddd6fe;
- }
- .b .badge.end {
- color: #64748b; background: #fff; border-color: #e2e8f0;
- }
- /* —— 方案 C:低饱和克制 —— */
- .c .badge.ok { color: #0f766e; background: #f0fdfa; }
- .c .badge.warn { color: #92400e; background: #fffbeb; }
- .c .badge.danger { color: #9f1239; background: #fff1f2; }
- .c .badge.mute { color: #64748b; background: #f8fafc; }
- .c .badge.and { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
- .c .badge.or { color: #475569; background: #f8fafc; border-color: #e2e8f0; }
- .c .badge.cc { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }
- .c .badge.end { color: #94a3b8; background: #f8fafc; }
- .swatch-block { margin-top: 12px; }
- .swatch-block h3 {
- margin: 0 0 8px; font-size: 12px; color: #64748b; font-weight: 600;
- }
- .swatches { display: flex; flex-wrap: wrap; gap: 6px; }
- .legend {
- margin-top: 10px; padding: 8px 10px; border-radius: 8px;
- background: #f8fafc; border: 1px solid #e2e8f0;
- font-size: 11px; color: #64748b;
- }
- .legend strong { color: #334155; }
- .pick-bar {
- position: sticky; bottom: 0; z-index: 5;
- margin-top: 28px; padding: 14px 16px;
- background: rgba(255,255,255,.92);
- backdrop-filter: blur(8px);
- border: 1px solid #e2e8f0; border-radius: 14px;
- box-shadow: 0 -8px 24px rgba(15,23,42,.06);
- display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
- }
- .pick-bar span { font-size: 13px; color: #475569; margin-right: 4px; }
- .pick-bar button {
- appearance: none; border: 1px solid #cbd5e1; background: #fff;
- border-radius: 999px; padding: 8px 14px; font-size: 13px;
- color: #334155; cursor: pointer; font-weight: 600;
- }
- .pick-bar button.rec {
- border-color: #6ee7b7; background: #ecfdf5; color: #047857;
- }
- .pick-bar button:hover { border-color: #0a9f6d; color: #087f57; }
- .pick-note {
- width: 100%; margin: 0; font-size: 12px; color: #94a3b8;
- }
- .palette-table {
- margin-top: 22px;
- background: rgba(255,255,255,.94);
- border: 1px solid #e2e8f0;
- border-radius: 16px;
- padding: 14px 16px 18px;
- overflow-x: auto;
- }
- .palette-table h2 { margin: 0 0 8px; font-size: 15px; }
- .palette-table p { margin: 0 0 12px; font-size: 12px; color: #64748b; }
- table { width: 100%; border-collapse: collapse; font-size: 12px; }
- th, td {
- border-bottom: 1px solid #eef2f7; padding: 8px 10px;
- text-align: left; vertical-align: middle;
- }
- th { color: #64748b; font-weight: 600; background: #f8fafc; }
- code {
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
- font-size: 11px; color: #475569;
- }
- </style>
- </head>
- <body>
- <div class="stage">
- <div class="hero">
- <h1>审批进度 Tag 配色 Demo</h1>
- <p>
- 对比「现状」与 3 套方案。目标:状态语义清晰、会签/或签/抄送不与「待处理」琥珀撞色、
- 整体对齐三墙 Token(品牌绿 / 大麦黄 / 语义色),避免同屏高饱和堆叠。
- </p>
- <div class="goals">
- <strong>设计约束</strong>
- <ul>
- <li>状态 tag:成功绿 / 待办琥珀 / 危险红 / 中性灰(语义优先)</li>
- <li>类型 tag:会签 / 或签 / 抄送 / 结束 — 与状态区分,避免「或签」与「待处理」同色</li>
- <li>同一节点可同时出现「状态 + 类型」两枚 tag</li>
- </ul>
- </div>
- </div>
- <div class="grid">
- <!-- 现状 -->
- <section class="card">
- <h2>现状 <span class="pill now">NOW</span></h2>
- <p class="sub">会签蓝偏艳;或签与待处理同系琥珀;成功色偏 web-admin mint(#10b981)</p>
- <div class="phone now">
- <div class="phone__screen">
- <div class="nav">
- <div class="nav__back">‹</div>
- <div class="nav__title">审批进度 · 现状</div>
- </div>
- <div class="body">
- <div class="progress">
- <div class="progress__title">审批进度</div>
- <div class="step">
- <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">发起申请</span>
- <span class="badge ok">已提交</span>
- </div>
- <div class="person"><strong>张三</strong><span>03-12 09:20</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">部门审批</span>
- <span class="badge ok">已同意</span>
- <span class="badge and">会签</span>
- </div>
- <div class="person"><strong>李四 · 王五</strong><span>03-12 14:01</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot warn"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">分管领导</span>
- <span class="badge warn">待处理</span>
- <span class="badge or">或签</span>
- </div>
- <div class="person"><strong>赵六 / 钱七</strong><span>—</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot mute"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">相关知会</span>
- <span class="badge mute">未到达</span>
- <span class="badge cc">抄送</span>
- </div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot mute"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">流程结束</span>
- <span class="badge mute">已结束</span>
- <span class="badge end">结束</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="swatch-block">
- <h3>全量色板</h3>
- <div class="swatches">
- <span class="badge ok">已同意</span>
- <span class="badge ok">已完成</span>
- <span class="badge ok">已提交</span>
- <span class="badge warn">待处理</span>
- <span class="badge warn">进行中</span>
- <span class="badge danger">已拒绝</span>
- <span class="badge danger">已撤销</span>
- <span class="badge danger">已打回</span>
- <span class="badge mute">已结束</span>
- <span class="badge mute">未到达</span>
- <span class="badge mute">已转交</span>
- <span class="badge and">会签</span>
- <span class="badge or">或签</span>
- <span class="badge cc">抄送</span>
- <span class="badge end">结束</span>
- </div>
- </div>
- <div class="legend">问题:<strong>或签 ≈ 待处理</strong> 同屏难辨;会签蓝过亮;与三墙主色链不完全一致。</div>
- </section>
- <!-- 方案 A -->
- <section class="card">
- <h2>方案 A · 浅底实心 <span class="pill alt">ALT</span></h2>
- <p class="sub">状态对齐三墙语义色;类型用「靛蓝 / 青蓝 / 淡紫」拉开色相,全部浅底实心</p>
- <div class="phone a">
- <div class="phone__screen">
- <div class="nav">
- <div class="nav__back">‹</div>
- <div class="nav__title">审批进度 · 方案 A</div>
- </div>
- <div class="body">
- <div class="progress">
- <div class="progress__title">审批进度</div>
- <div class="step">
- <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">发起申请</span>
- <span class="badge ok">已提交</span>
- </div>
- <div class="person"><strong>张三</strong><span>03-12 09:20</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">部门审批</span>
- <span class="badge ok">已同意</span>
- <span class="badge and">会签</span>
- </div>
- <div class="person"><strong>李四 · 王五</strong><span>03-12 14:01</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot warn"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">分管领导</span>
- <span class="badge warn">待处理</span>
- <span class="badge or">或签</span>
- </div>
- <div class="person"><strong>赵六 / 钱七</strong><span>—</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot mute"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">相关知会</span>
- <span class="badge mute">未到达</span>
- <span class="badge cc">抄送</span>
- </div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot mute"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">流程结束</span>
- <span class="badge mute">已结束</span>
- <span class="badge end">结束</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="swatch-block">
- <h3>全量色板</h3>
- <div class="swatches">
- <span class="badge ok">已同意</span>
- <span class="badge ok">已完成</span>
- <span class="badge ok">已提交</span>
- <span class="badge warn">待处理</span>
- <span class="badge warn">进行中</span>
- <span class="badge danger">已拒绝</span>
- <span class="badge danger">已撤销</span>
- <span class="badge danger">已打回</span>
- <span class="badge mute">已结束</span>
- <span class="badge mute">未到达</span>
- <span class="badge mute">已转交</span>
- <span class="badge and">会签</span>
- <span class="badge or">或签</span>
- <span class="badge cc">抄送</span>
- <span class="badge end">结束</span>
- </div>
- </div>
- <div class="legend">优点:实现简单、与现状结构一致。注意:类型仍是实心,同排两枚 tag 略抢眼。</div>
- </section>
- <!-- 方案 B -->
- <section class="card">
- <h2>方案 B · 状态实心 / 类型描边 <span class="pill rec">推荐</span></h2>
- <p class="sub">状态保留浅底语义;类型改为白底描边,一眼区分「结果态」与「节点属性」</p>
- <div class="phone b">
- <div class="phone__screen">
- <div class="nav">
- <div class="nav__back">‹</div>
- <div class="nav__title">审批进度 · 方案 B</div>
- </div>
- <div class="body">
- <div class="progress">
- <div class="progress__title">审批进度</div>
- <div class="step">
- <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">发起申请</span>
- <span class="badge ok">已提交</span>
- </div>
- <div class="person"><strong>张三</strong><span>03-12 09:20</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">部门审批</span>
- <span class="badge ok">已同意</span>
- <span class="badge and">会签</span>
- </div>
- <div class="person"><strong>李四 · 王五</strong><span>03-12 14:01</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot warn"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">分管领导</span>
- <span class="badge warn">待处理</span>
- <span class="badge or">或签</span>
- </div>
- <div class="person"><strong>赵六 / 钱七</strong><span>—</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot mute"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">相关知会</span>
- <span class="badge mute">未到达</span>
- <span class="badge cc">抄送</span>
- </div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot mute"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">流程结束</span>
- <span class="badge mute">已结束</span>
- <span class="badge end">结束</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="swatch-block">
- <h3>全量色板</h3>
- <div class="swatches">
- <span class="badge ok">已同意</span>
- <span class="badge ok">已完成</span>
- <span class="badge ok">已提交</span>
- <span class="badge warn">待处理</span>
- <span class="badge warn">进行中</span>
- <span class="badge danger">已拒绝</span>
- <span class="badge danger">已撤销</span>
- <span class="badge danger">已打回</span>
- <span class="badge mute">已结束</span>
- <span class="badge mute">未到达</span>
- <span class="badge mute">已转交</span>
- <span class="badge and">会签</span>
- <span class="badge or">或签</span>
- <span class="badge cc">抄送</span>
- <span class="badge end">结束</span>
- </div>
- </div>
- <div class="legend">推荐理由:状态更抢眼、类型更克制;「待处理 + 或签」同排不再撞色糊成一团。</div>
- </section>
- <!-- 方案 C -->
- <section class="card">
- <h2>方案 C · 低饱和克制 <span class="pill alt">ALT</span></h2>
- <p class="sub">类型几乎中性灰描边,仅状态保留语义色;最克制,但会签/或签/抄送辨识变弱</p>
- <div class="phone c">
- <div class="phone__screen">
- <div class="nav">
- <div class="nav__back">‹</div>
- <div class="nav__title">审批进度 · 方案 C</div>
- </div>
- <div class="body">
- <div class="progress">
- <div class="progress__title">审批进度</div>
- <div class="step">
- <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">发起申请</span>
- <span class="badge ok">已提交</span>
- </div>
- <div class="person"><strong>张三</strong><span>03-12 09:20</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">部门审批</span>
- <span class="badge ok">已同意</span>
- <span class="badge and">会签</span>
- </div>
- <div class="person"><strong>李四 · 王五</strong><span>03-12 14:01</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot warn"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">分管领导</span>
- <span class="badge warn">待处理</span>
- <span class="badge or">或签</span>
- </div>
- <div class="person"><strong>赵六 / 钱七</strong><span>—</span></div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot mute"></div><div class="line"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">相关知会</span>
- <span class="badge mute">未到达</span>
- <span class="badge cc">抄送</span>
- </div>
- </div>
- </div>
- <div class="step">
- <div class="rail"><div class="dot mute"></div></div>
- <div class="step-card">
- <div class="row">
- <span class="name">流程结束</span>
- <span class="badge mute">已结束</span>
- <span class="badge end">结束</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="swatch-block">
- <h3>全量色板</h3>
- <div class="swatches">
- <span class="badge ok">已同意</span>
- <span class="badge ok">已完成</span>
- <span class="badge ok">已提交</span>
- <span class="badge warn">待处理</span>
- <span class="badge warn">进行中</span>
- <span class="badge danger">已拒绝</span>
- <span class="badge danger">已撤销</span>
- <span class="badge danger">已打回</span>
- <span class="badge mute">已结束</span>
- <span class="badge mute">未到达</span>
- <span class="badge mute">已转交</span>
- <span class="badge and">会签</span>
- <span class="badge or">或签</span>
- <span class="badge cc">抄送</span>
- <span class="badge end">结束</span>
- </div>
- </div>
- <div class="legend">适合极简审美;代价是类型 tag 几乎靠文字区分,色相辨识弱。</div>
- </section>
- </div>
- <section class="palette-table">
- <h2>方案 B 色值明细(推荐落地稿)</h2>
- <p>状态 = 浅底实心;类型 = 白底 + 1px 描边。字号 11px / 圆角 4px / padding 1×6,与现状结构一致。</p>
- <table>
- <thead>
- <tr>
- <th>类别</th>
- <th>文案</th>
- <th>class</th>
- <th>文字色</th>
- <th>背景</th>
- <th>边框</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>状态</td><td>已同意 / 已完成 / 已提交</td><td><code>ok</code></td>
- <td><code>#087f57</code></td><td><code>#e9f9f2</code></td><td>—</td>
- </tr>
- <tr>
- <td>状态</td><td>待处理 / 进行中</td><td><code>warn</code></td>
- <td><code>#a66b10</code></td><td><code>#fff7e8</code></td><td>—</td>
- </tr>
- <tr>
- <td>状态</td><td>已拒绝 / 已撤销 / 已打回</td><td><code>danger</code></td>
- <td><code>#b42318</code></td><td><code>#fef3f2</code></td><td>—</td>
- </tr>
- <tr>
- <td>状态</td><td>未到达 / 已转交 / 已结束</td><td><code>mute</code></td>
- <td><code>#5f7a6d</code></td><td><code>#f1f5f3</code></td><td>—</td>
- </tr>
- <tr>
- <td>类型</td><td>会签</td><td><code>and</code></td>
- <td><code>#3730a3</code></td><td><code>#fff</code></td><td><code>#c7d2fe</code></td>
- </tr>
- <tr>
- <td>类型</td><td>或签</td><td><code>or</code></td>
- <td><code>#0e7490</code></td><td><code>#fff</code></td><td><code>#a5f3fc</code></td>
- </tr>
- <tr>
- <td>类型</td><td>抄送</td><td><code>cc</code></td>
- <td><code>#6d28d9</code></td><td><code>#fff</code></td><td><code>#ddd6fe</code></td>
- </tr>
- <tr>
- <td>类型</td><td>结束</td><td><code>end</code></td>
- <td><code>#64748b</code></td><td><code>#fff</code></td><td><code>#e2e8f0</code></td>
- </tr>
- </tbody>
- </table>
- </section>
- <div class="pick-bar">
- <span>选一套方案继续细化:</span>
- <button type="button" data-choice="A">方案 A 浅底实心</button>
- <button type="button" class="rec" data-choice="B">方案 B 双轨(推荐)</button>
- <button type="button" data-choice="C">方案 C 低饱和</button>
- <p class="pick-note" id="pickNote">直接回复「选 B」或点按钮即可。也可说「A + 会签改成某某色」微调。</p>
- </div>
- </div>
- <script>
- document.querySelectorAll('.pick-bar button').forEach((btn) => {
- btn.addEventListener('click', () => {
- const choice = btn.getAttribute('data-choice')
- const note = document.getElementById('pickNote')
- note.textContent = '已记录偏好:方案 ' + choice + '。请回到对话里告诉我,或直接说「就用 ' + choice + '」。'
- note.style.color = '#047857'
- })
- })
- </script>
- </body>
- </html>
|