demo-protocol-view-a.html 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198
  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>采集协议单查看弹窗 — 方案A:卡片分区+背景色块</title>
  7. <link rel="preconnect" href="https://fonts.googleapis.com">
  8. <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  9. <style>
  10. /* ===== Reset & Base ===== */
  11. *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  12. body {
  13. font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  14. background: #0f172a;
  15. display: flex;
  16. align-items: center;
  17. justify-content: center;
  18. min-height: 100vh;
  19. color: #1e293b;
  20. -webkit-font-smoothing: antialiased;
  21. }
  22. /* ===== Modal Overlay ===== */
  23. .overlay {
  24. position: fixed;
  25. inset: 0;
  26. background: rgba(15, 23, 42, 0.6);
  27. backdrop-filter: blur(4px);
  28. display: flex;
  29. align-items: center;
  30. justify-content: center;
  31. z-index: 1000;
  32. animation: overlayIn 0.25s ease-out;
  33. }
  34. @keyframes overlayIn {
  35. from { opacity: 0; }
  36. to { opacity: 1; }
  37. }
  38. /* ===== Dialog Shell ===== */
  39. .dialog {
  40. width: 1200px;
  41. max-height: 85vh;
  42. background: #ffffff;
  43. border-radius: 16px;
  44. display: flex;
  45. flex-direction: column;
  46. box-shadow:
  47. 0 25px 50px -12px rgba(0, 0, 0, 0.25),
  48. 0 0 0 1px rgba(255, 255, 255, 0.05);
  49. animation: dialogIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  50. overflow: hidden;
  51. }
  52. @keyframes dialogIn {
  53. from { opacity: 0; transform: translateY(24px) scale(0.97); }
  54. to { opacity: 1; transform: translateY(0) scale(1); }
  55. }
  56. /* ===== Dialog Header ===== */
  57. .dialog-header {
  58. display: flex;
  59. align-items: center;
  60. justify-content: space-between;
  61. padding: 20px 28px;
  62. border-bottom: 1px solid #e2e8f0;
  63. background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
  64. flex-shrink: 0;
  65. }
  66. .dialog-title {
  67. font-size: 18px;
  68. font-weight: 600;
  69. color: #1e293b;
  70. display: flex;
  71. align-items: center;
  72. gap: 10px;
  73. }
  74. .dialog-title::before {
  75. content: '';
  76. display: inline-block;
  77. width: 4px;
  78. height: 20px;
  79. background: linear-gradient(180deg, #10b981, #059669);
  80. border-radius: 2px;
  81. }
  82. .dialog-title .protocol-id {
  83. font-weight: 400;
  84. color: #64748b;
  85. font-size: 15px;
  86. }
  87. .close-btn {
  88. width: 36px;
  89. height: 36px;
  90. border: none;
  91. background: #f1f5f9;
  92. border-radius: 10px;
  93. font-size: 20px;
  94. color: #64748b;
  95. cursor: pointer;
  96. display: flex;
  97. align-items: center;
  98. justify-content: center;
  99. transition: all 0.2s;
  100. }
  101. .close-btn:hover {
  102. background: #fee2e2;
  103. color: #ef4444;
  104. transform: rotate(90deg);
  105. }
  106. /* ===== Dialog Body (scrollable) ===== */
  107. .dialog-body {
  108. flex: 1;
  109. overflow-y: auto;
  110. padding: 0;
  111. scroll-behavior: smooth;
  112. }
  113. .dialog-body::-webkit-scrollbar {
  114. width: 6px;
  115. }
  116. .dialog-body::-webkit-scrollbar-track {
  117. background: transparent;
  118. }
  119. .dialog-body::-webkit-scrollbar-thumb {
  120. background: #cbd5e1;
  121. border-radius: 3px;
  122. }
  123. .dialog-body::-webkit-scrollbar-thumb:hover {
  124. background: #94a3b8;
  125. }
  126. /* ===== Sticky Tab Bar ===== */
  127. .tab-bar {
  128. position: sticky;
  129. top: 0;
  130. z-index: 10;
  131. background: #ffffff;
  132. padding: 16px 28px 0;
  133. display: flex;
  134. gap: 6px;
  135. border-bottom: 1px solid #f1f5f9;
  136. }
  137. .tab-bar::after {
  138. content: '';
  139. position: absolute;
  140. bottom: 0;
  141. left: 28px;
  142. right: 28px;
  143. height: 1px;
  144. background: #e2e8f0;
  145. }
  146. .tab-pill {
  147. padding: 8px 18px;
  148. border-radius: 8px 8px 0 0;
  149. font-size: 13.5px;
  150. font-weight: 500;
  151. color: #64748b;
  152. cursor: pointer;
  153. transition: all 0.2s;
  154. position: relative;
  155. background: transparent;
  156. border: 1px solid transparent;
  157. border-bottom: none;
  158. }
  159. .tab-pill:hover {
  160. color: #1e293b;
  161. background: #f8fafc;
  162. }
  163. .tab-pill.active {
  164. background: #ffffff;
  165. color: #10b981;
  166. font-weight: 600;
  167. border-color: #e2e8f0;
  168. box-shadow: 0 -2px 8px rgba(16, 185, 129, 0.08);
  169. }
  170. .tab-pill.active::after {
  171. content: '';
  172. position: absolute;
  173. bottom: -1px;
  174. left: 0;
  175. right: 0;
  176. height: 2px;
  177. background: #ffffff;
  178. }
  179. /* ===== Content Area ===== */
  180. .content-area {
  181. padding: 24px 28px 32px;
  182. }
  183. /* ===== Section ===== */
  184. .section {
  185. margin-bottom: 28px;
  186. }
  187. .section:last-child {
  188. margin-bottom: 0;
  189. }
  190. .section-header {
  191. display: flex;
  192. align-items: center;
  193. gap: 10px;
  194. margin-bottom: 18px;
  195. padding-left: 14px;
  196. position: relative;
  197. }
  198. .section-header::before {
  199. content: '';
  200. position: absolute;
  201. left: 0;
  202. top: 50%;
  203. transform: translateY(-50%);
  204. width: 3px;
  205. height: 18px;
  206. background: linear-gradient(180deg, #10b981, #059669);
  207. border-radius: 2px;
  208. }
  209. .section-title {
  210. font-size: 15px;
  211. font-weight: 600;
  212. color: #1e293b;
  213. }
  214. /* ===== KV Grid ===== */
  215. .kv-grid {
  216. display: grid;
  217. grid-template-columns: repeat(3, 1fr);
  218. gap: 0;
  219. }
  220. .kv-item {
  221. padding: 12px 16px;
  222. display: flex;
  223. flex-direction: column;
  224. gap: 4px;
  225. border-bottom: 1px solid #f1f5f9;
  226. }
  227. .kv-item:nth-child(3n+1) {
  228. padding-left: 0;
  229. }
  230. .kv-item:nth-child(3n) {
  231. padding-right: 0;
  232. }
  233. .kv-item.span-full {
  234. grid-column: 1 / -1;
  235. padding-left: 0;
  236. padding-right: 0;
  237. }
  238. .kv-label {
  239. font-size: 12.5px;
  240. color: #94a3b8;
  241. font-weight: 400;
  242. line-height: 1;
  243. }
  244. .kv-value {
  245. font-size: 14px;
  246. color: #1e293b;
  247. font-weight: 500;
  248. line-height: 1.5;
  249. }
  250. .kv-value.empty {
  251. color: #cbd5e1;
  252. }
  253. /* ===== Status Badge ===== */
  254. .badge {
  255. display: inline-flex;
  256. align-items: center;
  257. gap: 5px;
  258. padding: 3px 12px;
  259. border-radius: 20px;
  260. font-size: 12.5px;
  261. font-weight: 500;
  262. }
  263. .badge-green {
  264. background: #ecfdf5;
  265. color: #059669;
  266. }
  267. .badge-green::before {
  268. content: '';
  269. width: 6px;
  270. height: 6px;
  271. border-radius: 50%;
  272. background: #10b981;
  273. animation: pulse 2s infinite;
  274. }
  275. @keyframes pulse {
  276. 0%, 100% { opacity: 1; }
  277. 50% { opacity: 0.4; }
  278. }
  279. .badge-blue {
  280. background: #eff6ff;
  281. color: #2563eb;
  282. }
  283. .badge-orange {
  284. background: #fff7ed;
  285. color: #ea580c;
  286. }
  287. /* ===== Sub-card (Card-in-Card) ===== */
  288. .sub-card {
  289. border-radius: 12px;
  290. padding: 20px;
  291. margin-bottom: 14px;
  292. transition: all 0.25s ease;
  293. position: relative;
  294. overflow: hidden;
  295. }
  296. .sub-card::before {
  297. content: '';
  298. position: absolute;
  299. top: 0;
  300. left: 0;
  301. right: 0;
  302. height: 3px;
  303. border-radius: 12px 12px 0 0;
  304. opacity: 0;
  305. transition: opacity 0.25s;
  306. }
  307. .sub-card:hover::before {
  308. opacity: 1;
  309. }
  310. .sub-card:hover {
  311. box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  312. transform: translateY(-1px);
  313. }
  314. .sub-card-green {
  315. background: #f0fdf4;
  316. border: 1px solid #dcfce7;
  317. }
  318. .sub-card-green::before {
  319. background: linear-gradient(90deg, #10b981, #34d399);
  320. }
  321. .sub-card-gray {
  322. background: #f8fafc;
  323. border: 1px solid #f1f5f9;
  324. }
  325. .sub-card-gray::before {
  326. background: linear-gradient(90deg, #64748b, #94a3b8);
  327. }
  328. .sub-card .card-title {
  329. font-size: 13.5px;
  330. font-weight: 600;
  331. color: #475569;
  332. margin-bottom: 14px;
  333. display: flex;
  334. align-items: center;
  335. gap: 7px;
  336. }
  337. .card-title-icon {
  338. width: 22px;
  339. height: 22px;
  340. border-radius: 6px;
  341. display: inline-flex;
  342. align-items: center;
  343. justify-content: center;
  344. font-size: 12px;
  345. color: #ffffff;
  346. flex-shrink: 0;
  347. }
  348. .icon-mom {
  349. background: linear-gradient(135deg, #f472b6, #ec4899);
  350. }
  351. .icon-dad {
  352. background: linear-gradient(135deg, #60a5fa, #3b82f6);
  353. }
  354. .icon-baby {
  355. background: linear-gradient(135deg, #fbbf24, #f59e0b);
  356. }
  357. /* ===== Wrap Card (for sections with bg) ===== */
  358. .wrap-card {
  359. background: #f8fafc;
  360. border: 1px solid #f1f5f9;
  361. border-radius: 12px;
  362. padding: 20px;
  363. }
  364. /* ===== Attachment Thumbnails ===== */
  365. .attachment-row {
  366. display: flex;
  367. gap: 12px;
  368. flex-wrap: wrap;
  369. margin-top: 14px;
  370. padding-top: 14px;
  371. border-top: 1px solid #f1f5f9;
  372. }
  373. .attachment-label {
  374. font-size: 12.5px;
  375. color: #94a3b8;
  376. margin-bottom: 8px;
  377. }
  378. .att-card {
  379. width: 100px;
  380. height: 80px;
  381. border-radius: 8px;
  382. border: 1px solid #e2e8f0;
  383. display: flex;
  384. flex-direction: column;
  385. align-items: center;
  386. justify-content: center;
  387. gap: 6px;
  388. background: #ffffff;
  389. cursor: pointer;
  390. transition: all 0.2s;
  391. position: relative;
  392. overflow: hidden;
  393. }
  394. .att-card:hover {
  395. border-color: #10b981;
  396. box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  397. transform: translateY(-2px);
  398. }
  399. .att-icon {
  400. font-size: 24px;
  401. line-height: 1;
  402. }
  403. .att-name {
  404. font-size: 10px;
  405. color: #64748b;
  406. text-align: center;
  407. line-height: 1.2;
  408. max-width: 88px;
  409. overflow: hidden;
  410. text-overflow: ellipsis;
  411. white-space: nowrap;
  412. }
  413. /* ===== Table ===== */
  414. .data-table {
  415. width: 100%;
  416. border-collapse: separate;
  417. border-spacing: 0;
  418. font-size: 13.5px;
  419. }
  420. .data-table thead th {
  421. background: #f8fafc;
  422. color: #64748b;
  423. font-weight: 500;
  424. font-size: 12.5px;
  425. padding: 10px 14px;
  426. text-align: left;
  427. border-bottom: 1px solid #e2e8f0;
  428. white-space: nowrap;
  429. }
  430. .data-table thead th:first-child {
  431. border-radius: 8px 0 0 0;
  432. }
  433. .data-table thead th:last-child {
  434. border-radius: 0 8px 0 0;
  435. }
  436. .data-table tbody td {
  437. padding: 12px 14px;
  438. border-bottom: 1px solid #f1f5f9;
  439. color: #1e293b;
  440. vertical-align: middle;
  441. }
  442. .data-table tbody tr {
  443. transition: background 0.15s;
  444. }
  445. .data-table tbody tr:hover {
  446. background: #f0fdf4;
  447. }
  448. .data-table tbody tr:last-child td {
  449. border-bottom: none;
  450. }
  451. .table-wrap {
  452. border: 1px solid #e2e8f0;
  453. border-radius: 10px;
  454. overflow: hidden;
  455. }
  456. /* ===== Payment Section ===== */
  457. .payment-summary {
  458. display: grid;
  459. grid-template-columns: repeat(4, 1fr);
  460. gap: 16px;
  461. margin-bottom: 18px;
  462. }
  463. .pay-stat {
  464. background: #ffffff;
  465. border: 1px solid #e2e8f0;
  466. border-radius: 10px;
  467. padding: 16px;
  468. text-align: center;
  469. transition: all 0.2s;
  470. }
  471. .pay-stat:hover {
  472. border-color: #10b981;
  473. box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
  474. }
  475. .pay-stat-label {
  476. font-size: 12px;
  477. color: #94a3b8;
  478. margin-bottom: 6px;
  479. }
  480. .pay-stat-value {
  481. font-size: 18px;
  482. font-weight: 600;
  483. color: #1e293b;
  484. }
  485. .pay-stat-value.highlight {
  486. color: #10b981;
  487. }
  488. .payment-detail-card {
  489. background: #ffffff;
  490. border: 1px solid #e2e8f0;
  491. border-radius: 10px;
  492. padding: 18px 20px;
  493. margin-bottom: 18px;
  494. }
  495. .payment-detail-title {
  496. font-size: 13px;
  497. font-weight: 600;
  498. color: #475569;
  499. margin-bottom: 14px;
  500. display: flex;
  501. align-items: center;
  502. gap: 6px;
  503. }
  504. .payment-detail-grid {
  505. display: grid;
  506. grid-template-columns: repeat(5, 1fr);
  507. gap: 0;
  508. }
  509. .payment-detail-grid .kv-item {
  510. border-bottom: none;
  511. padding: 6px 12px;
  512. }
  513. .payment-detail-grid .kv-item:nth-child(5n+1) {
  514. padding-left: 0;
  515. }
  516. .payment-detail-grid .kv-item:nth-child(5n) {
  517. padding-right: 0;
  518. }
  519. /* ===== Timeline / Flow Track ===== */
  520. .flow-track {
  521. display: flex;
  522. align-items: center;
  523. justify-content: center;
  524. gap: 0;
  525. padding: 20px 40px;
  526. position: relative;
  527. }
  528. .flow-step {
  529. display: flex;
  530. flex-direction: column;
  531. align-items: center;
  532. gap: 8px;
  533. position: relative;
  534. z-index: 1;
  535. flex: 0 0 auto;
  536. }
  537. .flow-circle {
  538. width: 36px;
  539. height: 36px;
  540. border-radius: 50%;
  541. display: flex;
  542. align-items: center;
  543. justify-content: center;
  544. font-size: 14px;
  545. font-weight: 600;
  546. transition: all 0.3s;
  547. }
  548. .flow-circle.done {
  549. background: linear-gradient(135deg, #10b981, #059669);
  550. color: #ffffff;
  551. box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  552. }
  553. .flow-circle.current {
  554. background: #ffffff;
  555. border: 2px solid #10b981;
  556. color: #10b981;
  557. box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  558. animation: currentPulse 2s infinite;
  559. }
  560. @keyframes currentPulse {
  561. 0%, 100% { box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); }
  562. 50% { box-shadow: 0 2px 16px rgba(16, 185, 129, 0.3); }
  563. }
  564. .flow-circle.pending {
  565. background: #f8fafc;
  566. border: 2px solid #e2e8f0;
  567. color: #94a3b8;
  568. }
  569. .flow-label {
  570. font-size: 12.5px;
  571. color: #64748b;
  572. font-weight: 500;
  573. white-space: nowrap;
  574. }
  575. .flow-label.done {
  576. color: #059669;
  577. }
  578. .flow-label.current {
  579. color: #10b981;
  580. font-weight: 600;
  581. }
  582. .flow-connector {
  583. width: 80px;
  584. height: 2px;
  585. background: #e2e8f0;
  586. position: relative;
  587. flex-shrink: 0;
  588. }
  589. .flow-connector.done {
  590. background: linear-gradient(90deg, #10b981, #34d399);
  591. }
  592. .flow-connector.done::after {
  593. content: '';
  594. position: absolute;
  595. right: -3px;
  596. top: -3px;
  597. width: 8px;
  598. height: 8px;
  599. border-top: 2px solid #10b981;
  600. border-right: 2px solid #10b981;
  601. transform: rotate(45deg);
  602. }
  603. /* ===== Dialog Footer ===== */
  604. .dialog-footer {
  605. display: flex;
  606. align-items: center;
  607. justify-content: flex-end;
  608. padding: 16px 28px;
  609. border-top: 1px solid #e2e8f0;
  610. background: #fafafa;
  611. flex-shrink: 0;
  612. }
  613. .btn-close {
  614. padding: 9px 32px;
  615. border: 1px solid #e2e8f0;
  616. background: #ffffff;
  617. color: #475569;
  618. border-radius: 8px;
  619. font-size: 14px;
  620. font-weight: 500;
  621. cursor: pointer;
  622. transition: all 0.2s;
  623. font-family: inherit;
  624. }
  625. .btn-close:hover {
  626. border-color: #10b981;
  627. color: #10b981;
  628. box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
  629. }
  630. /* ===== Remark Block ===== */
  631. .remark-block {
  632. background: #fffbeb;
  633. border: 1px solid #fef3c7;
  634. border-radius: 8px;
  635. padding: 12px 16px;
  636. margin-top: 14px;
  637. font-size: 13px;
  638. color: #92400e;
  639. line-height: 1.6;
  640. display: flex;
  641. align-items: flex-start;
  642. gap: 8px;
  643. }
  644. .remark-icon {
  645. font-size: 15px;
  646. flex-shrink: 0;
  647. margin-top: 1px;
  648. }
  649. /* ===== Utility ===== */
  650. .price {
  651. color: #059669;
  652. font-weight: 600;
  653. }
  654. .muted {
  655. color: #94a3b8;
  656. }
  657. </style>
  658. </head>
  659. <body>
  660. <div class="overlay">
  661. <div class="dialog">
  662. <!-- Header -->
  663. <div class="dialog-header">
  664. <div class="dialog-title">
  665. 查看协议单
  666. <span class="protocol-id">P2025-0501-001</span>
  667. </div>
  668. <button class="close-btn" title="关闭">×</button>
  669. </div>
  670. <!-- Body -->
  671. <div class="dialog-body">
  672. <!-- Sticky Tab Bar -->
  673. <div class="tab-bar">
  674. <div class="tab-pill active">基本信息</div>
  675. <div class="tab-pill">客户信息</div>
  676. <div class="tab-pill">采集信息</div>
  677. <div class="tab-pill">样本及运输信息</div>
  678. <div class="tab-pill">缴费信息</div>
  679. <div class="tab-pill">审核记录</div>
  680. </div>
  681. <div class="content-area">
  682. <!-- ===================== 基本信息 ===================== -->
  683. <div class="section">
  684. <div class="section-header">
  685. <span class="section-title">基本信息</span>
  686. </div>
  687. <div class="kv-grid">
  688. <div class="kv-item">
  689. <span class="kv-label">协议号</span>
  690. <span class="kv-value">P2025-0501-001</span>
  691. </div>
  692. <div class="kv-item">
  693. <span class="kv-label">协议状态</span>
  694. <span class="kv-value"><span class="badge badge-green">生效中</span></span>
  695. </div>
  696. <div class="kv-item">
  697. <span class="kv-label">登记日期</span>
  698. <span class="kv-value">2025-05-10</span>
  699. </div>
  700. <div class="kv-item">
  701. <span class="kv-label">采集专员</span>
  702. <span class="kv-value">李明</span>
  703. </div>
  704. <div class="kv-item">
  705. <span class="kv-label">创建时间</span>
  706. <span class="kv-value">2025-05-10 14:30:22</span>
  707. </div>
  708. <div class="kv-item">
  709. <span class="kv-label">协议附件</span>
  710. <span class="kv-value">
  711. <div class="attachment-row" style="margin-top:0;padding-top:0;border-top:none;">
  712. <div class="att-card">
  713. <span class="att-icon">🖼️</span>
  714. <span class="att-name">身份证正面.jpg</span>
  715. </div>
  716. <div class="att-card">
  717. <span class="att-icon">🖼️</span>
  718. <span class="att-name">身份证反面.jpg</span>
  719. </div>
  720. <div class="att-card">
  721. <span class="att-icon">📄</span>
  722. <span class="att-name">协议书.pdf</span>
  723. </div>
  724. </div>
  725. </span>
  726. </div>
  727. <div class="kv-item span-full">
  728. <span class="kv-label">备注</span>
  729. <div class="remark-block">
  730. <span class="remark-icon">💡</span>
  731. <span>客户要求加急处理,已与采集专员沟通确认</span>
  732. </div>
  733. </div>
  734. </div>
  735. </div>
  736. <!-- ===================== 客户信息 ===================== -->
  737. <div class="section">
  738. <div class="section-header">
  739. <span class="section-title">客户信息</span>
  740. </div>
  741. <!-- 母亲信息 -->
  742. <div class="sub-card sub-card-green">
  743. <div class="card-title">
  744. <span class="card-title-icon icon-mom">♀</span>
  745. 母亲信息
  746. </div>
  747. <div class="kv-grid">
  748. <div class="kv-item">
  749. <span class="kv-label">关联客户</span>
  750. <span class="kv-value empty">—</span>
  751. </div>
  752. <div class="kv-item">
  753. <span class="kv-label">母亲姓名</span>
  754. <span class="kv-value">王美丽</span>
  755. </div>
  756. <div class="kv-item">
  757. <span class="kv-label">母亲联系电话</span>
  758. <span class="kv-value">138****5678</span>
  759. </div>
  760. <div class="kv-item">
  761. <span class="kv-label">母亲身份证号</span>
  762. <span class="kv-value">3401**********1234</span>
  763. </div>
  764. <div class="kv-item">
  765. <span class="kv-label">母亲出生年月</span>
  766. <span class="kv-value">1992-06</span>
  767. </div>
  768. <div class="kv-item">
  769. <span class="kv-label">母亲民族</span>
  770. <span class="kv-value">汉族</span>
  771. </div>
  772. <div class="kv-item span-full">
  773. <span class="kv-label">母亲家庭住址</span>
  774. <span class="kv-value">安徽省合肥市蜀山区望江西路XX小区X栋X单元XXX室</span>
  775. </div>
  776. </div>
  777. </div>
  778. <!-- 父亲信息 -->
  779. <div class="sub-card sub-card-gray">
  780. <div class="card-title">
  781. <span class="card-title-icon icon-dad">♂</span>
  782. 父亲信息
  783. </div>
  784. <div class="kv-grid">
  785. <div class="kv-item">
  786. <span class="kv-label">父亲姓名</span>
  787. <span class="kv-value">张建国</span>
  788. </div>
  789. <div class="kv-item">
  790. <span class="kv-label">父亲电话</span>
  791. <span class="kv-value">139****8901</span>
  792. </div>
  793. <div class="kv-item">
  794. <span class="kv-label">父亲身份证号</span>
  795. <span class="kv-value">3401**********5678</span>
  796. </div>
  797. </div>
  798. </div>
  799. <!-- 新生儿信息 -->
  800. <div class="sub-card sub-card-green">
  801. <div class="card-title">
  802. <span class="card-title-icon icon-baby">👶</span>
  803. 新生儿信息
  804. </div>
  805. <div class="kv-grid">
  806. <div class="kv-item">
  807. <span class="kv-label">新生儿姓名</span>
  808. <span class="kv-value">张小明</span>
  809. </div>
  810. <div class="kv-item">
  811. <span class="kv-label">新生儿身份证</span>
  812. <span class="kv-value empty">—</span>
  813. </div>
  814. <div class="kv-item">
  815. <span class="kv-label">新生儿分娩时间</span>
  816. <span class="kv-value">2025-05-08 06:30</span>
  817. </div>
  818. <div class="kv-item">
  819. <span class="kv-label">新生儿性别</span>
  820. <span class="kv-value">男</span>
  821. </div>
  822. <div class="kv-item">
  823. <span class="kv-label">分娩方式</span>
  824. <span class="kv-value">剖宫产</span>
  825. </div>
  826. <div class="kv-item">
  827. <span class="kv-label">胎次</span>
  828. <span class="kv-value">1</span>
  829. </div>
  830. <div class="kv-item">
  831. <span class="kv-label">新生儿体重(克)</span>
  832. <span class="kv-value">3250</span>
  833. </div>
  834. <div class="kv-item">
  835. <span class="kv-label">新生儿评分1分钟</span>
  836. <span class="kv-value">9</span>
  837. </div>
  838. <div class="kv-item">
  839. <span class="kv-label">新生儿评分5分钟</span>
  840. <span class="kv-value">10</span>
  841. </div>
  842. </div>
  843. </div>
  844. </div>
  845. <!-- ===================== 采集信息 ===================== -->
  846. <div class="section">
  847. <div class="section-header">
  848. <span class="section-title">采集信息</span>
  849. </div>
  850. <div class="wrap-card">
  851. <div class="kv-grid">
  852. <div class="kv-item">
  853. <span class="kv-label">采集地区</span>
  854. <span class="kv-value">华东地区</span>
  855. </div>
  856. <div class="kv-item">
  857. <span class="kv-label">采集医院</span>
  858. <span class="kv-value">合肥市第一人民医院</span>
  859. </div>
  860. <div class="kv-item">
  861. <span class="kv-label">采集医护</span>
  862. <span class="kv-value">陈护士</span>
  863. </div>
  864. <div class="kv-item">
  865. <span class="kv-label">销售人员</span>
  866. <span class="kv-value">赵经理</span>
  867. </div>
  868. <div class="kv-item">
  869. <span class="kv-label">样本采集时间</span>
  870. <span class="kv-value">2025-05-08 07:15:00</span>
  871. </div>
  872. <div class="kv-item">
  873. <span class="kv-label">母血采集时间</span>
  874. <span class="kv-value">2025-05-08 07:20:00</span>
  875. </div>
  876. </div>
  877. </div>
  878. </div>
  879. <!-- ===================== 样本及运输信息 ===================== -->
  880. <div class="section">
  881. <div class="section-header">
  882. <span class="section-title">样本及运输信息</span>
  883. </div>
  884. <div class="table-wrap">
  885. <table class="data-table">
  886. <thead>
  887. <tr>
  888. <th>样本类型</th>
  889. <th>样本编码</th>
  890. <th>采集量</th>
  891. <th>单位</th>
  892. <th>价格</th>
  893. <th>存储年限</th>
  894. <th>样本状态</th>
  895. <th>运输类型</th>
  896. <th>目的站点</th>
  897. </tr>
  898. </thead>
  899. <tbody>
  900. <tr>
  901. <td>脐带血造血干细胞</td>
  902. <td style="font-family:monospace;font-size:13px;">SC20250508001</td>
  903. <td>100</td>
  904. <td>ml</td>
  905. <td class="price">¥25,000</td>
  906. <td>20年</td>
  907. <td><span class="badge badge-green">已入库</span></td>
  908. <td>快递运输</td>
  909. <td>合肥站</td>
  910. </tr>
  911. <tr>
  912. <td>脐带间充质干细胞</td>
  913. <td style="font-family:monospace;font-size:13px;">SC20250508002</td>
  914. <td>1</td>
  915. <td>份</td>
  916. <td class="price">¥15,000</td>
  917. <td>20年</td>
  918. <td><span class="badge badge-green">已入库</span></td>
  919. <td>快递运输</td>
  920. <td>合肥站</td>
  921. </tr>
  922. <tr>
  923. <td>胎盘干细胞</td>
  924. <td style="font-family:monospace;font-size:13px;">SC20250508003</td>
  925. <td>1</td>
  926. <td>份</td>
  927. <td class="price">¥8,000</td>
  928. <td>10年</td>
  929. <td><span class="badge badge-blue">运输中</span></td>
  930. <td>专人运输</td>
  931. <td>合肥站</td>
  932. </tr>
  933. <tr>
  934. <td>母血样本</td>
  935. <td style="font-family:monospace;font-size:13px;">SC20250508004</td>
  936. <td>10</td>
  937. <td>ml</td>
  938. <td class="price">¥500</td>
  939. <td>5年</td>
  940. <td><span class="badge badge-green">已入库</span></td>
  941. <td>快递运输</td>
  942. <td>合肥站</td>
  943. </tr>
  944. <tr>
  945. <td>脐带血常规检测</td>
  946. <td style="font-family:monospace;font-size:13px;">SC20250508005</td>
  947. <td>—</td>
  948. <td>—</td>
  949. <td class="price">¥1,500</td>
  950. <td>—</td>
  951. <td><span class="badge badge-orange">待检测</span></td>
  952. <td>—</td>
  953. <td>—</td>
  954. </tr>
  955. </tbody>
  956. </table>
  957. </div>
  958. </div>
  959. <!-- ===================== 缴费信息 ===================== -->
  960. <div class="section">
  961. <div class="section-header">
  962. <span class="section-title">缴费信息</span>
  963. </div>
  964. <!-- Summary Stats -->
  965. <div class="payment-summary">
  966. <div class="pay-stat">
  967. <div class="pay-stat-label">缴费模式</div>
  968. <div class="pay-stat-value">分期</div>
  969. </div>
  970. <div class="pay-stat">
  971. <div class="pay-stat-label">合同金额</div>
  972. <div class="pay-stat-value highlight">¥50,000</div>
  973. </div>
  974. <div class="pay-stat">
  975. <div class="pay-stat-label">分期期数</div>
  976. <div class="pay-stat-value">3 期</div>
  977. </div>
  978. <div class="pay-stat">
  979. <div class="pay-stat-label">每期间隔</div>
  980. <div class="pay-stat-value">6 月</div>
  981. </div>
  982. </div>
  983. <!-- Payment Detail Card -->
  984. <div class="payment-detail-card">
  985. <div class="payment-detail-title">
  986. <span style="color:#10b981;">●</span>
  987. 第 1 期缴费
  988. </div>
  989. <div class="payment-detail-grid">
  990. <div class="kv-item">
  991. <span class="kv-label">应缴费金额</span>
  992. <span class="kv-value price">¥16,667</span>
  993. </div>
  994. <div class="kv-item">
  995. <span class="kv-label">转账方式</span>
  996. <span class="kv-value">微信</span>
  997. </div>
  998. <div class="kv-item">
  999. <span class="kv-label">转账金额</span>
  1000. <span class="kv-value price">¥16,667</span>
  1001. </div>
  1002. <div class="kv-item">
  1003. <span class="kv-label">转账时间</span>
  1004. <span class="kv-value">2025-05-09</span>
  1005. </div>
  1006. <div class="kv-item">
  1007. <span class="kv-label">缴费状态</span>
  1008. <span class="kv-value"><span class="badge badge-green">已缴费</span></span>
  1009. </div>
  1010. </div>
  1011. </div>
  1012. <!-- Payment Flow Track -->
  1013. <div class="wrap-card">
  1014. <div style="text-align:center;margin-bottom:12px;font-size:13px;color:#64748b;font-weight:500;">缴费确认流程</div>
  1015. <div class="flow-track">
  1016. <div class="flow-step">
  1017. <div class="flow-circle done">✓</div>
  1018. <div class="flow-label done">缴费确认</div>
  1019. </div>
  1020. <div class="flow-connector done"></div>
  1021. <div class="flow-step">
  1022. <div class="flow-circle current">2</div>
  1023. <div class="flow-label current">退费确认</div>
  1024. </div>
  1025. <div class="flow-connector"></div>
  1026. <div class="flow-step">
  1027. <div class="flow-circle pending">3</div>
  1028. <div class="flow-label">财务确认</div>
  1029. </div>
  1030. </div>
  1031. </div>
  1032. </div>
  1033. <!-- ===================== 审核记录 ===================== -->
  1034. <div class="section">
  1035. <div class="section-header">
  1036. <span class="section-title">审核记录</span>
  1037. </div>
  1038. <div class="table-wrap">
  1039. <table class="data-table">
  1040. <thead>
  1041. <tr>
  1042. <th style="width:60px;">序号</th>
  1043. <th>审核时间</th>
  1044. <th>审核状态</th>
  1045. <th>审核备注</th>
  1046. <th>审核人</th>
  1047. </tr>
  1048. </thead>
  1049. <tbody>
  1050. <tr>
  1051. <td style="text-align:center;color:#94a3b8;">1</td>
  1052. <td>2025-05-10 15:20:00</td>
  1053. <td><span class="badge badge-green">审核通过</span></td>
  1054. <td>资料齐全,信息核对无误</td>
  1055. <td>张主管</td>
  1056. </tr>
  1057. <tr>
  1058. <td style="text-align:center;color:#94a3b8;">2</td>
  1059. <td>2025-05-10 14:45:00</td>
  1060. <td><span class="badge badge-blue">已提交</span></td>
  1061. <td>采集专员提交协议单审核</td>
  1062. <td>李明</td>
  1063. </tr>
  1064. </tbody>
  1065. </table>
  1066. </div>
  1067. </div>
  1068. </div>
  1069. </div>
  1070. <!-- Footer -->
  1071. <div class="dialog-footer">
  1072. <button class="btn-close">关闭</button>
  1073. </div>
  1074. </div>
  1075. </div>
  1076. </body>
  1077. </html>