Home Explore Help
Register Sign In
wuzilong
/
zkxw
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: ee4abd361e
Branches Tags
zkxw
/
web-admin
/
demo-protocol-view-d.html

demo-protocol-view-d.html 47 KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421 
  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>方案D：混合方案 — 采集协议单查看弹窗</title>
    7. 

  7. <style>
    8. 

  8.   /* ── Reset & Base ── */
    9. 

  9.   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    10. 

  10.   html { font-size: 14px; }
    11. 

  11.   body {
    12. 

  12.     font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    13. 

  13.       "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    14. 

  14.     color: #1e293b;
    15. 

  15.     background: #e2e8f0;
    16. 

  16.     min-height: 100vh;
    17. 

  17.     display: flex;
    18. 

  18.     align-items: flex-start;
    19. 

  19.     justify-content: center;
    20. 

  20.     padding: 40px 16px;
    21. 

  21.     line-height: 1.6;
    22. 

  22.   }
    23. 

  23. 

  24.   /* ── Modal Overlay ── */
    25. 

  25.   .overlay {
    26. 

  26.     position: fixed; inset: 0;
    27. 

  27.     background: rgba(15, 23, 42, 0.45);
    28. 

  28.     backdrop-filter: none;
    29. 

  29.     z-index: 1000;
    30. 

  30.     display: flex;
    31. 

  31.     align-items: flex-start;
    32. 

  32.     justify-content: center;
    33. 

  33.     padding: 32px 0;
    34. 

  34.     overflow-y: auto;
    35. 

  35.   }
    36. 

  36. 

  37.   /* ── Dialog Shell ── */
    38. 

  38.   .dialog {
    39. 

  39.     width: 1200px;
    40. 

  40.     max-width: 98vw;
    41. 

  41.     background: #f5f7fa;
    42. 

  42.     border-radius: 16px;
    43. 

  43.     box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04);
    44. 

  44.     display: flex;
    45. 

  45.     flex-direction: column;
    46. 

  46.     overflow: hidden;
    47. 

  47.     flex-shrink: 0;
    48. 

  48.     margin: auto 0;
    49. 

  49.   }
    50. 

  50. 

  51.   /* ── Dialog Header ── */
    52. 

  52.   .dialog-header {
    53. 

  53.     display: flex;
    54. 

  54.     align-items: center;
    55. 

  55.     justify-content: space-between;
    56. 

  56.     padding: 20px 28px;
    57. 

  57.     background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    58. 

  58.     color: #fff;
    59. 

  59.   }
    60. 

  60.   .dialog-header h2 {
    61. 

  61.     font-size: 17px;
    62. 

  62.     font-weight: 600;
    63. 

  63.     letter-spacing: 0.3px;
    64. 

  64.   }
    65. 

  65.   .dialog-header .protocol-id {
    66. 

  66.     opacity: 0.85;
    67. 

  67.     font-weight: 400;
    68. 

  68.     margin-left: 8px;
    69. 

  69.   }
    70. 

  70.   .dialog-close {
    71. 

  71.     width: 36px; height: 36px;
    72. 

  72.     border: none;
    73. 

  73.     background: rgba(255,255,255,0.18);
    74. 

  74.     border-radius: 10px;
    75. 

  75.     color: #fff;
    76. 

  76.     font-size: 20px;
    77. 

  77.     cursor: pointer;
    78. 

  78.     display: flex;
    79. 

  79.     align-items: center;
    80. 

  80.     justify-content: center;
    81. 

  81.     transition: background 0.2s;
    82. 

  82.   }
    83. 

  83.   .dialog-close:hover { background: rgba(255,255,255,0.32); }
    84. 

  84. 

  85.   /* ── Dialog Body ── */
    86. 

  86.   .dialog-body {
    87. 

  87.     padding: 24px 28px;
    88. 

  88.     overflow-y: auto;
    89. 

  89.     max-height: calc(100vh - 160px);
    90. 

  90.     flex: 1;
    91. 

  91.   }
    92. 

  92. 

  93.   /* ── Dialog Footer ── */
    94. 

  94.   .dialog-footer {
    95. 

  95.     padding: 16px 28px;
    96. 

  96.     background: #fff;
    97. 

  97.     border-top: 1px solid #e2e8f0;
    98. 

  98.     display: flex;
    99. 

  99.     justify-content: flex-end;
    100. 

  100.   }
    101. 

  101.   .btn-close {
    102. 

  102.     padding: 10px 32px;
    103. 

  103.     background: #fff;
    104. 

  104.     border: 1px solid #d1d5db;
    105. 

  105.     border-radius: 8px;
    106. 

  106.     font-size: 14px;
    107. 

  107.     color: #374151;
    108. 

  108.     cursor: pointer;
    109. 

  109.     transition: all 0.2s;
    110. 

  110.   }
    111. 

  111.   .btn-close:hover {
    112. 

  112.     border-color: #10b981;
    113. 

  113.     color: #10b981;
    114. 

  114.     background: #ecfdf5;
    115. 

  115.   }
    116. 

  116. 

  117.   /* ═══════════════════════════════════════════
    118. 

  118.      LAYER 1: SUMMARY KPI STRIP
    119. 

  119.      ═══════════════════════════════════════════ */
    120. 

  120.   .kpi-strip {
    121. 

  121.     display: grid;
    122. 

  122.     grid-template-columns: repeat(4, 1fr);
    123. 

  123.     gap: 16px;
    124. 

  124.     margin-bottom: 24px;
    125. 

  125.   }
    126. 

  126.   .kpi-card {
    127. 

  127.     background: #fff;
    128. 

  128.     border-radius: 12px;
    129. 

  129.     padding: 18px 20px;
    130. 

  130.     box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    131. 

  131.     border-left: 3px solid #10b981;
    132. 

  132.     transition: transform 0.2s, box-shadow 0.2s;
    133. 

  133.     position: relative;
    134. 

  134.     overflow: hidden;
    135. 

  135.   }
    136. 

  136.   .kpi-card::after {
    137. 

  137.     content: '';
    138. 

  138.     position: absolute;
    139. 

  139.     top: 0; right: 0;
    140. 

  140.     width: 60px; height: 60px;
    141. 

  141.     background: radial-gradient(circle at top right, rgba(16,185,129,0.06), transparent 70%);
    142. 

  142.     pointer-events: none;
    143. 

  143.   }
    144. 

  144.   .kpi-card:hover {
    145. 

  145.     transform: translateY(-1px);
    146. 

  146.     box-shadow: 0 4px 12px rgba(16,185,129,0.1);
    147. 

  147.   }
    148. 

  148.   .kpi-label {
    149. 

  149.     font-size: 12px;
    150. 

  150.     color: #94a3b8;
    151. 

  151.     margin-bottom: 6px;
    152. 

  152.     text-transform: uppercase;
    153. 

  153.     letter-spacing: 0.5px;
    154. 

  154.   }
    155. 

  155.   .kpi-value {
    156. 

  156.     font-size: 16px;
    157. 

  157.     font-weight: 600;
    158. 

  158.     color: #1e293b;
    159. 

  159.   }
    160. 

  160.   .kpi-value .status-dot {
    161. 

  161.     display: inline-block;
    162. 

  162.     width: 8px; height: 8px;
    163. 

  163.     border-radius: 50%;
    164. 

  164.     margin-right: 6px;
    165. 

  165.     vertical-align: middle;
    166. 

  166.     position: relative;
    167. 

  167.     top: -1px;
    168. 

  168.   }
    169. 

  169.   .kpi-value .status-dot.active {
    170. 

  170.     background: #10b981;
    171. 

  171.     box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
    172. 

  172.   }
    173. 

  173. 

  174.   /* ═══════════════════════════════════════════
    175. 

  175.      LAYER 2: SECTION CARDS
    176. 

  176.      ═══════════════════════════════════════════ */
    177. 

  177.   .section-card {
    178. 

  178.     border-radius: 12px;
    179. 

  179.     padding: 22px 24px;
    180. 

  180.     margin-bottom: 20px;
    181. 

  181.     box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    182. 

  182.     transition: transform 0.2s, box-shadow 0.2s;
    183. 

  183.     position: relative;
    184. 

  184.   }
    185. 

  185.   .section-card:hover {
    186. 

  186.     transform: translateY(-1px);
    187. 

  187.     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    188. 

  188.   }
    189. 

  189.   .section-card.bg-white  { background: #fff; }
    190. 

  190.   .section-card.bg-green  { background: #f0fdf4; }
    191. 

  191.   .section-card.bg-gray   { background: #f8fafc; }
    192. 

  192. 

  193.   /* Section Title */
    194. 

  194.   .section-title {
    195. 

  195.     display: flex;
    196. 

  196.     align-items: center;
    197. 

  197.     margin-bottom: 18px;
    198. 

  198.     padding-bottom: 12px;
    199. 

  199.     border-bottom: 1px solid #e2e8f0;
    200. 

  200.   }
    201. 

  201.   .section-title::before {
    202. 

  202.     content: '';
    203. 

  203.     width: 3px;
    204. 

  204.     height: 18px;
    205. 

  205.     background: #10b981;
    206. 

  206.     border-radius: 2px;
    207. 

  207.     margin-right: 10px;
    208. 

  208.     flex-shrink: 0;
    209. 

  209.   }
    210. 

  210.   .section-title h3 {
    211. 

  211.     font-size: 15px;
    212. 

  212.     font-weight: 600;
    213. 

  213.     color: #1e293b;
    214. 

  214.   }
    215. 

  215. 

  216.   /* ── Data Grid ── */
    217. 

  217.   .data-grid {
    218. 

  218.     display: grid;
    219. 

  219.     grid-template-columns: repeat(3, 1fr);
    220. 

  220.     gap: 14px 20px;
    221. 

  221.   }
    222. 

  222.   .data-grid.col-2 {
    223. 

  223.     grid-template-columns: repeat(2, 1fr);
    224. 

  224.   }
    225. 

  225.   .data-item {}
    226. 

  226.   .data-label {
    227. 

  227.     font-size: 12px;
    228. 

  228.     color: #94a3b8;
    229. 

  229.     margin-bottom: 3px;
    230. 

  230.   }
    231. 

  231.   .data-value {
    232. 

  232.     font-size: 14px;
    233. 

  233.     color: #1e293b;
    234. 

  234.     font-weight: 500;
    235. 

  235.   }
    236. 

  236.   .data-value.full-width {
    237. 

  237.     grid-column: 1 / -1;
    238. 

  238.   }
    239. 

  239. 

  240.   /* ── Attachment Row ── */
    241. 

  241.   .attachment-row {
    242. 

  242.     display: flex;
    243. 

  243.     gap: 12px;
    244. 

  244.     margin-top: 16px;
    245. 

  245.     padding-top: 14px;
    246. 

  246.     border-top: 1px dashed #e2e8f0;
    247. 

  247.   }
    248. 

  248.   .attachment-label {
    249. 

  249.     font-size: 12px;
    250. 

  250.     color: #94a3b8;
    251. 

  251.     flex-shrink: 0;
    252. 

  252.     padding-top: 20px;
    253. 

  253.   }
    254. 

  254.   .attachment-thumb {
    255. 

  255.     width: 72px;
    256. 

  256.     height: 54px;
    257. 

  257.     border-radius: 6px;
    258. 

  258.     background: #f1f5f9;
    259. 

  259.     border: 1px solid #e2e8f0;
    260. 

  260.     display: flex;
    261. 

  261.     align-items: center;
    262. 

  262.     justify-content: center;
    263. 

  263.     font-size: 10px;
    264. 

  264.     color: #94a3b8;
    265. 

  265.     position: relative;
    266. 

  266.     overflow: hidden;
    267. 

  267.     transition: border-color 0.2s;
    268. 

  268.   }
    269. 

  269.   .attachment-thumb:hover {
    270. 

  270.     border-color: #10b981;
    271. 

  271.   }
    272. 

  272.   .attachment-thumb svg {
    273. 

  273.     width: 20px;
    274. 

  274.     height: 20px;
    275. 

  275.     stroke: #94a3b8;
    276. 

  276.     fill: none;
    277. 

  277.   }
    278. 

  278.   .attachment-thumb .file-name {
    279. 

  279.     position: absolute;
    280. 

  280.     bottom: 3px;
    281. 

  281.     font-size: 9px;
    282. 

  282.     color: #64748b;
    283. 

  283.     text-align: center;
    284. 

  284.     width: 100%;
    285. 

  285.     padding: 0 4px;
    286. 

  286.     white-space: nowrap;
    287. 

  287.     overflow: hidden;
    288. 

  288.     text-overflow: ellipsis;
    289. 

  289.   }
    290. 

  290. 

  291.   /* ── Remark ── */
    292. 

  292.   .remark-row {
    293. 

  293.     margin-top: 14px;
    294. 

  294.     padding-top: 14px;
    295. 

  295.     border-top: 1px dashed #e2e8f0;
    296. 

  296.   }
    297. 

  297. 

  298.   /* ═══════════════════════════════════════════
    299. 

  299.      CLIENT INFO — SUB CARDS
    300. 

  300.      ═══════════════════════════════════════════ */
    301. 

  301.   .client-sub-cards {
    302. 

  302.     display: grid;
    303. 

  303.     grid-template-columns: repeat(3, 1fr);
    304. 

  304.     gap: 16px;
    305. 

  305.   }
    306. 

  306.   .client-sub-card {
    307. 

  307.     background: #fff;
    308. 

  308.     border-radius: 10px;
    309. 

  309.     padding: 18px 20px;
    310. 

  310.     box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    311. 

  311.     border: 1px solid rgba(0,0,0,0.03);
    312. 

  312.     transition: transform 0.2s, box-shadow 0.2s;
    313. 

  313.   }
    314. 

  314.   .client-sub-card:hover {
    315. 

  315.     transform: translateY(-1px);
    316. 

  316.     box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    317. 

  317.   }
    318. 

  318.   .sub-card-header {
    319. 

  319.     display: flex;
    320. 

  320.     align-items: center;
    321. 

  321.     gap: 8px;
    322. 

  322.     margin-bottom: 14px;
    323. 

  323.     padding-bottom: 10px;
    324. 

  324.     border-bottom: 1px solid #f1f5f9;
    325. 

  325.   }
    326. 

  326.   .sub-card-header .icon {
    327. 

  327.     font-size: 22px;
    328. 

  328.     line-height: 1;
    329. 

  329.   }
    330. 

  330.   .sub-card-header h4 {
    331. 

  331.     font-size: 14px;
    332. 

  332.     font-weight: 600;
    333. 

  333.     color: #1e293b;
    334. 

  334.   }
    335. 

  335. 

  336.   /* ═══════════════════════════════════════════
    337. 

  337.      TABLE STYLES
    338. 

  338.      ═══════════════════════════════════════════ */
    339. 

  339.   .data-table {
    340. 

  340.     width: 100%;
    341. 

  341.     border-collapse: separate;
    342. 

  342.     border-spacing: 0;
    343. 

  343.     font-size: 13px;
    344. 

  344.   }
    345. 

  345.   .data-table thead th {
    346. 

  346.     background: #f8fafc;
    347. 

  347.     color: #64748b;
    348. 

  348.     font-weight: 600;
    349. 

  349.     font-size: 12px;
    350. 

  350.     text-align: left;
    351. 

  351.     padding: 10px 14px;
    352. 

  352.     border-bottom: 2px solid #e2e8f0;
    353. 

  353.     white-space: nowrap;
    354. 

  354.   }
    355. 

  355.   .data-table thead th:first-child { border-radius: 6px 0 0 0; }
    356. 

  356.   .data-table thead th:last-child  { border-radius: 0 6px 0 0; }
    357. 

  357.   .data-table tbody td {
    358. 

  358.     padding: 11px 14px;
    359. 

  359.     border-bottom: 1px solid #f1f5f9;
    360. 

  360.     color: #1e293b;
    361. 

  361.   }
    362. 

  362.   .data-table tbody tr:last-child td { border-bottom: none; }
    363. 

  363.   .data-table tbody tr:hover td { background: #f0fdf4; }
    364. 

  364. 

  365.   /* ── Status Badges ── */
    366. 

  366.   .badge {
    367. 

  367.     display: inline-block;
    368. 

  368.     padding: 2px 10px;
    369. 

  369.     border-radius: 20px;
    370. 

  370.     font-size: 12px;
    371. 

  371.     font-weight: 500;
    372. 

  372.     white-space: nowrap;
    373. 

  373.   }
    374. 

  374.   .badge-green  { background: #ecfdf5; color: #059669; }
    375. 

  375.   .badge-blue   { background: #eff6ff; color: #2563eb; }
    376. 

  376.   .badge-amber  { background: #fffbeb; color: #d97706; }
    377. 

  377.   .badge-gray   { background: #f1f5f9; color: #64748b; }
    378. 

  378.   .badge-purple { background: #faf5ff; color: #7c3aed; }
    379. 

  379. 

  380.   /* ═══════════════════════════════════════════
    381. 

  381.      PAYMENT SECTION
    382. 

  382.      ═══════════════════════════════════════════ */
    383. 

  383.   .payment-summary {
    384. 

  384.     display: grid;
    385. 

  385.     grid-template-columns: repeat(4, 1fr);
    386. 

  386.     gap: 12px;
    387. 

  387.     margin-bottom: 18px;
    388. 

  388.   }
    389. 

  389.   .payment-metric {
    390. 

  390.     background: #fff;
    391. 

  391.     border-radius: 8px;
    392. 

  392.     padding: 12px 16px;
    393. 

  393.     border: 1px solid #e2e8f0;
    394. 

  394.   }
    395. 

  395.   .payment-metric .pm-label {
    396. 

  396.     font-size: 11px;
    397. 

  397.     color: #94a3b8;
    398. 

  398.     margin-bottom: 4px;
    399. 

  399.   }
    400. 

  400.   .payment-metric .pm-value {
    401. 

  401.     font-size: 16px;
    402. 

  402.     font-weight: 700;
    403. 

  403.     color: #1e293b;
    404. 

  404.   }
    405. 

  405.   .payment-metric .pm-value.amount {
    406. 

  406.     color: #059669;
    407. 

  407.   }
    408. 

  408. 

  409.   .payment-details {
    410. 

  410.     display: flex;
    411. 

  411.     gap: 14px;
    412. 

  412.     margin-top: 14px;
    413. 

  413.   }
    414. 

  414.   .payment-detail-card {
    415. 

  415.     flex: 1;
    416. 

  416.     background: #fff;
    417. 

  417.     border-radius: 8px;
    418. 

  418.     padding: 14px 16px;
    419. 

  419.     border: 1px solid #e2e8f0;
    420. 

  420.   }
    421. 

  421.   .pdc-title {
    422. 

  422.     font-size: 12px;
    423. 

  423.     color: #64748b;
    424. 

  424.     font-weight: 600;
    425. 

  425.     margin-bottom: 10px;
    426. 

  426.     display: flex;
    427. 

  427.     align-items: center;
    428. 

  428.     gap: 6px;
    429. 

  429.   }
    430. 

  430.   .pdc-title::before {
    431. 

  431.     content: '';
    432. 

  432.     width: 2px; height: 12px;
    433. 

  433.     background: #10b981;
    434. 

  434.     border-radius: 1px;
    435. 

  435.   }
    436. 

  436. 

  437.   /* ── Timeline ── */
    438. 

  438.   .payment-timeline {
    439. 

  439.     margin-top: 16px;
    440. 

  440.     padding-top: 14px;
    441. 

  441.     border-top: 1px dashed #e2e8f0;
    442. 

  442.   }
    443. 

  443.   .timeline-title {
    444. 

  444.     font-size: 12px;
    445. 

  445.     color: #64748b;
    446. 

  446.     font-weight: 600;
    447. 

  447.     margin-bottom: 12px;
    448. 

  448.   }
    449. 

  449.   .timeline {
    450. 

  450.     display: flex;
    451. 

  451.     align-items: center;
    452. 

  452.     gap: 0;
    453. 

  453.     position: relative;
    454. 

  454.   }
    455. 

  455.   .timeline-step {
    456. 

  456.     display: flex;
    457. 

  457.     flex-direction: column;
    458. 

  458.     align-items: center;
    459. 

  459.     position: relative;
    460. 

  460.     flex: 1;
    461. 

  461.   }
    462. 

  462.   .timeline-dot {
    463. 

  463.     width: 28px; height: 28px;
    464. 

  464.     border-radius: 50%;
    465. 

  465.     display: flex;
    466. 

  466.     align-items: center;
    467. 

  467.     justify-content: center;
    468. 

  468.     font-size: 12px;
    469. 

  469.     font-weight: 600;
    470. 

  470.     z-index: 1;
    471. 

  471.     transition: transform 0.2s;
    472. 

  472.   }
    473. 

  473.   .timeline-dot.done {
    474. 

  474.     background: #10b981;
    475. 

  475.     color: #fff;
    476. 

  476.     box-shadow: 0 0 0 4px rgba(16,185,129,0.15);
    477. 

  477.   }
    478. 

  478.   .timeline-dot.current {
    479. 

  479.     background: #fff;
    480. 

  480.     border: 2px solid #10b981;
    481. 

  481.     color: #10b981;
    482. 

  482.     box-shadow: 0 0 0 4px rgba(16,185,129,0.1);
    483. 

  483.   }
    484. 

  484.   .timeline-dot.pending {
    485. 

  485.     background: #f1f5f9;
    486. 

  486.     color: #94a3b8;
    487. 

  487.     border: 2px solid #e2e8f0;
    488. 

  488.   }
    489. 

  489.   .timeline-label {
    490. 

  490.     font-size: 11px;
    491. 

  491.     color: #64748b;
    492. 

  492.     margin-top: 8px;
    493. 

  493.     text-align: center;
    494. 

  494.     max-width: 80px;
    495. 

  495.   }
    496. 

  496.   .timeline-label.done { color: #059669; font-weight: 600; }
    497. 

  497.   .timeline-connector {
    498. 

  498.     position: absolute;
    499. 

  499.     top: 14px;
    500. 

  500.     height: 2px;
    501. 

  501.     background: #e2e8f0;
    502. 

  502.     z-index: 0;
    503. 

  503.   }
    504. 

  504.   .timeline-connector.done { background: #10b981; }
    505. 

  505. 

  506.   /* ═══════════════════════════════════════════
    507. 

  507.      AUDIT TABLE
    508. 

  508.      ═══════════════════════════════════════════ */
    509. 

  509.   .audit-table .data-table tbody td {
    510. 

  510.     padding: 9px 14px;
    511. 

  511.     font-size: 13px;
    512. 

  512.   }
    513. 

  513. 

  514.   /* ═══════════════════════════════════════════
    515. 

  515.      REFUND STYLES
    516. 

  516.      ═══════════════════════════════════════════ */
    517. 

  517. 

  518.   /* Red badge for 已退费 */
    519. 

  519.   .badge-red { background: #fef2f2; color: #dc2626; }
    520. 

  520. 

  521.   /* Refund amount text color */
    522. 

  522.   .pm-value.refund { color: #dc2626 !important; }
    523. 

  523. 

  524.   /* Payment details: vertical stack for richer cards */
    525. 

  525.   .payment-details {
    526. 

  526.     display: flex;
    527. 

  527.     flex-direction: column;
    528. 

  528.     gap: 16px;
    529. 

  529.     margin-top: 14px;
    530. 

  530.   }
    531. 

  531. 

  532.   /* Refunded card — red left border */
    533. 

  533.   .payment-detail-card.refunded {
    534. 

  534.     border-left: 3px solid #dc2626;
    535. 

  535.     border-color: #e2e8f0;
    536. 

  536.     border-left-color: #dc2626;
    537. 

  537.   }
    538. 

  538. 

  539.   /* Refund-pending card — amber left border */
    540. 

  540.   .payment-detail-card.refund-pending {
    541. 

  541.     border-left: 3px solid #d97706;
    542. 

  542.     border-color: #e2e8f0;
    543. 

  543.     border-left-color: #d97706;
    544. 

  544.   }
    545. 

  545. 

  546.   /* Red accent bar on title */
    547. 

  547.   .pdc-title.refunded::before {
    548. 

  548.     background: #dc2626;
    549. 

  549.   }
    550. 

  550. 

  551.   /* Amber accent bar on title */
    552. 

  552.   .pdc-title.refund-pending::before {
    553. 

  553.     background: #d97706;
    554. 

  554.   }
    555. 

  555. 

  556.   /* Card header with badge */
    557. 

  557.   .pdc-header {
    558. 

  558.     display: flex;
    559. 

  559.     align-items: center;
    560. 

  560.     justify-content: space-between;
    561. 

  561.     margin-bottom: 12px;
    562. 

  562.     padding-bottom: 10px;
    563. 

  563.     border-bottom: 1px solid #f1f5f9;
    564. 

  564.   }
    565. 

  565.   .pdc-header-left {
    566. 

  566.     display: flex;
    567. 

  567.     align-items: center;
    568. 

  568.     gap: 6px;
    569. 

  569.     font-size: 14px;
    570. 

  570.     font-weight: 600;
    571. 

  571.     color: #1e293b;
    572. 

  572.   }
    573. 

  573.   .pdc-header-left::before {
    574. 

  574.     content: '';
    575. 

  575.     width: 2px;
    576. 

  576.     height: 14px;
    577. 

  577.     border-radius: 1px;
    578. 

  578.     flex-shrink: 0;
    579. 

  579.   }
    580. 

  580.   .pdc-header-left.green::before { background: #10b981; }
    581. 

  581.   .pdc-header-left.red::before { background: #dc2626; }
    582. 

  582.   .pdc-header-left.amber::before { background: #d97706; }
    583. 

  583.   .pdc-header-amount {
    584. 

  584.     font-size: 14px;
    585. 

  585.     font-weight: 700;
    586. 

  586.     margin-left: 4px;
    587. 

  587.   }
    588. 

  588.   .pdc-header-amount.green { color: #059669; }
    589. 

  589.   .pdc-header-amount.red { color: #dc2626; }
    590. 

  590.   .pdc-header-amount.amber { color: #d97706; }
    591. 

  591. 

  592.   /* Payment info row */
    593. 

  593.   .pdc-info-row {
    594. 

  594.     display: flex;
    595. 

  595.     gap: 24px;
    596. 

  596.     margin-bottom: 12px;
    597. 

  597.     flex-wrap: wrap;
    598. 

  598.   }
    599. 

  599.   .pdc-info-item {
    600. 

  600.     display: flex;
    601. 

  601.     flex-direction: column;
    602. 

  602.     gap: 2px;
    603. 

  603.   }
    604. 

  604.   .pdc-info-item .info-label {
    605. 

  605.     font-size: 11px;
    606. 

  606.     color: #94a3b8;
    607. 

  607.   }
    608. 

  608.   .pdc-info-item .info-value {
    609. 

  609.     font-size: 13px;
    610. 

  610.     color: #1e293b;
    611. 

  611.     font-weight: 500;
    612. 

  612.   }
    613. 

  613. 

  614.   /* Mini flow track inside cards */
    615. 

  615.   .mini-flow {
    616. 

  616.     display: flex;
    617. 

  617.     align-items: center;
    618. 

  618.     gap: 0;
    619. 

  619.     margin: 12px 0;
    620. 

  620.     padding: 10px 14px;
    621. 

  621.     background: #f8fafc;
    622. 

  622.     border-radius: 8px;
    623. 

  623.     position: relative;
    624. 

  624.   }
    625. 

  625.   .mini-flow-step {
    626. 

  626.     display: flex;
    627. 

  627.     flex-direction: column;
    628. 

  628.     align-items: center;
    629. 

  629.     position: relative;
    630. 

  630.     flex: 1;
    631. 

  631.     z-index: 1;
    632. 

  632.   }
    633. 

  633.   .mini-flow-dot {
    634. 

  634.     width: 24px;
    635. 

  635.     height: 24px;
    636. 

  636.     border-radius: 50%;
    637. 

  637.     display: flex;
    638. 

  638.     align-items: center;
    639. 

  639.     justify-content: center;
    640. 

  640.     font-size: 11px;
    641. 

  641.     font-weight: 700;
    642. 

  642.     z-index: 1;
    643. 

  643.   }
    644. 

  644.   .mini-flow-dot.done {
    645. 

  645.     background: #10b981;
    646. 

  646.     color: #fff;
    647. 

  647.     box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
    648. 

  648.   }
    649. 

  649.   .mini-flow-dot.done-red {
    650. 

  650.     background: #dc2626;
    651. 

  651.     color: #fff;
    652. 

  652.     box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
    653. 

  653.   }
    654. 

  654.   .mini-flow-dot.current-amber {
    655. 

  655.     background: #fff;
    656. 

  656.     border: 2px solid #d97706;
    657. 

  657.     color: #d97706;
    658. 

  658.     box-shadow: 0 0 0 3px rgba(217,119,6,0.15);
    659. 

  659.     animation: pulseAmber 2s ease-in-out infinite;
    660. 

  660.   }
    661. 

  661.   .mini-flow-dot.pending-gray {
    662. 

  662.     background: #f1f5f9;
    663. 

  663.     color: #94a3b8;
    664. 

  664.     border: 2px solid #e2e8f0;
    665. 

  665.   }
    666. 

  666.   .mini-flow-label {
    667. 

  667.     font-size: 10px;
    668. 

  668.     margin-top: 6px;
    669. 

  669.     text-align: center;
    670. 

  670.     max-width: 80px;
    671. 

  671.     line-height: 1.3;
    672. 

  672.   }
    673. 

  673.   .mini-flow-label.done { color: #059669; font-weight: 600; }
    674. 

  674.   .mini-flow-label.done-red { color: #dc2626; font-weight: 600; }
    675. 

  675.   .mini-flow-label.current-amber { color: #d97706; font-weight: 600; }
    676. 

  676.   .mini-flow-label.pending-gray { color: #94a3b8; }
    677. 

  677. 

  678.   /* Mini flow connectors */
    679. 

  679.   .mini-flow-connector {
    680. 

  680.     position: absolute;
    681. 

  681.     top: 22px;
    682. 

  682.     height: 2px;
    683. 

  683.     z-index: 0;
    684. 

  684.   }
    685. 

  685.   .mini-flow-connector.done { background: #10b981; }
    686. 

  686.   .mini-flow-connector.done-red { background: #dc2626; }
    687. 

  687.   .mini-flow-connector.current-amber { background: #d97706; }
    688. 

  688.   .mini-flow-connector.pending-gray { background: #e2e8f0; }
    689. 

  689. 

  690.   /* Refund detail area — red or amber tint */
    691. 

  691.   .refund-area {
    692. 

  692.     margin-top: 12px;
    693. 

  693.     padding: 14px 16px;
    694. 

  694.     border-radius: 8px;
    695. 

  695.     display: flex;
    696. 

  696.     flex-direction: column;
    697. 

  697.     gap: 10px;
    698. 

  698.   }
    699. 

  699.   .refund-area.red-tint {
    700. 

  700.     background: #fef2f2;
    701. 

  701.     border: 1px solid #fecaca;
    702. 

  702.   }
    703. 

  703.   .refund-area.amber-tint {
    704. 

  704.     background: #fffbeb;
    705. 

  705.     border: 1px solid #fde68a;
    706. 

  706.   }
    707. 

  707.   .refund-area-title {
    708. 

  708.     font-size: 12px;
    709. 

  709.     font-weight: 600;
    710. 

  710.     margin-bottom: 2px;
    711. 

  711.     display: flex;
    712. 

  712.     align-items: center;
    713. 

  713.     gap: 4px;
    714. 

  714.   }
    715. 

  715.   .refund-area-title.red { color: #dc2626; }
    716. 

  716.   .refund-area-title.amber { color: #d97706; }
    717. 

  717.   .refund-area-grid {
    718. 

  718.     display: grid;
    719. 

  719.     grid-template-columns: repeat(2, 1fr);
    720. 

  720.     gap: 8px 20px;
    721. 

  721.   }
    722. 

  722.   .refund-area-grid .data-label { font-size: 11px; }
    723. 

  723.   .refund-area-grid .data-value { font-size: 13px; }
    724. 

  724.   .refund-area-grid .data-value.red { color: #dc2626; font-weight: 700; }
    725. 

  725.   .refund-area-grid .data-value.amber { color: #d97706; font-weight: 700; }
    726. 

  726.   .refund-area-grid .full-col { grid-column: 1 / -1; }
    727. 

  727. 

  728.   /* Refund attachments inside refund area */
    729. 

  729.   .refund-attachments {
    730. 

  730.     display: flex;
    731. 

  731.     gap: 10px;
    732. 

  732.     align-items: flex-end;
    733. 

  733.     margin-top: 4px;
    734. 

  734.   }
    735. 

  735. 

  736.   /* Finance confirmation area (green tint) */
    737. 

  737.   .finance-area {
    738. 

  738.     margin-top: 12px;
    739. 

  739.     padding: 12px 16px;
    740. 

  740.     border-radius: 8px;
    741. 

  741.     background: #f0fdf4;
    742. 

  742.     border: 1px solid #bbf7d0;
    743. 

  743.     display: flex;
    744. 

  744.     flex-direction: column;
    745. 

  745.     gap: 8px;
    746. 

  746.   }
    747. 

  747.   .finance-area-title {
    748. 

  748.     font-size: 12px;
    749. 

  749.     font-weight: 600;
    750. 

  750.     color: #059669;
    751. 

  751.     margin-bottom: 2px;
    752. 

  752.   }
    753. 

  753.   .finance-area-grid {
    754. 

  754.     display: grid;
    755. 

  755.     grid-template-columns: 1fr 1fr;
    756. 

  756.     gap: 8px 20px;
    757. 

  757.   }
    758. 

  758.   .finance-area-grid .data-label { font-size: 11px; }
    759. 

  759.   .finance-area-grid .data-value { font-size: 13px; }
    760. 

  760. 

  761.   /* Timeline dot variants */
    762. 

  762.   .timeline-dot.refund {
    763. 

  763.     background: #dc2626;
    764. 

  764.     color: #fff;
    765. 

  765.     box-shadow: 0 0 0 4px rgba(220,38,38,0.15);
    766. 

  766.   }
    767. 

  767.   .timeline-dot.refund-current {
    768. 

  768.     background: #fff;
    769. 

  769.     border: 2px solid #d97706;
    770. 

  770.     color: #d97706;
    771. 

  771.     box-shadow: 0 0 0 4px rgba(217,119,6,0.15);
    772. 

  772.     animation: pulseAmber 2s ease-in-out infinite;
    773. 

  773.   }
    774. 

  774. 

  775.   /* Timeline connector variants */
    776. 

  776.   .timeline-connector.refund { background: #dc2626; }
    777. 

  777.   .timeline-connector.refund-current { background: #d97706; }
    778. 

  778. 

  779.   /* Pulsing amber animation */
    780. 

  780.   @keyframes pulseAmber {
    781. 

  781.     0%, 100% { box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
    782. 

  782.     50% { box-shadow: 0 0 0 6px rgba(217,119,6,0.25); }
    783. 

  783.   }
    784. 

  784. 

  785.   /* Overall timeline step label variants */
    786. 

  786.   .timeline-label.refund { color: #dc2626; font-weight: 600; }
    787. 

  787.   .timeline-label.refund-current { color: #d97706; font-weight: 600; }
    788. 

  788. 

  789.   /* ═══════════════════════════════════════════
    790. 

  790.      RESPONSIVE HINT
    791. 

  791.      ═══════════════════════════════════════════ */
    792. 

  792.   @media (max-width: 900px) {
    793. 

  793.     .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    794. 

  794.     .client-sub-cards { grid-template-columns: 1fr; }
    795. 

  795.     .data-grid { grid-template-columns: repeat(2, 1fr); }
    796. 

  796.     .payment-summary { grid-template-columns: repeat(2, 1fr); }
    797. 

  797.     .payment-details { flex-direction: column; }
    798. 

  798.     .pdc-info-row { flex-direction: column; gap: 10px; }
    799. 

  799.     .refund-area-grid { grid-template-columns: 1fr; }
    800. 

  800.     .finance-area-grid { grid-template-columns: 1fr; }
    801. 

  801.   }
    802. 

  802. 

  803.   /* ── Page Title (for demo context) ── */
    804. 

  804.   .demo-page-title {
    805. 

  805.     text-align: center;
    806. 

  806.     color: #64748b;
    807. 

  807.     font-size: 13px;
    808. 

  808.     margin-bottom: 16px;
    809. 

  809.     letter-spacing: 1px;
    810. 

  810.   }
    811. 

  811. </style>
    812. 

  812. </head>
    813. 

  813. <body>
    814. 

  814. 

  815. <div class="overlay" id="overlay">
    816. 

  816.   <div class="dialog">
    817. 

  817. 

  818.     <!-- ── Header ── -->
    819. 

  819.     <div class="dialog-header">
    820. 

  820.       <h2>查看协议单 <span class="protocol-id">— P2025-0501-001</span></h2>
    821. 

  821.       <button class="dialog-close" title="关闭" onclick="document.getElementById('overlay').style.display='none'">✕</button>
    822. 

  822.     </div>
    823. 

  823. 

  824.     <!-- ── Body ── -->
    825. 

  825.     <div class="dialog-body">
    826. 

  826. 

  827.       <!-- ════════════════════════════════
    828. 

  828.            LAYER 1: KPI SUMMARY STRIP
    829. 

  829.            ════════════════════════════════ -->
    830. 

  830.       <div class="kpi-strip">
    831. 

  831.         <div class="kpi-card">
    832. 

  832.           <div class="kpi-label">协议编号</div>
    833. 

  833.           <div class="kpi-value">P2025-0501-001</div>
    834. 

  834.         </div>
    835. 

  835.         <div class="kpi-card">
    836. 

  836.           <div class="kpi-label">协议状态</div>
    837. 

  837.           <div class="kpi-value"><span class="status-dot active"></span>生效中</div>
    838. 

  838.         </div>
    839. 

  839.         <div class="kpi-card">
    840. 

  840.           <div class="kpi-label">母亲姓名</div>
    841. 

  841.           <div class="kpi-value">王美丽</div>
    842. 

  842.         </div>
    843. 

  843.         <div class="kpi-card">
    844. 

  844.           <div class="kpi-label">登记日期</div>
    845. 

  845.           <div class="kpi-value">2025-05-08</div>
    846. 

  846.         </div>
    847. 

  847.       </div>
    848. 

  848. 

  849.       <!-- ════════════════════════════════
    850. 

  850.            SECTION 1: 基本信息
    851. 

  851.            ════════════════════════════════ -->
    852. 

  852.       <div class="section-card bg-white">
    853. 

  853.         <div class="section-title"><h3>基本信息</h3></div>
    854. 

  854.         <div class="data-grid">
    855. 

  855.           <div class="data-item">
    856. 

  856.             <div class="data-label">协议号</div>
    857. 

  857.             <div class="data-value">P2025-0501-001</div>
    858. 

  858.           </div>
    859. 

  859.           <div class="data-item">
    860. 

  860.             <div class="data-label">协议状态</div>
    861. 

  861.             <div class="data-value"><span class="badge badge-green">生效中</span></div>
    862. 

  862.           </div>
    863. 

  863.           <div class="data-item">
    864. 

  864.             <div class="data-label">登记日期</div>
    865. 

  865.             <div class="data-value">2025-05-08</div>
    866. 

  866.           </div>
    867. 

  867.           <div class="data-item">
    868. 

  868.             <div class="data-label">采集专员</div>
    869. 

  869.             <div class="data-value">李专员</div>
    870. 

  870.           </div>
    871. 

  871.           <div class="data-item">
    872. 

  872.             <div class="data-label">创建时间</div>
    873. 

  873.             <div class="data-value">2025-05-08 08:30:22</div>
    874. 

  874.           </div>
    875. 

  875.           <div class="data-item">
    876. 

  876.             <div class="data-label">最后更新</div>
    877. 

  877.             <div class="data-value">2025-05-08 09:15:40</div>
    878. 

  878.           </div>
    879. 

  879.         </div>
    880. 

  880. 

  881.         <!-- 附件 -->
    882. 

  882.         <div class="attachment-row">
    883. 

  883.           <div class="attachment-label">附件</div>
    884. 

  884.           <div class="attachment-thumb">
    885. 

  885.             <svg viewBox="0 0 24 24" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
    886. 

  886.             <span class="file-name">知情同意书.pdf</span>
    887. 

  887.           </div>
    888. 

  888.           <div class="attachment-thumb">
    889. 

  889.             <svg viewBox="0 0 24 24" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
    890. 

  890.             <span class="file-name">身份证明.jpg</span>
    891. 

  891.           </div>
    892. 

  892.           <div class="attachment-thumb">
    893. 

  893.             <svg viewBox="0 0 24 24" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
    894. 

  894.             <span class="file-name">检验报告.pdf</span>
    895. 

  895.           </div>
    896. 

  896.         </div>
    897. 

  897. 

  898.         <!-- 备注 -->
    899. 

  899.         <div class="remark-row">
    900. 

  900.           <div class="data-grid">
    901. 

  901.             <div class="data-item data-value full-width">
    902. 

  902.               <div class="data-label">备注</div>
    903. 

  903.               <div class="data-value" style="font-weight: 400; color: #64748b;">产妇及家属已充分了解采集流程，同意进行干细胞采集。婴儿体重偏大，需注意采集量。</div>
    904. 

  904.             </div>
    905. 

  905.           </div>
    906. 

  906.         </div>
    907. 

  907.       </div>
    908. 

  908. 

  909.       <!-- ════════════════════════════════
    910. 

  910.            SECTION 2: 客户信息
    911. 

  911.            ════════════════════════════════ -->
    912. 

  912.       <div class="section-card bg-green">
    913. 

  913.         <div class="section-title"><h3>客户信息</h3></div>
    914. 

  914.         <div class="client-sub-cards">
    915. 

  915. 

  916.           <!-- 母亲 -->
    917. 

  917.           <div class="client-sub-card">
    918. 

  918.             <div class="sub-card-header">
    919. 

  919.               <span class="icon">🤱</span>
    920. 

  920.               <h4>母亲信息</h4>
    921. 

  921.             </div>
    922. 

  922.             <div class="data-grid col-2">
    923. 

  923.               <div class="data-item">
    924. 

  924.                 <div class="data-label">姓名</div>
    925. 

  925.                 <div class="data-value">王美丽</div>
    926. 

  926.               </div>
    927. 

  927.               <div class="data-item">
    928. 

  928.                 <div class="data-label">电话</div>
    929. 

  929.                 <div class="data-value">138****5678</div>
    930. 

  930.               </div>
    931. 

  931.               <div class="data-item">
    932. 

  932.                 <div class="data-label">身份证号</div>
    933. 

  933.                 <div class="data-value">3401****1234</div>
    934. 

  934.               </div>
    935. 

  935.               <div class="data-item">
    936. 

  936.                 <div class="data-label">出生年月</div>
    937. 

  937.                 <div class="data-value">1992-06</div>
    938. 

  938.               </div>
    939. 

  939.               <div class="data-item">
    940. 

  940.                 <div class="data-label">民族</div>
    941. 

  941.                 <div class="data-value">汉族</div>
    942. 

  942.               </div>
    943. 

  943.             </div>
    944. 

  944.             <div style="margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9;">
    945. 

  945.               <div class="data-label">住址</div>
    946. 

  946.               <div class="data-value" style="font-weight: 400; font-size: 13px; line-height: 1.5;">安徽省合肥市蜀山区望江西路XX小区X栋X单元XXX室</div>
    947. 

  947.             </div>
    948. 

  948.           </div>
    949. 

  949. 

  950.           <!-- 父亲 -->
    951. 

  951.           <div class="client-sub-card">
    952. 

  952.             <div class="sub-card-header">
    953. 

  953.               <span class="icon">👨</span>
    954. 

  954.               <h4>父亲信息</h4>
    955. 

  955.             </div>
    956. 

  956.             <div class="data-grid col-2">
    957. 

  957.               <div class="data-item">
    958. 

  958.                 <div class="data-label">姓名</div>
    959. 

  959.                 <div class="data-value">张建国</div>
    960. 

  960.               </div>
    961. 

  961.               <div class="data-item">
    962. 

  962.                 <div class="data-label">电话</div>
    963. 

  963.                 <div class="data-value">139****8901</div>
    964. 

  964.               </div>
    965. 

  965.               <div class="data-item data-value full-width">
    966. 

  966.                 <div class="data-label">身份证号</div>
    967. 

  967.                 <div class="data-value">3401****5678</div>
    968. 

  968.               </div>
    969. 

  969.             </div>
    970. 

  970.           </div>
    971. 

  971. 

  972.           <!-- 新生儿 -->
    973. 

  973.           <div class="client-sub-card">
    974. 

  974.             <div class="sub-card-header">
    975. 

  975.               <span class="icon">👶</span>
    976. 

  976.               <h4>新生儿信息</h4>
    977. 

  977.             </div>
    978. 

  978.             <div class="data-grid col-2">
    979. 

  979.               <div class="data-item">
    980. 

  980.                 <div class="data-label">姓名</div>
    981. 

  981.                 <div class="data-value">张小明</div>
    982. 

  982.               </div>
    983. 

  983.               <div class="data-item">
    984. 

  984.                 <div class="data-label">性别</div>
    985. 

  985.                 <div class="data-value">男</div>
    986. 

  986.               </div>
    987. 

  987.               <div class="data-item">
    988. 

  988.                 <div class="data-label">分娩时间</div>
    989. 

  989.                 <div class="data-value">2025-05-08 06:30</div>
    990. 

  990.               </div>
    991. 

  991.               <div class="data-item">
    992. 

  992.                 <div class="data-label">分娩方式</div>
    993. 

  993.                 <div class="data-value">剖宫产</div>
    994. 

  994.               </div>
    995. 

  995.               <div class="data-item">
    996. 

  996.                 <div class="data-label">胎次</div>
    997. 

  997.                 <div class="data-value">1</div>
    998. 

  998.               </div>
    999. 

  999.               <div class="data-item">
    1000. 

  1000.                 <div class="data-label">体重</div>
    1001. 

  1001.                 <div class="data-value">3250g</div>
    1002. 

  1002.               </div>
    1003. 

  1003.               <div class="data-item">
    1004. 

  1004.                 <div class="data-label">Apgar 1min</div>
    1005. 

  1005.                 <div class="data-value">9</div>
    1006. 

  1006.               </div>
    1007. 

  1007.               <div class="data-item">
    1008. 

  1008.                 <div class="data-label">Apgar 5min</div>
    1009. 

  1009.                 <div class="data-value">10</div>
    1010. 

  1010.               </div>
    1011. 

  1011.             </div>
    1012. 

  1012.           </div>
    1013. 

  1013. 

  1014.         </div>
    1015. 

  1015.       </div>
    1016. 

  1016. 

  1017.       <!-- ════════════════════════════════
    1018. 

  1018.            SECTION 3: 采集信息
    1019. 

  1019.            ════════════════════════════════ -->
    1020. 

  1020.       <div class="section-card bg-white">
    1021. 

  1021.         <div class="section-title"><h3>采集信息</h3></div>
    1022. 

  1022.         <div class="data-grid">
    1023. 

  1023.           <div class="data-item">
    1024. 

  1024.             <div class="data-label">采集地区</div>
    1025. 

  1025.             <div class="data-value">华东地区</div>
    1026. 

  1026.           </div>
    1027. 

  1027.           <div class="data-item">
    1028. 

  1028.             <div class="data-label">采集医院</div>
    1029. 

  1029.             <div class="data-value">合肥市第一人民医院</div>
    1030. 

  1030.           </div>
    1031. 

  1031.           <div class="data-item">
    1032. 

  1032.             <div class="data-label">采集医护</div>
    1033. 

  1033.             <div class="data-value">陈护士</div>
    1034. 

  1034.           </div>
    1035. 

  1035.           <div class="data-item">
    1036. 

  1036.             <div class="data-label">销售人员</div>
    1037. 

  1037.             <div class="data-value">赵经理</div>
    1038. 

  1038.           </div>
    1039. 

  1039.           <div class="data-item">
    1040. 

  1040.             <div class="data-label">样本采集时间</div>
    1041. 

  1041.             <div class="data-value">2025-05-08 07:15</div>
    1042. 

  1042.           </div>
    1043. 

  1043.           <div class="data-item">
    1044. 

  1044.             <div class="data-label">母血采集时间</div>
    1045. 

  1045.             <div class="data-value">2025-05-08 07:20</div>
    1046. 

  1046.           </div>
    1047. 

  1047.         </div>
    1048. 

  1048.       </div>
    1049. 

  1049. 

  1050.       <!-- ════════════════════════════════
    1051. 

  1051.            SECTION 4: 样本及运输信息
    1052. 

  1052.            ════════════════════════════════ -->
    1053. 

  1053.       <div class="section-card bg-white">
    1054. 

  1054.         <div class="section-title"><h3>样本及运输信息</h3></div>
    1055. 

  1055.         <table class="data-table">
    1056. 

  1056.           <thead>
    1057. 

  1057.             <tr>
    1058. 

  1058.               <th>样本类型</th>
    1059. 

  1059.               <th>样本编码</th>
    1060. 

  1060.               <th>采集量</th>
    1061. 

  1061.               <th>价格</th>
    1062. 

  1062.               <th>存储年限</th>
    1063. 

  1063.               <th>样本状态</th>
    1064. 

  1064.               <th>运输类型</th>
    1065. 

  1065.               <th>目的站点</th>
    1066. 

  1066.             </tr>
    1067. 

  1067.           </thead>
    1068. 

  1068.           <tbody>
    1069. 

  1069.             <tr>
    1070. 

  1070.               <td>脐血干细胞</td>
    1071. 

  1071.               <td style="font-family: monospace; font-size: 12px; color: #64748b;">CB-20250508-001</td>
    1072. 

  1072.               <td>120ml</td>
    1073. 

  1073.               <td style="font-weight: 600; color: #059669;">¥19,800</td>
    1074. 

  1074.               <td>20年</td>
    1075. 

  1075.               <td><span class="badge badge-green">已入库</span></td>
    1076. 

  1076.               <td>冷链专运</td>
    1077. 

  1077.               <td>华东中心库</td>
    1078. 

  1078.             </tr>
    1079. 

  1079.             <tr>
    1080. 

  1080.               <td>脐带组织</td>
    1081. 

  1081.               <td style="font-family: monospace; font-size: 12px; color: #64748b;">UC-20250508-001</td>
    1082. 

  1082.               <td>15cm</td>
    1083. 

  1083.               <td style="font-weight: 600; color: #059669;">¥9,800</td>
    1084. 

  1084.               <td>20年</td>
    1085. 

  1085.               <td><span class="badge badge-blue">运输中</span></td>
    1086. 

  1086.               <td>冷链专运</td>
    1087. 

  1087.               <td>华东中心库</td>
    1088. 

  1088.             </tr>
    1089. 

  1089.             <tr>
    1090. 

  1090.               <td>胎盘干细胞</td>
    1091. 

  1091.               <td style="font-family: monospace; font-size: 12px; color: #64748b;">PL-20250508-001</td>
    1092. 

  1092.               <td>80g</td>
    1093. 

  1093.               <td style="font-weight: 600; color: #059669;">¥12,600</td>
    1094. 

  1094.               <td>20年</td>
    1095. 

  1095.               <td><span class="badge badge-amber">待检测</span></td>
    1096. 

  1096.               <td>常温运输</td>
    1097. 

  1097.               <td>南京分库</td>
    1098. 

  1098.             </tr>
    1099. 

  1099.           </tbody>
    1100. 

  1100.         </table>
    1101. 

  1101.       </div>
    1102. 

  1102. 

  1103.       <!-- ════════════════════════════════
    1104. 

  1104.            SECTION 5: 缴费信息
    1105. 

  1105.            ════════════════════════════════ -->
    1106. 

  1106.       <div class="section-card bg-gray">
    1107. 

  1107.         <div class="section-title"><h3>缴费信息</h3></div>
    1108. 

  1108. 

  1109.         <!-- Payment Summary Metrics (4 cards) -->
    1110. 

  1110.         <div class="payment-summary">
    1111. 

  1111.           <div class="payment-metric">
    1112. 

  1112.             <div class="pm-label">应缴总额</div>
    1113. 

  1113.             <div class="pm-value amount">¥50,000</div>
    1114. 

  1114.           </div>
    1115. 

  1115.           <div class="payment-metric">
    1116. 

  1116.             <div class="pm-label">已缴金额</div>
    1117. 

  1117.             <div class="pm-value amount">¥30,000</div>
    1118. 

  1118.           </div>
    1119. 

  1119.           <div class="payment-metric">
    1120. 

  1120.             <div class="pm-label">已退金额</div>
    1121. 

  1121.             <div class="pm-value refund">¥20,000</div>
    1122. 

  1122.           </div>
    1123. 

  1123.           <div class="payment-metric">
    1124. 

  1124.             <div class="pm-label">净待缴金额</div>
    1125. 

  1125.             <div class="pm-value" style="color: #d97706;">¥20,000</div>
    1126. 

  1126.           </div>
    1127. 

  1127.         </div>
    1128. 

  1128. 

  1129.         <!-- Payment Detail Cards (vertical stack) -->
    1130. 

  1130.         <div class="payment-details">
    1131. 

  1131. 

  1132.           <!-- ── Card 1: 首付 — FULL REFUND (已退费) ── -->
    1133. 

  1133.           <div class="payment-detail-card refunded">
    1134. 

  1134.             <div class="pdc-header">
    1135. 

  1135.               <div class="pdc-header-left red">
    1136. 

  1136.                 首付 · <span class="pdc-header-amount red">¥20,000</span>
    1137. 

  1137.               </div>
    1138. 

  1138.               <span class="badge badge-red">已退费</span>
    1139. 

  1139.             </div>
    1140. 

  1140. 

  1141.             <!-- Payment info -->
    1142. 

  1142.             <div class="pdc-info-row">
    1143. 

  1143.               <div class="pdc-info-item">
    1144. 

  1144.                 <span class="info-label">转账方式</span>
    1145. 

  1145.                 <span class="info-value">银行卡转账</span>
    1146. 

  1146.               </div>
    1147. 

  1147.               <div class="pdc-info-item">
    1148. 

  1148.                 <span class="info-label">转账时间</span>
    1149. 

  1149.                 <span class="info-value">2025-05-09 10:30</span>
    1150. 

  1150.               </div>
    1151. 

  1151.             </div>
    1152. 

  1152. 

  1153.             <!-- Lifecycle flow track: 缴费确认 → 财务确认 → 退费申请 → 退费确认 -->
    1154. 

  1154.             <div class="mini-flow">
    1155. 

  1155.               <div class="mini-flow-connector done" style="left: calc(12.5% + 12px); width: calc(25% - 12px);"></div>
    1156. 

  1156.               <div class="mini-flow-connector done" style="left: calc(37.5% + 12px); width: calc(25% - 12px);"></div>
    1157. 

  1157.               <div class="mini-flow-connector done-red" style="left: calc(62.5% + 12px); width: calc(25% - 12px);"></div>
    1158. 

  1158.               <div class="mini-flow-step">
    1159. 

  1159.                 <div class="mini-flow-dot done">✓</div>
    1160. 

  1160.                 <div class="mini-flow-label done">缴费确认</div>
    1161. 

  1161.               </div>
    1162. 

  1162.               <div class="mini-flow-step">
    1163. 

  1163.                 <div class="mini-flow-dot done">✓</div>
    1164. 

  1164.                 <div class="mini-flow-label done">财务确认</div>
    1165. 

  1165.               </div>
    1166. 

  1166.               <div class="mini-flow-step">
    1167. 

  1167.                 <div class="mini-flow-dot done">✓</div>
    1168. 

  1168.                 <div class="mini-flow-label done">退费申请</div>
    1169. 

  1169.               </div>
    1170. 

  1170.               <div class="mini-flow-step">
    1171. 

  1171.                 <div class="mini-flow-dot done-red">✓</div>
    1172. 

  1172.                 <div class="mini-flow-label done-red">退费确认</div>
    1173. 

  1173.               </div>
    1174. 

  1174.             </div>
    1175. 

  1175. 

  1176.             <!-- Refund details (red tint) -->
    1177. 

  1177.             <div class="refund-area red-tint">
    1178. 

  1178.               <div class="refund-area-title red">📋 退费详情</div>
    1179. 

  1179.               <div class="refund-area-grid">
    1180. 

  1180.                 <div class="data-item">
    1181. 

  1181.                   <div class="data-label">退费金额</div>
    1182. 

  1182.                   <div class="data-value red">¥20,000</div>
    1183. 

  1183.                 </div>
    1184. 

  1184.                 <div class="data-item">
    1185. 

  1185.                   <div class="data-label">退费方式</div>
    1186. 

  1186.                   <div class="data-value">原路退回</div>
    1187. 

  1187.                 </div>
    1188. 

  1188.                 <div class="data-item full-col">
    1189. 

  1189.                   <div class="data-label">退费备注</div>
    1190. 

  1190.                   <div class="data-value" style="font-weight: 400; color: #64748b;">客户因个人原因申请退费，已与销售确认</div>
    1191. 

  1191.                 </div>
    1192. 

  1192.                 <div class="data-item">
    1193. 

  1193.                   <div class="data-label">退费附件</div>
    1194. 

  1194.                   <div class="refund-attachments">
    1195. 

  1195.                     <div class="attachment-thumb" style="width: 64px; height: 48px;">
    1196. 

  1196.                       <svg viewBox="0 0 24 24" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
    1197. 

  1197.                       <span class="file-name">退款凭证.pdf</span>
    1198. 

  1198.                     </div>
    1199. 

  1199.                   </div>
    1200. 

  1200.                 </div>
    1201. 

  1201.                 <div class="data-item full-col">
    1202. 

  1202.                   <div class="data-label">财务退费备注</div>
    1203. 

  1203.                   <div class="data-value" style="font-weight: 400; color: #64748b;">已核实，同意退费，3个工作日内到账</div>
    1204. 

  1204.                 </div>
    1205. 

  1205.               </div>
    1206. 

  1206.             </div>
    1207. 

  1207.           </div>
    1208. 

  1208. 

  1209.           <!-- ── Card 2: 二期款 — NORMAL COMPLETED (已缴费) ── -->
    1210. 

  1210.           <div class="payment-detail-card">
    1211. 

  1211.             <div class="pdc-header">
    1212. 

  1212.               <div class="pdc-header-left green">
    1213. 

  1213.                 二期款 · <span class="pdc-header-amount green">¥16,667</span>
    1214. 

  1214.               </div>
    1215. 

  1215.               <span class="badge badge-green">已缴费</span>
    1216. 

  1216.             </div>
    1217. 

  1217. 

  1218.             <!-- Payment info -->
    1219. 

  1219.             <div class="pdc-info-row">
    1220. 

  1220.               <div class="pdc-info-item">
    1221. 

  1221.                 <span class="info-label">转账方式</span>
    1222. 

  1222.                 <span class="info-value">微信</span>
    1223. 

  1223.               </div>
    1224. 

  1224.               <div class="pdc-info-item">
    1225. 

  1225.                 <span class="info-label">转账金额</span>
    1226. 

  1226.                 <span class="info-value" style="color: #059669; font-weight: 600;">¥16,667</span>
    1227. 

  1227.               </div>
    1228. 

  1228.               <div class="pdc-info-item">
    1229. 

  1229.                 <span class="info-label">转账时间</span>
    1230. 

  1230.                 <span class="info-value">2025-05-10 14:22</span>
    1231. 

  1231.               </div>
    1232. 

  1232.             </div>
    1233. 

  1233. 

  1234.             <!-- Mini flow: 缴费 → 财务确认 -->
    1235. 

  1235.             <div class="mini-flow">
    1236. 

  1236.               <div class="mini-flow-connector done" style="left: calc(25% + 12px); width: calc(50% - 12px);"></div>
    1237. 

  1237.               <div class="mini-flow-step">
    1238. 

  1238.                 <div class="mini-flow-dot done">✓</div>
    1239. 

  1239.                 <div class="mini-flow-label done">缴费</div>
    1240. 

  1240.               </div>
    1241. 

  1241.               <div class="mini-flow-step">
    1242. 

  1242.                 <div class="mini-flow-dot done">✓</div>
    1243. 

  1243.                 <div class="mini-flow-label done">财务确认</div>
    1244. 

  1244.               </div>
    1245. 

  1245.             </div>
    1246. 

  1246. 

  1247.             <!-- Finance confirmation -->
    1248. 

  1248.             <div class="finance-area">
    1249. 

  1249.               <div class="finance-area-title">✅ 财务确认</div>
    1250. 

  1250.               <div class="finance-area-grid">
    1251. 

  1251.                 <div class="data-item">
    1252. 

  1252.                   <div class="data-label">财务备注</div>
    1253. 

  1253.                   <div class="data-value" style="font-weight: 400; color: #64748b;">已核实到账</div>
    1254. 

  1254.                 </div>
    1255. 

  1255.                 <div class="data-item">
    1256. 

  1256.                   <div class="data-label">财务附件</div>
    1257. 

  1257.                   <div class="refund-attachments">
    1258. 

  1258.                     <div class="attachment-thumb" style="width: 64px; height: 48px;">
    1259. 

  1259.                       <svg viewBox="0 0 24 24" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
    1260. 

  1260.                       <span class="file-name">转账凭证.jpg</span>
    1261. 

  1261.                     </div>
    1262. 

  1262.                   </div>
    1263. 

  1263.                 </div>
    1264. 

  1264.               </div>
    1265. 

  1265.             </div>
    1266. 

  1266.           </div>
    1267. 

  1267. 

  1268.           <!-- ── Card 3: 尾款 — REFUND IN PROGRESS (退费确认中) ── -->
    1269. 

  1269.           <div class="payment-detail-card refund-pending">
    1270. 

  1270.             <div class="pdc-header">
    1271. 

  1271.               <div class="pdc-header-left amber">
    1272. 

  1272.                 尾款 · <span class="pdc-header-amount amber">¥13,333</span>
    1273. 

  1273.               </div>
    1274. 

  1274.               <span class="badge badge-amber">退费确认中</span>
    1275. 

  1275.             </div>
    1276. 

  1276. 

  1277.             <!-- Payment info -->
    1278. 

  1278.             <div class="pdc-info-row">
    1279. 

  1279.               <div class="pdc-info-item">
    1280. 

  1280.                 <span class="info-label">转账方式</span>
    1281. 

  1281.                 <span class="info-value">支付宝</span>
    1282. 

  1282.               </div>
    1283. 

  1283.               <div class="pdc-info-item">
    1284. 

  1284.                 <span class="info-label">转账金额</span>
    1285. 

  1285.                 <span class="info-value" style="color: #059669; font-weight: 600;">¥13,333</span>
    1286. 

  1286.               </div>
    1287. 

  1287.               <div class="pdc-info-item">
    1288. 

  1288.                 <span class="info-label">转账时间</span>
    1289. 

  1289.                 <span class="info-value">2025-05-12 09:00</span>
    1290. 

  1290.               </div>
    1291. 

  1291.             </div>
    1292. 

  1292. 

  1293.             <!-- Lifecycle flow: ✓缴费确认 → ✓财务确认 → ●退费申请(当前) → ○财务退费确认(待处理) -->
    1294. 

  1294.             <div class="mini-flow">
    1295. 

  1295.               <div class="mini-flow-connector done" style="left: calc(12.5% + 12px); width: calc(25% - 12px);"></div>
    1296. 

  1296.               <div class="mini-flow-connector current-amber" style="left: calc(37.5% + 12px); width: calc(25% - 12px);"></div>
    1297. 

  1297.               <div class="mini-flow-connector pending-gray" style="left: calc(62.5% + 12px); width: calc(25% - 12px);"></div>
    1298. 

  1298.               <div class="mini-flow-step">
    1299. 

  1299.                 <div class="mini-flow-dot done">✓</div>
    1300. 

  1300.                 <div class="mini-flow-label done">缴费确认</div>
    1301. 

  1301.               </div>
    1302. 

  1302.               <div class="mini-flow-step">
    1303. 

  1303.                 <div class="mini-flow-dot done">✓</div>
    1304. 

  1304.                 <div class="mini-flow-label done">财务确认</div>
    1305. 

  1305.               </div>
    1306. 

  1306.               <div class="mini-flow-step">
    1307. 

  1307.                 <div class="mini-flow-dot current-amber">●</div>
    1308. 

  1308.                 <div class="mini-flow-label current-amber">退费申请<br><span style="font-weight: 400; font-size: 9px;">(当前)</span></div>
    1309. 

  1309.               </div>
    1310. 

  1310.               <div class="mini-flow-step">
    1311. 

  1311.                 <div class="mini-flow-dot pending-gray">○</div>
    1312. 

  1312.                 <div class="mini-flow-label pending-gray">财务退费确认<br><span style="font-size: 9px;">(待处理)</span></div>
    1313. 

  1313.               </div>
    1314. 

  1314.             </div>
    1315. 

  1315. 

  1316.             <!-- Refund application details (amber tint) -->
    1317. 

  1317.             <div class="refund-area amber-tint">
    1318. 

  1318.               <div class="refund-area-title amber">⏳ 退费申请详情</div>
    1319. 

  1319.               <div class="refund-area-grid">
    1320. 

  1320.                 <div class="data-item">
    1321. 

  1321.                   <div class="data-label">退费金额</div>
    1322. 

  1322.                   <div class="data-value amber">¥13,333</div>
    1323. 

  1323.                 </div>
    1324. 

  1324.                 <div class="data-item">
    1325. 

  1325.                   <div class="data-label">退费备注</div>
    1326. 

  1326.                   <div class="data-value" style="font-weight: 400; color: #64748b;">采样不合格，客户申请全额退费</div>
    1327. 

  1327.                 </div>
    1328. 

  1328.                 <div class="data-item full-col">
    1329. 

  1329.                   <div class="data-label">退费附件</div>
    1330. 

  1330.                   <div class="refund-attachments">
    1331. 

  1331.                     <div class="attachment-thumb" style="width: 64px; height: 48px;">
    1332. 

  1332.                       <svg viewBox="0 0 24 24" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
    1333. 

  1333.                       <span class="file-name">退费申请表.pdf</span>
    1334. 

  1334.                     </div>
    1335. 

  1335.                     <div class="attachment-thumb" style="width: 64px; height: 48px;">
    1336. 

  1336.                       <svg viewBox="0 0 24 24" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
    1337. 

  1337.                       <span class="file-name">检验报告.pdf</span>
    1338. 

  1338.                     </div>
    1339. 

  1339.                   </div>
    1340. 

  1340.                 </div>
    1341. 

  1341.               </div>
    1342. 

  1342.             </div>
    1343. 

  1343.           </div>
    1344. 

  1344. 

  1345.         </div><!-- /payment-details -->
    1346. 

  1346. 

  1347.         <!-- Overall Payment Timeline (sophisticated) -->
    1348. 

  1348.         <div class="payment-timeline">
    1349. 

  1349.           <div class="timeline-title">缴费总览</div>
    1350. 

  1350.           <div class="timeline">
    1351. 

  1351.             <!-- Connector lines -->
    1352. 

  1352.             <div class="timeline-connector refund" style="left: calc(12.5% + 14px); width: calc(25% - 14px);"></div>
    1353. 

  1353.             <div class="timeline-connector done" style="left: calc(37.5% + 14px); width: calc(25% - 14px);"></div>
    1354. 

  1354.             <div class="timeline-connector refund-current" style="left: calc(62.5% + 14px); width: calc(25% - 14px);"></div>
    1355. 

  1355. 

  1356.             <div class="timeline-step">
    1357. 

  1357.               <div class="timeline-dot refund">✓</div>
    1358. 

  1358.               <div class="timeline-label refund">首付<br><span style="font-size: 10px; font-weight: 400;">已退费</span></div>
    1359. 

  1359.             </div>
    1360. 

  1360.             <div class="timeline-step">
    1361. 

  1361.               <div class="timeline-dot done">✓</div>
    1362. 

  1362.               <div class="timeline-label done">二期款<br><span style="font-size: 10px; font-weight: 400;">已缴费</span></div>
    1363. 

  1363.             </div>
    1364. 

  1364.             <div class="timeline-step">
    1365. 

  1365.               <div class="timeline-dot refund-current">●</div>
    1366. 

  1366.               <div class="timeline-label refund-current">尾款<br><span style="font-size: 10px; font-weight: 400;">退费中</span></div>
    1367. 

  1367.             </div>
    1368. 

  1368.             <div class="timeline-step">
    1369. 

  1369.               <div class="timeline-dot pending">○</div>
    1370. 

  1370.               <div class="timeline-label">待完成</div>
    1371. 

  1371.             </div>
    1372. 

  1372.           </div>
    1373. 

  1373.         </div>
    1374. 

  1374.       </div>
    1375. 

  1375. 

  1376.       <!-- ════════════════════════════════
    1377. 

  1377.            SECTION 6: 审核记录
    1378. 

  1378.            ════════════════════════════════ -->
    1379. 

  1379.       <div class="section-card bg-white audit-table">
    1380. 

  1380.         <div class="section-title"><h3>审核记录</h3></div>
    1381. 

  1381.         <table class="data-table">
    1382. 

  1382.           <thead>
    1383. 

  1383.             <tr>
    1384. 

  1384.               <th>审核节点</th>
    1385. 

  1385.               <th>审核人</th>
    1386. 

  1386.               <th>审核时间</th>
    1387. 

  1387.               <th>审核结果</th>
    1388. 

  1388.               <th>审核意见</th>
    1389. 

  1389.             </tr>
    1390. 

  1390.           </thead>
    1391. 

  1391.           <tbody>
    1392. 

  1392.             <tr>
    1393. 

  1393.               <td>采集信息审核</td>
    1394. 

  1394.               <td>张主管</td>
    1395. 

  1395.               <td>2025-05-08 08:45:30</td>
    1396. 

  1396.               <td><span class="badge badge-green">通过</span></td>
    1397. 

  1397.               <td style="color: #64748b;">信息完整，确认无误</td>
    1398. 

  1398.             </tr>
    1399. 

  1399.             <tr>
    1400. 

  1400.               <td>样本入库审核</td>
    1401. 

  1401.               <td>李主任</td>
    1402. 

  1402.               <td>2025-05-08 11:20:15</td>
    1403. 

  1403.               <td><span class="badge badge-green">通过</span></td>
    1404. 

  1404.               <td style="color: #64748b;">样本质量达标，准许入库</td>
    1405. 

  1405.             </tr>
    1406. 

  1406.           </tbody>
    1407. 

  1407.         </table>
    1408. 

  1408.       </div>
    1409. 

  1409. 

  1410.     </div><!-- /dialog-body -->
    1411. 

  1411. 

  1412.     <!-- ── Footer ── -->
    1413. 

  1413.     <div class="dialog-footer">
    1414. 

  1414.       <button class="btn-close">关闭</button>
    1415. 

  1415.     </div>
    1416. 

  1416. 

  1417.   </div><!-- /dialog -->
    1418. 

  1418. </div><!-- /overlay -->
    1419. 

  1419. 

  1420. </body>
    1421. 

  1421. </html>
    1422.