zkxw-mobile-oa-drafts-list-demos.html 36 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177
  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>草稿箱列表 · 风格 Demo</title>
  7. <style>
  8. :root {
  9. --brand: #0a9f6d;
  10. --brand-dark: #087f57;
  11. --brand-soft: #e9f9f2;
  12. --warn: #d97706;
  13. --warn-soft: #fff7e8;
  14. --danger: #ef4444;
  15. --text: #1f2a26;
  16. --text-muted: #6b7b74;
  17. --border: #e2e8e6;
  18. --page-bg: #f5f8f7;
  19. }
  20. * { box-sizing: border-box; }
  21. body {
  22. margin: 0;
  23. min-height: 100vh;
  24. font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", -apple-system, system-ui, sans-serif;
  25. color: var(--text);
  26. background:
  27. radial-gradient(900px 420px at 8% -8%, rgba(10, 159, 109, 0.14), transparent 55%),
  28. radial-gradient(700px 380px at 92% 0%, rgba(214, 163, 67, 0.12), transparent 50%),
  29. linear-gradient(180deg, #f8fffc 0%, #f4f7fb 45%, #f7f8fa 100%);
  30. line-height: 1.45;
  31. }
  32. .stage {
  33. max-width: 1280px;
  34. margin: 0 auto;
  35. padding: 28px 16px 56px;
  36. }
  37. .hero h1 {
  38. margin: 0 0 8px;
  39. font-size: 24px;
  40. font-weight: 720;
  41. letter-spacing: -0.02em;
  42. }
  43. .hero p {
  44. margin: 0;
  45. max-width: 760px;
  46. color: #64748b;
  47. font-size: 14px;
  48. }
  49. .hero .note {
  50. margin-top: 12px;
  51. display: inline-block;
  52. padding: 8px 12px;
  53. border-radius: 10px;
  54. background: #fff;
  55. border: 1px solid #e2e8f0;
  56. font-size: 12px;
  57. color: #64748b;
  58. }
  59. .hero .note strong { color: #0f766e; }
  60. .tabs {
  61. display: flex;
  62. flex-wrap: wrap;
  63. gap: 10px;
  64. margin: 22px 0 20px;
  65. }
  66. .tab {
  67. appearance: none;
  68. border: 1px solid #e2e8f0;
  69. background: #fff;
  70. border-radius: 999px;
  71. padding: 10px 16px;
  72. font-size: 13px;
  73. font-weight: 600;
  74. color: #475569;
  75. cursor: pointer;
  76. transition: border-color .15s, box-shadow .15s, color .15s, background .15s;
  77. }
  78. .tab:hover { border-color: #94a3b8; }
  79. .tab.is-active {
  80. color: var(--brand-dark);
  81. border-color: var(--brand);
  82. background: var(--brand-soft);
  83. box-shadow: 0 0 0 3px rgba(10, 159, 109, 0.18);
  84. }
  85. .tab .badge {
  86. margin-left: 6px;
  87. font-size: 10px;
  88. font-weight: 700;
  89. padding: 2px 6px;
  90. border-radius: 999px;
  91. background: #ecfdf5;
  92. color: #047857;
  93. }
  94. .tab.is-active .badge {
  95. background: #fff;
  96. color: var(--brand-dark);
  97. }
  98. .layout {
  99. display: grid;
  100. grid-template-columns: minmax(280px, 360px) 1fr;
  101. gap: 22px;
  102. align-items: start;
  103. }
  104. @media (max-width: 900px) {
  105. .layout { grid-template-columns: 1fr; }
  106. }
  107. .panel {
  108. background: rgba(255,255,255,.92);
  109. border: 1px solid #e2e8f0;
  110. border-radius: 18px;
  111. padding: 18px;
  112. box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  113. }
  114. .panel h2 {
  115. margin: 0 0 4px;
  116. font-size: 16px;
  117. }
  118. .panel .sub {
  119. margin: 0 0 14px;
  120. font-size: 12px;
  121. color: #64748b;
  122. }
  123. .panel ul {
  124. margin: 0;
  125. padding-left: 18px;
  126. font-size: 13px;
  127. color: #475569;
  128. }
  129. .panel li { margin: 6px 0; }
  130. .panel .pick {
  131. margin-top: 16px;
  132. padding: 12px;
  133. border-radius: 12px;
  134. background: var(--brand-soft);
  135. border: 1px solid #c6f0dc;
  136. font-size: 12px;
  137. color: #166534;
  138. }
  139. .phone-wrap { display: flex; justify-content: center; }
  140. .phone {
  141. width: 375px;
  142. background: #fff;
  143. border-radius: 28px;
  144. box-shadow:
  145. 0 0 0 1px rgb(15 23 42 / 6%),
  146. 0 18px 40px rgb(15 23 42 / 12%);
  147. overflow: hidden;
  148. }
  149. .phone-bar {
  150. height: 44px;
  151. display: flex;
  152. align-items: center;
  153. justify-content: center;
  154. background: linear-gradient(135deg, #0a9f6d, #087f57);
  155. color: #fff;
  156. font-size: 16px;
  157. font-weight: 600;
  158. }
  159. .page {
  160. background: var(--page-bg);
  161. min-height: 640px;
  162. padding-bottom: 20px;
  163. }
  164. /* —— 共用:顶栏搜索 + 管理 —— */
  165. .toolbar {
  166. position: sticky;
  167. top: 0;
  168. z-index: 2;
  169. background: #fff;
  170. padding: 10px 12px 10px;
  171. border-bottom: 1px solid #f1f5f9;
  172. display: flex;
  173. align-items: center;
  174. gap: 10px;
  175. }
  176. .search {
  177. flex: 1;
  178. height: 36px;
  179. display: flex;
  180. align-items: center;
  181. gap: 8px;
  182. padding: 0 12px;
  183. border-radius: 10px;
  184. border: 1px solid #e8eaed;
  185. background: #fafafa;
  186. font-size: 13px;
  187. color: #94a3b8;
  188. }
  189. .search::before {
  190. content: "";
  191. width: 12px;
  192. height: 12px;
  193. border: 1.5px solid #94a3b8;
  194. border-radius: 50%;
  195. flex-shrink: 0;
  196. }
  197. .manage {
  198. flex-shrink: 0;
  199. font-size: 14px;
  200. font-weight: 600;
  201. color: #166534;
  202. padding: 0 4px;
  203. cursor: pointer;
  204. user-select: none;
  205. }
  206. .list { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 10px; }
  207. .end {
  208. text-align: center;
  209. padding: 14px 0 8px;
  210. font-size: 12px;
  211. color: #94a3b8;
  212. }
  213. .style-pane { display: none; }
  214. .style-pane.is-active { display: block; }
  215. /* ========== A:当前对照(任务卡复用) ========== */
  216. .a-card {
  217. background: #fff;
  218. border: 1px solid #d8e3de;
  219. border-radius: 14px;
  220. overflow: hidden;
  221. box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  222. }
  223. .a-body { padding: 14px 14px 10px; }
  224. .a-top {
  225. display: flex;
  226. align-items: flex-start;
  227. justify-content: space-between;
  228. gap: 10px;
  229. margin-bottom: 10px;
  230. }
  231. .a-title {
  232. font-size: 15px;
  233. font-weight: 650;
  234. color: #1f2a26;
  235. line-height: 1.35;
  236. }
  237. .a-status {
  238. flex-shrink: 0;
  239. font-size: 11px;
  240. font-weight: 650;
  241. padding: 3px 8px;
  242. border-radius: 999px;
  243. background: var(--warn-soft);
  244. color: var(--warn);
  245. }
  246. .a-meta { display: flex; flex-direction: column; gap: 6px; }
  247. .a-meta-line {
  248. display: flex;
  249. gap: 10px;
  250. font-size: 12px;
  251. }
  252. .a-meta-line .lab { color: #94a3b8; min-width: 56px; }
  253. .a-meta-line .val { color: #5f7a6d; }
  254. .a-footer {
  255. display: flex;
  256. gap: 8px;
  257. padding: 10px 12px 12px;
  258. border-top: 1px dashed rgba(140, 170, 155, 0.28);
  259. box-sizing: border-box;
  260. }
  261. .a-btn {
  262. flex: 1;
  263. min-width: 0;
  264. height: 34px;
  265. border-radius: 10px;
  266. border: 1px solid #d8e3de;
  267. background: #fff;
  268. font-size: 12px;
  269. font-weight: 600;
  270. color: #475569;
  271. cursor: pointer;
  272. }
  273. .a-btn.primary {
  274. background: var(--brand);
  275. border-color: var(--brand);
  276. color: #fff;
  277. }
  278. .a-btn.danger { color: var(--danger); border-color: rgba(239,68,68,.35); }
  279. /* ========== B:左色条时间卡 ========== */
  280. .b-card {
  281. position: relative;
  282. background: #fff;
  283. border-radius: 14px;
  284. padding: 14px 14px 12px 16px;
  285. border: 1px solid #e8eeeB;
  286. box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  287. overflow: hidden;
  288. }
  289. .b-card::before {
  290. content: "";
  291. position: absolute;
  292. left: 0; top: 0; bottom: 0;
  293. width: 4px;
  294. background: linear-gradient(180deg, #d6a343, #f59e0b);
  295. }
  296. .b-head {
  297. display: flex;
  298. align-items: center;
  299. justify-content: space-between;
  300. gap: 8px;
  301. margin-bottom: 8px;
  302. }
  303. .b-title {
  304. font-size: 15px;
  305. font-weight: 700;
  306. color: #1f2a26;
  307. }
  308. .b-pill {
  309. font-size: 11px;
  310. font-weight: 700;
  311. color: #b45309;
  312. background: #fff7e8;
  313. padding: 2px 8px;
  314. border-radius: 6px;
  315. }
  316. .b-time {
  317. font-size: 12px;
  318. color: var(--text-muted);
  319. margin-bottom: 12px;
  320. }
  321. .b-time strong { color: #334155; font-weight: 600; }
  322. .b-actions {
  323. display: flex;
  324. align-items: center;
  325. gap: 6px;
  326. }
  327. .b-actions button {
  328. height: 32px;
  329. padding: 0 12px;
  330. border-radius: 8px;
  331. border: 0;
  332. font-size: 12px;
  333. font-weight: 650;
  334. cursor: pointer;
  335. }
  336. .b-actions .edit {
  337. background: var(--brand-soft);
  338. color: var(--brand-dark);
  339. }
  340. .b-actions .submit {
  341. background: var(--brand);
  342. color: #fff;
  343. }
  344. .b-actions .del {
  345. margin-left: auto;
  346. background: transparent;
  347. color: #94a3b8;
  348. padding: 0 8px;
  349. }
  350. /* ========== C:紧凑行列表 ========== */
  351. .c-list {
  352. padding: 0;
  353. background: #fff;
  354. border-radius: 14px;
  355. overflow: hidden;
  356. border: 1px solid #e8eeeb;
  357. margin: 10px 12px 0;
  358. }
  359. .c-row {
  360. display: flex;
  361. align-items: center;
  362. gap: 12px;
  363. padding: 14px 14px;
  364. border-bottom: 1px solid #f1f5f9;
  365. cursor: pointer;
  366. }
  367. .c-row:last-child { border-bottom: 0; }
  368. .c-ico {
  369. width: 40px;
  370. height: 40px;
  371. border-radius: 12px;
  372. background: linear-gradient(145deg, #fff7e8, #fef3c7);
  373. color: #b45309;
  374. display: flex;
  375. align-items: center;
  376. justify-content: center;
  377. font-size: 11px;
  378. font-weight: 800;
  379. flex-shrink: 0;
  380. letter-spacing: 0.02em;
  381. }
  382. .c-main { flex: 1; min-width: 0; }
  383. .c-title {
  384. font-size: 14px;
  385. font-weight: 650;
  386. color: #1f2a26;
  387. white-space: nowrap;
  388. overflow: hidden;
  389. text-overflow: ellipsis;
  390. }
  391. .c-sub {
  392. margin-top: 3px;
  393. font-size: 12px;
  394. color: #94a3b8;
  395. white-space: nowrap;
  396. overflow: hidden;
  397. text-overflow: ellipsis;
  398. }
  399. .c-right {
  400. display: flex;
  401. flex-direction: column;
  402. align-items: flex-end;
  403. gap: 6px;
  404. flex-shrink: 0;
  405. }
  406. .c-chev {
  407. width: 7px;
  408. height: 7px;
  409. border-right: 1.5px solid #cbd5e1;
  410. border-bottom: 1.5px solid #cbd5e1;
  411. transform: rotate(-45deg);
  412. }
  413. .c-ops {
  414. display: flex;
  415. gap: 4px;
  416. padding: 0 14px 12px 66px;
  417. margin-top: -4px;
  418. margin-bottom: 4px;
  419. border-bottom: 1px solid #f1f5f9;
  420. }
  421. .c-ops:last-of-type { border-bottom: 0; }
  422. .c-ops button {
  423. height: 28px;
  424. padding: 0 10px;
  425. border-radius: 999px;
  426. border: 1px solid #e2e8e6;
  427. background: #fafafa;
  428. font-size: 11px;
  429. font-weight: 600;
  430. color: #475569;
  431. cursor: pointer;
  432. }
  433. .c-ops .p {
  434. background: var(--brand-soft);
  435. border-color: #b7ebd4;
  436. color: var(--brand-dark);
  437. }
  438. .c-ops .d { color: var(--danger); border-color: #fecaca; }
  439. /* ========== D:图标色块卡片 ========== */
  440. .d-card {
  441. background: #fff;
  442. border-radius: 16px;
  443. border: 1px solid #e2e8e6;
  444. padding: 14px;
  445. box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
  446. }
  447. .d-top {
  448. display: flex;
  449. gap: 12px;
  450. align-items: flex-start;
  451. }
  452. .d-avatar {
  453. width: 44px;
  454. height: 44px;
  455. border-radius: 14px;
  456. display: flex;
  457. align-items: center;
  458. justify-content: center;
  459. font-size: 15px;
  460. font-weight: 800;
  461. color: #fff;
  462. flex-shrink: 0;
  463. letter-spacing: -0.02em;
  464. }
  465. .d-avatar.t1 { background: linear-gradient(145deg, #0a9f6d, #087f57); }
  466. .d-avatar.t2 { background: linear-gradient(145deg, #0ea5e9, #0284c7); }
  467. .d-avatar.t3 { background: linear-gradient(145deg, #d6a343, #b45309); }
  468. .d-info { flex: 1; min-width: 0; }
  469. .d-title-row {
  470. display: flex;
  471. align-items: center;
  472. gap: 8px;
  473. margin-bottom: 4px;
  474. }
  475. .d-title {
  476. font-size: 15px;
  477. font-weight: 700;
  478. color: #1f2a26;
  479. white-space: nowrap;
  480. overflow: hidden;
  481. text-overflow: ellipsis;
  482. }
  483. .d-tag {
  484. flex-shrink: 0;
  485. font-size: 10px;
  486. font-weight: 700;
  487. padding: 2px 7px;
  488. border-radius: 6px;
  489. background: #fff7e8;
  490. color: #b45309;
  491. }
  492. .d-meta {
  493. font-size: 12px;
  494. color: var(--text-muted);
  495. }
  496. .d-meta span + span::before {
  497. content: "·";
  498. margin: 0 6px;
  499. color: #cbd5e1;
  500. }
  501. .d-footer {
  502. display: grid;
  503. grid-template-columns: 1fr 1.2fr 0.8fr;
  504. gap: 8px;
  505. margin-top: 14px;
  506. }
  507. .d-footer button {
  508. height: 36px;
  509. border-radius: 10px;
  510. border: 1px solid #e2e8e6;
  511. background: #fff;
  512. font-size: 13px;
  513. font-weight: 650;
  514. cursor: pointer;
  515. color: #334155;
  516. }
  517. .d-footer .submit {
  518. background: linear-gradient(135deg, #0a9f6d, #087f57);
  519. border: 0;
  520. color: #fff;
  521. box-shadow: 0 6px 14px rgba(10, 159, 109, 0.28);
  522. }
  523. .d-footer .del {
  524. color: #94a3b8;
  525. border-color: transparent;
  526. background: #f8fafc;
  527. }
  528. /* ========== E:沉浸式主按钮卡 ========== */
  529. .e-card {
  530. background: #fff;
  531. border-radius: 18px;
  532. overflow: hidden;
  533. border: 1px solid #e8eeeb;
  534. box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  535. }
  536. .e-banner {
  537. padding: 12px 14px;
  538. background:
  539. linear-gradient(135deg, rgba(255,247,232,.95), rgba(233,249,242,.9));
  540. display: flex;
  541. align-items: center;
  542. justify-content: space-between;
  543. gap: 8px;
  544. }
  545. .e-banner-left {
  546. display: flex;
  547. align-items: center;
  548. gap: 8px;
  549. font-size: 12px;
  550. font-weight: 700;
  551. color: #92400e;
  552. }
  553. .e-dot {
  554. width: 8px;
  555. height: 8px;
  556. border-radius: 50%;
  557. background: #f59e0b;
  558. box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
  559. }
  560. .e-ver {
  561. font-size: 11px;
  562. color: #78716c;
  563. background: rgba(255,255,255,.7);
  564. padding: 2px 8px;
  565. border-radius: 999px;
  566. }
  567. .e-body { padding: 14px 14px 4px; }
  568. .e-title {
  569. font-size: 16px;
  570. font-weight: 750;
  571. color: #1f2a26;
  572. margin-bottom: 8px;
  573. }
  574. .e-meta-grid {
  575. display: grid;
  576. grid-template-columns: 1fr 1fr;
  577. gap: 8px;
  578. margin-bottom: 14px;
  579. }
  580. .e-chip {
  581. background: #f8fafc;
  582. border-radius: 10px;
  583. padding: 8px 10px;
  584. }
  585. .e-chip .k {
  586. display: block;
  587. font-size: 10px;
  588. color: #94a3b8;
  589. margin-bottom: 2px;
  590. }
  591. .e-chip .v {
  592. font-size: 12px;
  593. font-weight: 650;
  594. color: #334155;
  595. }
  596. .e-footer {
  597. display: flex;
  598. gap: 8px;
  599. padding: 0 14px 14px;
  600. }
  601. .e-footer button {
  602. height: 40px;
  603. border-radius: 12px;
  604. font-size: 13px;
  605. font-weight: 700;
  606. cursor: pointer;
  607. border: 0;
  608. }
  609. .e-footer .ghost {
  610. flex: 0 0 auto;
  611. min-width: 72px;
  612. background: #f1f5f9;
  613. color: #64748b;
  614. }
  615. .e-footer .main {
  616. flex: 1;
  617. background: linear-gradient(135deg, #0a9f6d, #087f57);
  618. color: #fff;
  619. box-shadow: 0 8px 18px rgba(10, 159, 109, 0.3);
  620. }
  621. .e-footer .link {
  622. flex: 0 0 auto;
  623. min-width: 56px;
  624. background: transparent;
  625. color: #94a3b8;
  626. }
  627. /* ========== F:管理模式预览(基于 D) ========== */
  628. .f-batch {
  629. margin: 10px 12px 0;
  630. padding: 10px 12px;
  631. border-radius: 12px;
  632. background: #fff;
  633. border: 1px solid #c6f0dc;
  634. display: flex;
  635. align-items: center;
  636. justify-content: space-between;
  637. font-size: 13px;
  638. color: #166534;
  639. }
  640. .f-batch button {
  641. height: 32px;
  642. padding: 0 14px;
  643. border-radius: 8px;
  644. border: 1px solid rgba(239,68,68,.35);
  645. background: rgba(239,68,68,.06);
  646. color: var(--danger);
  647. font-size: 12px;
  648. font-weight: 650;
  649. cursor: pointer;
  650. }
  651. .f-row {
  652. display: flex;
  653. gap: 10px;
  654. align-items: stretch;
  655. }
  656. .f-check {
  657. padding-top: 22px;
  658. flex-shrink: 0;
  659. }
  660. .f-check span {
  661. display: flex;
  662. width: 20px;
  663. height: 20px;
  664. border-radius: 50%;
  665. border: 1.5px solid #cbd5e1;
  666. background: #fff;
  667. align-items: center;
  668. justify-content: center;
  669. font-size: 11px;
  670. color: #fff;
  671. font-weight: 700;
  672. }
  673. .f-check span.on {
  674. background: #22c55e;
  675. border-color: #22c55e;
  676. }
  677. .f-row .d-card { flex: 1; min-width: 0; }
  678. .f-row.is-on .d-card {
  679. border-color: rgba(34, 197, 94, 0.45);
  680. box-shadow: 0 8px 20px rgba(22, 163, 74, 0.12);
  681. }
  682. .hidden { display: none !important; }
  683. </style>
  684. </head>
  685. <body>
  686. <div class="stage">
  687. <div class="hero">
  688. <h1>草稿箱列表 · 风格选型 Demo</h1>
  689. <p>
  690. 对应页面 <code>/#/pages/oa/drafts/index</code>。保留能力:搜索、管理/多选删除、流程名、草稿态、最近保存、版本、编辑 / 提交审批 / 删除。
  691. Token 对齐三墙绿 <strong>#0a9f6d</strong> + 大麦黄草稿提示。
  692. </p>
  693. <div class="note">请点选下方 Tab 对比;告诉我选 <strong>A / B / C / D / E</strong>(可微调),再落到 <code>mobile-h5</code> 实现。</div>
  694. </div>
  695. <div class="tabs" id="tabs">
  696. <button class="tab is-active" data-style="a">A 当前对照</button>
  697. <button class="tab" data-style="b">B 左色条<span class="badge">推荐</span></button>
  698. <button class="tab" data-style="c">C 紧凑行</button>
  699. <button class="tab" data-style="d">D 色块图标</button>
  700. <button class="tab" data-style="e">E 主按钮优先</button>
  701. <button class="tab" data-style="f">F 管理态预览</button>
  702. </div>
  703. <div class="layout">
  704. <div class="panel" id="desc">
  705. <h2>A · 当前对照</h2>
  706. <p class="sub">复用现有 OaTaskCard 结构,便于对比「哪里不好看」。</p>
  707. <ul>
  708. <li>标题 + 右上角状态胶囊</li>
  709. <li>两行 label/value 元信息</li>
  710. <li>底栏三等分按钮(主色 / 描边 / 危险)</li>
  711. </ul>
  712. <div class="pick">适合:保持与待办/已办卡片完全一致时选 A。</div>
  713. </div>
  714. <div class="phone-wrap">
  715. <div class="phone">
  716. <div class="phone-bar">草稿箱</div>
  717. <div class="page">
  718. <div class="toolbar">
  719. <div class="search">搜索流程名称</div>
  720. <div class="manage" id="manageLabel">管理</div>
  721. </div>
  722. <!-- A -->
  723. <div class="style-pane is-active" data-pane="a">
  724. <div class="list">
  725. <div class="a-card">
  726. <div class="a-body">
  727. <div class="a-top">
  728. <div class="a-title">出差申请</div>
  729. <div class="a-status">草稿</div>
  730. </div>
  731. <div class="a-meta">
  732. <div class="a-meta-line"><span class="lab">最近保存</span><span class="val">2026-08-12 14:32</span></div>
  733. <div class="a-meta-line"><span class="lab">版本</span><span class="val">v3</span></div>
  734. </div>
  735. </div>
  736. <div class="a-footer">
  737. <button class="a-btn primary">编辑</button>
  738. <button class="a-btn">提交审批</button>
  739. <button class="a-btn danger">删除</button>
  740. </div>
  741. </div>
  742. <div class="a-card">
  743. <div class="a-body">
  744. <div class="a-top">
  745. <div class="a-title">采购报销(含发票)</div>
  746. <div class="a-status">草稿</div>
  747. </div>
  748. <div class="a-meta">
  749. <div class="a-meta-line"><span class="lab">最近保存</span><span class="val">2026-08-11 09:18</span></div>
  750. <div class="a-meta-line"><span class="lab">版本</span><span class="val">v1</span></div>
  751. </div>
  752. </div>
  753. <div class="a-footer">
  754. <button class="a-btn primary">编辑</button>
  755. <button class="a-btn">提交审批</button>
  756. <button class="a-btn danger">删除</button>
  757. </div>
  758. </div>
  759. <div class="a-card">
  760. <div class="a-body">
  761. <div class="a-top">
  762. <div class="a-title">用章申请</div>
  763. <div class="a-status">草稿</div>
  764. </div>
  765. <div class="a-meta">
  766. <div class="a-meta-line"><span class="lab">最近保存</span><span class="val">2026-08-10 17:05</span></div>
  767. <div class="a-meta-line"><span class="lab">版本</span><span class="val">v2</span></div>
  768. </div>
  769. </div>
  770. <div class="a-footer">
  771. <button class="a-btn primary">编辑</button>
  772. <button class="a-btn">提交审批</button>
  773. <button class="a-btn danger">删除</button>
  774. </div>
  775. </div>
  776. <div class="end">已经到底了</div>
  777. </div>
  778. </div>
  779. <!-- B -->
  780. <div class="style-pane" data-pane="b">
  781. <div class="list">
  782. <div class="b-card">
  783. <div class="b-head">
  784. <div class="b-title">出差申请</div>
  785. <div class="b-pill">草稿</div>
  786. </div>
  787. <div class="b-time">最近保存 <strong>08-12 14:32</strong> · 版本 <strong>v3</strong></div>
  788. <div class="b-actions">
  789. <button class="edit">编辑</button>
  790. <button class="submit">提交审批</button>
  791. <button class="del">删除</button>
  792. </div>
  793. </div>
  794. <div class="b-card">
  795. <div class="b-head">
  796. <div class="b-title">采购报销(含发票)</div>
  797. <div class="b-pill">草稿</div>
  798. </div>
  799. <div class="b-time">最近保存 <strong>08-11 09:18</strong> · 版本 <strong>v1</strong></div>
  800. <div class="b-actions">
  801. <button class="edit">编辑</button>
  802. <button class="submit">提交审批</button>
  803. <button class="del">删除</button>
  804. </div>
  805. </div>
  806. <div class="b-card">
  807. <div class="b-head">
  808. <div class="b-title">用章申请</div>
  809. <div class="b-pill">草稿</div>
  810. </div>
  811. <div class="b-time">最近保存 <strong>08-10 17:05</strong> · 版本 <strong>v2</strong></div>
  812. <div class="b-actions">
  813. <button class="edit">编辑</button>
  814. <button class="submit">提交审批</button>
  815. <button class="del">删除</button>
  816. </div>
  817. </div>
  818. <div class="end">已经到底了</div>
  819. </div>
  820. </div>
  821. <!-- C -->
  822. <div class="style-pane" data-pane="c">
  823. <div class="c-list">
  824. <div>
  825. <div class="c-row">
  826. <div class="c-ico">草稿</div>
  827. <div class="c-main">
  828. <div class="c-title">出差申请</div>
  829. <div class="c-sub">08-12 14:32 · v3</div>
  830. </div>
  831. <div class="c-right"><div class="c-chev"></div></div>
  832. </div>
  833. <div class="c-ops">
  834. <button class="p">编辑</button>
  835. <button>提交审批</button>
  836. <button class="d">删除</button>
  837. </div>
  838. </div>
  839. <div>
  840. <div class="c-row">
  841. <div class="c-ico">草稿</div>
  842. <div class="c-main">
  843. <div class="c-title">采购报销(含发票)</div>
  844. <div class="c-sub">08-11 09:18 · v1</div>
  845. </div>
  846. <div class="c-right"><div class="c-chev"></div></div>
  847. </div>
  848. <div class="c-ops">
  849. <button class="p">编辑</button>
  850. <button>提交审批</button>
  851. <button class="d">删除</button>
  852. </div>
  853. </div>
  854. <div>
  855. <div class="c-row">
  856. <div class="c-ico">草稿</div>
  857. <div class="c-main">
  858. <div class="c-title">用章申请</div>
  859. <div class="c-sub">08-10 17:05 · v2</div>
  860. </div>
  861. <div class="c-right"><div class="c-chev"></div></div>
  862. </div>
  863. <div class="c-ops">
  864. <button class="p">编辑</button>
  865. <button>提交审批</button>
  866. <button class="d">删除</button>
  867. </div>
  868. </div>
  869. </div>
  870. <div class="end">已经到底了</div>
  871. </div>
  872. <!-- D -->
  873. <div class="style-pane" data-pane="d">
  874. <div class="list">
  875. <div class="d-card">
  876. <div class="d-top">
  877. <div class="d-avatar t1">差</div>
  878. <div class="d-info">
  879. <div class="d-title-row">
  880. <div class="d-title">出差申请</div>
  881. <div class="d-tag">草稿</div>
  882. </div>
  883. <div class="d-meta">
  884. <span>08-12 14:32</span>
  885. <span>v3</span>
  886. </div>
  887. </div>
  888. </div>
  889. <div class="d-footer">
  890. <button>编辑</button>
  891. <button class="submit">提交审批</button>
  892. <button class="del">删除</button>
  893. </div>
  894. </div>
  895. <div class="d-card">
  896. <div class="d-top">
  897. <div class="d-avatar t2">采</div>
  898. <div class="d-info">
  899. <div class="d-title-row">
  900. <div class="d-title">采购报销(含发票)</div>
  901. <div class="d-tag">草稿</div>
  902. </div>
  903. <div class="d-meta">
  904. <span>08-11 09:18</span>
  905. <span>v1</span>
  906. </div>
  907. </div>
  908. </div>
  909. <div class="d-footer">
  910. <button>编辑</button>
  911. <button class="submit">提交审批</button>
  912. <button class="del">删除</button>
  913. </div>
  914. </div>
  915. <div class="d-card">
  916. <div class="d-top">
  917. <div class="d-avatar t3">章</div>
  918. <div class="d-info">
  919. <div class="d-title-row">
  920. <div class="d-title">用章申请</div>
  921. <div class="d-tag">草稿</div>
  922. </div>
  923. <div class="d-meta">
  924. <span>08-10 17:05</span>
  925. <span>v2</span>
  926. </div>
  927. </div>
  928. </div>
  929. <div class="d-footer">
  930. <button>编辑</button>
  931. <button class="submit">提交审批</button>
  932. <button class="del">删除</button>
  933. </div>
  934. </div>
  935. <div class="end">已经到底了</div>
  936. </div>
  937. </div>
  938. <!-- E -->
  939. <div class="style-pane" data-pane="e">
  940. <div class="list">
  941. <div class="e-card">
  942. <div class="e-banner">
  943. <div class="e-banner-left"><span class="e-dot"></span>未提交草稿</div>
  944. <div class="e-ver">v3</div>
  945. </div>
  946. <div class="e-body">
  947. <div class="e-title">出差申请</div>
  948. <div class="e-meta-grid">
  949. <div class="e-chip"><span class="k">最近保存</span><span class="v">08-12 14:32</span></div>
  950. <div class="e-chip"><span class="k">流程</span><span class="v">OA 审批</span></div>
  951. </div>
  952. </div>
  953. <div class="e-footer">
  954. <button class="ghost">编辑</button>
  955. <button class="main">提交审批</button>
  956. <button class="link">删除</button>
  957. </div>
  958. </div>
  959. <div class="e-card">
  960. <div class="e-banner">
  961. <div class="e-banner-left"><span class="e-dot"></span>未提交草稿</div>
  962. <div class="e-ver">v1</div>
  963. </div>
  964. <div class="e-body">
  965. <div class="e-title">采购报销(含发票)</div>
  966. <div class="e-meta-grid">
  967. <div class="e-chip"><span class="k">最近保存</span><span class="v">08-11 09:18</span></div>
  968. <div class="e-chip"><span class="k">流程</span><span class="v">OA 审批</span></div>
  969. </div>
  970. </div>
  971. <div class="e-footer">
  972. <button class="ghost">编辑</button>
  973. <button class="main">提交审批</button>
  974. <button class="link">删除</button>
  975. </div>
  976. </div>
  977. <div class="e-card">
  978. <div class="e-banner">
  979. <div class="e-banner-left"><span class="e-dot"></span>未提交草稿</div>
  980. <div class="e-ver">v2</div>
  981. </div>
  982. <div class="e-body">
  983. <div class="e-title">用章申请</div>
  984. <div class="e-meta-grid">
  985. <div class="e-chip"><span class="k">最近保存</span><span class="v">08-10 17:05</span></div>
  986. <div class="e-chip"><span class="k">流程</span><span class="v">OA 审批</span></div>
  987. </div>
  988. </div>
  989. <div class="e-footer">
  990. <button class="ghost">编辑</button>
  991. <button class="main">提交审批</button>
  992. <button class="link">删除</button>
  993. </div>
  994. </div>
  995. <div class="end">已经到底了</div>
  996. </div>
  997. </div>
  998. <!-- F manage -->
  999. <div class="style-pane" data-pane="f">
  1000. <div class="f-batch">
  1001. <span>已选 1 项</span>
  1002. <button>批量删除</button>
  1003. </div>
  1004. <div class="list">
  1005. <div class="f-row is-on">
  1006. <div class="f-check"><span class="on">✓</span></div>
  1007. <div class="d-card">
  1008. <div class="d-top">
  1009. <div class="d-avatar t1">差</div>
  1010. <div class="d-info">
  1011. <div class="d-title-row">
  1012. <div class="d-title">出差申请</div>
  1013. <div class="d-tag">草稿</div>
  1014. </div>
  1015. <div class="d-meta"><span>08-12 14:32</span><span>v3</span></div>
  1016. </div>
  1017. </div>
  1018. </div>
  1019. </div>
  1020. <div class="f-row">
  1021. <div class="f-check"><span></span></div>
  1022. <div class="d-card">
  1023. <div class="d-top">
  1024. <div class="d-avatar t2">采</div>
  1025. <div class="d-info">
  1026. <div class="d-title-row">
  1027. <div class="d-title">采购报销(含发票)</div>
  1028. <div class="d-tag">草稿</div>
  1029. </div>
  1030. <div class="d-meta"><span>08-11 09:18</span><span>v1</span></div>
  1031. </div>
  1032. </div>
  1033. </div>
  1034. </div>
  1035. <div class="f-row">
  1036. <div class="f-check"><span></span></div>
  1037. <div class="d-card">
  1038. <div class="d-top">
  1039. <div class="d-avatar t3">章</div>
  1040. <div class="d-info">
  1041. <div class="d-title-row">
  1042. <div class="d-title">用章申请</div>
  1043. <div class="d-tag">草稿</div>
  1044. </div>
  1045. <div class="d-meta"><span>08-10 17:05</span><span>v2</span></div>
  1046. </div>
  1047. </div>
  1048. </div>
  1049. </div>
  1050. <div class="end">管理态下隐藏行内操作,点卡片勾选</div>
  1051. </div>
  1052. </div>
  1053. </div>
  1054. </div>
  1055. </div>
  1056. </div>
  1057. </div>
  1058. <script>
  1059. const DESCS = {
  1060. a: {
  1061. title: "A · 当前对照",
  1062. sub: "复用现有 OaTaskCard 结构,便于对比「哪里不好看」。",
  1063. items: [
  1064. "标题 + 右上角状态胶囊",
  1065. "两行 label/value 元信息",
  1066. "底栏三等分按钮(主色 / 描边 / 危险)"
  1067. ],
  1068. pick: "适合:保持与待办/已办卡片完全一致时选 A。"
  1069. },
  1070. b: {
  1071. title: "B · 左色条时间卡",
  1072. sub: "信息更扁、动作更轻;用琥珀竖条暗示「未完成」。",
  1073. items: [
  1074. "左侧大麦黄竖条区分草稿态",
  1075. "时间与版本收成一行,减少纵向占高",
  1076. "主行动「提交」实心,删除弱化为文字"
  1077. ],
  1078. pick: "推荐:信息密度适中,最像「未完成事项」列表。"
  1079. },
  1080. c: {
  1081. title: "C · 紧凑行列表",
  1082. sub: "接近系统设置/通讯录密度,一屏更多条。",
  1083. items: [
  1084. "左侧「草稿」色块 + 标题/时间一行",
  1085. "操作收成胶囊小按钮,可点整行进入编辑",
  1086. "适合草稿量多、以浏览为主"
  1087. ],
  1088. pick: "适合:草稿很多、优先扫一眼找单据。"
  1089. },
  1090. d: {
  1091. title: "D · 色块图标卡",
  1092. sub: "流程首字色块增加辨识度,提交为主按钮。",
  1093. items: [
  1094. "流程名首字渐变方块(可按分类着色)",
  1095. "元信息点分隔,更轻",
  1096. "底栏「提交审批」视觉权重最高"
  1097. ],
  1098. pick: "适合:想让不同流程更好区分时选 D。"
  1099. },
  1100. e: {
  1101. title: "E · 主按钮优先",
  1102. sub: "强化「去提交」心智,顶部草稿横幅更醒目。",
  1103. items: [
  1104. "顶部琥珀横幅 + 版本胶囊",
  1105. "元信息双芯片网格",
  1106. "宽主按钮「提交审批」,编辑/删除弱化"
  1107. ],
  1108. pick: "适合:产品希望用户尽快提交、减少积压草稿。"
  1109. },
  1110. f: {
  1111. title: "F · 管理态预览",
  1112. sub: "基于 D 的多选态示意(任意正式风格都可套用)。",
  1113. items: [
  1114. "顶栏「完成」+ 已选 N 项批量条",
  1115. "左侧圆形勾选,选中卡描边高亮",
  1116. "管理态隐藏行内操作按钮"
  1117. ],
  1118. pick: "仅预览交互;正式实现时跟你选定的 A–E 同一卡片结构。"
  1119. }
  1120. };
  1121. const tabs = document.getElementById("tabs");
  1122. const desc = document.getElementById("desc");
  1123. const manageLabel = document.getElementById("manageLabel");
  1124. function renderDesc(key) {
  1125. const d = DESCS[key];
  1126. desc.innerHTML =
  1127. "<h2>" + d.title + "</h2>" +
  1128. '<p class="sub">' + d.sub + "</p>" +
  1129. "<ul>" + d.items.map(function (i) { return "<li>" + i + "</li>"; }).join("") + "</ul>" +
  1130. '<div class="pick">' + d.pick + "</div>";
  1131. manageLabel.textContent = key === "f" ? "完成" : "管理";
  1132. }
  1133. tabs.addEventListener("click", function (e) {
  1134. const btn = e.target.closest(".tab");
  1135. if (!btn) return;
  1136. const key = btn.getAttribute("data-style");
  1137. tabs.querySelectorAll(".tab").forEach(function (t) {
  1138. t.classList.toggle("is-active", t === btn);
  1139. });
  1140. document.querySelectorAll(".style-pane").forEach(function (p) {
  1141. p.classList.toggle("is-active", p.getAttribute("data-pane") === key);
  1142. });
  1143. renderDesc(key);
  1144. });
  1145. </script>
  1146. </body>
  1147. </html>