Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
wuzilong
/
zkxw
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Ağaç: a4f00b2839
Dallar Biçim İmleri
zkxw
/
web-admin
/
demo-payment-confirm-layouts.html

demo-payment-confirm-layouts.html 39 KB
Geçmiş Ham

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280 
  1. <!doctype html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>缴退费财务确认 · 布局方案 Demo</title>
    7. 

  7.     <style>
    8. 

  8.       *,
    9. 

  9.       *::before,
    10. 

  10.       *::after {
    11. 

  11.         box-sizing: border-box;
    12. 

  12.         margin: 0;
    13. 

  13.         padding: 0;
    14. 

  14.       }
    15. 

  15. 

  16.       :root {
    17. 

  17.         --primary: #10b981;
    18. 

  18.         --primary-dark: #059669;
    19. 

  19.         --primary-bg: #ecfdf5;
    20. 

  20.         --mint-border: #c5e0d4;
    21. 

  21.         --text: #1e293b;
    22. 

  22.         --muted: #64748b;
    23. 

  23.         --surface: #fff;
    24. 

  24.         --page-bg: #f0f2f5;
    25. 

  25.         --border: #e2e8f0;
    26. 

  26.         --warning: #d97706;
    27. 

  27.         --warning-bg: #fffbeb;
    28. 

  28.       }
    29. 

  29. 

  30.       body {
    31. 

  31.         font-family:
    32. 

  32.           Inter,
    33. 

  33.           -apple-system,
    34. 

  34.           BlinkMacSystemFont,
    35. 

  35.           'PingFang SC',
    36. 

  36.           'Hiragino Sans GB',
    37. 

  37.           'Microsoft YaHei',
    38. 

  38.           sans-serif;
    39. 

  39.         font-size: 14px;
    40. 

  40.         line-height: 1.5;
    41. 

  41.         color: var(--text);
    42. 

  42.         background: var(--page-bg);
    43. 

  43.         padding: 32px 24px 64px;
    44. 

  44.       }
    45. 

  45. 

  46.       .page-head {
    47. 

  47.         max-width: 1200px;
    48. 

  48.         margin: 0 auto 28px;
    49. 

  49.       }
    50. 

  50. 

  51.       .page-head h1 {
    52. 

  52.         font-size: 20px;
    53. 

  53.         font-weight: 600;
    54. 

  54.         margin-bottom: 8px;
    55. 

  55.       }
    56. 

  56. 

  57.       .page-head p {
    58. 

  58.         color: var(--muted);
    59. 

  59.         max-width: 860px;
    60. 

  60.         line-height: 1.6;
    61. 

  61.       }
    62. 

  62. 

  63.       .scheme-nav {
    64. 

  64.         max-width: 1200px;
    65. 

  65.         margin: 0 auto 20px;
    66. 

  66.         display: flex;
    67. 

  67.         flex-wrap: wrap;
    68. 

  68.         gap: 8px;
    69. 

  69.       }
    70. 

  70. 

  71.       .scheme-nav a {
    72. 

  72.         padding: 6px 14px;
    73. 

  73.         border-radius: 999px;
    74. 

  74.         border: 1px solid var(--border);
    75. 

  75.         background: var(--surface);
    76. 

  76.         color: var(--muted);
    77. 

  77.         font-size: 12px;
    78. 

  78.         text-decoration: none;
    79. 

  79.         transition: all 0.15s;
    80. 

  80.       }
    81. 

  81. 

  82.       .scheme-nav a:hover {
    83. 

  83.         border-color: var(--mint-border);
    84. 

  84.         color: var(--primary-dark);
    85. 

  85.       }
    86. 

  86. 

  87.       .demo-block {
    88. 

  88.         max-width: 1200px;
    89. 

  89.         margin: 0 auto 32px;
    90. 

  90.         background: var(--surface);
    91. 

  91.         border: 1px solid var(--border);
    92. 

  92.         border-radius: 10px;
    93. 

  93.         overflow: hidden;
    94. 

  94.         box-shadow: 0 1px 3px rgb(15 23 42 / 6%);
    95. 

  95.       }
    96. 

  96. 

  97.       .demo-label {
    98. 

  98.         display: flex;
    99. 

  99.         align-items: flex-start;
    100. 

  100.         justify-content: space-between;
    101. 

  101.         gap: 16px;
    102. 

  102.         padding: 14px 20px;
    103. 

  103.         border-bottom: 1px solid var(--border);
    104. 

  104.         background: #fafbfc;
    105. 

  105.       }
    106. 

  106. 

  107.       .demo-label strong {
    108. 

  108.         font-size: 14px;
    109. 

  109.         font-weight: 600;
    110. 

  110.         display: block;
    111. 

  111.         margin-bottom: 4px;
    112. 

  112.       }
    113. 

  113. 

  114.       .demo-label .tag-rec {
    115. 

  115.         flex-shrink: 0;
    116. 

  116.         padding: 3px 10px;
    117. 

  117.         border-radius: 999px;
    118. 

  118.         background: var(--primary-bg);
    119. 

  119.         color: var(--primary-dark);
    120. 

  120.         font-size: 11px;
    121. 

  121.         font-weight: 600;
    122. 

  122.       }
    123. 

  123. 

  124.       .demo-label span {
    125. 

  125.         font-size: 12px;
    126. 

  126.         color: var(--muted);
    127. 

  127.         line-height: 1.5;
    128. 

  128.       }
    129. 

  129. 

  130.       .panel-shell {
    131. 

  131.         min-height: 480px;
    132. 

  132.       }
    133. 

  133. 

  134.       /* ── 共用：面板标题 ── */
    135. 

  135.       .panel-top {
    136. 

  136.         display: flex;
    137. 

  137.         align-items: center;
    138. 

  138.         justify-content: space-between;
    139. 

  139.         padding: 16px 24px;
    140. 

  140.         border-bottom: 1px solid var(--border);
    141. 

  141.       }
    142. 

  142. 

  143.       .title-bar-heading {
    144. 

  144.         display: flex;
    145. 

  145.         align-items: center;
    146. 

  146.         gap: 8px;
    147. 

  147.         font-size: 16px;
    148. 

  148.         font-weight: 600;
    149. 

  149.       }
    150. 

  150. 

  151.       .title-bar-heading::before {
    152. 

  152.         content: '';
    153. 

  153.         width: 4px;
    154. 

  154.         height: 14px;
    155. 

  155.         border-radius: 999px;
    156. 

  156.         background: var(--primary-dark);
    157. 

  157.       }
    158. 

  158. 

  159.       /* ── 共用：胶囊 Tab（缴费/退费） ── */
    160. 

  160.       .type-capsule {
    161. 

  161.         display: inline-flex;
    162. 

  162.         gap: 4px;
    163. 

  163.         padding: 4px;
    164. 

  164.         background: #f1f5f9;
    165. 

  165.         border: 1px solid var(--border);
    166. 

  166.         border-radius: 8px;
    167. 

  167.       }
    168. 

  168. 

  169.       .type-capsule__btn {
    170. 

  170.         display: inline-flex;
    171. 

  171.         align-items: center;
    172. 

  172.         gap: 6px;
    173. 

  173.         padding: 8px 18px;
    174. 

  174.         border: none;
    175. 

  175.         border-radius: 6px;
    176. 

  176.         background: transparent;
    177. 

  177.         font-size: 13px;
    178. 

  178.         font-weight: 500;
    179. 

  179.         color: var(--muted);
    180. 

  180.         cursor: pointer;
    181. 

  181.         white-space: nowrap;
    182. 

  182.         transition: all 0.15s;
    183. 

  183.       }
    184. 

  184. 

  185.       .type-capsule__btn:hover:not(.is-active) {
    186. 

  186.         color: var(--text);
    187. 

  187.         background: rgb(255 255 255 / 60%);
    188. 

  188.       }
    189. 

  189. 

  190.       .type-capsule__btn.is-active {
    191. 

  191.         background: #fff;
    192. 

  192.         color: var(--primary-dark);
    193. 

  193.         box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
    194. 

  194.         font-weight: 600;
    195. 

  195.       }
    196. 

  196. 

  197.       .type-capsule__badge {
    198. 

  198.         display: inline-flex;
    199. 

  199.         align-items: center;
    200. 

  200.         justify-content: center;
    201. 

  201.         min-width: 18px;
    202. 

  202.         height: 18px;
    203. 

  203.         padding: 0 5px;
    204. 

  204.         border-radius: 999px;
    205. 

  205.         background: var(--warning-bg);
    206. 

  206.         color: var(--warning);
    207. 

  207.         font-size: 11px;
    208. 

  208.         font-weight: 600;
    209. 

  209.       }
    210. 

  210. 

  211.       .type-capsule__btn.is-active .type-capsule__badge {
    212. 

  212.         background: var(--primary-bg);
    213. 

  213.         color: var(--primary-dark);
    214. 

  214.       }
    215. 

  215. 

  216.       /* ── 共用：筛选区 ── */
    217. 

  217.       .filter-block {
    218. 

  218.         padding: 16px 24px;
    219. 

  219.         border-bottom: 1px solid var(--border);
    220. 

  220.       }
    221. 

  221. 

  222.       .filter-grid {
    223. 

  223.         display: grid;
    224. 

  224.         grid-template-columns: 1fr 280px;
    225. 

  225.         gap: 12px 16px;
    226. 

  226.       }
    227. 

  227. 

  228.       .filter-field label {
    229. 

  229.         display: block;
    230. 

  230.         font-size: 11px;
    231. 

  231.         font-weight: 500;
    232. 

  232.         color: var(--muted);
    233. 

  233.         margin-bottom: 4px;
    234. 

  234.       }
    235. 

  235. 

  236.       .filter-field input,
    237. 

  237.       .filter-field .fake-date {
    238. 

  238.         width: 100%;
    239. 

  239.         height: 36px;
    240. 

  240.         padding: 0 12px;
    241. 

  241.         border: 1px solid var(--border);
    242. 

  242.         border-radius: 8px;
    243. 

  243.         font-size: 14px;
    244. 

  244.         color: var(--text);
    245. 

  245.         background: #fff;
    246. 

  246.       }
    247. 

  247. 

  248.       .filter-actions-row {
    249. 

  249.         display: flex;
    250. 

  250.         align-items: center;
    251. 

  251.         justify-content: space-between;
    252. 

  252.         gap: 12px;
    253. 

  253.         margin-top: 12px;
    254. 

  254.       }
    255. 

  255. 

  256.       .filter-hint {
    257. 

  257.         font-size: 12px;
    258. 

  258.         color: var(--muted);
    259. 

  259.         flex: 1;
    260. 

  260.         min-width: 0;
    261. 

  261.       }
    262. 

  262. 

  263.       .filter-actions-end {
    264. 

  264.         display: flex;
    265. 

  265.         gap: 8px;
    266. 

  266.         flex-shrink: 0;
    267. 

  267.       }
    268. 

  268. 

  269.       .btn {
    270. 

  270.         display: inline-flex;
    271. 

  271.         align-items: center;
    272. 

  272.         gap: 6px;
    273. 

  273.         height: 36px;
    274. 

  274.         padding: 0 16px;
    275. 

  275.         border-radius: 8px;
    276. 

  276.         font-size: 14px;
    277. 

  277.         cursor: pointer;
    278. 

  278.         border: 1px solid var(--border);
    279. 

  279.         background: #fff;
    280. 

  280.         color: var(--text);
    281. 

  281.       }
    282. 

  282. 

  283.       .btn-main {
    284. 

  284.         border-color: var(--primary);
    285. 

  285.         background: var(--primary);
    286. 

  286.         color: #fff;
    287. 

  287.       }
    288. 

  288. 

  289.       /* ── 共用：Tag ── */
    290. 

  290.       .tag {
    291. 

  291.         display: inline-flex;
    292. 

  292.         align-items: center;
    293. 

  293.         padding: 2px 8px;
    294. 

  294.         border-radius: 4px;
    295. 

  295.         font-size: 12px;
    296. 

  296.         font-weight: 500;
    297. 

  297.       }
    298. 

  298. 

  299.       .tag.warning {
    300. 

  300.         background: var(--warning-bg);
    301. 

  301.         color: var(--warning);
    302. 

  302.       }
    303. 

  303. 

  304.       .tag.success {
    305. 

  305.         background: var(--primary-bg);
    306. 

  306.         color: var(--primary-dark);
    307. 

  307.       }
    308. 

  308. 

  309.       .tag.info {
    310. 

  310.         background: #f1f5f9;
    311. 

  311.         color: var(--muted);
    312. 

  312.       }
    313. 

  313. 

  314.       .tag.muted {
    315. 

  315.         background: #f8fafc;
    316. 

  316.         color: var(--muted);
    317. 

  317.       }
    318. 

  318. 

  319.       /* ── 共用：确认卡片 ── */
    320. 

  320.       .confirm-card {
    321. 

  321.         border: 1px solid var(--border);
    322. 

  322.         border-radius: 10px;
    323. 

  323.         background: #fff;
    324. 

  324.         padding: 16px 18px;
    325. 

  325.         transition: box-shadow 0.15s, border-color 0.15s;
    326. 

  326.       }
    327. 

  327. 

  328.       .confirm-card:hover {
    329. 

  329.         border-color: var(--mint-border);
    330. 

  330.         box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
    331. 

  331.       }
    332. 

  332. 

  333.       .confirm-card.is-pending {
    334. 

  334.         border-left: 3px solid var(--warning);
    335. 

  335.       }
    336. 

  336. 

  337.       .confirm-card.is-confirmed {
    338. 

  338.         border-left: 3px solid var(--primary);
    339. 

  339.         opacity: 0.92;
    340. 

  340.       }
    341. 

  341. 

  342.       .confirm-card__head {
    343. 

  343.         display: flex;
    344. 

  344.         align-items: flex-start;
    345. 

  345.         justify-content: space-between;
    346. 

  346.         gap: 12px;
    347. 

  347.         margin-bottom: 12px;
    348. 

  348.       }
    349. 

  349. 

  350.       .confirm-card__name {
    351. 

  351.         font-size: 15px;
    352. 

  352.         font-weight: 600;
    353. 

  353.         margin-bottom: 2px;
    354. 

  354.       }
    355. 

  355. 

  356.       .confirm-card__sub {
    357. 

  357.         font-size: 12px;
    358. 

  358.         color: var(--muted);
    359. 

  359.       }
    360. 

  360. 

  361.       .confirm-card__amount {
    362. 

  362.         text-align: right;
    363. 

  363.         flex-shrink: 0;
    364. 

  364.       }
    365. 

  365. 

  366.       .confirm-card__amount-val {
    367. 

  367.         font-size: 18px;
    368. 

  368.         font-weight: 700;
    369. 

  369.         color: var(--primary-dark);
    370. 

  370.         font-variant-numeric: tabular-nums;
    371. 

  371.       }
    372. 

  372. 

  373.       .confirm-card__amount-label {
    374. 

  374.         font-size: 11px;
    375. 

  375.         color: var(--muted);
    376. 

  376.       }
    377. 

  377. 

  378.       .confirm-card__grid {
    379. 

  379.         display: grid;
    380. 

  380.         grid-template-columns: repeat(3, 1fr);
    381. 

  381.         gap: 8px 16px;
    382. 

  382.         margin-bottom: 14px;
    383. 

  383.       }
    384. 

  384. 

  385.       .confirm-card__field label {
    386. 

  386.         display: block;
    387. 

  387.         font-size: 11px;
    388. 

  388.         color: var(--muted);
    389. 

  389.         margin-bottom: 2px;
    390. 

  390.       }
    391. 

  391. 

  392.       .confirm-card__field span {
    393. 

  393.         font-size: 13px;
    394. 

  394.         color: var(--text);
    395. 

  395.       }
    396. 

  396. 

  397.       .confirm-card__foot {
    398. 

  398.         display: flex;
    399. 

  399.         align-items: center;
    400. 

  400.         justify-content: space-between;
    401. 

  401.         gap: 12px;
    402. 

  402.         padding-top: 12px;
    403. 

  403.         border-top: 1px solid #f1f5f9;
    404. 

  404.       }
    405. 

  405. 

  406.       .confirm-card__meta {
    407. 

  407.         font-size: 12px;
    408. 

  408.         color: var(--muted);
    409. 

  409.       }
    410. 

  410. 

  411.       .btn-op {
    412. 

  412.         height: 32px;
    413. 

  413.         padding: 0 14px;
    414. 

  414.         border-radius: 8px;
    415. 

  415.         font-size: 13px;
    416. 

  416.         font-weight: 500;
    417. 

  417.         cursor: pointer;
    418. 

  418.         border: 1px solid var(--primary);
    419. 

  419.         background: var(--primary);
    420. 

  420.         color: #fff;
    421. 

  421.       }
    422. 

  422. 

  423.       .btn-op.ghost {
    424. 

  424.         border-color: var(--border);
    425. 

  425.         background: #fff;
    426. 

  426.         color: var(--text);
    427. 

  427.       }
    428. 

  428. 

  429.       /* ── 分区标题 ── */
    430. 

  430.       .section-head {
    431. 

  431.         display: flex;
    432. 

  432.         align-items: center;
    433. 

  433.         justify-content: space-between;
    434. 

  434.         padding: 16px 24px 12px;
    435. 

  435.       }
    436. 

  436. 

  437.       .section-head h3 {
    438. 

  438.         display: flex;
    439. 

  439.         align-items: center;
    440. 

  440.         gap: 8px;
    441. 

  441.         font-size: 14px;
    442. 

  442.         font-weight: 600;
    443. 

  443.       }
    444. 

  444. 

  445.       .section-head h3::before {
    446. 

  446.         content: '';
    447. 

  447.         width: 4px;
    448. 

  448.         height: 12px;
    449. 

  449.         border-radius: 999px;
    450. 

  450.         background: var(--primary-dark);
    451. 

  451.       }
    452. 

  452. 

  453.       .section-head.is-pending h3::before {
    454. 

  454.         background: var(--warning);
    455. 

  455.       }
    456. 

  456. 

  457.       .section-count {
    458. 

  458.         display: inline-flex;
    459. 

  459.         align-items: center;
    460. 

  460.         justify-content: center;
    461. 

  461.         min-width: 22px;
    462. 

  462.         height: 22px;
    463. 

  463.         padding: 0 6px;
    464. 

  464.         border-radius: 999px;
    465. 

  465.         background: #f1f5f9;
    466. 

  466.         font-size: 12px;
    467. 

  467.         font-weight: 600;
    468. 

  468.         color: var(--muted);
    469. 

  469.       }
    470. 

  470. 

  471.       .section-head.is-pending .section-count {
    472. 

  472.         background: var(--warning-bg);
    473. 

  473.         color: var(--warning);
    474. 

  474.       }
    475. 

  475. 

  476.       .section-toggle {
    477. 

  477.         font-size: 12px;
    478. 

  478.         color: var(--primary-dark);
    479. 

  479.         background: none;
    480. 

  480.         border: none;
    481. 

  481.         cursor: pointer;
    482. 

  482.       }
    483. 

  483. 

  484.       .card-grid {
    485. 

  485.         display: grid;
    486. 

  486.         grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    487. 

  487.         gap: 12px;
    488. 

  488.         padding: 0 24px 20px;
    489. 

  489.       }
    490. 

  490. 

  491.       .section-divider {
    492. 

  492.         height: 8px;
    493. 

  493.         background: #f8fafc;
    494. 

  494.         border-top: 1px solid var(--border);
    495. 

  495.         border-bottom: 1px solid var(--border);
    496. 

  496.       }
    497. 

  497. 

  498.       /* ============================================================
    499. 

  499.          方案 A：胶囊 + 上下分区卡片（用户提议）
    500. 

  500.          ============================================================ */
    501. 

  501.       .scheme-a .panel-header {
    502. 

  502.         display: flex;
    503. 

  503.         align-items: center;
    504. 

  504.         justify-content: space-between;
    505. 

  505.         gap: 16px;
    506. 

  506.         padding: 16px 24px;
    507. 

  507.         border-bottom: 1px solid var(--border);
    508. 

  508.         flex-wrap: wrap;
    509. 

  509.       }
    510. 

  510. 

  511.       .scheme-a .panel-header__left {
    512. 

  512.         display: flex;
    513. 

  513.         align-items: center;
    514. 

  514.         gap: 20px;
    515. 

  515.         flex-wrap: wrap;
    516. 

  516.       }
    517. 

  517. 

  518.       /* ============================================================
    519. 

  519.          方案 B：双栏看板（左待确认 / 右已确认）
    520. 

  520.          ============================================================ */
    521. 

  521.       .scheme-b .panel-header {
    522. 

  522.         display: flex;
    523. 

  523.         align-items: center;
    524. 

  524.         justify-content: center;
    525. 

  525.         padding: 16px 24px;
    526. 

  526.         border-bottom: 1px solid var(--border);
    527. 

  527.       }
    528. 

  528. 

  529.       .kanban {
    530. 

  530.         display: grid;
    531. 

  531.         grid-template-columns: 1fr 1fr;
    532. 

  532.         gap: 0;
    533. 

  533.         min-height: 420px;
    534. 

  534.       }
    535. 

  535. 

  536.       .kanban-col {
    537. 

  537.         padding: 16px 20px 24px;
    538. 

  538.         min-width: 0;
    539. 

  539.       }
    540. 

  540. 

  541.       .kanban-col:first-child {
    542. 

  542.         border-right: 1px solid var(--border);
    543. 

  543.         background: linear-gradient(180deg, #fffbeb 0%, #fff 120px);
    544. 

  544.       }
    545. 

  545. 

  546.       .kanban-col:last-child {
    547. 

  547.         background: linear-gradient(180deg, #ecfdf5 0%, #fff 120px);
    548. 

  548.       }
    549. 

  549. 

  550.       .kanban-col__head {
    551. 

  551.         display: flex;
    552. 

  552.         align-items: center;
    553. 

  553.         justify-content: space-between;
    554. 

  554.         margin-bottom: 14px;
    555. 

  555.       }
    556. 

  556. 

  557.       .kanban-col__head h3 {
    558. 

  558.         font-size: 13px;
    559. 

  559.         font-weight: 600;
    560. 

  560.         display: flex;
    561. 

  561.         align-items: center;
    562. 

  562.         gap: 8px;
    563. 

  563.       }
    564. 

  564. 

  565.       .kanban-stack {
    566. 

  566.         display: flex;
    567. 

  567.         flex-direction: column;
    568. 

  568.         gap: 10px;
    569. 

  569.       }
    570. 

  570. 

  571.       .kanban-stack .confirm-card {
    572. 

  572.         border-radius: 8px;
    573. 

  573.       }
    574. 

  574. 

  575.       .kanban-more {
    576. 

  576.         margin-top: 10px;
    577. 

  577.         text-align: center;
    578. 

  578.         font-size: 12px;
    579. 

  579.         color: var(--muted);
    580. 

  580.         padding: 8px;
    581. 

  581.         border: 1px dashed var(--border);
    582. 

  582.         border-radius: 8px;
    583. 

  583.         cursor: pointer;
    584. 

  584.       }
    585. 

  585. 

  586.       /* ============================================================
    587. 

  587.          方案 C：统计摘要 + 状态 Chip 筛选 + 卡片流
    588. 

  588.          ============================================================ */
    589. 

  589.       .scheme-c .panel-header {
    590. 

  590.         padding: 16px 24px;
    591. 

  591.         border-bottom: 1px solid var(--border);
    592. 

  592.         display: flex;
    593. 

  593.         align-items: center;
    594. 

  594.         justify-content: space-between;
    595. 

  595.         flex-wrap: wrap;
    596. 

  596.         gap: 12px;
    597. 

  597.       }
    598. 

  598. 

  599.       .stat-row {
    600. 

  600.         display: grid;
    601. 

  601.         grid-template-columns: repeat(4, 1fr);
    602. 

  602.         gap: 12px;
    603. 

  603.         padding: 16px 24px;
    604. 

  604.         border-bottom: 1px solid var(--border);
    605. 

  605.       }
    606. 

  606. 

  607.       .stat-card {
    608. 

  608.         padding: 14px 16px;
    609. 

  609.         border: 1px solid var(--border);
    610. 

  610.         border-radius: 10px;
    611. 

  611.         background: #fafbfc;
    612. 

  612.       }
    613. 

  613. 

  614.       .stat-card__label {
    615. 

  615.         font-size: 12px;
    616. 

  616.         color: var(--muted);
    617. 

  617.         margin-bottom: 4px;
    618. 

  618.       }
    619. 

  619. 

  620.       .stat-card__val {
    621. 

  621.         font-size: 22px;
    622. 

  622.         font-weight: 700;
    623. 

  623.         font-variant-numeric: tabular-nums;
    624. 

  624.       }
    625. 

  625. 

  626.       .stat-card__val.warning {
    627. 

  627.         color: var(--warning);
    628. 

  628.       }
    629. 

  629. 

  630.       .stat-card__val.primary {
    631. 

  631.         color: var(--primary-dark);
    632. 

  632.       }
    633. 

  633. 

  634.       .chip-filter {
    635. 

  635.         display: flex;
    636. 

  636.         align-items: center;
    637. 

  637.         gap: 8px;
    638. 

  638.         padding: 12px 24px;
    639. 

  639.         border-bottom: 1px solid var(--border);
    640. 

  640.       }
    641. 

  641. 

  642.       .chip {
    643. 

  643.         padding: 6px 14px;
    644. 

  644.         border-radius: 999px;
    645. 

  645.         border: 1px solid var(--border);
    646. 

  646.         background: #fff;
    647. 

  647.         font-size: 13px;
    648. 

  648.         color: var(--muted);
    649. 

  649.         cursor: pointer;
    650. 

  650.       }
    651. 

  651. 

  652.       .chip.is-active {
    653. 

  653.         border-color: var(--primary);
    654. 

  654.         background: var(--primary-bg);
    655. 

  655.         color: var(--primary-dark);
    656. 

  656.         font-weight: 600;
    657. 

  657.       }
    658. 

  658. 

  659.       /* ============================================================
    660. 

  660.          方案 D：折叠分区（待确认默认展开，已确认折叠）
    661. 

  661.          ============================================================ */
    662. 

  662.       .accordion-section {
    663. 

  663.         border-bottom: 1px solid var(--border);
    664. 

  664.       }
    665. 

  665. 

  666.       .accordion-section:last-child {
    667. 

  667.         border-bottom: none;
    668. 

  668.       }
    669. 

  669. 

  670.       .accordion-trigger {
    671. 

  671.         display: flex;
    672. 

  672.         align-items: center;
    673. 

  673.         justify-content: space-between;
    674. 

  674.         width: 100%;
    675. 

  675.         padding: 14px 24px;
    676. 

  676.         border: none;
    677. 

  677.         background: #fafbfc;
    678. 

  678.         cursor: pointer;
    679. 

  679.         text-align: left;
    680. 

  680.       }
    681. 

  681. 

  682.       .accordion-trigger h3 {
    683. 

  683.         display: flex;
    684. 

  684.         align-items: center;
    685. 

  685.         gap: 8px;
    686. 

  686.         font-size: 14px;
    687. 

  687.         font-weight: 600;
    688. 

  688.       }
    689. 

  689. 

  690.       .accordion-trigger .chevron {
    691. 

  691.         font-size: 12px;
    692. 

  692.         color: var(--muted);
    693. 

  693.         transition: transform 0.2s;
    694. 

  694.       }
    695. 

  695. 

  696.       .accordion-section.is-open .accordion-trigger .chevron {
    697. 

  697.         transform: rotate(180deg);
    698. 

  698.       }
    699. 

  699. 

  700.       .accordion-body {
    701. 

  701.         display: none;
    702. 

  702.         padding-bottom: 4px;
    703. 

  703.       }
    704. 

  704. 

  705.       .accordion-section.is-open .accordion-body {
    706. 

  706.         display: block;
    707. 

  707.       }
    708. 

  708. 

  709.       .scheme-d .panel-header {
    710. 

  710.         display: flex;
    711. 

  711.         align-items: center;
    712. 

  712.         justify-content: center;
    713. 

  713.         padding: 16px 24px;
    714. 

  714.         border-bottom: 1px solid var(--border);
    715. 

  715.       }
    716. 

  716. 

  717.       /* ============================================================
    718. 

  718.          方案 E：混合 — 待确认卡片 + 已确认紧凑表格
    719. 

  719.          ============================================================ */
    720. 

  720.       .scheme-e .panel-header {
    721. 

  721.         display: flex;
    722. 

  722.         align-items: center;
    723. 

  723.         justify-content: space-between;
    724. 

  724.         padding: 16px 24px;
    725. 

  725.         border-bottom: 1px solid var(--border);
    726. 

  726.         flex-wrap: wrap;
    727. 

  727.         gap: 12px;
    728. 

  728.       }
    729. 

  729. 

  730.       .compact-table-wrap {
    731. 

  731.         padding: 0 24px 20px;
    732. 

  732.         overflow-x: auto;
    733. 

  733.       }
    734. 

  734. 

  735.       .compact-table {
    736. 

  736.         width: 100%;
    737. 

  737.         border-collapse: collapse;
    738. 

  738.         font-size: 13px;
    739. 

  739.       }
    740. 

  740. 

  741.       .compact-table th,
    742. 

  742.       .compact-table td {
    743. 

  743.         padding: 10px 12px;
    744. 

  744.         text-align: center;
    745. 

  745.         border-bottom: 1px solid #f1f5f9;
    746. 

  746.         white-space: nowrap;
    747. 

  747.       }
    748. 

  748. 

  749.       .compact-table th {
    750. 

  750.         font-size: 12px;
    751. 

  751.         font-weight: 500;
    752. 

  752.         color: var(--muted);
    753. 

  753.         background: #fafbfc;
    754. 

  754.       }
    755. 

  755. 

  756.       .compact-table tbody tr:hover {
    757. 

  757.         background: #f8fafc;
    758. 

  758.       }
    759. 

  759. 

  760.       .empty-hint {
    761. 

  761.         padding: 32px 24px;
    762. 

  762.         text-align: center;
    763. 

  763.         color: var(--muted);
    764. 

  764.         font-size: 13px;
    765. 

  765.       }
    766. 

  766. 

  767.       @media (max-width: 900px) {
    768. 

  768.         .filter-grid {
    769. 

  769.           grid-template-columns: 1fr;
    770. 

  770.         }
    771. 

  771. 

  772.         .kanban {
    773. 

  773.           grid-template-columns: 1fr;
    774. 

  774.         }
    775. 

  775. 

  776.         .kanban-col:first-child {
    777. 

  777.           border-right: none;
    778. 

  778.           border-bottom: 1px solid var(--border);
    779. 

  779.         }
    780. 

  780. 

  781.         .stat-row {
    782. 

  782.           grid-template-columns: repeat(2, 1fr);
    783. 

  783.         }
    784. 

  784. 

  785.         .confirm-card__grid {
    786. 

  786.           grid-template-columns: 1fr 1fr;
    787. 

  787.         }
    788. 

  788.       }
    789. 

  789.     </style>
    790. 

  790.   </head>
    791. 

  791.   <body>
    792. 

  792.     <div class="page-head">
    793. 

  793.       <h1>缴退费财务确认 · 布局方案 Demo</h1>
    794. 

  794.       <p>
    795. 

  795.         当前页面存在<strong>两层 Tab</strong>（缴费/退费 大卡片切换 + 待确认/已确认 胶囊 Tab），顶部视觉层级过多。
    796. 

  796.         以下 5 种方案均尝试<strong>合并或消除第二层 Tab</strong>，并将列表改为卡片或混合展示。
    797. 

  797.         色值与胶囊样式对齐 Fresh Mint 规范（<code>--primary #10b981</code>）。
    798. 

  798.       </p>
    799. 

  799.     </div>
    800. 

  800. 

  801.     <nav class="scheme-nav">
    802. 

  802.       <a href="#scheme-a">A · 上下分区卡片</a>
    803. 

  803.       <a href="#scheme-b">B · 双栏看板</a>
    804. 

  804.       <a href="#scheme-c">C · 统计 + Chip 筛选</a>
    805. 

  805.       <a href="#scheme-d">D · 折叠分区</a>
    806. 

  806.       <a href="#scheme-e">E · 混合（卡片+表格）</a>
    807. 

  807.     </nav>
    808. 

  808. 

  809.     <!-- ═══════════════════════════════════════════════════════════
    810. 

  810.          方案 A：用户提议 — 胶囊 + 上待确认 / 下已确认
    811. 

  811.          ═══════════════════════════════════════════════════════════ -->
    812. 

  812.     <section class="demo-block scheme-a" id="scheme-a">
    813. 

  813.       <div class="demo-label">
    814. 

  814.         <div>
    815. 

  815.           <strong>方案 A · 胶囊切换 + 上下分区卡片</strong>
    816. 

  816.           <span>缴费/退费改为居中胶囊；取消「待确认/已确认」Tab，改为同屏上下两个区域。待确认优先展示、视觉强调；已确认区域可折叠。适合财务「先处理队列、再查历史」的工作流。</span>
    817. 

  817.         </div>
    818. 

  818.         <span class="tag-rec">推荐</span>
    819. 

  819.       </div>
    820. 

  820.       <div class="panel-shell">
    821. 

  821.         <div class="panel-header">
    822. 

  822.           <div class="panel-header__left">
    823. 

  823.             <h2 class="title-bar-heading">缴退费财务确认</h2>
    824. 

  824.             <div class="type-capsule" role="tablist">
    825. 

  825.               <button type="button" class="type-capsule__btn is-active" role="tab">
    826. 

  826.                 缴费确认
    827. 

  827.                 <span class="type-capsule__badge">3</span>
    828. 

  828.               </button>
    829. 

  829.               <button type="button" class="type-capsule__btn" role="tab">
    830. 

  830.                 退费确认
    831. 

  831.                 <span class="type-capsule__badge">1</span>
    832. 

  832.               </button>
    833. 

  833.             </div>
    834. 

  834.           </div>
    835. 

  835.         </div>
    836. 

  836. 

  837.         <div class="filter-block">
    838. 

  838.           <div class="filter-grid">
    839. 

  839.             <div class="filter-field">
    840. 

  840.               <label>关键词</label>
    841. 

  841.               <input type="text" placeholder="客户姓名/身份证号/新生儿姓名/新生儿身份证号" />
    842. 

  842.             </div>
    843. 

  843.             <div class="filter-field">
    844. 

  844.               <label>应缴费时间</label>
    845. 

  845.               <div class="fake-date">2026-05-30 至 2026-06-29</div>
    846. 

  846.             </div>
    847. 

  847.           </div>
    848. 

  848.           <div class="filter-actions-row">
    849. 

  849.             <span class="filter-hint">默认展示应缴费时间前后 15 天内的明细</span>
    850. 

  850.             <div class="filter-actions-end">
    851. 

  851.               <button type="button" class="btn">重置</button>
    852. 

  852.               <button type="button" class="btn btn-main">搜索</button>
    853. 

  853.             </div>
    854. 

  854.           </div>
    855. 

  855.         </div>
    856. 

  856. 

  857.         <div class="section-head is-pending">
    858. 

  858.           <h3>待确认 <span class="section-count">3</span></h3>
    859. 

  859.         </div>
    860. 

  860.         <div class="card-grid" id="cards-pending-a"></div>
    861. 

  861. 

  862.         <div class="section-divider"></div>
    863. 

  863. 

  864.         <div class="section-head">
    865. 

  865.           <h3>已确认 <span class="section-count">12</span></h3>
    866. 

  866.           <button type="button" class="section-toggle">收起 ▲</button>
    867. 

  867.         </div>
    868. 

  868.         <div class="card-grid" id="cards-confirmed-a"></div>
    869. 

  869.       </div>
    870. 

  870.     </section>
    871. 

  871. 

  872.     <!-- ═══════════════════════════════════════════════════════════
    873. 

  873.          方案 B：双栏看板
    874. 

  874.          ═══════════════════════════════════════════════════════════ -->
    875. 

  875.     <section class="demo-block scheme-b" id="scheme-b">
    876. 

  876.       <div class="demo-label">
    877. 

  877.         <div>
    878. 

  878.           <strong>方案 B · 双栏看板（左待确认 / 右已确认）</strong>
    879. 

  879.           <span>一屏对比两个队列，适合宽屏。左侧琥珀色调强调待办，右侧绿色调表示已完成。每列独立滚动，底部「加载更多」。</span>
    880. 

  880.         </div>
    881. 

  881.       </div>
    882. 

  882.       <div class="panel-shell">
    883. 

  883.         <div class="panel-header">
    884. 

  884.           <div class="type-capsule">
    885. 

  885.             <button type="button" class="type-capsule__btn is-active">缴费确认 <span class="type-capsule__badge">3</span></button>
    886. 

  886.             <button type="button" class="type-capsule__btn">退费确认 <span class="type-capsule__badge">1</span></button>
    887. 

  887.           </div>
    888. 

  888.         </div>
    889. 

  889. 

  890.         <div class="filter-block" style="padding: 12px 24px">
    891. 

  891.           <div class="filter-grid" style="grid-template-columns: 1fr 240px auto; align-items: end">
    892. 

  892.             <div class="filter-field">
    893. 

  893.               <label>关键词</label>
    894. 

  894.               <input type="text" placeholder="客户姓名/身份证号…" />
    895. 

  895.             </div>
    896. 

  896.             <div class="filter-field">
    897. 

  897.               <label>应缴费时间</label>
    898. 

  898.               <div class="fake-date">2026-05-30 至 2026-06-29</div>
    899. 

  899.             </div>
    900. 

  900.             <div class="filter-actions-end" style="margin-top: 0">
    901. 

  901.               <button type="button" class="btn btn-main">搜索</button>
    902. 

  902.             </div>
    903. 

  903.           </div>
    904. 

  904.         </div>
    905. 

  905. 

  906.         <div class="kanban">
    907. 

  907.           <div class="kanban-col">
    908. 

  908.             <div class="kanban-col__head">
    909. 

  909.               <h3><span class="tag warning">待确认</span> 3 条</h3>
    910. 

  910.             </div>
    911. 

  911.             <div class="kanban-stack" id="cards-pending-b"></div>
    912. 

  912.             <div class="kanban-more">加载更多待确认…</div>
    913. 

  913.           </div>
    914. 

  914.           <div class="kanban-col">
    915. 

  915.             <div class="kanban-col__head">
    916. 

  916.               <h3><span class="tag success">已确认</span> 12 条</h3>
    917. 

  917.             </div>
    918. 

  918.             <div class="kanban-stack" id="cards-confirmed-b"></div>
    919. 

  919.             <div class="kanban-more">加载更多已确认…</div>
    920. 

  920.           </div>
    921. 

  921.         </div>
    922. 

  922.       </div>
    923. 

  923.     </section>
    924. 

  924. 

  925.     <!-- ═══════════════════════════════════════════════════════════
    926. 

  926.          方案 C：统计摘要 + Chip 筛选
    927. 

  927.          ═══════════════════════════════════════════════════════════ -->
    928. 

  928.     <section class="demo-block scheme-c" id="scheme-c">
    929. 

  929.       <div class="demo-label">
    930. 

  930.         <div>
    931. 

  931.           <strong>方案 C · 统计摘要 + 状态 Chip 筛选 + 卡片流</strong>
    932. 

  932.           <span>顶部 4 个统计卡提供概览；第二层 Tab 改为轻量 Chip（全部/待确认/已确认），减少视觉重量。单区域卡片网格，切换 Chip 时过滤。</span>
    933. 

  933.         </div>
    934. 

  934.       </div>
    935. 

  935.       <div class="panel-shell">
    936. 

  936.         <div class="panel-header">
    937. 

  937.           <h2 class="title-bar-heading">缴退费财务确认</h2>
    938. 

  938.           <div class="type-capsule">
    939. 

  939.             <button type="button" class="type-capsule__btn is-active">缴费确认</button>
    940. 

  940.             <button type="button" class="type-capsule__btn">退费确认</button>
    941. 

  941.           </div>
    942. 

  942.         </div>
    943. 

  943. 

  944.         <div class="stat-row">
    945. 

  945.           <div class="stat-card">
    946. 

  946.             <div class="stat-card__label">待确认</div>
    947. 

  947.             <div class="stat-card__val warning">3</div>
    948. 

  948.           </div>
    949. 

  949.           <div class="stat-card">
    950. 

  950.             <div class="stat-card__label">今日已确认</div>
    951. 

  951.             <div class="stat-card__val primary">5</div>
    952. 

  952.           </div>
    953. 

  953.           <div class="stat-card">
    954. 

  954.             <div class="stat-card__label">待确认金额</div>
    955. 

  955.             <div class="stat-card__val warning">¥28,600</div>
    956. 

  956.           </div>
    957. 

  957.           <div class="stat-card">
    958. 

  958.             <div class="stat-card__label">本月已确认</div>
    959. 

  959.             <div class="stat-card__val primary">¥186,400</div>
    960. 

  960.           </div>
    961. 

  961.         </div>
    962. 

  962. 

  963.         <div class="chip-filter" role="tablist">
    964. 

  964.           <button type="button" class="chip is-active" data-filter="all">全部 15</button>
    965. 

  965.           <button type="button" class="chip" data-filter="pending">待确认 3</button>
    966. 

  966.           <button type="button" class="chip" data-filter="confirmed">已确认 12</button>
    967. 

  967.         </div>
    968. 

  968. 

  969.         <div class="filter-block" style="padding-top: 12px">
    970. 

  970.           <div class="filter-grid">
    971. 

  971.             <div class="filter-field">
    972. 

  972.               <label>关键词</label>
    973. 

  973.               <input type="text" placeholder="客户姓名/身份证号…" />
    974. 

  974.             </div>
    975. 

  975.             <div class="filter-field">
    976. 

  976.               <label>应缴费时间</label>
    977. 

  977.               <div class="fake-date">2026-05-30 至 2026-06-29</div>
    978. 

  978.             </div>
    979. 

  979.           </div>
    980. 

  980.         </div>
    981. 

  981. 

  982.         <div class="card-grid" id="cards-c" style="padding-top: 8px"></div>
    983. 

  983.       </div>
    984. 

  984.     </section>
    985. 

  985. 

  986.     <!-- ═══════════════════════════════════════════════════════════
    987. 

  987.          方案 D：折叠分区
    988. 

  988.          ═══════════════════════════════════════════════════════════ -->
    989. 

  989.     <section class="demo-block scheme-d" id="scheme-d">
    990. 

  990.       <div class="demo-label">
    991. 

  991.         <div>
    992. 

  992.           <strong>方案 D · 折叠手风琴分区</strong>
    993. 

  993.           <span>待确认默认展开（财务主任务），已确认默认折叠节省纵向空间。比方案 A 更紧凑，适合待确认量不大、已确认历史很多的场景。</span>
    994. 

  994.         </div>
    995. 

  995.       </div>
    996. 

  996.       <div class="panel-shell">
    997. 

  997.         <div class="panel-header">
    998. 

  998.           <div class="type-capsule">
    999. 

  999.             <button type="button" class="type-capsule__btn is-active">缴费确认</button>
    1000. 

  1000.             <button type="button" class="type-capsule__btn">退费确认</button>
    1001. 

  1001.           </div>
    1002. 

  1002.         </div>
    1003. 

  1003. 

  1004.         <div class="filter-block">
    1005. 

  1005.           <div class="filter-grid">
    1006. 

  1006.             <div class="filter-field">
    1007. 

  1007.               <label>关键词</label>
    1008. 

  1008.               <input type="text" placeholder="客户姓名/身份证号…" />
    1009. 

  1009.             </div>
    1010. 

  1010.             <div class="filter-field">
    1011. 

  1011.               <label>应缴费时间</label>
    1012. 

  1012.               <div class="fake-date">2026-05-30 至 2026-06-29</div>
    1013. 

  1013.             </div>
    1014. 

  1014.           </div>
    1015. 

  1015.         </div>
    1016. 

  1016. 

  1017.         <div class="accordion-section is-open" data-accordion>
    1018. 

  1018.           <button type="button" class="accordion-trigger">
    1019. 

  1019.             <h3><span class="tag warning">待确认</span> <span class="section-count">3</span></h3>
    1020. 

  1020.             <span class="chevron">▼</span>
    1021. 

  1021.           </button>
    1022. 

  1022.           <div class="accordion-body">
    1023. 

  1023.             <div class="card-grid" id="cards-pending-d"></div>
    1024. 

  1024.           </div>
    1025. 

  1025.         </div>
    1026. 

  1026. 

  1027.         <div class="accordion-section" data-accordion>
    1028. 

  1028.           <button type="button" class="accordion-trigger">
    1029. 

  1029.             <h3><span class="tag success">已确认</span> <span class="section-count">12</span></h3>
    1030. 

  1030.             <span class="chevron">▼</span>
    1031. 

  1031.           </button>
    1032. 

  1032.           <div class="accordion-body">
    1033. 

  1033.             <div class="card-grid" id="cards-confirmed-d"></div>
    1034. 

  1034.           </div>
    1035. 

  1035.         </div>
    1036. 

  1036.       </div>
    1037. 

  1037.     </section>
    1038. 

  1038. 

  1039.     <!-- ═══════════════════════════════════════════════════════════
    1040. 

  1040.          方案 E：混合 — 待确认卡片 + 已确认表格
    1041. 

  1041.          ═══════════════════════════════════════════════════════════ -->
    1042. 

  1042.     <section class="demo-block scheme-e" id="scheme-e">
    1043. 

  1043.       <div class="demo-label">
    1044. 

  1044.         <div>
    1045. 

  1045.           <strong>方案 E · 混合布局（待确认卡片 + 已确认紧凑表格）</strong>
    1046. 

  1046.           <span>待办用卡片突出操作；已确认历史量大、字段多，保留表格 + 分页更高效。折中方案，改动风险最低。</span>
    1047. 

  1047.         </div>
    1048. 

  1048.       </div>
    1049. 

  1049.       <div class="panel-shell">
    1050. 

  1050.         <div class="panel-header">
    1051. 

  1051.           <h2 class="title-bar-heading">缴退费财务确认</h2>
    1052. 

  1052.           <div class="type-capsule">
    1053. 

  1053.             <button type="button" class="type-capsule__btn is-active">缴费确认</button>
    1054. 

  1054.             <button type="button" class="type-capsule__btn">退费确认</button>
    1055. 

  1055.           </div>
    1056. 

  1056.         </div>
    1057. 

  1057. 

  1058.         <div class="filter-block">
    1059. 

  1059.           <div class="filter-grid">
    1060. 

  1060.             <div class="filter-field">
    1061. 

  1061.               <label>关键词</label>
    1062. 

  1062.               <input type="text" placeholder="客户姓名/身份证号…" />
    1063. 

  1063.             </div>
    1064. 

  1064.             <div class="filter-field">
    1065. 

  1065.               <label>应缴费时间</label>
    1066. 

  1066.               <div class="fake-date">2026-05-30 至 2026-06-29</div>
    1067. 

  1067.             </div>
    1068. 

  1068.           </div>
    1069. 

  1069.         </div>
    1070. 

  1070. 

  1071.         <div class="section-head is-pending">
    1072. 

  1072.           <h3>待确认 <span class="section-count">3</span></h3>
    1073. 

  1073.         </div>
    1074. 

  1074.         <div class="card-grid" id="cards-pending-e"></div>
    1075. 

  1075. 

  1076.         <div class="section-divider"></div>
    1077. 

  1077. 

  1078.         <div class="section-head">
    1079. 

  1079.           <h3>已确认 <span class="section-count">12</span></h3>
    1080. 

  1080.         </div>
    1081. 

  1081.         <div class="compact-table-wrap">
    1082. 

  1082.           <table class="compact-table">
    1083. 

  1083.             <thead>
    1084. 

  1084.               <tr>
    1085. 

  1085.                 <th>客户姓名</th>
    1086. 

  1086.                 <th>期数</th>
    1087. 

  1087.                 <th>应缴金额</th>
    1088. 

  1088.                 <th>实缴金额</th>
    1089. 

  1089.                 <th>转账时间</th>
    1090. 

  1090.                 <th>确认时间</th>
    1091. 

  1091.                 <th>状态</th>
    1092. 

  1092.                 <th>操作</th>
    1093. 

  1093.               </tr>
    1094. 

  1094.             </thead>
    1095. 

  1095.             <tbody id="table-confirmed-e"></tbody>
    1096. 

  1096.           </table>
    1097. 

  1097.         </div>
    1098. 

  1098.       </div>
    1099. 

  1099.     </section>
    1100. 

  1100. 

  1101.     <script>
    1102. 

  1102.       const MOCK_PENDING = [
    1103. 

  1103.         {
    1104. 

  1104.           motherName: '张丽华',
    1105. 

  1105.           motherIdCard: '340***********1234',
    1106. 

  1106.           newbornName: '张小宝',
    1107. 

  1107.           installmentNo: 2,
    1108. 

  1108.           installmentDueDate: '2026-06-18',
    1109. 

  1109.           dueAmount: '¥12,800.00',
    1110. 

  1110.           transferAmount: '¥12,800.00',
    1111. 

  1111.           payMode: '分期',
    1112. 

  1112.           transferType: '银行转账',
    1113. 

  1113.           transferTime: '2026-06-14 10:32',
    1114. 

  1114.           protocolStatus: '进行中',
    1115. 

  1115.           createTime: '2026-06-14 09:15'
    1116. 

  1116.         },
    1117. 

  1117.         {
    1118. 

  1118.           motherName: '王美玲',
    1119. 

  1119.           motherIdCard: '340***********5678',
    1120. 

  1120.           newbornName: '王乐乐',
    1121. 

  1121.           installmentNo: 1,
    1122. 

  1122.           installmentDueDate: '2026-06-20',
    1123. 

  1123.           dueAmount: '¥8,600.00',
    1124. 

  1124.           transferAmount: '¥8,600.00',
    1125. 

  1125.           payMode: '一次性',
    1126. 

  1126.           transferType: '微信',
    1127. 

  1127.           transferTime: '2026-06-13 16:48',
    1128. 

  1128.           protocolStatus: '进行中',
    1129. 

  1129.           createTime: '2026-06-13 17:02'
    1130. 

  1130.         },
    1131. 

  1131.         {
    1132. 

  1132.           motherName: '陈晓燕',
    1133. 

  1133.           motherIdCard: '340***********9012',
    1134. 

  1134.           newbornName: '—',
    1135. 

  1135.           installmentNo: 3,
    1136. 

  1136.           installmentDueDate: '2026-06-22',
    1137. 

  1137.           dueAmount: '¥7,200.00',
    1138. 

  1138.           transferAmount: '¥7,200.00',
    1139. 

  1139.           payMode: '分期',
    1140. 

  1140.           transferType: '支付宝',
    1141. 

  1141.           transferTime: '2026-06-12 11:20',
    1142. 

  1142.           protocolStatus: '进行中',
    1143. 

  1143.           createTime: '2026-06-12 11:25'
    1144. 

  1144.         }
    1145. 

  1145.       ]
    1146. 

  1146. 

  1147.       const MOCK_CONFIRMED = [
    1148. 

  1148.         {
    1149. 

  1149.           motherName: '李婷婷',
    1150. 

  1150.           installmentNo: 1,
    1151. 

  1151.           dueAmount: '¥15,000.00',
    1152. 

  1152.           transferAmount: '¥15,000.00',
    1153. 

  1153.           transferTime: '2026-06-10 14:22',
    1154. 

  1154.           updateTime: '2026-06-10 15:01',
    1155. 

  1155.           financeRemark: '凭证齐全'
    1156. 

  1156.         },
    1157. 

  1157.         {
    1158. 

  1158.           motherName: '赵敏',
    1159. 

  1159.           installmentNo: 2,
    1160. 

  1160.           dueAmount: '¥9,800.00',
    1161. 

  1161.           transferAmount: '¥9,800.00',
    1162. 

  1162.           transferTime: '2026-06-08 09:15',
    1163. 

  1163.           updateTime: '2026-06-08 10:30',
    1164. 

  1164.           financeRemark: '—'
    1165. 

  1165.         }
    1166. 

  1166.       ]
    1167. 

  1167. 

  1168.       function renderCard(item, mode) {
    1169. 

  1169.         const isPending = mode === 'pending'
    1170. 

  1170.         const compact = mode === 'compact'
    1171. 

  1171.         return `
    1172. 

  1172.           <article class="confirm-card ${isPending ? 'is-pending' : 'is-confirmed'}">
    1173. 

  1173.             <div class="confirm-card__head">
    1174. 

  1174.               <div>
    1175. 

  1175.                 <div class="confirm-card__name">${item.motherName}</div>
    1176. 

  1176.                 <div class="confirm-card__sub">${item.motherIdCard || ''}${item.newbornName ? ' · 新生儿 ' + item.newbornName : ''}</div>
    1177. 

  1177.               </div>
    1178. 

  1178.               <div class="confirm-card__amount">
    1179. 

  1179.                 <div class="confirm-card__amount-val">${item.transferAmount || item.dueAmount}</div>
    1180. 

  1180.                 <div class="confirm-card__amount-label">${isPending ? '实缴金额' : '已确认'}</div>
    1181. 

  1181.               </div>
    1182. 

  1182.             </div>
    1183. 

  1183.             ${
    1184. 

  1184.               compact
    1185. 

  1185.                 ? ''
    1186. 

  1186.                 : `<div class="confirm-card__grid">
    1187. 

  1187.               <div class="confirm-card__field"><label>期数</label><span>第 ${item.installmentNo} 期</span></div>
    1188. 

  1188.               <div class="confirm-card__field"><label>应缴时间</label><span>${item.installmentDueDate}</span></div>
    1189. 

  1189.               <div class="confirm-card__field"><label>应缴金额</label><span>${item.dueAmount}</span></div>
    1190. 

  1190.               <div class="confirm-card__field"><label>缴费方式</label><span>${item.payMode || '—'}</span></div>
    1191. 

  1191.               <div class="confirm-card__field"><label>转账方式</label><span>${item.transferType || '—'}</span></div>
    1192. 

  1192.               <div class="confirm-card__field"><label>转账时间</label><span>${item.transferTime || '—'}</span></div>
    1193. 

  1193.             </div>`
    1194. 

  1194.             }
    1195. 

  1195.             <div class="confirm-card__foot">
    1196. 

  1196.               <div class="confirm-card__meta">
    1197. 

  1197.                 ${isPending ? `<span class="tag warning">缴费确认中</span> · 提交 ${item.createTime}` : `<span class="tag success">已缴费</span> · 确认 ${item.updateTime}`}
    1198. 

  1198.               </div>
    1199. 

  1199.               <button type="button" class="btn-op ${isPending ? '' : 'ghost'}">${isPending ? '确认收款' : '查看确认信息'}</button>
    1200. 

  1200.             </div>
    1201. 

  1201.           </article>
    1202. 

  1202.         `
    1203. 

  1203.       }
    1204. 

  1204. 

  1205.       function fillCards(containerId, items, mode, limit) {
    1206. 

  1206.         const el = document.getElementById(containerId)
    1207. 

  1207.         if (!el) return
    1208. 

  1208.         el.innerHTML = items.slice(0, limit ?? items.length).map((i) => renderCard(i, mode)).join('')
    1209. 

  1209.       }
    1210. 

  1210. 

  1211.       // 方案 A
    1212. 

  1212.       fillCards('cards-pending-a', MOCK_PENDING, 'pending')
    1213. 

  1213.       fillCards('cards-confirmed-a', MOCK_CONFIRMED, 'confirmed')
    1214. 

  1214. 

  1215.       // 方案 B
    1216. 

  1216.       fillCards('cards-pending-b', MOCK_PENDING, 'pending')
    1217. 

  1217.       fillCards('cards-confirmed-b', MOCK_CONFIRMED, 'confirmed')
    1218. 

  1218. 

  1219.       // 方案 C — 全部卡片 + Chip 筛选
    1220. 

  1220.       const allItems = [
    1221. 

  1221.         ...MOCK_PENDING.map((i) => ({ ...i, _status: 'pending' })),
    1222. 

  1222.         ...MOCK_CONFIRMED.map((i) => ({ ...i, _status: 'confirmed' }))
    1223. 

  1223.       ]
    1224. 

  1224.       const cardsC = document.getElementById('cards-c')
    1225. 

  1225.       function renderC(filter) {
    1226. 

  1226.         const list =
    1227. 

  1227.           filter === 'all'
    1228. 

  1228.             ? allItems
    1229. 

  1229.             : allItems.filter((i) => i._status === filter)
    1230. 

  1230.         cardsC.innerHTML = list
    1231. 

  1231.           .map((i) => renderCard(i, i._status === 'pending' ? 'pending' : 'confirmed'))
    1232. 

  1232.           .join('')
    1233. 

  1233.       }
    1234. 

  1234.       renderC('all')
    1235. 

  1235.       document.querySelectorAll('.chip-filter .chip').forEach((chip) => {
    1236. 

  1236.         chip.addEventListener('click', () => {
    1237. 

  1237.           document.querySelectorAll('.chip-filter .chip').forEach((c) => c.classList.remove('is-active'))
    1238. 

  1238.           chip.classList.add('is-active')
    1239. 

  1239.           renderC(chip.dataset.filter)
    1240. 

  1240.         })
    1241. 

  1241.       })
    1242. 

  1242. 

  1243.       // 方案 D
    1244. 

  1244.       fillCards('cards-pending-d', MOCK_PENDING, 'pending')
    1245. 

  1245.       fillCards('cards-confirmed-d', MOCK_CONFIRMED, 'confirmed')
    1246. 

  1246.       document.querySelectorAll('[data-accordion]').forEach((section) => {
    1247. 

  1247.         section.querySelector('.accordion-trigger').addEventListener('click', () => {
    1248. 

  1248.           section.classList.toggle('is-open')
    1249. 

  1249.         })
    1250. 

  1250.       })
    1251. 

  1251. 

  1252.       // 方案 E
    1253. 

  1253.       fillCards('cards-pending-e', MOCK_PENDING, 'pending')
    1254. 

  1254.       document.getElementById('table-confirmed-e').innerHTML = MOCK_CONFIRMED.map(
    1255. 

  1255.         (row) => `
    1256. 

  1256.         <tr>
    1257. 

  1257.           <td>${row.motherName}</td>
    1258. 

  1258.           <td>第 ${row.installmentNo} 期</td>
    1259. 

  1259.           <td>${row.dueAmount}</td>
    1260. 

  1260.           <td>${row.transferAmount}</td>
    1261. 

  1261.           <td>${row.transferTime}</td>
    1262. 

  1262.           <td>${row.updateTime}</td>
    1263. 

  1263.           <td><span class="tag success">已缴费</span></td>
    1264. 

  1264.           <td><button type="button" class="btn-op ghost" style="height:28px;padding:0 10px;font-size:12px">查看</button></td>
    1265. 

  1265.         </tr>
    1266. 

  1266.       `
    1267. 

  1267.       ).join('')
    1268. 

  1268. 

  1269.       // 胶囊切换交互（视觉演示）
    1270. 

  1270.       document.querySelectorAll('.type-capsule').forEach((group) => {
    1271. 

  1271.         group.querySelectorAll('.type-capsule__btn').forEach((btn) => {
    1272. 

  1272.           btn.addEventListener('click', () => {
    1273. 

  1273.             group.querySelectorAll('.type-capsule__btn').forEach((b) => b.classList.remove('is-active'))
    1274. 

  1274.             btn.classList.add('is-active')
    1275. 

  1275.           })
    1276. 

  1276.         })
    1277. 

  1277.       })
    1278. 

  1278.     </script>
    1279. 

  1279.   </body>
    1280. 

  1280. </html>
    1281.