zkxw-mobile-oa-progress-badge-demo.html 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  6. <title>mobile-oa-h5 · 审批进度 Tag 配色 Demo</title>
  7. <style>
  8. :root {
  9. --brand: #0a9f6d;
  10. --brand-dark: #087f57;
  11. --brand-soft: #e9f9f2;
  12. --page-bg: #f5f8f7;
  13. --text: #1f2a26;
  14. --text-muted: #6b7b74;
  15. --border: #dcebe4;
  16. }
  17. * { box-sizing: border-box; }
  18. body {
  19. margin: 0;
  20. font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", -apple-system, system-ui, sans-serif;
  21. color: var(--text);
  22. background:
  23. radial-gradient(900px 420px at 8% -8%, rgba(10, 159, 109, 0.12), transparent 55%),
  24. radial-gradient(700px 380px at 92% 0%, rgba(214, 163, 67, 0.1), transparent 50%),
  25. linear-gradient(180deg, #f8fffc 0%, #f4f7fb 50%, #f7f8fa 100%);
  26. line-height: 1.45;
  27. }
  28. .stage { max-width: 1280px; margin: 0 auto; padding: 28px 16px 64px; }
  29. .hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 720; }
  30. .hero p { margin: 0; color: #64748b; font-size: 14px; max-width: 900px; }
  31. .goals {
  32. margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  33. background: #ecfdf5; border: 1px solid #a7f3d0;
  34. font-size: 13px; color: #065f46;
  35. }
  36. .goals ul { margin: 6px 0 0; padding-left: 18px; }
  37. .grid {
  38. margin-top: 22px;
  39. display: grid;
  40. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  41. gap: 18px;
  42. align-items: start;
  43. }
  44. .card {
  45. background: rgba(255,255,255,.94);
  46. border: 1px solid #e2e8f0;
  47. border-radius: 16px;
  48. padding: 14px;
  49. box-shadow: 0 10px 28px rgba(15,23,42,.05);
  50. }
  51. .card h2 {
  52. margin: 0 0 4px;
  53. font-size: 15px;
  54. display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  55. }
  56. .card .sub { margin: 0 0 12px; font-size: 12px; color: #64748b; }
  57. .pill {
  58. display: inline-block; padding: 2px 8px; border-radius: 999px;
  59. font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  60. }
  61. .pill.now { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
  62. .pill.rec { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
  63. .pill.alt { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
  64. .phone {
  65. width: 100%; max-width: 360px; margin: 0 auto;
  66. border-radius: 28px; border: 1px solid #cbd5e1; background: #0f172a;
  67. padding: 10px; box-shadow: 0 18px 40px rgba(15,23,42,.12);
  68. }
  69. .phone__screen {
  70. border-radius: 20px; overflow: hidden; background: var(--page-bg);
  71. min-height: 420px; display: flex; flex-direction: column;
  72. }
  73. .nav {
  74. display: flex; align-items: center; gap: 8px; min-height: 48px;
  75. padding: 10px 12px;
  76. background: linear-gradient(180deg, #d1fae5 0%, #ecfdf5 100%);
  77. border-bottom: 1px solid #bbf7d0;
  78. }
  79. .nav__back {
  80. width: 28px; height: 28px; border-radius: 999px;
  81. display: grid; place-items: center;
  82. color: var(--brand-dark); font-weight: 700; font-size: 16px;
  83. background: rgba(255,255,255,.55);
  84. }
  85. .nav__title { flex: 1; font-size: 15px; font-weight: 700; color: #064e3b; }
  86. .body { padding: 12px; display: grid; gap: 10px; }
  87. .progress {
  88. background: #fff; border: 1px solid var(--border);
  89. border-radius: 12px; padding: 12px;
  90. }
  91. .progress__title {
  92. margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #0f291e;
  93. }
  94. .step { display: flex; gap: 10px; min-height: 52px; }
  95. .rail { display: flex; flex-direction: column; align-items: center; width: 16px; }
  96. .dot {
  97. width: 10px; height: 10px; margin-top: 6px; border-radius: 50%;
  98. background: #94a3b8;
  99. }
  100. .dot.ok { background: #189b65; }
  101. .dot.warn { background: #cf8a19; }
  102. .dot.danger { background: #d14343; }
  103. .dot.mute { background: #94a3b8; }
  104. .line { flex: 1; width: 2px; margin: 4px 0 0; background: #e2e8f0; min-height: 28px; }
  105. .step-card { flex: 1; min-width: 0; padding-bottom: 12px; }
  106. .row {
  107. display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  108. }
  109. .name { font-size: 14px; font-weight: 600; color: #0f291e; }
  110. .person {
  111. margin-top: 6px; font-size: 12px; color: #5f7a6d;
  112. display: flex; justify-content: space-between; gap: 8px;
  113. }
  114. .person strong { color: #1f2a26; font-weight: 600; }
  115. /* ===== badge base ===== */
  116. .badge {
  117. flex-shrink: 0;
  118. padding: 1px 6px;
  119. border-radius: 4px;
  120. font-size: 11px;
  121. font-weight: 600;
  122. line-height: 1.45;
  123. border: 1px solid transparent;
  124. }
  125. /* —— 现状 —— */
  126. .now .badge.ok { color: #10b981; background: #ecfdf5; }
  127. .now .badge.warn { color: #d97706; background: #fffbeb; }
  128. .now .badge.danger { color: #ef4444; background: #fef2f2; }
  129. .now .badge.mute { color: #5f7a6d; background: #f1f5f9; }
  130. .now .badge.and { color: #2563eb; background: #eff6ff; }
  131. .now .badge.or { color: #d97706; background: #fff7ed; }
  132. .now .badge.cc { color: #0891b2; background: #ecfeff; }
  133. .now .badge.end { color: #5f7a6d; background: #f1f5f9; }
  134. /* —— 方案 A:三墙语义 + 类型独立色相(浅底实心) —— */
  135. .a .badge.ok { color: #087f57; background: #e9f9f2; }
  136. .a .badge.warn { color: #a66b10; background: #fff7e8; }
  137. .a .badge.danger { color: #b42318; background: #fef3f2; }
  138. .a .badge.mute { color: #5f7a6d; background: #f1f5f3; }
  139. .a .badge.and { color: #4338ca; background: #eef2ff; } /* 会签·靛蓝 */
  140. .a .badge.or { color: #0e7490; background: #ecfeff; } /* 或签·青蓝,避开琥珀冲突 */
  141. .a .badge.cc { color: #6d28d9; background: #f5f3ff; } /* 抄送·淡紫 */
  142. .a .badge.end { color: #64748b; background: #f1f5f9; }
  143. /* —— 方案 B:状态浅底 / 类型描边(推荐视觉区分) —— */
  144. .b .badge.ok { color: #087f57; background: #e9f9f2; }
  145. .b .badge.warn { color: #a66b10; background: #fff7e8; }
  146. .b .badge.danger { color: #b42318; background: #fef3f2; }
  147. .b .badge.mute { color: #5f7a6d; background: #f1f5f3; }
  148. .b .badge.and {
  149. color: #3730a3; background: #fff; border-color: #c7d2fe;
  150. }
  151. .b .badge.or {
  152. color: #0e7490; background: #fff; border-color: #a5f3fc;
  153. }
  154. .b .badge.cc {
  155. color: #6d28d9; background: #fff; border-color: #ddd6fe;
  156. }
  157. .b .badge.end {
  158. color: #64748b; background: #fff; border-color: #e2e8f0;
  159. }
  160. /* —— 方案 C:低饱和克制 —— */
  161. .c .badge.ok { color: #0f766e; background: #f0fdfa; }
  162. .c .badge.warn { color: #92400e; background: #fffbeb; }
  163. .c .badge.danger { color: #9f1239; background: #fff1f2; }
  164. .c .badge.mute { color: #64748b; background: #f8fafc; }
  165. .c .badge.and { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
  166. .c .badge.or { color: #475569; background: #f8fafc; border-color: #e2e8f0; }
  167. .c .badge.cc { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }
  168. .c .badge.end { color: #94a3b8; background: #f8fafc; }
  169. .swatch-block { margin-top: 12px; }
  170. .swatch-block h3 {
  171. margin: 0 0 8px; font-size: 12px; color: #64748b; font-weight: 600;
  172. }
  173. .swatches { display: flex; flex-wrap: wrap; gap: 6px; }
  174. .legend {
  175. margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  176. background: #f8fafc; border: 1px solid #e2e8f0;
  177. font-size: 11px; color: #64748b;
  178. }
  179. .legend strong { color: #334155; }
  180. .pick-bar {
  181. position: sticky; bottom: 0; z-index: 5;
  182. margin-top: 28px; padding: 14px 16px;
  183. background: rgba(255,255,255,.92);
  184. backdrop-filter: blur(8px);
  185. border: 1px solid #e2e8f0; border-radius: 14px;
  186. box-shadow: 0 -8px 24px rgba(15,23,42,.06);
  187. display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  188. }
  189. .pick-bar span { font-size: 13px; color: #475569; margin-right: 4px; }
  190. .pick-bar button {
  191. appearance: none; border: 1px solid #cbd5e1; background: #fff;
  192. border-radius: 999px; padding: 8px 14px; font-size: 13px;
  193. color: #334155; cursor: pointer; font-weight: 600;
  194. }
  195. .pick-bar button.rec {
  196. border-color: #6ee7b7; background: #ecfdf5; color: #047857;
  197. }
  198. .pick-bar button:hover { border-color: #0a9f6d; color: #087f57; }
  199. .pick-note {
  200. width: 100%; margin: 0; font-size: 12px; color: #94a3b8;
  201. }
  202. .palette-table {
  203. margin-top: 22px;
  204. background: rgba(255,255,255,.94);
  205. border: 1px solid #e2e8f0;
  206. border-radius: 16px;
  207. padding: 14px 16px 18px;
  208. overflow-x: auto;
  209. }
  210. .palette-table h2 { margin: 0 0 8px; font-size: 15px; }
  211. .palette-table p { margin: 0 0 12px; font-size: 12px; color: #64748b; }
  212. table { width: 100%; border-collapse: collapse; font-size: 12px; }
  213. th, td {
  214. border-bottom: 1px solid #eef2f7; padding: 8px 10px;
  215. text-align: left; vertical-align: middle;
  216. }
  217. th { color: #64748b; font-weight: 600; background: #f8fafc; }
  218. code {
  219. font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  220. font-size: 11px; color: #475569;
  221. }
  222. </style>
  223. </head>
  224. <body>
  225. <div class="stage">
  226. <div class="hero">
  227. <h1>审批进度 Tag 配色 Demo</h1>
  228. <p>
  229. 对比「现状」与 3 套方案。目标:状态语义清晰、会签/或签/抄送不与「待处理」琥珀撞色、
  230. 整体对齐三墙 Token(品牌绿 / 大麦黄 / 语义色),避免同屏高饱和堆叠。
  231. </p>
  232. <div class="goals">
  233. <strong>设计约束</strong>
  234. <ul>
  235. <li>状态 tag:成功绿 / 待办琥珀 / 危险红 / 中性灰(语义优先)</li>
  236. <li>类型 tag:会签 / 或签 / 抄送 / 结束 — 与状态区分,避免「或签」与「待处理」同色</li>
  237. <li>同一节点可同时出现「状态 + 类型」两枚 tag</li>
  238. </ul>
  239. </div>
  240. </div>
  241. <div class="grid">
  242. <!-- 现状 -->
  243. <section class="card">
  244. <h2>现状 <span class="pill now">NOW</span></h2>
  245. <p class="sub">会签蓝偏艳;或签与待处理同系琥珀;成功色偏 web-admin mint(#10b981)</p>
  246. <div class="phone now">
  247. <div class="phone__screen">
  248. <div class="nav">
  249. <div class="nav__back">‹</div>
  250. <div class="nav__title">审批进度 · 现状</div>
  251. </div>
  252. <div class="body">
  253. <div class="progress">
  254. <div class="progress__title">审批进度</div>
  255. <div class="step">
  256. <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
  257. <div class="step-card">
  258. <div class="row">
  259. <span class="name">发起申请</span>
  260. <span class="badge ok">已提交</span>
  261. </div>
  262. <div class="person"><strong>张三</strong><span>03-12 09:20</span></div>
  263. </div>
  264. </div>
  265. <div class="step">
  266. <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
  267. <div class="step-card">
  268. <div class="row">
  269. <span class="name">部门审批</span>
  270. <span class="badge ok">已同意</span>
  271. <span class="badge and">会签</span>
  272. </div>
  273. <div class="person"><strong>李四 · 王五</strong><span>03-12 14:01</span></div>
  274. </div>
  275. </div>
  276. <div class="step">
  277. <div class="rail"><div class="dot warn"></div><div class="line"></div></div>
  278. <div class="step-card">
  279. <div class="row">
  280. <span class="name">分管领导</span>
  281. <span class="badge warn">待处理</span>
  282. <span class="badge or">或签</span>
  283. </div>
  284. <div class="person"><strong>赵六 / 钱七</strong><span>—</span></div>
  285. </div>
  286. </div>
  287. <div class="step">
  288. <div class="rail"><div class="dot mute"></div><div class="line"></div></div>
  289. <div class="step-card">
  290. <div class="row">
  291. <span class="name">相关知会</span>
  292. <span class="badge mute">未到达</span>
  293. <span class="badge cc">抄送</span>
  294. </div>
  295. </div>
  296. </div>
  297. <div class="step">
  298. <div class="rail"><div class="dot mute"></div></div>
  299. <div class="step-card">
  300. <div class="row">
  301. <span class="name">流程结束</span>
  302. <span class="badge mute">已结束</span>
  303. <span class="badge end">结束</span>
  304. </div>
  305. </div>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  311. <div class="swatch-block">
  312. <h3>全量色板</h3>
  313. <div class="swatches">
  314. <span class="badge ok">已同意</span>
  315. <span class="badge ok">已完成</span>
  316. <span class="badge ok">已提交</span>
  317. <span class="badge warn">待处理</span>
  318. <span class="badge warn">进行中</span>
  319. <span class="badge danger">已拒绝</span>
  320. <span class="badge danger">已撤销</span>
  321. <span class="badge danger">已打回</span>
  322. <span class="badge mute">已结束</span>
  323. <span class="badge mute">未到达</span>
  324. <span class="badge mute">已转交</span>
  325. <span class="badge and">会签</span>
  326. <span class="badge or">或签</span>
  327. <span class="badge cc">抄送</span>
  328. <span class="badge end">结束</span>
  329. </div>
  330. </div>
  331. <div class="legend">问题:<strong>或签 ≈ 待处理</strong> 同屏难辨;会签蓝过亮;与三墙主色链不完全一致。</div>
  332. </section>
  333. <!-- 方案 A -->
  334. <section class="card">
  335. <h2>方案 A · 浅底实心 <span class="pill alt">ALT</span></h2>
  336. <p class="sub">状态对齐三墙语义色;类型用「靛蓝 / 青蓝 / 淡紫」拉开色相,全部浅底实心</p>
  337. <div class="phone a">
  338. <div class="phone__screen">
  339. <div class="nav">
  340. <div class="nav__back">‹</div>
  341. <div class="nav__title">审批进度 · 方案 A</div>
  342. </div>
  343. <div class="body">
  344. <div class="progress">
  345. <div class="progress__title">审批进度</div>
  346. <div class="step">
  347. <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
  348. <div class="step-card">
  349. <div class="row">
  350. <span class="name">发起申请</span>
  351. <span class="badge ok">已提交</span>
  352. </div>
  353. <div class="person"><strong>张三</strong><span>03-12 09:20</span></div>
  354. </div>
  355. </div>
  356. <div class="step">
  357. <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
  358. <div class="step-card">
  359. <div class="row">
  360. <span class="name">部门审批</span>
  361. <span class="badge ok">已同意</span>
  362. <span class="badge and">会签</span>
  363. </div>
  364. <div class="person"><strong>李四 · 王五</strong><span>03-12 14:01</span></div>
  365. </div>
  366. </div>
  367. <div class="step">
  368. <div class="rail"><div class="dot warn"></div><div class="line"></div></div>
  369. <div class="step-card">
  370. <div class="row">
  371. <span class="name">分管领导</span>
  372. <span class="badge warn">待处理</span>
  373. <span class="badge or">或签</span>
  374. </div>
  375. <div class="person"><strong>赵六 / 钱七</strong><span>—</span></div>
  376. </div>
  377. </div>
  378. <div class="step">
  379. <div class="rail"><div class="dot mute"></div><div class="line"></div></div>
  380. <div class="step-card">
  381. <div class="row">
  382. <span class="name">相关知会</span>
  383. <span class="badge mute">未到达</span>
  384. <span class="badge cc">抄送</span>
  385. </div>
  386. </div>
  387. </div>
  388. <div class="step">
  389. <div class="rail"><div class="dot mute"></div></div>
  390. <div class="step-card">
  391. <div class="row">
  392. <span class="name">流程结束</span>
  393. <span class="badge mute">已结束</span>
  394. <span class="badge end">结束</span>
  395. </div>
  396. </div>
  397. </div>
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. <div class="swatch-block">
  403. <h3>全量色板</h3>
  404. <div class="swatches">
  405. <span class="badge ok">已同意</span>
  406. <span class="badge ok">已完成</span>
  407. <span class="badge ok">已提交</span>
  408. <span class="badge warn">待处理</span>
  409. <span class="badge warn">进行中</span>
  410. <span class="badge danger">已拒绝</span>
  411. <span class="badge danger">已撤销</span>
  412. <span class="badge danger">已打回</span>
  413. <span class="badge mute">已结束</span>
  414. <span class="badge mute">未到达</span>
  415. <span class="badge mute">已转交</span>
  416. <span class="badge and">会签</span>
  417. <span class="badge or">或签</span>
  418. <span class="badge cc">抄送</span>
  419. <span class="badge end">结束</span>
  420. </div>
  421. </div>
  422. <div class="legend">优点:实现简单、与现状结构一致。注意:类型仍是实心,同排两枚 tag 略抢眼。</div>
  423. </section>
  424. <!-- 方案 B -->
  425. <section class="card">
  426. <h2>方案 B · 状态实心 / 类型描边 <span class="pill rec">推荐</span></h2>
  427. <p class="sub">状态保留浅底语义;类型改为白底描边,一眼区分「结果态」与「节点属性」</p>
  428. <div class="phone b">
  429. <div class="phone__screen">
  430. <div class="nav">
  431. <div class="nav__back">‹</div>
  432. <div class="nav__title">审批进度 · 方案 B</div>
  433. </div>
  434. <div class="body">
  435. <div class="progress">
  436. <div class="progress__title">审批进度</div>
  437. <div class="step">
  438. <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
  439. <div class="step-card">
  440. <div class="row">
  441. <span class="name">发起申请</span>
  442. <span class="badge ok">已提交</span>
  443. </div>
  444. <div class="person"><strong>张三</strong><span>03-12 09:20</span></div>
  445. </div>
  446. </div>
  447. <div class="step">
  448. <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
  449. <div class="step-card">
  450. <div class="row">
  451. <span class="name">部门审批</span>
  452. <span class="badge ok">已同意</span>
  453. <span class="badge and">会签</span>
  454. </div>
  455. <div class="person"><strong>李四 · 王五</strong><span>03-12 14:01</span></div>
  456. </div>
  457. </div>
  458. <div class="step">
  459. <div class="rail"><div class="dot warn"></div><div class="line"></div></div>
  460. <div class="step-card">
  461. <div class="row">
  462. <span class="name">分管领导</span>
  463. <span class="badge warn">待处理</span>
  464. <span class="badge or">或签</span>
  465. </div>
  466. <div class="person"><strong>赵六 / 钱七</strong><span>—</span></div>
  467. </div>
  468. </div>
  469. <div class="step">
  470. <div class="rail"><div class="dot mute"></div><div class="line"></div></div>
  471. <div class="step-card">
  472. <div class="row">
  473. <span class="name">相关知会</span>
  474. <span class="badge mute">未到达</span>
  475. <span class="badge cc">抄送</span>
  476. </div>
  477. </div>
  478. </div>
  479. <div class="step">
  480. <div class="rail"><div class="dot mute"></div></div>
  481. <div class="step-card">
  482. <div class="row">
  483. <span class="name">流程结束</span>
  484. <span class="badge mute">已结束</span>
  485. <span class="badge end">结束</span>
  486. </div>
  487. </div>
  488. </div>
  489. </div>
  490. </div>
  491. </div>
  492. </div>
  493. <div class="swatch-block">
  494. <h3>全量色板</h3>
  495. <div class="swatches">
  496. <span class="badge ok">已同意</span>
  497. <span class="badge ok">已完成</span>
  498. <span class="badge ok">已提交</span>
  499. <span class="badge warn">待处理</span>
  500. <span class="badge warn">进行中</span>
  501. <span class="badge danger">已拒绝</span>
  502. <span class="badge danger">已撤销</span>
  503. <span class="badge danger">已打回</span>
  504. <span class="badge mute">已结束</span>
  505. <span class="badge mute">未到达</span>
  506. <span class="badge mute">已转交</span>
  507. <span class="badge and">会签</span>
  508. <span class="badge or">或签</span>
  509. <span class="badge cc">抄送</span>
  510. <span class="badge end">结束</span>
  511. </div>
  512. </div>
  513. <div class="legend">推荐理由:状态更抢眼、类型更克制;「待处理 + 或签」同排不再撞色糊成一团。</div>
  514. </section>
  515. <!-- 方案 C -->
  516. <section class="card">
  517. <h2>方案 C · 低饱和克制 <span class="pill alt">ALT</span></h2>
  518. <p class="sub">类型几乎中性灰描边,仅状态保留语义色;最克制,但会签/或签/抄送辨识变弱</p>
  519. <div class="phone c">
  520. <div class="phone__screen">
  521. <div class="nav">
  522. <div class="nav__back">‹</div>
  523. <div class="nav__title">审批进度 · 方案 C</div>
  524. </div>
  525. <div class="body">
  526. <div class="progress">
  527. <div class="progress__title">审批进度</div>
  528. <div class="step">
  529. <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
  530. <div class="step-card">
  531. <div class="row">
  532. <span class="name">发起申请</span>
  533. <span class="badge ok">已提交</span>
  534. </div>
  535. <div class="person"><strong>张三</strong><span>03-12 09:20</span></div>
  536. </div>
  537. </div>
  538. <div class="step">
  539. <div class="rail"><div class="dot ok"></div><div class="line"></div></div>
  540. <div class="step-card">
  541. <div class="row">
  542. <span class="name">部门审批</span>
  543. <span class="badge ok">已同意</span>
  544. <span class="badge and">会签</span>
  545. </div>
  546. <div class="person"><strong>李四 · 王五</strong><span>03-12 14:01</span></div>
  547. </div>
  548. </div>
  549. <div class="step">
  550. <div class="rail"><div class="dot warn"></div><div class="line"></div></div>
  551. <div class="step-card">
  552. <div class="row">
  553. <span class="name">分管领导</span>
  554. <span class="badge warn">待处理</span>
  555. <span class="badge or">或签</span>
  556. </div>
  557. <div class="person"><strong>赵六 / 钱七</strong><span>—</span></div>
  558. </div>
  559. </div>
  560. <div class="step">
  561. <div class="rail"><div class="dot mute"></div><div class="line"></div></div>
  562. <div class="step-card">
  563. <div class="row">
  564. <span class="name">相关知会</span>
  565. <span class="badge mute">未到达</span>
  566. <span class="badge cc">抄送</span>
  567. </div>
  568. </div>
  569. </div>
  570. <div class="step">
  571. <div class="rail"><div class="dot mute"></div></div>
  572. <div class="step-card">
  573. <div class="row">
  574. <span class="name">流程结束</span>
  575. <span class="badge mute">已结束</span>
  576. <span class="badge end">结束</span>
  577. </div>
  578. </div>
  579. </div>
  580. </div>
  581. </div>
  582. </div>
  583. </div>
  584. <div class="swatch-block">
  585. <h3>全量色板</h3>
  586. <div class="swatches">
  587. <span class="badge ok">已同意</span>
  588. <span class="badge ok">已完成</span>
  589. <span class="badge ok">已提交</span>
  590. <span class="badge warn">待处理</span>
  591. <span class="badge warn">进行中</span>
  592. <span class="badge danger">已拒绝</span>
  593. <span class="badge danger">已撤销</span>
  594. <span class="badge danger">已打回</span>
  595. <span class="badge mute">已结束</span>
  596. <span class="badge mute">未到达</span>
  597. <span class="badge mute">已转交</span>
  598. <span class="badge and">会签</span>
  599. <span class="badge or">或签</span>
  600. <span class="badge cc">抄送</span>
  601. <span class="badge end">结束</span>
  602. </div>
  603. </div>
  604. <div class="legend">适合极简审美;代价是类型 tag 几乎靠文字区分,色相辨识弱。</div>
  605. </section>
  606. </div>
  607. <section class="palette-table">
  608. <h2>方案 B 色值明细(推荐落地稿)</h2>
  609. <p>状态 = 浅底实心;类型 = 白底 + 1px 描边。字号 11px / 圆角 4px / padding 1×6,与现状结构一致。</p>
  610. <table>
  611. <thead>
  612. <tr>
  613. <th>类别</th>
  614. <th>文案</th>
  615. <th>class</th>
  616. <th>文字色</th>
  617. <th>背景</th>
  618. <th>边框</th>
  619. </tr>
  620. </thead>
  621. <tbody>
  622. <tr>
  623. <td>状态</td><td>已同意 / 已完成 / 已提交</td><td><code>ok</code></td>
  624. <td><code>#087f57</code></td><td><code>#e9f9f2</code></td><td>—</td>
  625. </tr>
  626. <tr>
  627. <td>状态</td><td>待处理 / 进行中</td><td><code>warn</code></td>
  628. <td><code>#a66b10</code></td><td><code>#fff7e8</code></td><td>—</td>
  629. </tr>
  630. <tr>
  631. <td>状态</td><td>已拒绝 / 已撤销 / 已打回</td><td><code>danger</code></td>
  632. <td><code>#b42318</code></td><td><code>#fef3f2</code></td><td>—</td>
  633. </tr>
  634. <tr>
  635. <td>状态</td><td>未到达 / 已转交 / 已结束</td><td><code>mute</code></td>
  636. <td><code>#5f7a6d</code></td><td><code>#f1f5f3</code></td><td>—</td>
  637. </tr>
  638. <tr>
  639. <td>类型</td><td>会签</td><td><code>and</code></td>
  640. <td><code>#3730a3</code></td><td><code>#fff</code></td><td><code>#c7d2fe</code></td>
  641. </tr>
  642. <tr>
  643. <td>类型</td><td>或签</td><td><code>or</code></td>
  644. <td><code>#0e7490</code></td><td><code>#fff</code></td><td><code>#a5f3fc</code></td>
  645. </tr>
  646. <tr>
  647. <td>类型</td><td>抄送</td><td><code>cc</code></td>
  648. <td><code>#6d28d9</code></td><td><code>#fff</code></td><td><code>#ddd6fe</code></td>
  649. </tr>
  650. <tr>
  651. <td>类型</td><td>结束</td><td><code>end</code></td>
  652. <td><code>#64748b</code></td><td><code>#fff</code></td><td><code>#e2e8f0</code></td>
  653. </tr>
  654. </tbody>
  655. </table>
  656. </section>
  657. <div class="pick-bar">
  658. <span>选一套方案继续细化:</span>
  659. <button type="button" data-choice="A">方案 A 浅底实心</button>
  660. <button type="button" class="rec" data-choice="B">方案 B 双轨(推荐)</button>
  661. <button type="button" data-choice="C">方案 C 低饱和</button>
  662. <p class="pick-note" id="pickNote">直接回复「选 B」或点按钮即可。也可说「A + 会签改成某某色」微调。</p>
  663. </div>
  664. </div>
  665. <script>
  666. document.querySelectorAll('.pick-bar button').forEach((btn) => {
  667. btn.addEventListener('click', () => {
  668. const choice = btn.getAttribute('data-choice')
  669. const note = document.getElementById('pickNote')
  670. note.textContent = '已记录偏好:方案 ' + choice + '。请回到对话里告诉我,或直接说「就用 ' + choice + '」。'
  671. note.style.color = '#047857'
  672. })
  673. })
  674. </script>
  675. </body>
  676. </html>