demo-protocol-view-b.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>方案B:顶部摘要卡+折叠面板 — 采集协议单查看</title>
  7. <style>
  8. /* ═══════════════════════════════════════════
  9. Reset & Base
  10. ═══════════════════════════════════════════ */
  11. *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  12. body {
  13. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  14. color: #1e293b;
  15. background: #e2e8f0;
  16. display: flex;
  17. align-items: center;
  18. justify-content: center;
  19. min-height: 100vh;
  20. padding: 24px;
  21. line-height: 1.6;
  22. }
  23. /* ═══════════════════════════════════════════
  24. Modal Overlay
  25. ═══════════════════════════════════════════ */
  26. .overlay {
  27. position: fixed;
  28. inset: 0;
  29. background: rgba(15, 23, 42, 0.55);
  30. z-index: 1000;
  31. display: flex;
  32. align-items: center;
  33. justify-content: center;
  34. backdrop-filter: none;
  35. }
  36. /* ═══════════════════════════════════════════
  37. Dialog Shell
  38. ═══════════════════════════════════════════ */
  39. .dialog {
  40. width: 1200px;
  41. max-width: 96vw;
  42. max-height: calc(100vh - 48px);
  43. background: #fff;
  44. border-radius: 16px;
  45. box-shadow: 0 25px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(16,185,129,.08);
  46. display: flex;
  47. flex-direction: column;
  48. overflow: hidden;
  49. animation: dialogIn .28s ease-out;
  50. }
  51. @keyframes dialogIn {
  52. from { opacity: 0; transform: translateY(24px) scale(.97); }
  53. to { opacity: 1; transform: translateY(0) scale(1); }
  54. }
  55. /* ═══════════════════════════════════════════
  56. Dialog Header
  57. ═══════════════════════════════════════════ */
  58. .dialog-header {
  59. display: flex;
  60. align-items: center;
  61. justify-content: space-between;
  62. padding: 20px 28px;
  63. border-bottom: 1px solid #e2e8f0;
  64. flex-shrink: 0;
  65. }
  66. .dialog-header h3 {
  67. font-size: 18px;
  68. font-weight: 600;
  69. color: #1e293b;
  70. display: flex;
  71. align-items: center;
  72. gap: 10px;
  73. }
  74. .dialog-header h3::before {
  75. content: '';
  76. display: inline-block;
  77. width: 4px;
  78. height: 20px;
  79. background: #10b981;
  80. border-radius: 2px;
  81. }
  82. .dialog-header .subtitle {
  83. font-size: 14px;
  84. font-weight: 400;
  85. color: #64748b;
  86. margin-left: 4px;
  87. }
  88. .close-btn {
  89. width: 36px;
  90. height: 36px;
  91. border: none;
  92. background: #f1f5f9;
  93. border-radius: 10px;
  94. cursor: pointer;
  95. display: flex;
  96. align-items: center;
  97. justify-content: center;
  98. transition: all .2s;
  99. color: #64748b;
  100. font-size: 20px;
  101. }
  102. .close-btn:hover { background: #fee2e2; color: #ef4444; }
  103. /* ═══════════════════════════════════════════
  104. Dialog Body (scrollable)
  105. ═══════════════════════════════════════════ */
  106. .dialog-body {
  107. flex: 1;
  108. overflow-y: auto;
  109. padding: 24px 28px;
  110. scrollbar-width: thin;
  111. scrollbar-color: #cbd5e1 transparent;
  112. }
  113. .dialog-body::-webkit-scrollbar { width: 6px; }
  114. .dialog-body::-webkit-scrollbar-track { background: transparent; }
  115. .dialog-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
  116. /* ═══════════════════════════════════════════
  117. Top Summary Strip (Dashboard Card)
  118. ═══════════════════════════════════════════ */
  119. .summary-strip {
  120. background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 50%, #ecfdf5 100%);
  121. border: 1px solid #d1fae5;
  122. border-radius: 14px;
  123. padding: 20px 24px;
  124. margin-bottom: 24px;
  125. position: relative;
  126. overflow: hidden;
  127. }
  128. .summary-strip::before {
  129. content: '';
  130. position: absolute;
  131. top: -30px;
  132. right: -30px;
  133. width: 120px;
  134. height: 120px;
  135. background: radial-gradient(circle, rgba(16,185,129,.08) 0%, transparent 70%);
  136. border-radius: 50%;
  137. }
  138. .summary-strip::after {
  139. content: '';
  140. position: absolute;
  141. bottom: -20px;
  142. left: 40%;
  143. width: 80px;
  144. height: 80px;
  145. background: radial-gradient(circle, rgba(16,185,129,.05) 0%, transparent 70%);
  146. border-radius: 50%;
  147. }
  148. .summary-grid {
  149. display: grid;
  150. grid-template-columns: repeat(6, 1fr);
  151. gap: 16px;
  152. position: relative;
  153. z-index: 1;
  154. }
  155. .summary-card {
  156. background: #fff;
  157. border-radius: 10px;
  158. padding: 16px 18px;
  159. border: 1px solid #e2e8f0;
  160. box-shadow: 0 1px 3px rgba(0,0,0,.04);
  161. transition: all .2s;
  162. display: flex;
  163. flex-direction: column;
  164. gap: 8px;
  165. }
  166. .summary-card:hover {
  167. box-shadow: 0 4px 12px rgba(16,185,129,.1);
  168. border-color: #a7f3d0;
  169. transform: translateY(-1px);
  170. }
  171. .summary-card .card-icon {
  172. width: 32px;
  173. height: 32px;
  174. border-radius: 8px;
  175. display: flex;
  176. align-items: center;
  177. justify-content: center;
  178. font-size: 16px;
  179. flex-shrink: 0;
  180. }
  181. .summary-card .card-icon.green { background: #d1fae5; color: #059669; }
  182. .summary-card .card-icon.blue { background: #dbeafe; color: #2563eb; }
  183. .summary-card .card-icon.amber { background: #fef3c7; color: #d97706; }
  184. .summary-card .card-icon.violet { background: #ede9fe; color: #7c3aed; }
  185. .summary-card .card-icon.rose { background: #ffe4e6; color: #e11d48; }
  186. .summary-card .card-icon.cyan { background: #cffafe; color: #0891b2; }
  187. .summary-card .card-label {
  188. font-size: 12px;
  189. color: #94a3b8;
  190. font-weight: 500;
  191. letter-spacing: .02em;
  192. }
  193. .summary-card .card-value {
  194. font-size: 16px;
  195. font-weight: 600;
  196. color: #1e293b;
  197. line-height: 1.3;
  198. }
  199. .summary-card .card-value.mono { font-family: "SF Mono", "Cascadia Code", monospace; font-size: 15px; }
  200. /* status badge inside summary */
  201. .badge {
  202. display: inline-flex;
  203. align-items: center;
  204. gap: 4px;
  205. padding: 2px 10px;
  206. border-radius: 20px;
  207. font-size: 12px;
  208. font-weight: 600;
  209. line-height: 1.6;
  210. }
  211. .badge-green { background: #d1fae5; color: #059669; }
  212. .badge-amber { background: #fef3c7; color: #b45309; }
  213. .badge-gray { background: #f1f5f9; color: #64748b; }
  214. .badge-blue { background: #dbeafe; color: #2563eb; }
  215. .badge::before {
  216. content: '';
  217. width: 6px;
  218. height: 6px;
  219. border-radius: 50%;
  220. background: currentColor;
  221. flex-shrink: 0;
  222. }
  223. /* ═══════════════════════════════════════════
  224. Collapsible Panels (details/summary)
  225. ═══════════════════════════════════════════ */
  226. .panel {
  227. border: 1px solid #e2e8f0;
  228. border-radius: 12px;
  229. margin-bottom: 14px;
  230. background: #fff;
  231. overflow: hidden;
  232. transition: box-shadow .25s;
  233. }
  234. .panel:hover { box-shadow: 0 2px 8px rgba(0,0,0,.04); }
  235. /* Hide default marker */
  236. .panel summary {
  237. list-style: none;
  238. cursor: pointer;
  239. user-select: none;
  240. }
  241. .panel summary::-webkit-details-marker { display: none; }
  242. .panel-header {
  243. display: flex;
  244. align-items: center;
  245. gap: 12px;
  246. padding: 16px 20px;
  247. border-bottom: 1px solid transparent;
  248. transition: all .2s;
  249. }
  250. .panel[open] .panel-header {
  251. border-bottom-color: #e2e8f0;
  252. background: #f8fafc;
  253. }
  254. .panel-header .panel-icon {
  255. width: 34px;
  256. height: 34px;
  257. border-radius: 8px;
  258. display: flex;
  259. align-items: center;
  260. justify-content: center;
  261. font-size: 16px;
  262. flex-shrink: 0;
  263. }
  264. .panel-header .panel-icon.ic-green { background: #ecfdf5; color: #10b981; }
  265. .panel-header .panel-icon.ic-blue { background: #eff6ff; color: #3b82f6; }
  266. .panel-header .panel-icon.ic-amber { background: #fffbeb; color: #f59e0b; }
  267. .panel-header .panel-icon.ic-violet { background: #f5f3ff; color: #8b5cf6; }
  268. .panel-header .panel-icon.ic-rose { background: #fff1f2; color: #f43f5e; }
  269. .panel-header .panel-icon.ic-cyan { background: #ecfeff; color: #06b6d4; }
  270. .panel-header .panel-title {
  271. font-size: 15px;
  272. font-weight: 600;
  273. color: #1e293b;
  274. flex: 1;
  275. }
  276. .panel-header .panel-count {
  277. font-size: 12px;
  278. color: #94a3b8;
  279. font-weight: 400;
  280. margin-left: -4px;
  281. }
  282. .panel-header .chevron {
  283. width: 24px;
  284. height: 24px;
  285. display: flex;
  286. align-items: center;
  287. justify-content: center;
  288. color: #94a3b8;
  289. transition: transform .3s ease;
  290. flex-shrink: 0;
  291. }
  292. .panel[open] .panel-header .chevron {
  293. transform: rotate(90deg);
  294. }
  295. .panel-body {
  296. padding: 20px 24px;
  297. animation: panelFadeIn .25s ease-out;
  298. }
  299. @keyframes panelFadeIn {
  300. from { opacity: 0; transform: translateY(-6px); }
  301. to { opacity: 1; transform: translateY(0); }
  302. }
  303. /* ═══════════════════════════════════════════
  304. Key-Value Grid
  305. ═══════════════════════════════════════════ */
  306. .kv-grid {
  307. display: grid;
  308. grid-template-columns: repeat(3, 1fr);
  309. gap: 0;
  310. }
  311. .kv-item {
  312. display: flex;
  313. flex-direction: column;
  314. padding: 12px 16px;
  315. border-bottom: 1px solid #f1f5f9;
  316. border-right: 1px solid #f1f5f9;
  317. min-height: 56px;
  318. justify-content: center;
  319. }
  320. .kv-item:nth-child(3n) { border-right: none; }
  321. .kv-item .kv-label {
  322. font-size: 12px;
  323. color: #94a3b8;
  324. margin-bottom: 4px;
  325. font-weight: 500;
  326. }
  327. .kv-item .kv-value {
  328. font-size: 14px;
  329. color: #1e293b;
  330. font-weight: 500;
  331. word-break: break-all;
  332. }
  333. .kv-item .kv-value.muted { color: #64748b; font-weight: 400; }
  334. /* Sub-section title */
  335. .sub-title {
  336. font-size: 14px;
  337. font-weight: 600;
  338. color: #1e293b;
  339. padding: 14px 0 10px;
  340. display: flex;
  341. align-items: center;
  342. gap: 8px;
  343. }
  344. .sub-title::before {
  345. content: '';
  346. width: 3px;
  347. height: 14px;
  348. background: #10b981;
  349. border-radius: 2px;
  350. }
  351. .sub-title:first-child { padding-top: 0; }
  352. /* ═══════════════════════════════════════════
  353. Attachment Thumbnails
  354. ═══════════════════════════════════════════ */
  355. .attach-row {
  356. display: flex;
  357. gap: 10px;
  358. flex-wrap: wrap;
  359. }
  360. .attach-thumb {
  361. width: 64px;
  362. height: 64px;
  363. border-radius: 8px;
  364. border: 1px solid #e2e8f0;
  365. background: #f8fafc;
  366. display: flex;
  367. align-items: center;
  368. justify-content: center;
  369. font-size: 11px;
  370. color: #94a3b8;
  371. cursor: pointer;
  372. transition: all .2s;
  373. position: relative;
  374. }
  375. .attach-thumb:hover {
  376. border-color: #10b981;
  377. box-shadow: 0 2px 8px rgba(16,185,129,.15);
  378. }
  379. .attach-thumb svg { width: 24px; height: 24px; stroke: #94a3b8; }
  380. /* ═══════════════════════════════════════════
  381. Data Table
  382. ═══════════════════════════════════════════ */
  383. .data-table {
  384. width: 100%;
  385. border-collapse: collapse;
  386. font-size: 13px;
  387. }
  388. .data-table thead th {
  389. background: #f8fafc;
  390. color: #64748b;
  391. font-weight: 600;
  392. font-size: 12px;
  393. text-align: left;
  394. padding: 10px 14px;
  395. border-bottom: 1px solid #e2e8f0;
  396. white-space: nowrap;
  397. }
  398. .data-table tbody td {
  399. padding: 12px 14px;
  400. border-bottom: 1px solid #f1f5f9;
  401. color: #1e293b;
  402. }
  403. .data-table tbody tr:last-child td { border-bottom: none; }
  404. .data-table tbody tr:hover { background: #f8fafc; }
  405. /* ═══════════════════════════════════════════
  406. Payment Cards
  407. ═══════════════════════════════════════════ */
  408. .payment-card {
  409. background: #f8fafc;
  410. border: 1px solid #e2e8f0;
  411. border-radius: 10px;
  412. padding: 18px 20px;
  413. margin-bottom: 12px;
  414. }
  415. .payment-card .pay-title {
  416. font-size: 14px;
  417. font-weight: 600;
  418. color: #1e293b;
  419. margin-bottom: 12px;
  420. }
  421. .payment-row {
  422. display: flex;
  423. gap: 24px;
  424. flex-wrap: wrap;
  425. }
  426. .payment-row .pay-item {
  427. display: flex;
  428. flex-direction: column;
  429. gap: 2px;
  430. }
  431. .payment-row .pay-item .pay-label {
  432. font-size: 12px;
  433. color: #94a3b8;
  434. }
  435. .payment-row .pay-item .pay-val {
  436. font-size: 14px;
  437. font-weight: 500;
  438. color: #1e293b;
  439. }
  440. /* Flow timeline */
  441. .timeline {
  442. position: relative;
  443. padding-left: 24px;
  444. }
  445. .timeline::before {
  446. content: '';
  447. position: absolute;
  448. left: 7px;
  449. top: 6px;
  450. bottom: 6px;
  451. width: 2px;
  452. background: #e2e8f0;
  453. border-radius: 1px;
  454. }
  455. .timeline-item {
  456. position: relative;
  457. padding: 8px 0 8px 16px;
  458. }
  459. .timeline-item::before {
  460. content: '';
  461. position: absolute;
  462. left: -20px;
  463. top: 14px;
  464. width: 10px;
  465. height: 10px;
  466. border-radius: 50%;
  467. background: #fff;
  468. border: 2px solid #10b981;
  469. }
  470. .timeline-item.done::before { background: #10b981; }
  471. .timeline-item .tl-time {
  472. font-size: 12px;
  473. color: #94a3b8;
  474. }
  475. .timeline-item .tl-content {
  476. font-size: 13px;
  477. color: #1e293b;
  478. }
  479. .timeline-item .tl-content strong {
  480. font-weight: 600;
  481. }
  482. /* Detail mini cards */
  483. .detail-cards {
  484. display: grid;
  485. grid-template-columns: repeat(2, 1fr);
  486. gap: 12px;
  487. margin-top: 12px;
  488. }
  489. .detail-card {
  490. background: #fff;
  491. border: 1px solid #e2e8f0;
  492. border-radius: 8px;
  493. padding: 14px 16px;
  494. }
  495. .detail-card .dc-title {
  496. font-size: 13px;
  497. font-weight: 600;
  498. color: #1e293b;
  499. margin-bottom: 8px;
  500. }
  501. .detail-card .dc-row {
  502. display: flex;
  503. justify-content: space-between;
  504. font-size: 12px;
  505. padding: 3px 0;
  506. }
  507. .detail-card .dc-row .dc-label { color: #94a3b8; }
  508. .detail-card .dc-row .dc-val { color: #1e293b; font-weight: 500; }
  509. /* ═══════════════════════════════════════════
  510. Dialog Footer
  511. ═══════════════════════════════════════════ */
  512. .dialog-footer {
  513. padding: 16px 28px;
  514. border-top: 1px solid #e2e8f0;
  515. display: flex;
  516. justify-content: flex-end;
  517. flex-shrink: 0;
  518. }
  519. .btn-close {
  520. padding: 9px 28px;
  521. border: 1px solid #e2e8f0;
  522. background: #fff;
  523. border-radius: 8px;
  524. font-size: 14px;
  525. color: #64748b;
  526. cursor: pointer;
  527. transition: all .2s;
  528. font-weight: 500;
  529. }
  530. .btn-close:hover {
  531. border-color: #10b981;
  532. color: #10b981;
  533. background: #ecfdf5;
  534. }
  535. /* ═══════════════════════════════════════════
  536. Money highlight
  537. ═══════════════════════════════════════════ */
  538. .money { color: #059669; font-weight: 600; font-family: "SF Mono", "Cascadia Code", monospace; }
  539. /* ═══════════════════════════════════════════
  540. Responsive
  541. ═══════════════════════════════════════════ */
  542. @media (max-width: 900px) {
  543. .summary-grid { grid-template-columns: repeat(3, 1fr); }
  544. .kv-grid { grid-template-columns: repeat(2, 1fr); }
  545. .kv-item:nth-child(3n) { border-right: 1px solid #f1f5f9; }
  546. .kv-item:nth-child(2n) { border-right: none; }
  547. .detail-cards { grid-template-columns: 1fr; }
  548. }
  549. </style>
  550. </head>
  551. <body>
  552. <!-- Modal Overlay -->
  553. <div class="overlay">
  554. <div class="dialog">
  555. <!-- ─── Header ─── -->
  556. <div class="dialog-header">
  557. <h3>查看协议单 <span class="subtitle">P2025-0501-001</span></h3>
  558. <button class="close-btn" title="关闭">✕</button>
  559. </div>
  560. <!-- ─── Body ─── -->
  561. <div class="dialog-body">
  562. <!-- ═══════════ Top Summary Strip ═══════════ -->
  563. <div class="summary-strip">
  564. <div class="summary-grid">
  565. <div class="summary-card">
  566. <div class="card-icon green">📄</div>
  567. <div class="card-label">协议号</div>
  568. <div class="card-value mono">P2025-0501-001</div>
  569. </div>
  570. <div class="summary-card">
  571. <div class="card-icon green">✅</div>
  572. <div class="card-label">协议状态</div>
  573. <div class="card-value"><span class="badge badge-green">生效中</span></div>
  574. </div>
  575. <div class="summary-card">
  576. <div class="card-icon violet">👩</div>
  577. <div class="card-label">母亲姓名</div>
  578. <div class="card-value">王美丽</div>
  579. </div>
  580. <div class="summary-card">
  581. <div class="card-icon blue">📅</div>
  582. <div class="card-label">登记日期</div>
  583. <div class="card-value">2025-05-10</div>
  584. </div>
  585. <div class="summary-card">
  586. <div class="card-icon cyan">🏥</div>
  587. <div class="card-label">采集医院</div>
  588. <div class="card-value" style="font-size:14px">合肥市第一人民医院</div>
  589. </div>
  590. <div class="summary-card">
  591. <div class="card-icon amber">💰</div>
  592. <div class="card-label">合同金额</div>
  593. <div class="card-value money">¥50,000</div>
  594. </div>
  595. </div>
  596. </div>
  597. <!-- ═══════════ Panel 1: 基本信息 (默认展开) ═══════════ -->
  598. <details class="panel" open>
  599. <summary>
  600. <div class="panel-header">
  601. <div class="panel-icon ic-green">📋</div>
  602. <span class="panel-title">基本信息</span>
  603. <span class="panel-count">8项</span>
  604. <span class="chevron">▶</span>
  605. </div>
  606. </summary>
  607. <div class="panel-body">
  608. <div class="kv-grid">
  609. <div class="kv-item">
  610. <span class="kv-label">协议号</span>
  611. <span class="kv-value" style="font-family:monospace">P2025-0501-001</span>
  612. </div>
  613. <div class="kv-item">
  614. <span class="kv-label">协议状态</span>
  615. <span class="kv-value"><span class="badge badge-green">生效中</span></span>
  616. </div>
  617. <div class="kv-item">
  618. <span class="kv-label">登记日期</span>
  619. <span class="kv-value">2025-05-10</span>
  620. </div>
  621. <div class="kv-item">
  622. <span class="kv-label">采集专员</span>
  623. <span class="kv-value">李明</span>
  624. </div>
  625. <div class="kv-item">
  626. <span class="kv-label">创建时间</span>
  627. <span class="kv-value muted">2025-05-10 14:30:22</span>
  628. </div>
  629. <div class="kv-item">
  630. <span class="kv-label">更新时间</span>
  631. <span class="kv-value muted">2025-05-10 16:45:10</span>
  632. </div>
  633. </div>
  634. <div style="padding: 14px 16px; border-bottom: 1px solid #f1f5f9;">
  635. <div style="display:flex; gap:24px;">
  636. <div style="flex:1">
  637. <div class="kv-label" style="margin-bottom:8px">协议附件</div>
  638. <div class="attach-row">
  639. <div class="attach-thumb" title="采集协议书.pdf">
  640. <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>
  641. </div>
  642. <div class="attach-thumb" title="知情同意书.pdf">
  643. <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>
  644. </div>
  645. <div class="attach-thumb" title="身份证明.jpg">
  646. <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" /></svg>
  647. </div>
  648. </div>
  649. </div>
  650. <div style="flex:1">
  651. <div class="kv-label" style="margin-bottom:8px">备注</div>
  652. <div class="kv-value muted">客户要求加急处理,需优先安排采集和检测</div>
  653. </div>
  654. </div>
  655. </div>
  656. </div>
  657. </details>
  658. <!-- ═══════════ Panel 2: 客户信息 ═══════════ -->
  659. <details class="panel">
  660. <summary>
  661. <div class="panel-header">
  662. <div class="panel-icon ic-violet">👥</div>
  663. <span class="panel-title">客户信息</span>
  664. <span class="panel-count">19项</span>
  665. <span class="chevron">▶</span>
  666. </div>
  667. </summary>
  668. <div class="panel-body">
  669. <div class="sub-title">母亲信息</div>
  670. <div class="kv-grid">
  671. <div class="kv-item"><span class="kv-label">姓名</span><span class="kv-value">王美丽</span></div>
  672. <div class="kv-item"><span class="kv-label">电话</span><span class="kv-value">138****5678</span></div>
  673. <div class="kv-item"><span class="kv-label">身份证号</span><span class="kv-value">3401****1234</span></div>
  674. <div class="kv-item"><span class="kv-label">出生年月</span><span class="kv-value">1992-06</span></div>
  675. <div class="kv-item"><span class="kv-label">民族</span><span class="kv-value">汉族</span></div>
  676. <div class="kv-item"><span class="kv-label">住址</span><span class="kv-value muted">安徽省合肥市蜀山区望江西路128号</span></div>
  677. </div>
  678. <div class="sub-title">父亲信息</div>
  679. <div class="kv-grid">
  680. <div class="kv-item"><span class="kv-label">姓名</span><span class="kv-value">张建国</span></div>
  681. <div class="kv-item"><span class="kv-label">电话</span><span class="kv-value">139****8901</span></div>
  682. <div class="kv-item"><span class="kv-label">身份证号</span><span class="kv-value">3401****5678</span></div>
  683. </div>
  684. <div class="sub-title">新生儿信息</div>
  685. <div class="kv-grid">
  686. <div class="kv-item"><span class="kv-label">姓名</span><span class="kv-value">张小明</span></div>
  687. <div class="kv-item"><span class="kv-label">分娩时间</span><span class="kv-value">2025-05-08 06:30</span></div>
  688. <div class="kv-item"><span class="kv-label">性别</span><span class="kv-value">男</span></div>
  689. <div class="kv-item"><span class="kv-label">分娩方式</span><span class="kv-value">剖宫产</span></div>
  690. <div class="kv-item"><span class="kv-label">胎次</span><span class="kv-value">1</span></div>
  691. <div class="kv-item"><span class="kv-label">体重</span><span class="kv-value">3250g</span></div>
  692. <div class="kv-item"><span class="kv-label">Apgar评分 1min</span><span class="kv-value">9</span></div>
  693. <div class="kv-item"><span class="kv-label">Apgar评分 5min</span><span class="kv-value">10</span></div>
  694. <div class="kv-item"><span class="kv-label">Apgar评分 10min</span><span class="kv-value">10</span></div>
  695. </div>
  696. </div>
  697. </details>
  698. <!-- ═══════════ Panel 3: 采集信息 ═══════════ -->
  699. <details class="panel">
  700. <summary>
  701. <div class="panel-header">
  702. <div class="panel-icon ic-cyan">🧪</div>
  703. <span class="panel-title">采集信息</span>
  704. <span class="panel-count">6项</span>
  705. <span class="chevron">▶</span>
  706. </div>
  707. </summary>
  708. <div class="panel-body">
  709. <div class="kv-grid">
  710. <div class="kv-item"><span class="kv-label">采集地区</span><span class="kv-value">华东地区</span></div>
  711. <div class="kv-item"><span class="kv-label">采集医院</span><span class="kv-value">合肥市第一人民医院</span></div>
  712. <div class="kv-item"><span class="kv-label">采集医护</span><span class="kv-value">陈护士</span></div>
  713. <div class="kv-item"><span class="kv-label">销售人员</span><span class="kv-value">赵经理</span></div>
  714. <div class="kv-item"><span class="kv-label">样本采集时间</span><span class="kv-value muted">2025-05-08 07:15</span></div>
  715. <div class="kv-item"><span class="kv-label">母血采集时间</span><span class="kv-value muted">2025-05-08 07:20</span></div>
  716. </div>
  717. </div>
  718. </details>
  719. <!-- ═══════════ Panel 4: 样本及运输信息 ═══════════ -->
  720. <details class="panel">
  721. <summary>
  722. <div class="panel-header">
  723. <div class="panel-icon ic-blue">📦</div>
  724. <span class="panel-title">样本及运输信息</span>
  725. <span class="panel-count">2条</span>
  726. <span class="chevron">▶</span>
  727. </div>
  728. </summary>
  729. <div class="panel-body">
  730. <table class="data-table">
  731. <thead>
  732. <tr>
  733. <th>样本编号</th>
  734. <th>样本类型</th>
  735. <th>样本状态</th>
  736. <th>运输方式</th>
  737. <th>快递单号</th>
  738. <th>发出时间</th>
  739. <th>接收时间</th>
  740. <th>存储温度</th>
  741. </tr>
  742. </thead>
  743. <tbody>
  744. <tr>
  745. <td style="font-family:monospace">S20250508-001</td>
  746. <td>脐带血</td>
  747. <td><span class="badge badge-green">已入库</span></td>
  748. <td>顺丰冷链</td>
  749. <td style="font-family:monospace">SF1234567890</td>
  750. <td>2025-05-08 09:30</td>
  751. <td>2025-05-09 10:15</td>
  752. <td>-196℃ 液氮</td>
  753. </tr>
  754. <tr>
  755. <td style="font-family:monospace">S20250508-002</td>
  756. <td>母血</td>
  757. <td><span class="badge badge-green">已入库</span></td>
  758. <td>顺丰冷链</td>
  759. <td style="font-family:monospace">SF1234567891</td>
  760. <td>2025-05-08 09:30</td>
  761. <td>2025-05-09 10:15</td>
  762. <td>-20℃ 冰箱</td>
  763. </tr>
  764. </tbody>
  765. </table>
  766. </div>
  767. </details>
  768. <!-- ═══════════ Panel 5: 缴费信息 ═══════════ -->
  769. <details class="panel">
  770. <summary>
  771. <div class="panel-header">
  772. <div class="panel-icon ic-amber">💳</div>
  773. <span class="panel-title">缴费信息</span>
  774. <span class="panel-count">3笔</span>
  775. <span class="chevron">▶</span>
  776. </div>
  777. </summary>
  778. <div class="panel-body">
  779. <!-- Payment summary -->
  780. <div class="payment-card">
  781. <div class="pay-title">缴费概览</div>
  782. <div class="payment-row">
  783. <div class="pay-item">
  784. <span class="pay-label">合同金额</span>
  785. <span class="pay-val money">¥50,000.00</span>
  786. </div>
  787. <div class="pay-item">
  788. <span class="pay-label">已缴金额</span>
  789. <span class="pay-val money">¥30,000.00</span>
  790. </div>
  791. <div class="pay-item">
  792. <span class="pay-label">待缴金额</span>
  793. <span class="pay-val" style="color:#f59e0b;font-weight:600">¥20,000.00</span>
  794. </div>
  795. <div class="pay-item">
  796. <span class="pay-label">缴费状态</span>
  797. <span class="pay-val"><span class="badge badge-amber">部分缴费</span></span>
  798. </div>
  799. </div>
  800. </div>
  801. <!-- Detail cards -->
  802. <div class="detail-cards">
  803. <div class="detail-card">
  804. <div class="dc-title">第1期 · <span class="badge badge-green" style="font-size:11px">已缴</span></div>
  805. <div class="dc-row"><span class="dc-label">缴费金额</span><span class="dc-val money">¥20,000.00</span></div>
  806. <div class="dc-row"><span class="dc-label">缴费方式</span><span class="dc-val">银行转账</span></div>
  807. <div class="dc-row"><span class="dc-label">缴费日期</span><span class="dc-val">2025-05-10</span></div>
  808. <div class="dc-row"><span class="dc-label">经办人</span><span class="dc-val">李明</span></div>
  809. </div>
  810. <div class="detail-card">
  811. <div class="dc-title">第2期 · <span class="badge badge-green" style="font-size:11px">已缴</span></div>
  812. <div class="dc-row"><span class="dc-label">缴费金额</span><span class="dc-val money">¥10,000.00</span></div>
  813. <div class="dc-row"><span class="dc-label">缴费方式</span><span class="dc-val">微信支付</span></div>
  814. <div class="dc-row"><span class="dc-label">缴费日期</span><span class="dc-val">2025-05-12</span></div>
  815. <div class="dc-row"><span class="dc-label">经办人</span><span class="dc-val">李明</span></div>
  816. </div>
  817. </div>
  818. <!-- Payment flow timeline -->
  819. <div style="margin-top:16px">
  820. <div class="sub-title" style="margin-bottom:12px">缴费进度</div>
  821. <div class="timeline">
  822. <div class="timeline-item done">
  823. <div class="tl-time">2025-05-10 14:30</div>
  824. <div class="tl-content">第1期缴费到账 <strong>¥20,000</strong></div>
  825. </div>
  826. <div class="timeline-item done">
  827. <div class="tl-time">2025-05-12 10:20</div>
  828. <div class="tl-content">第2期缴费到账 <strong>¥10,000</strong></div>
  829. </div>
  830. <div class="timeline-item">
  831. <div class="tl-time">预计 2025-06-10</div>
  832. <div class="tl-content">第3期待缴 <strong>¥20,000</strong></div>
  833. </div>
  834. </div>
  835. </div>
  836. </div>
  837. </details>
  838. <!-- ═══════════ Panel 6: 审核记录 ═══════════ -->
  839. <details class="panel">
  840. <summary>
  841. <div class="panel-header">
  842. <div class="panel-icon ic-rose">📝</div>
  843. <span class="panel-title">审核记录</span>
  844. <span class="panel-count">3条</span>
  845. <span class="chevron">▶</span>
  846. </div>
  847. </summary>
  848. <div class="panel-body">
  849. <table class="data-table">
  850. <thead>
  851. <tr>
  852. <th>审核节点</th>
  853. <th>审核人</th>
  854. <th>审核结果</th>
  855. <th>审核意见</th>
  856. <th>审核时间</th>
  857. </tr>
  858. </thead>
  859. <tbody>
  860. <tr>
  861. <td>协议登记审核</td>
  862. <td>张主管</td>
  863. <td><span class="badge badge-green">通过</span></td>
  864. <td style="color:#64748b">资料齐全,予以通过</td>
  865. <td>2025-05-10 15:00:00</td>
  866. </tr>
  867. <tr>
  868. <td>采集复核</td>
  869. <td>王主任</td>
  870. <td><span class="badge badge-green">通过</span></td>
  871. <td style="color:#64748b">样本合格,流程规范</td>
  872. <td>2025-05-09 11:30:00</td>
  873. </tr>
  874. <tr>
  875. <td>缴费确认</td>
  876. <td>财务部 刘会计</td>
  877. <td><span class="badge badge-amber">部分完成</span></td>
  878. <td style="color:#64748b">已收到前两期款项,待尾款</td>
  879. <td>2025-05-12 11:00:00</td>
  880. </tr>
  881. </tbody>
  882. </table>
  883. </div>
  884. </details>
  885. </div><!-- /dialog-body -->
  886. <!-- ─── Footer ─── -->
  887. <div class="dialog-footer">
  888. <button class="btn-close">关闭</button>
  889. </div>
  890. </div><!-- /dialog -->
  891. </div><!-- /overlay -->
  892. </body>
  893. </html>