Files
zkxw/mobile-ui/zkxw-mobile-oa-progress-badge-demo.html
T
2026-08-13 14:31:57 +08:00

695 lines
30 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>