695 lines
30 KiB
HTML
695 lines
30 KiB
HTML
<!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>
|