zkxw-mobile-oa-protocol-sample-pay-beautify-demo.html 50 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144
  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>协议单 · 样本运输 &amp; 缴费明细 美化 Demo</title>
  7. <style>
  8. :root {
  9. --brand: #0a9f6d;
  10. --brand-dark: #087f57;
  11. --brand-soft: #e9f9f2;
  12. --brand-mid: #b8ebd4;
  13. --barley: #d6a343;
  14. --barley-soft: #fff7e8;
  15. --text: #1f2a26;
  16. --muted: #6b7b74;
  17. --border: #dcebe4;
  18. --page: #f3f7f5;
  19. --surface: #fff;
  20. --danger: #d14343;
  21. --warn: #cf8a19;
  22. --info: #3b82f6;
  23. --shadow: 0 10px 28px rgba(15, 42, 34, 0.07);
  24. --r16: 16px;
  25. --r12: 12px;
  26. }
  27. * { box-sizing: border-box; }
  28. body {
  29. margin: 0;
  30. font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", -apple-system, system-ui, sans-serif;
  31. color: var(--text);
  32. background:
  33. radial-gradient(800px 380px at 10% -10%, rgba(10,159,109,.14), transparent 55%),
  34. radial-gradient(640px 320px at 95% 0%, rgba(214,163,67,.1), transparent 50%),
  35. #f6f8fa;
  36. line-height: 1.45;
  37. }
  38. .stage { max-width: 1360px; margin: 0 auto; padding: 28px 16px 80px; }
  39. .hero h1 { margin: 0 0 8px; font-size: 24px; font-weight: 740; letter-spacing: -0.02em; }
  40. .hero p { margin: 0; max-width: 920px; color: #64748b; font-size: 14px; }
  41. .hero .chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
  42. .chip {
  43. padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 650;
  44. background: #fff; border: 1px solid #e2e8f0; color: #475569;
  45. }
  46. .chip strong { color: var(--brand-dark); }
  47. .goals {
  48. margin: 18px 0 0;
  49. display: grid;
  50. grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  51. gap: 10px;
  52. }
  53. .goal {
  54. background: #fff; border: 1px solid #bbf7d0; border-radius: 12px;
  55. padding: 12px 14px; font-size: 12px; color: #14532d;
  56. }
  57. .goal b { color: var(--brand-dark); display: block; margin-bottom: 4px; font-size: 13px; }
  58. .tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 16px; }
  59. .tab {
  60. appearance: none; border: 1px solid #e2e8f0; background: #fff;
  61. border-radius: 999px; padding: 10px 16px; font-size: 13px; font-weight: 650;
  62. color: #475569; cursor: pointer;
  63. }
  64. .tab.is-active {
  65. color: var(--brand-dark); border-color: var(--brand); background: var(--brand-soft);
  66. box-shadow: 0 0 0 3px rgba(10,159,109,.16);
  67. }
  68. .layout {
  69. display: grid;
  70. grid-template-columns: minmax(270px, 340px) 1fr;
  71. gap: 20px; align-items: start;
  72. }
  73. @media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }
  74. .side {
  75. position: sticky; top: 14px;
  76. background: rgba(255,255,255,.94); border: 1px solid #e2e8f0;
  77. border-radius: 18px; padding: 18px; box-shadow: 0 10px 28px rgba(15,23,42,.05);
  78. }
  79. .side h2 { margin: 0 0 4px; font-size: 16px; }
  80. .side .sub { margin: 0 0 12px; font-size: 12px; color: #64748b; }
  81. .side ol { margin: 0; padding-left: 18px; font-size: 13px; color: #475569; }
  82. .side li { margin: 0 0 8px; }
  83. .side li strong { color: var(--brand-dark); }
  84. .phones {
  85. display: grid;
  86. grid-template-columns: repeat(auto-fit, minmax(320px, 390px));
  87. gap: 18px; justify-content: start;
  88. }
  89. .phone-wrap { display: grid; gap: 8px; }
  90. .phone-label { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
  91. .phone-label h3 { margin: 0; font-size: 15px; font-weight: 720; }
  92. .tag {
  93. font-size: 11px; font-weight: 750; padding: 4px 8px; border-radius: 999px;
  94. background: var(--brand-soft); color: var(--brand-dark);
  95. }
  96. .tag.muted { background: #f1f5f9; color: #64748b; }
  97. .phone {
  98. width: 100%; max-width: 390px; height: 820px;
  99. border-radius: 36px; border: 10px solid #0f172a;
  100. background: var(--page); overflow: hidden; position: relative;
  101. box-shadow: 0 24px 60px rgba(15,23,42,.18);
  102. display: flex; flex-direction: column;
  103. }
  104. .phone::before {
  105. content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  106. width: 108px; height: 22px; border-radius: 12px; background: #0f172a; z-index: 6;
  107. }
  108. .scroll { flex: 1; overflow: auto; padding: 40px 0 20px; }
  109. /* —— 通用分区壳 —— */
  110. .block {
  111. margin: 0 12px 12px;
  112. background: var(--surface);
  113. border-radius: var(--r16);
  114. border: 1px solid rgba(220,235,228,.9);
  115. box-shadow: var(--shadow);
  116. overflow: hidden;
  117. }
  118. .block__head {
  119. display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  120. padding: 14px 14px 0;
  121. }
  122. .block__title-wrap { min-width: 0; }
  123. .block__title {
  124. margin: 0; font-size: 16px; font-weight: 760;
  125. display: flex; align-items: center; gap: 8px;
  126. }
  127. .block__title .ico {
  128. width: 28px; height: 28px; border-radius: 10px;
  129. display: grid; place-items: center; font-size: 14px;
  130. background: linear-gradient(145deg, #12b981, #087f57); color: #fff;
  131. box-shadow: 0 4px 10px rgba(10,159,109,.28);
  132. }
  133. .block__hint { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
  134. /* ========== 样本运输 ========== */
  135. .sum-strip {
  136. margin: 12px 14px 0;
  137. display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  138. }
  139. .sum-item {
  140. padding: 10px 8px; border-radius: 12px; text-align: center;
  141. background: linear-gradient(180deg, #f8fffc, #f2faf6);
  142. border: 1px solid #e3f0ea;
  143. }
  144. .sum-item .k { display: block; font-size: 11px; color: var(--muted); }
  145. .sum-item .v { display: block; margin-top: 2px; font-size: 15px; font-weight: 780; color: var(--brand-dark); }
  146. .sum-item.warn .v { color: #92400e; }
  147. .ops {
  148. margin: 12px 14px 0;
  149. display: flex; gap: 8px; flex-wrap: wrap;
  150. }
  151. .ops .btn {
  152. min-height: 28px; padding: 0 10px; border-radius: 999px;
  153. border: 0; background: var(--brand);
  154. font-size: 11px; font-weight: 700; color: #fff; cursor: pointer;
  155. box-shadow: 0 2px 6px rgba(10,159,109,.18);
  156. }
  157. .ops .btn.primary {
  158. background: linear-gradient(135deg, #12b981, #087f57);
  159. box-shadow: 0 3px 8px rgba(10,159,109,.28);
  160. }
  161. .ops .btn.secondary {
  162. background: #5f8f7d;
  163. box-shadow: 0 2px 6px rgba(15,42,34,.12);
  164. }
  165. .ops .btn.warn {
  166. background: linear-gradient(135deg, #e5a63a, #cf8a19);
  167. box-shadow: 0 2px 6px rgba(207,138,25,.25);
  168. }
  169. .ops .btn:disabled { opacity: .45; }
  170. .sel-bar {
  171. margin: 10px 14px 0;
  172. display: flex; align-items: center; justify-content: space-between;
  173. padding: 8px 12px; border-radius: 12px;
  174. background: #ecfdf5; border: 1px solid var(--brand-mid);
  175. font-size: 12px; font-weight: 650; color: var(--brand-dark);
  176. }
  177. .sel-bar .link { color: var(--brand); text-decoration: underline; cursor: pointer; }
  178. .sample-list { padding: 12px 14px 14px; display: grid; gap: 10px; }
  179. .scard {
  180. position: relative;
  181. border-radius: 14px;
  182. border: 1.5px solid #e3f0ea;
  183. background: #fff;
  184. padding: 12px;
  185. transition: border-color .15s, box-shadow .15s;
  186. }
  187. .scard.is-checked {
  188. border-color: var(--brand);
  189. background: linear-gradient(180deg, #f7fffb, #fff);
  190. box-shadow: 0 0 0 3px rgba(10,159,109,.12);
  191. }
  192. .scard.is-alert {
  193. border-color: #f0c989;
  194. background: linear-gradient(180deg, #fffbeb, #fff);
  195. }
  196. .scard__top {
  197. display: flex; align-items: flex-start; gap: 10px;
  198. }
  199. .check {
  200. width: 22px; height: 22px; border-radius: 7px; flex: none; margin-top: 1px;
  201. border: 2px solid #c5ddd2; display: grid; place-items: center;
  202. font-size: 12px; color: transparent; background: #fff;
  203. }
  204. .scard.is-checked .check {
  205. border-color: var(--brand); background: var(--brand); color: #fff;
  206. }
  207. .scard__main { flex: 1; min-width: 0; }
  208. .scard__code-row {
  209. display: flex; align-items: center; justify-content: space-between; gap: 8px;
  210. }
  211. .scard__code { font-size: 14px; font-weight: 760; letter-spacing: .01em; }
  212. .pill {
  213. flex: none; font-size: 11px; font-weight: 750; padding: 3px 8px; border-radius: 999px;
  214. }
  215. .pill.ok { background: var(--brand-soft); color: var(--brand-dark); }
  216. .pill.warn { background: #fff7e8; color: #b45309; }
  217. .pill.muted { background: #f1f5f9; color: #64748b; }
  218. .pill.danger { background: #fef2f2; color: #b91c1c; }
  219. .type-row {
  220. margin-top: 6px;
  221. display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  222. }
  223. .type-badge {
  224. display: inline-flex; align-items: center; gap: 4px;
  225. padding: 3px 8px; border-radius: 8px;
  226. background: #f0f7f4; color: #3d524a; font-size: 12px; font-weight: 650;
  227. }
  228. .special {
  229. font-size: 11px; font-weight: 750; color: #b45309;
  230. padding: 2px 6px; border-radius: 6px; background: #fff7e8;
  231. }
  232. .metric-grid {
  233. margin-top: 10px;
  234. display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  235. }
  236. .metric {
  237. padding: 8px 10px; border-radius: 10px; background: #f6faf8;
  238. border: 1px solid #e8f2ed;
  239. }
  240. .metric .k { display: block; font-size: 11px; color: var(--muted); }
  241. .metric .v { display: block; margin-top: 2px; font-size: 13px; font-weight: 720; }
  242. .metric .v.muted { color: #94a3b8; font-weight: 600; }
  243. .metric .v.money { color: var(--brand-dark); }
  244. .metric.span2 { grid-column: 1 / -1; }
  245. .freight-chip {
  246. display: flex; align-items: center; gap: 6px;
  247. margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  248. background: #f8fffc; border: 1px dashed var(--brand-mid);
  249. font-size: 12px; color: var(--brand-dark); font-weight: 650;
  250. }
  251. .freight-chip.none {
  252. background: #fffaf0; border-color: #f0e0bc; color: #92400e;
  253. }
  254. .freight-chip .dot {
  255. width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
  256. }
  257. .scard__foot {
  258. margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end;
  259. }
  260. .mini {
  261. min-height: 26px; padding: 0 10px; border-radius: 999px;
  262. border: 0; background: var(--brand);
  263. font-size: 11px; font-weight: 700; color: #fff; cursor: pointer;
  264. box-shadow: 0 2px 5px rgba(10,159,109,.16);
  265. }
  266. .mini.ghost,
  267. .mini.secondary {
  268. background: #5f8f7d;
  269. box-shadow: 0 2px 5px rgba(15,42,34,.12);
  270. }
  271. .mini.danger {
  272. background: linear-gradient(135deg, #e35d5d, #d14343);
  273. box-shadow: 0 2px 5px rgba(209,67,67,.2);
  274. }
  275. .mini.warn {
  276. background: linear-gradient(135deg, #e5a63a, #cf8a19);
  277. box-shadow: 0 2px 5px rgba(207,138,25,.22);
  278. }
  279. .mini.primary {
  280. background: linear-gradient(135deg, #12b981, #087f57);
  281. box-shadow: 0 2px 6px rgba(10,159,109,.28);
  282. }
  283. .empty {
  284. margin: 8px 14px 16px; padding: 28px 16px; text-align: center;
  285. border-radius: 14px; border: 1.5px dashed #b8ebd4; background: #f7fffb;
  286. }
  287. .empty .big { font-size: 28px; margin-bottom: 6px; }
  288. .empty p { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
  289. .empty .btn {
  290. min-height: 30px; padding: 0 14px; border-radius: 999px; border: 0;
  291. background: linear-gradient(135deg, #12b981, #087f57);
  292. color: #fff; font-weight: 720; font-size: 12px;
  293. box-shadow: 0 3px 8px rgba(10,159,109,.25);
  294. }
  295. /* ========== 缴费 ========== */
  296. .pay-sum {
  297. margin: 12px 14px 0;
  298. padding: 12px;
  299. border-radius: 14px;
  300. background: linear-gradient(135deg, #ecfdf5, #fff7e8 70%);
  301. border: 1px solid #e5efdf;
  302. display: grid; gap: 8px;
  303. }
  304. .pay-sum__row {
  305. display: flex; justify-content: space-between; align-items: baseline;
  306. font-size: 12px; color: #5b6b64;
  307. }
  308. .pay-sum__row strong { font-size: 18px; color: var(--brand-dark); font-weight: 800; }
  309. .pay-sum__row .amt { font-weight: 760; color: #92400e; }
  310. .progress {
  311. height: 8px; border-radius: 999px; background: rgba(255,255,255,.7);
  312. overflow: hidden; border: 1px solid rgba(10,159,109,.12);
  313. }
  314. .progress > i {
  315. display: block; height: 100%; width: 42%;
  316. background: linear-gradient(90deg, #12b981, #087f57);
  317. border-radius: inherit;
  318. }
  319. .pay-card {
  320. margin: 12px 14px;
  321. border-radius: 14px;
  322. border: 1px solid #e3f0ea;
  323. background: #fff;
  324. overflow: hidden;
  325. }
  326. .pay-card__head {
  327. display: flex; align-items: center; justify-content: space-between; gap: 8px;
  328. padding: 12px 12px 10px;
  329. background: linear-gradient(90deg, #f3fbf7, #fff 55%);
  330. border-bottom: 1px solid #eef6f2;
  331. }
  332. .pay-card__head strong { font-size: 14px; font-weight: 760; }
  333. .pay-card__head .code { font-size: 11px; color: var(--muted); font-weight: 650; }
  334. .pay-card__body { padding: 12px; display: grid; gap: 12px; }
  335. .seg3 {
  336. display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  337. padding: 4px; border-radius: 12px; background: #eef6f2;
  338. }
  339. .seg3 button {
  340. min-height: 36px; border: 0; border-radius: 9px;
  341. background: transparent; color: var(--muted);
  342. font-size: 12px; font-weight: 720; cursor: pointer;
  343. }
  344. .seg3 button.on {
  345. background: #fff; color: var(--brand-dark);
  346. box-shadow: 0 2px 8px rgba(15,42,34,.08);
  347. }
  348. .field { display: grid; gap: 6px; }
  349. .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  350. .label { font-size: 12px; font-weight: 680; color: #3d524a; }
  351. .ctl {
  352. min-height: 42px; border-radius: 11px; padding: 0 12px;
  353. background: #f4faf7; border: 1px solid transparent;
  354. display: flex; align-items: center; justify-content: space-between;
  355. font-size: 14px; color: var(--text); font-weight: 600;
  356. }
  357. .ctl .ph { color: #94a3b8; font-weight: 500; }
  358. .ctl .chev { color: #9cb0a7; }
  359. /* 分期时间线 */
  360. .sch-head {
  361. display: flex; align-items: center; justify-content: space-between;
  362. margin-top: 2px;
  363. }
  364. .sch-head h5 {
  365. margin: 0; font-size: 13px; font-weight: 760; color: var(--text);
  366. display: flex; align-items: center; gap: 6px;
  367. }
  368. .sch-head h5::before {
  369. content: ""; width: 6px; height: 6px; border-radius: 50%;
  370. background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
  371. }
  372. .sch-head .hint { font-size: 11px; color: var(--muted); }
  373. .timeline { display: grid; gap: 0; position: relative; }
  374. .titem {
  375. position: relative;
  376. padding: 0 0 12px 22px;
  377. }
  378. .titem:last-child { padding-bottom: 0; }
  379. .titem::before {
  380. content: ""; position: absolute; left: 7px; top: 18px; bottom: 0;
  381. width: 2px; background: #d8eee4;
  382. }
  383. .titem:last-child::before { display: none; }
  384. .titem__dot {
  385. position: absolute; left: 0; top: 12px;
  386. width: 16px; height: 16px; border-radius: 50%;
  387. background: #fff; border: 2px solid var(--brand);
  388. display: grid; place-items: center;
  389. font-size: 9px; font-weight: 800; color: var(--brand-dark);
  390. z-index: 1;
  391. }
  392. .titem.is-paid .titem__dot {
  393. background: var(--brand); border-color: var(--brand); color: #fff;
  394. }
  395. .titem.is-overdue .titem__dot {
  396. border-color: var(--danger); color: var(--danger);
  397. }
  398. .titem.is-overdue::before { background: #fecaca; }
  399. .tbox {
  400. border-radius: 12px; border: 1px solid #e3f0ea; background: #fafdfb;
  401. overflow: hidden;
  402. }
  403. .tbox.is-open { border-color: var(--brand-mid); background: #fff; box-shadow: 0 4px 14px rgba(10,159,109,.08); }
  404. .tbox__summary {
  405. display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  406. padding: 10px 12px; cursor: pointer; align-items: center;
  407. }
  408. .tbox__summary .period { font-size: 13px; font-weight: 760; }
  409. .tbox__summary .due { font-size: 11px; color: var(--muted); grid-column: 1; }
  410. .tbox__summary .amt {
  411. grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right;
  412. font-size: 15px; font-weight: 800; color: var(--brand-dark);
  413. }
  414. .tbox__summary .chev {
  415. grid-column: 2; justify-self: end; font-size: 11px; color: var(--muted);
  416. }
  417. .tbox__body {
  418. display: none;
  419. padding: 0 12px 12px;
  420. border-top: 1px dashed #e3f0ea;
  421. }
  422. .tbox.is-open .tbox__body { display: grid; gap: 10px; padding-top: 12px; }
  423. .stat-row {
  424. display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  425. }
  426. .stat {
  427. padding: 8px 10px; border-radius: 10px; background: #f4faf7;
  428. font-size: 11px; color: var(--muted);
  429. }
  430. .stat b { display: block; margin-top: 2px; font-size: 14px; color: var(--text); }
  431. .stat.arrears b { color: #b45309; }
  432. .stat.paid b { color: var(--brand-dark); }
  433. .transfer {
  434. border-radius: 12px;
  435. border: 1px solid #e8f0ec;
  436. background: linear-gradient(180deg, #f8fffc, #fff);
  437. padding: 10px;
  438. display: grid; gap: 8px;
  439. }
  440. .transfer__top {
  441. display: flex; align-items: center; justify-content: space-between; gap: 8px;
  442. }
  443. .transfer__top strong { font-size: 13px; }
  444. .transfer__grid {
  445. display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  446. }
  447. .transfer .mini-field .k { font-size: 11px; color: var(--muted); }
  448. .transfer .mini-field .v { font-size: 13px; font-weight: 700; margin-top: 2px; }
  449. .voucher {
  450. display: flex; align-items: center; gap: 8px;
  451. padding: 8px; border-radius: 10px; background: #f4faf7;
  452. border: 1px dashed #b8ebd4; font-size: 12px; color: var(--brand-dark); font-weight: 650;
  453. }
  454. .voucher .thumb {
  455. width: 36px; height: 36px; border-radius: 8px;
  456. background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  457. flex: none;
  458. }
  459. .transfer__actions {
  460. display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
  461. }
  462. .add-transfer {
  463. min-height: 28px; width: 100%;
  464. border-radius: 999px; border: 0;
  465. background: linear-gradient(135deg, #12b981, #087f57);
  466. color: #fff;
  467. font-size: 11px; font-weight: 720; cursor: pointer;
  468. box-shadow: 0 3px 8px rgba(10,159,109,.22);
  469. }
  470. /* 现状对照简版 */
  471. .old .block { box-shadow: none; border-radius: 16px; }
  472. .old-card {
  473. margin: 10px 12px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
  474. }
  475. .old-card h4 { margin: 0 0 8px; font-size: 14px; }
  476. .old-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: #64748b; }
  477. .old-actions { margin-top: 10px; display: flex; gap: 8px; }
  478. .old-cell {
  479. margin: 0 12px 8px; padding: 10px 12px; background: #f7f8fa; border-radius: 8px;
  480. font-size: 13px; color: #475569;
  481. display: flex; justify-content: space-between;
  482. }
  483. .old-toolbar {
  484. margin: 8px 12px 0; display: flex; flex-wrap: wrap; gap: 6px;
  485. }
  486. .old-toolbar button {
  487. min-height: 26px; padding: 0 10px; border-radius: 999px;
  488. border: 0; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  489. }
  490. .note {
  491. margin-top: 18px; padding: 14px 16px; border-radius: 14px;
  492. background: #fff; border: 1px solid #e2e8f0; font-size: 13px; color: #475569;
  493. }
  494. .note code {
  495. font-size: 12px; padding: 2px 6px; border-radius: 6px; background: #f1f5f9; color: #0f766e;
  496. }
  497. </style>
  498. </head>
  499. <body>
  500. <div class="stage">
  501. <header class="hero">
  502. <h1>样本运输 · 缴费明细 — 好与美观专项</h1>
  503. <p>
  504. 针对销售专员 / 地区经理协议单中最复杂的两块:
  505. <strong>样本及运输</strong>(多样本勾选、运费批次、ETA)与
  506. <strong>缴费明细</strong>(趸交/分期、应缴批次、转账凭证)。
  507. 字段与现网一致,重点优化信息层级、批量操作与分期扫读。
  508. </p>
  509. <div class="chips">
  510. <span class="chip"><strong>对齐</strong> ProtocolSampleTransportPanel</span>
  511. <span class="chip"><strong>对齐</strong> ProtocolSamplePaymentPanel(V2)</span>
  512. <span class="chip"><strong>Token</strong> #0a9f6d</span>
  513. </div>
  514. <div class="goals">
  515. <div class="goal"><b>样本:一眼状态</b>类型 / 价格 / 运费 / ETA 分区展示,未配运费醒目提醒</div>
  516. <div class="goal"><b>样本:好勾好配</b>勾选态强化 + 已选条;操作统一小实心按钮</div>
  517. <div class="goal"><b>缴费:分期可读</b>时间线折叠,默认看期次金额,展开再录转账</div>
  518. <div class="goal"><b>缴费:缴清进度</b>顶部合计 + 已缴/欠缴进度条,减少翻找</div>
  519. </div>
  520. </header>
  521. <div class="tabs" role="tablist">
  522. <button type="button" class="tab is-active" data-tab="sample">① 样本及运输</button>
  523. <button type="button" class="tab" data-tab="pay">② 缴费明细</button>
  524. <button type="button" class="tab" data-tab="compare">③ 现状对照</button>
  525. </div>
  526. <div class="layout">
  527. <aside class="side" id="side">
  528. <h2>样本及运输 · 设计要点</h2>
  529. <p class="sub">列表卡片化,批量运费操作更清晰</p>
  530. <ol id="side-list">
  531. <li><strong>顶部汇总条</strong>:样本数 / 优惠价合计 / 待配运费数</li>
  532. <li><strong>实心小按钮</strong>:工具栏 / 卡片操作统一实心,高度约 26–28px</li>
  533. <li><strong>已选提示条</strong>:勾选后出现,提示可配置运费</li>
  534. <li><strong>指标双列</strong>:优惠价、存储年限、ETA 分区,忌纯文字堆砌</li>
  535. <li><strong>运费芯片</strong>:已配置绿虚线;未配置琥珀提醒</li>
  536. <li><strong>特殊样本</strong>:独立琥珀角标,不淹没在备注里</li>
  537. </ol>
  538. </aside>
  539. <div class="phones">
  540. <!-- ===== 样本运输(美化) ===== -->
  541. <div class="phone-wrap" data-view="sample">
  542. <div class="phone-label"><h3>样本及运输 · 推荐</h3><span class="tag">好用优先</span></div>
  543. <div class="phone">
  544. <div class="scroll">
  545. <section class="block">
  546. <div class="block__head">
  547. <div class="block__title-wrap">
  548. <h3 class="block__title"><span class="ico">样</span>样本及运输</h3>
  549. <p class="block__hint">勾选样本后可批量配置 / 取消运费</p>
  550. </div>
  551. </div>
  552. <div class="sum-strip">
  553. <div class="sum-item"><span class="k">样本</span><span class="v">2</span></div>
  554. <div class="sum-item"><span class="k">优惠价合计</span><span class="v">¥11.6万</span></div>
  555. <div class="sum-item warn"><span class="k">待配运费</span><span class="v">1</span></div>
  556. </div>
  557. <div class="ops">
  558. <button type="button" class="btn primary">+ 添加样本</button>
  559. <button type="button" class="btn secondary">配置运费</button>
  560. <button type="button" class="btn warn">取消运费</button>
  561. </div>
  562. <div class="sel-bar">
  563. <span>已选 1 个样本</span>
  564. <span class="link">去配置运费 ›</span>
  565. </div>
  566. <div class="sample-list">
  567. <!-- 已配运费 + 勾选 -->
  568. <article class="scard is-checked">
  569. <div class="scard__top">
  570. <span class="check">✓</span>
  571. <div class="scard__main">
  572. <div class="scard__code-row">
  573. <span class="scard__code">YB20261015001</span>
  574. <span class="pill ok">已采集</span>
  575. </div>
  576. <div class="type-row">
  577. <span class="type-badge">🩸 脐带血</span>
  578. <span class="special">特殊 · HBV</span>
  579. </div>
  580. <div class="metric-grid">
  581. <div class="metric">
  582. <span class="k">优惠价</span>
  583. <span class="v money">¥68,000</span>
  584. </div>
  585. <div class="metric">
  586. <span class="k">存储年限</span>
  587. <span class="v">20 年</span>
  588. </div>
  589. <div class="metric span2">
  590. <span class="k">预计到达</span>
  591. <span class="v">2026-10-18 14:00</span>
  592. </div>
  593. </div>
  594. <div class="freight-chip">
  595. <span class="dot"></span>
  596. 顺丰速运 · ¥120(本批共用)
  597. </div>
  598. </div>
  599. </div>
  600. <div class="scard__foot">
  601. <button type="button" class="mini secondary">编辑</button>
  602. <button type="button" class="mini danger">删除</button>
  603. </div>
  604. </article>
  605. <!-- 未配运费 -->
  606. <article class="scard is-alert">
  607. <div class="scard__top">
  608. <span class="check"></span>
  609. <div class="scard__main">
  610. <div class="scard__code-row">
  611. <span class="scard__code">YB20261015002</span>
  612. <span class="pill warn">检测中</span>
  613. </div>
  614. <div class="type-row">
  615. <span class="type-badge">🧬 脐带间充质</span>
  616. </div>
  617. <div class="metric-grid">
  618. <div class="metric">
  619. <span class="k">优惠价</span>
  620. <span class="v money">¥48,000</span>
  621. </div>
  622. <div class="metric">
  623. <span class="k">存储年限</span>
  624. <span class="v">15 年</span>
  625. </div>
  626. <div class="metric span2">
  627. <span class="k">预计到达</span>
  628. <span class="v muted">未填写</span>
  629. </div>
  630. </div>
  631. <div class="freight-chip none">
  632. <span class="dot"></span>
  633. 未配置运费 — 勾选后点「配置运费」
  634. </div>
  635. </div>
  636. </div>
  637. <div class="scard__foot">
  638. <button type="button" class="mini secondary">编辑</button>
  639. <button type="button" class="mini danger">删除</button>
  640. </div>
  641. </article>
  642. </div>
  643. </section>
  644. <!-- 空状态示意(缩略) -->
  645. <section class="block" style="opacity:.92">
  646. <div class="block__head">
  647. <div class="block__title-wrap">
  648. <h3 class="block__title"><span class="ico">空</span>空状态参考</h3>
  649. <p class="block__hint">无样本时引导添加,避免冰冷 Empty</p>
  650. </div>
  651. </div>
  652. <div class="empty">
  653. <div class="big">📦</div>
  654. <p>还没有样本,添加后可配置运输与缴费</p>
  655. <button type="button" class="btn">添加第一个样本</button>
  656. </div>
  657. </section>
  658. </div>
  659. </div>
  660. </div>
  661. <!-- 样本:编辑弹层示意 -->
  662. <div class="phone-wrap" data-view="sample">
  663. <div class="phone-label"><h3>添加/编辑样本 · 底部弹层</h3><span class="tag">交互</span></div>
  664. <div class="phone" style="background:#1f2a26">
  665. <div class="scroll" style="padding-top:120px; background:rgba(0,0,0,.35)">
  666. <div style="margin:0 0 0; background:#fff; border-radius:20px 20px 0 0; min-height:620px; padding:8px 0 24px;">
  667. <div style="width:40px;height:4px;border-radius:999px;background:#e2e8f0;margin:8px auto 12px;"></div>
  668. <h3 style="margin:0 16px 4px;font-size:17px;font-weight:760;">编辑样本</h3>
  669. <p style="margin:0 16px 14px;font-size:12px;color:#6b7b74;">保存后编码不可随意变更</p>
  670. <div style="padding:0 16px;display:grid;gap:12px;">
  671. <div class="field">
  672. <div class="label">样本类型 *</div>
  673. <div class="ctl">脐带血 <span class="chev">›</span></div>
  674. </div>
  675. <div class="field">
  676. <div class="label">样本编码</div>
  677. <div class="ctl"><span class="ph">保存后自动生成</span></div>
  678. </div>
  679. <div class="field-row">
  680. <div class="field">
  681. <div class="label">原价格</div>
  682. <div class="ctl"><span class="ph">¥72,000</span></div>
  683. </div>
  684. <div class="field">
  685. <div class="label">优惠价 *</div>
  686. <div class="ctl">68000</div>
  687. </div>
  688. </div>
  689. <div class="field-row">
  690. <div class="field">
  691. <div class="label">存储年限</div>
  692. <div class="ctl">20</div>
  693. </div>
  694. <div class="field">
  695. <div class="label">样本状态</div>
  696. <div class="ctl">已采集 <span class="chev">›</span></div>
  697. </div>
  698. </div>
  699. <div class="field">
  700. <div class="label">预计到达时间</div>
  701. <div class="ctl">2026-10-18 14:00 <span class="chev">›</span></div>
  702. </div>
  703. <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#fff7e8;border:1px solid #f0e0bc;">
  704. <div>
  705. <div style="font-size:13px;font-weight:720;">特殊样本</div>
  706. <div style="font-size:11px;color:#92400e;margin-top:2px;">开启后须填写特殊说明</div>
  707. </div>
  708. <div style="width:44px;height:26px;border-radius:999px;background:#0a9f6d;position:relative;">
  709. <i style="position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;"></i>
  710. </div>
  711. </div>
  712. <div class="field">
  713. <div class="label">特殊说明</div>
  714. <div class="ctl" style="min-height:64px;align-items:flex-start;padding-top:10px;">HBV 携带,入库加急</div>
  715. </div>
  716. <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;">
  717. <button type="button" class="mini secondary" style="min-height:36px;border-radius:10px;font-size:13px;">取消</button>
  718. <button type="button" class="mini primary" style="min-height:36px;border-radius:10px;font-size:13px;">确定</button>
  719. </div>
  720. </div>
  721. </div>
  722. </div>
  723. </div>
  724. </div>
  725. <!-- ===== 缴费明细 ===== -->
  726. <div class="phone-wrap" data-view="pay" hidden>
  727. <div class="phone-label"><h3>缴费明细 · 推荐</h3><span class="tag">分期时间线</span></div>
  728. <div class="phone">
  729. <div class="scroll">
  730. <section class="block">
  731. <div class="block__head">
  732. <div class="block__title-wrap">
  733. <h3 class="block__title"><span class="ico">缴</span>缴费信息</h3>
  734. <p class="block__hint">按样本配置方案;应缴批次自动生成,可微调</p>
  735. </div>
  736. </div>
  737. <div class="pay-sum">
  738. <div class="pay-sum__row">
  739. <span>合同合计</span>
  740. <strong>¥116,000</strong>
  741. </div>
  742. <div class="pay-sum__row">
  743. <span>已缴 ¥28,000 · 欠缴</span>
  744. <span class="amt">¥88,000</span>
  745. </div>
  746. <div class="progress"><i></i></div>
  747. </div>
  748. <!-- 样本1 分期 -->
  749. <article class="pay-card">
  750. <div class="pay-card__head">
  751. <div>
  752. <strong>脐带血</strong>
  753. <div class="code">YB20261015001</div>
  754. </div>
  755. <span class="pill ok">分期 · 3 期</span>
  756. </div>
  757. <div class="pay-card__body">
  758. <div>
  759. <div class="label" style="margin-bottom:6px;">缴费模式</div>
  760. <div class="seg3">
  761. <button type="button">趸交</button>
  762. <button type="button" class="on">分期</button>
  763. <button type="button">固定比例</button>
  764. </div>
  765. </div>
  766. <div class="field">
  767. <div class="label">样本合同金额</div>
  768. <div class="ctl">68000</div>
  769. </div>
  770. <div class="field-row">
  771. <div class="field">
  772. <div class="label">期数</div>
  773. <div class="ctl">3</div>
  774. </div>
  775. <div class="field">
  776. <div class="label">间隔(月)</div>
  777. <div class="ctl">3</div>
  778. </div>
  779. </div>
  780. <div class="field-row">
  781. <div class="field">
  782. <div class="label">开始时间</div>
  783. <div class="ctl">2026-10-20 <span class="chev">›</span></div>
  784. </div>
  785. <div class="field">
  786. <div class="label">催缴预警(天)</div>
  787. <div class="ctl">7</div>
  788. </div>
  789. </div>
  790. <div class="sch-head">
  791. <h5>应缴批次</h5>
  792. <span class="hint">点开录入转账</span>
  793. </div>
  794. <div class="timeline">
  795. <!-- 第1期 已缴 展开 -->
  796. <div class="titem is-paid">
  797. <div class="titem__dot">✓</div>
  798. <div class="tbox is-open">
  799. <div class="tbox__summary">
  800. <span class="period">第 1 期</span>
  801. <span class="amt">¥28,000</span>
  802. <span class="due">应缴 2026-10-20 · 已结清</span>
  803. <span class="chev">收起 ▲</span>
  804. </div>
  805. <div class="tbox__body">
  806. <div class="stat-row">
  807. <div class="stat paid"><span>已缴</span><b>¥28,000</b></div>
  808. <div class="stat arrears"><span>欠缴</span><b>¥0</b></div>
  809. </div>
  810. <article class="transfer">
  811. <div class="transfer__top">
  812. <strong>转账 1</strong>
  813. <span class="pill ok">财务已确认</span>
  814. </div>
  815. <div class="transfer__grid">
  816. <div class="mini-field"><div class="k">方式</div><div class="v">微信转账</div></div>
  817. <div class="mini-field"><div class="k">金额</div><div class="v">¥28,000</div></div>
  818. <div class="mini-field" style="grid-column:1/-1"><div class="k">时间</div><div class="v">2026-10-15 16:22</div></div>
  819. </div>
  820. <div class="voucher">
  821. <span class="thumb"></span>
  822. 转账凭证.jpg · 已上传
  823. </div>
  824. </article>
  825. </div>
  826. </div>
  827. </div>
  828. <!-- 第2期 待缴 折叠 -->
  829. <div class="titem">
  830. <div class="titem__dot">2</div>
  831. <div class="tbox">
  832. <div class="tbox__summary">
  833. <span class="period">第 2 期</span>
  834. <span class="amt">¥20,000</span>
  835. <span class="due">应缴 2027-01-20 · 待缴费</span>
  836. <span class="chev">展开 ▼</span>
  837. </div>
  838. </div>
  839. </div>
  840. <!-- 第3期 -->
  841. <div class="titem">
  842. <div class="titem__dot">3</div>
  843. <div class="tbox">
  844. <div class="tbox__summary">
  845. <span class="period">第 3 期</span>
  846. <span class="amt">¥20,000</span>
  847. <span class="due">应缴 2027-04-20 · 待缴费</span>
  848. <span class="chev">展开 ▼</span>
  849. </div>
  850. </div>
  851. </div>
  852. </div>
  853. </div>
  854. </article>
  855. <!-- 样本2 趸交 + 展开录转账 -->
  856. <article class="pay-card">
  857. <div class="pay-card__head">
  858. <div>
  859. <strong>脐带间充质</strong>
  860. <div class="code">YB20261015002</div>
  861. </div>
  862. <span class="pill warn">趸交</span>
  863. </div>
  864. <div class="pay-card__body">
  865. <div class="seg3">
  866. <button type="button" class="on">趸交</button>
  867. <button type="button">分期</button>
  868. <button type="button">固定比例</button>
  869. </div>
  870. <div class="field-row">
  871. <div class="field">
  872. <div class="label">合同金额</div>
  873. <div class="ctl">48000</div>
  874. </div>
  875. <div class="field">
  876. <div class="label">截止时间</div>
  877. <div class="ctl">2026-11-30 <span class="chev">›</span></div>
  878. </div>
  879. </div>
  880. <div class="sch-head">
  881. <h5>应缴批次</h5>
  882. <span class="hint">1 笔趸交</span>
  883. </div>
  884. <div class="timeline">
  885. <div class="titem is-overdue">
  886. <div class="titem__dot">!</div>
  887. <div class="tbox is-open">
  888. <div class="tbox__summary">
  889. <span class="period">趸交应缴</span>
  890. <span class="amt">¥48,000</span>
  891. <span class="due" style="color:#b91c1c">截止 2026-11-30 · 待登记</span>
  892. <span class="chev">收起 ▲</span>
  893. </div>
  894. <div class="tbox__body">
  895. <div class="stat-row">
  896. <div class="stat paid"><span>已缴</span><b>¥0</b></div>
  897. <div class="stat arrears"><span>欠缴</span><b>¥48,000</b></div>
  898. </div>
  899. <article class="transfer">
  900. <div class="transfer__top">
  901. <strong>转账 1(草稿)</strong>
  902. <span class="pill muted">待保存</span>
  903. </div>
  904. <div class="transfer__grid">
  905. <div class="mini-field">
  906. <div class="k">转账方式</div>
  907. <div class="v" style="color:#94a3b8;font-weight:500">请选择 ›</div>
  908. </div>
  909. <div class="mini-field">
  910. <div class="k">转账金额</div>
  911. <div class="v" style="color:#94a3b8;font-weight:500">请输入</div>
  912. </div>
  913. </div>
  914. <div class="voucher" style="border-style:dashed;">
  915. <span class="thumb" style="background:#e9f9f2;display:grid;place-items:center;color:#0a9f6d;font-size:18px;">+</span>
  916. 点击上传转账凭证
  917. </div>
  918. <div class="transfer__actions">
  919. <button type="button" class="mini danger">删除</button>
  920. <button type="button" class="mini secondary">保存</button>
  921. <button type="button" class="mini primary">提交财务</button>
  922. </div>
  923. </article>
  924. <button type="button" class="add-transfer">+ 添加转账</button>
  925. </div>
  926. </div>
  927. </div>
  928. </div>
  929. </div>
  930. </article>
  931. </section>
  932. </div>
  933. </div>
  934. </div>
  935. <!-- ===== 现状对照 ===== -->
  936. <div class="phone-wrap" data-view="compare" hidden>
  937. <div class="phone-label"><h3>现状 · 样本运输</h3><span class="tag muted">AS-IS</span></div>
  938. <div class="phone old">
  939. <div class="scroll" style="padding-top:44px;">
  940. <section class="block">
  941. <div style="padding:16px 16px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
  942. <h2 style="margin:0;padding-left:10px;border-left:3px solid #0a9f6d;font-size:15px;">样本及运输</h2>
  943. </div>
  944. <div class="old-toolbar">
  945. <button type="button">添加样本</button>
  946. <button type="button">配置运费</button>
  947. <button type="button" style="border-color:#cf8a19;color:#cf8a19;">取消运费</button>
  948. </div>
  949. <p style="margin:8px 16px 12px;font-size:12px;color:#64748b;">规则与管理端「样本及运输」一致</p>
  950. <div class="old-card">
  951. <h4>☐ YB20261015001 <span class="pill ok" style="float:right;">已采集</span></h4>
  952. <div class="old-meta">
  953. <span>脐带血</span><span>优惠价 ¥68,000</span>
  954. <span>顺丰 · ¥120(共用)</span><span>ETA 10-18</span>
  955. </div>
  956. <div class="old-actions">
  957. <button type="button" class="mini">编辑</button>
  958. <button type="button" class="mini danger">删除</button>
  959. </div>
  960. </div>
  961. <div class="old-card">
  962. <h4>☐ YB20261015002 <span class="pill warn" style="float:right;">检测中</span></h4>
  963. <div class="old-meta">
  964. <span>脐带间充质</span><span>优惠价 ¥48,000</span>
  965. <span style="color:#94a3b8;">未配置运费</span>
  966. </div>
  967. <div class="old-actions">
  968. <button type="button" class="mini">编辑</button>
  969. <button type="button" class="mini danger">删除</button>
  970. </div>
  971. </div>
  972. </section>
  973. </div>
  974. </div>
  975. </div>
  976. <div class="phone-wrap" data-view="compare" hidden>
  977. <div class="phone-label"><h3>现状 · 缴费明细</h3><span class="tag muted">AS-IS</span></div>
  978. <div class="phone old">
  979. <div class="scroll" style="padding-top:44px;">
  980. <section class="block">
  981. <h2 style="margin:16px 16px 0;padding-left:10px;border-left:3px solid #0a9f6d;font-size:15px;">缴费信息</h2>
  982. <p style="margin:8px 16px 12px;font-size:12px;color:#64748b;">按样本配置缴费方案…</p>
  983. <div style="padding:0 16px 8px;display:flex;justify-content:space-between;">
  984. <strong style="font-size:14px;">脐带血</strong>
  985. <span style="font-size:12px;color:#64748b;">YB20261015001</span>
  986. </div>
  987. <div class="old-cell"><span>缴费模式</span><span>分期 ›</span></div>
  988. <div class="old-cell"><span>样本合同金额</span><span>68000</span></div>
  989. <div class="old-cell"><span>分期期数</span><span>3</span></div>
  990. <div class="old-cell"><span>每期间隔(月)</span><span>3</span></div>
  991. <div style="padding:12px 16px 8px;font-size:13px;font-weight:600;">应缴批次</div>
  992. <div style="margin:0 12px 12px;padding:10px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;">
  993. <div style="color:#0a9f6d;font-size:13px;font-weight:600;margin-bottom:8px;">第 1 期</div>
  994. <div class="old-cell" style="margin:0 0 6px;"><span>应缴费金额</span><span>28000</span></div>
  995. <div class="old-cell" style="margin:0 0 6px;"><span>应缴费时间</span><span>2026-10-20</span></div>
  996. <div style="font-size:12px;color:#64748b;padding:4px 0;">已缴 ¥28000 · 欠缴 ¥0</div>
  997. <div style="border-top:1px solid #e2e8f0;margin-top:8px;padding-top:8px;">
  998. <strong style="font-size:13px;">转账 1</strong>
  999. <div class="old-cell" style="margin:8px 0 0;"><span>转账方式</span><span>微信</span></div>
  1000. <div class="old-cell" style="margin:6px 0 0;"><span>转账金额</span><span>28000</span></div>
  1001. </div>
  1002. </div>
  1003. </section>
  1004. </div>
  1005. </div>
  1006. </div>
  1007. </div>
  1008. </div>
  1009. <div class="note">
  1010. 文件:<code>mobile-ui/zkxw-mobile-oa-protocol-sample-pay-beautify-demo.html</code>
  1011. · 总表单 Demo 见 <code>zkxw-mobile-oa-protocol-form-beautify-demo.html</code>。
  1012. 确认本专项后,优先改
  1013. <code>ProtocolSampleTransportPanel.vue</code> /
  1014. <code>ProtocolSamplePaymentPanel.vue</code> 的结构与 scoped 样式(不改业务规则)。
  1015. </div>
  1016. </div>
  1017. <script>
  1018. const copy = {
  1019. sample: {
  1020. title: '样本及运输 · 设计要点',
  1021. sub: '列表卡片化,批量运费操作更清晰',
  1022. items: [
  1023. ['顶部汇总条', '样本数 / 优惠价合计 / 待配运费数'],
  1024. ['实心小按钮', '工具栏/卡片操作统一实心,约 26–28px 高'],
  1025. ['已选提示条', '勾选后出现,引导去配置运费'],
  1026. ['指标双列', '优惠价、年限、ETA 分区,忌纯文字堆砌'],
  1027. ['运费芯片', '已配置绿虚线;未配置琥珀提醒'],
  1028. ['特殊样本', '独立琥珀角标,不淹没在备注里']
  1029. ]
  1030. },
  1031. pay: {
  1032. title: '缴费明细 · 设计要点',
  1033. sub: '分期时间线 + 折叠转账,降低长表压迫感',
  1034. items: [
  1035. ['顶部缴清进度', '合同合计 / 已缴 / 欠缴 + 进度条'],
  1036. ['模式三段切换', '趸交 / 分期 / 固定比例,一键切换'],
  1037. ['期次时间线', '左轴圆点:已结清 / 待缴 / 逾期语义色'],
  1038. ['默认折叠', '摘要看期次+金额+日期;展开再录转账'],
  1039. ['转账卡片', '方式/金额/凭证/操作同卡,状态 Tag 明确'],
  1040. ['添加转账', '虚线按钮在期次内,路径短']
  1041. ]
  1042. },
  1043. compare: {
  1044. title: '现状问题(对照)',
  1045. sub: '现网 van-cell 堆叠,信息密度高但层级弱',
  1046. items: [
  1047. ['样本 meta 平铺', '类型/价/运费/ETA 挤一行,扫读难'],
  1048. ['未配运费不醒目', '灰色小字,易漏配'],
  1049. ['缴费全展开', '多期 × 多转账 = 超长滚动'],
  1050. ['缺全局进度', '不知还欠多少,要心算'],
  1051. ['描边按钮偏大', '操作权重平均,描边样式占地方']
  1052. ]
  1053. }
  1054. }
  1055. const tabs = document.querySelectorAll('.tab')
  1056. const wraps = document.querySelectorAll('.phone-wrap')
  1057. const sideTitle = document.querySelector('#side h2')
  1058. const sideSub = document.querySelector('#side .sub')
  1059. const sideList = document.getElementById('side-list')
  1060. function renderSide(key) {
  1061. const c = copy[key]
  1062. sideTitle.textContent = c.title
  1063. sideSub.textContent = c.sub
  1064. sideList.innerHTML = c.items.map(([a, b]) => `<li><strong>${a}</strong>:${b}</li>`).join('')
  1065. }
  1066. function show(tab) {
  1067. tabs.forEach((t) => t.classList.toggle('is-active', t.dataset.tab === tab))
  1068. wraps.forEach((w) => { w.hidden = w.dataset.view !== tab })
  1069. renderSide(tab)
  1070. }
  1071. tabs.forEach((t) => t.addEventListener('click', () => show(t.dataset.tab)))
  1072. // 简易展开交互(缴费时间线)
  1073. document.addEventListener('click', (e) => {
  1074. const sum = e.target.closest('.tbox__summary')
  1075. if (!sum) return
  1076. const box = sum.closest('.tbox')
  1077. if (!box || !box.querySelector('.tbox__body')) return
  1078. box.classList.toggle('is-open')
  1079. const chev = sum.querySelector('.chev')
  1080. if (chev) chev.textContent = box.classList.contains('is-open') ? '收起 ▲' : '展开 ▼'
  1081. })
  1082. </script>
  1083. </body>
  1084. </html>