demo-protocol-view-c.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995
  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>方案C:Tab真分页 — 采集协议单查看弹窗</title>
  7. <style>
  8. /* ===== Reset & Base ===== */
  9. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  10. body {
  11. font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  12. font-size: 14px;
  13. line-height: 1.6;
  14. color: #1e293b;
  15. background: #f0f2f5;
  16. min-height: 100vh;
  17. display: flex;
  18. align-items: center;
  19. justify-content: center;
  20. }
  21. /* ===== Modal Overlay ===== */
  22. .overlay {
  23. position: fixed;
  24. inset: 0;
  25. background: rgba(0, 0, 0, 0.45);
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. z-index: 1000;
  30. backdrop-filter: none;
  31. }
  32. /* ===== Dialog ===== */
  33. .dialog {
  34. background: #fff;
  35. border-radius: 12px;
  36. width: 1200px;
  37. max-height: calc(100vh - 80px);
  38. display: flex;
  39. flex-direction: column;
  40. box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
  41. overflow: hidden;
  42. }
  43. /* Dialog Header */
  44. .dialog-header {
  45. display: flex;
  46. align-items: center;
  47. justify-content: space-between;
  48. padding: 20px 32px;
  49. border-bottom: 1px solid #e2e8f0;
  50. flex-shrink: 0;
  51. }
  52. .dialog-header h2 {
  53. font-size: 17px;
  54. font-weight: 600;
  55. color: #1e293b;
  56. }
  57. .dialog-header h2 span {
  58. color: #64748b;
  59. font-weight: 400;
  60. margin-left: 4px;
  61. }
  62. .close-btn {
  63. width: 36px;
  64. height: 36px;
  65. border: none;
  66. background: #f5f7fa;
  67. border-radius: 8px;
  68. cursor: pointer;
  69. font-size: 18px;
  70. color: #64748b;
  71. display: flex;
  72. align-items: center;
  73. justify-content: center;
  74. transition: all 0.2s;
  75. }
  76. .close-btn:hover {
  77. background: #fee2e2;
  78. color: #ef4444;
  79. }
  80. /* ===== Tab Bar ===== */
  81. .tab-bar {
  82. display: flex;
  83. border-bottom: 1px solid #e2e8f0;
  84. padding: 0 32px;
  85. flex-shrink: 0;
  86. background: #fafbfc;
  87. }
  88. .tab-item {
  89. padding: 14px 24px;
  90. font-size: 14px;
  91. color: #64748b;
  92. cursor: pointer;
  93. border-bottom: 2px solid transparent;
  94. transition: all 0.25s ease;
  95. white-space: nowrap;
  96. user-select: none;
  97. position: relative;
  98. }
  99. .tab-item:hover {
  100. color: #10b981;
  101. }
  102. .tab-item.active {
  103. color: #059669;
  104. font-weight: 600;
  105. border-bottom-color: #10b981;
  106. }
  107. /* ===== Tab Body (scrollable) ===== */
  108. .tab-body {
  109. flex: 1;
  110. overflow-y: auto;
  111. min-height: 0;
  112. }
  113. .tab-body::-webkit-scrollbar { width: 6px; }
  114. .tab-body::-webkit-scrollbar-track { background: transparent; }
  115. .tab-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
  116. .tab-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
  117. /* ===== Tab Panels ===== */
  118. .tab-panel {
  119. display: none;
  120. padding: 32px;
  121. animation: fadeIn 0.3s ease;
  122. }
  123. .tab-panel.active {
  124. display: block;
  125. }
  126. @keyframes fadeIn {
  127. from { opacity: 0; transform: translateY(6px); }
  128. to { opacity: 1; transform: translateY(0); }
  129. }
  130. /* ===== 3-Column Key-Value Grid ===== */
  131. .kv-grid {
  132. display: grid;
  133. grid-template-columns: repeat(3, 1fr);
  134. gap: 20px 32px;
  135. }
  136. .kv-grid .full-width {
  137. grid-column: 1 / -1;
  138. }
  139. .kv-item {
  140. display: flex;
  141. flex-direction: column;
  142. gap: 6px;
  143. }
  144. .kv-item .label {
  145. font-size: 13px;
  146. color: #94a3b8;
  147. font-weight: 400;
  148. }
  149. .kv-item .value {
  150. font-size: 14px;
  151. color: #1e293b;
  152. font-weight: 500;
  153. word-break: break-all;
  154. }
  155. /* ===== Status Badge ===== */
  156. .badge {
  157. display: inline-flex;
  158. align-items: center;
  159. padding: 2px 12px;
  160. border-radius: 20px;
  161. font-size: 12px;
  162. font-weight: 500;
  163. }
  164. .badge.green {
  165. background: #ecfdf5;
  166. color: #059669;
  167. border: 1px solid #a7f3d0;
  168. }
  169. .badge.yellow {
  170. background: #fffbeb;
  171. color: #d97706;
  172. border: 1px solid #fde68a;
  173. }
  174. .badge.blue {
  175. background: #eff6ff;
  176. color: #2563eb;
  177. border: 1px solid #bfdbfe;
  178. }
  179. .badge.red {
  180. background: #fef2f2;
  181. color: #dc2626;
  182. border: 1px solid #fecaca;
  183. }
  184. .badge.gray {
  185. background: #f8fafc;
  186. color: #64748b;
  187. border: 1px solid #e2e8f0;
  188. }
  189. /* ===== Section Title ===== */
  190. .section-title {
  191. display: flex;
  192. align-items: center;
  193. gap: 10px;
  194. margin-bottom: 20px;
  195. padding-bottom: 12px;
  196. border-bottom: 1px solid #f1f5f9;
  197. }
  198. .section-title::before {
  199. content: '';
  200. display: inline-block;
  201. width: 4px;
  202. height: 18px;
  203. background: #10b981;
  204. border-radius: 2px;
  205. flex-shrink: 0;
  206. }
  207. .section-title span {
  208. font-size: 15px;
  209. font-weight: 600;
  210. color: #1e293b;
  211. }
  212. /* ===== Sub-section (for 客户信息) ===== */
  213. .sub-section {
  214. margin-bottom: 28px;
  215. }
  216. .sub-section:last-child {
  217. margin-bottom: 0;
  218. }
  219. .sub-section-header {
  220. display: flex;
  221. align-items: center;
  222. gap: 8px;
  223. margin-bottom: 16px;
  224. }
  225. .sub-section-header::before {
  226. content: '';
  227. width: 3px;
  228. height: 14px;
  229. background: #10b981;
  230. border-radius: 1.5px;
  231. }
  232. .sub-section-header span {
  233. font-size: 14px;
  234. font-weight: 600;
  235. color: #334155;
  236. }
  237. .sub-section-divider {
  238. border: none;
  239. border-top: 1px dashed #e2e8f0;
  240. margin: 24px 0;
  241. }
  242. /* ===== File Thumbnails ===== */
  243. .file-list {
  244. display: flex;
  245. gap: 12px;
  246. flex-wrap: wrap;
  247. }
  248. .file-thumb {
  249. display: flex;
  250. align-items: center;
  251. gap: 8px;
  252. padding: 8px 14px;
  253. background: #f8fafc;
  254. border: 1px solid #e2e8f0;
  255. border-radius: 8px;
  256. font-size: 13px;
  257. color: #475569;
  258. cursor: default;
  259. transition: all 0.2s;
  260. }
  261. .file-thumb:hover {
  262. background: #ecfdf5;
  263. border-color: #a7f3d0;
  264. }
  265. .file-thumb .icon {
  266. font-size: 18px;
  267. }
  268. /* ===== Table ===== */
  269. .data-table {
  270. width: 100%;
  271. border-collapse: collapse;
  272. font-size: 13px;
  273. }
  274. .data-table thead th {
  275. background: #f8fafc;
  276. color: #64748b;
  277. font-weight: 500;
  278. padding: 12px 14px;
  279. text-align: left;
  280. border-bottom: 1px solid #e2e8f0;
  281. white-space: nowrap;
  282. font-size: 13px;
  283. }
  284. .data-table tbody td {
  285. padding: 12px 14px;
  286. border-bottom: 1px solid #f1f5f9;
  287. color: #334155;
  288. }
  289. .data-table tbody tr:nth-child(even) {
  290. background: #fafbfc;
  291. }
  292. .data-table tbody tr:hover {
  293. background: #f0fdf4;
  294. }
  295. /* ===== Card ===== */
  296. .info-card {
  297. background: #f8fafc;
  298. border: 1px solid #e2e8f0;
  299. border-radius: 10px;
  300. padding: 20px 24px;
  301. margin-bottom: 16px;
  302. }
  303. .info-card:last-child {
  304. margin-bottom: 0;
  305. }
  306. .info-card .card-title {
  307. font-size: 14px;
  308. font-weight: 600;
  309. color: #334155;
  310. margin-bottom: 16px;
  311. display: flex;
  312. align-items: center;
  313. gap: 8px;
  314. }
  315. .info-card .card-title::before {
  316. content: '';
  317. width: 3px;
  318. height: 14px;
  319. background: #10b981;
  320. border-radius: 1.5px;
  321. }
  322. /* ===== Payment Timeline ===== */
  323. .timeline {
  324. display: flex;
  325. align-items: flex-start;
  326. padding: 24px 12px 8px;
  327. position: relative;
  328. gap: 0;
  329. }
  330. .timeline-step {
  331. flex: 1;
  332. display: flex;
  333. flex-direction: column;
  334. align-items: center;
  335. position: relative;
  336. }
  337. .timeline-step .dot {
  338. width: 28px;
  339. height: 28px;
  340. border-radius: 50%;
  341. display: flex;
  342. align-items: center;
  343. justify-content: center;
  344. font-size: 13px;
  345. font-weight: 600;
  346. z-index: 2;
  347. flex-shrink: 0;
  348. }
  349. .timeline-step .dot.done {
  350. background: #10b981;
  351. color: #fff;
  352. }
  353. .timeline-step .dot.pending {
  354. background: #fff;
  355. border: 2px solid #d1d5db;
  356. color: #9ca3af;
  357. }
  358. .timeline-step .dot.current {
  359. background: #fff;
  360. border: 2px solid #f59e0b;
  361. color: #d97706;
  362. }
  363. .timeline-step .line {
  364. position: absolute;
  365. top: 14px;
  366. left: calc(50% + 14px);
  367. right: calc(-50% + 14px);
  368. height: 2px;
  369. background: #e2e8f0;
  370. z-index: 1;
  371. }
  372. .timeline-step .line.done {
  373. background: #10b981;
  374. }
  375. .timeline-step:last-child .line {
  376. display: none;
  377. }
  378. .timeline-step .step-label {
  379. margin-top: 10px;
  380. font-size: 12px;
  381. color: #64748b;
  382. text-align: center;
  383. max-width: 100px;
  384. }
  385. .timeline-step .step-amount {
  386. font-size: 13px;
  387. font-weight: 600;
  388. color: #1e293b;
  389. margin-top: 4px;
  390. }
  391. .timeline-step .step-date {
  392. font-size: 11px;
  393. color: #94a3b8;
  394. margin-top: 2px;
  395. }
  396. /* ===== Payment Card Status Bar ===== */
  397. .payment-status-bar {
  398. display: flex;
  399. align-items: center;
  400. justify-content: space-between;
  401. padding: 10px 16px;
  402. border-radius: 8px;
  403. margin-bottom: 12px;
  404. }
  405. .payment-status-bar.paid {
  406. background: #ecfdf5;
  407. border: 1px solid #a7f3d0;
  408. }
  409. .payment-status-bar.unpaid {
  410. background: #fffbeb;
  411. border: 1px solid #fde68a;
  412. }
  413. .payment-status-bar .amount {
  414. font-size: 20px;
  415. font-weight: 700;
  416. color: #059669;
  417. }
  418. .payment-status-bar.unpaid .amount {
  419. color: #d97706;
  420. }
  421. /* ===== Note / Remark Box ===== */
  422. .remark-box {
  423. background: #f8fafc;
  424. border: 1px solid #e2e8f0;
  425. border-left: 3px solid #10b981;
  426. border-radius: 6px;
  427. padding: 14px 18px;
  428. color: #475569;
  429. font-size: 13px;
  430. line-height: 1.7;
  431. }
  432. /* ===== Dialog Footer ===== */
  433. .dialog-footer {
  434. display: flex;
  435. align-items: center;
  436. justify-content: flex-end;
  437. padding: 16px 32px;
  438. border-top: 1px solid #e2e8f0;
  439. flex-shrink: 0;
  440. }
  441. .btn-close {
  442. padding: 9px 28px;
  443. border: 1px solid #d1d5db;
  444. background: #fff;
  445. border-radius: 8px;
  446. font-size: 14px;
  447. color: #475569;
  448. cursor: pointer;
  449. transition: all 0.2s;
  450. }
  451. .btn-close:hover {
  452. border-color: #10b981;
  453. color: #10b981;
  454. background: #ecfdf5;
  455. }
  456. /* ===== Responsive fallback ===== */
  457. @media (max-width: 1280px) {
  458. .dialog { width: 96vw; }
  459. }
  460. @media (max-width: 768px) {
  461. .kv-grid { grid-template-columns: repeat(2, 1fr); }
  462. .tab-bar { overflow-x: auto; }
  463. .tab-body { padding: 0; }
  464. }
  465. </style>
  466. </head>
  467. <body>
  468. <div class="overlay">
  469. <div class="dialog">
  470. <!-- Header -->
  471. <div class="dialog-header">
  472. <h2>查看协议单 <span>— P2025-0501-001</span></h2>
  473. <button class="close-btn" title="关闭">✕</button>
  474. </div>
  475. <!-- Tab Bar -->
  476. <div class="tab-bar">
  477. <div class="tab-item active" data-tab="basic">基本信息</div>
  478. <div class="tab-item" data-tab="customer">客户信息</div>
  479. <div class="tab-item" data-tab="collect">采集信息</div>
  480. <div class="tab-item" data-tab="sample">样本及运输</div>
  481. <div class="tab-item" data-tab="payment">缴费信息</div>
  482. <div class="tab-item" data-tab="audit">审核记录</div>
  483. </div>
  484. <!-- Tab Body -->
  485. <div class="tab-body">
  486. <!-- ==================== 基本信息 ==================== -->
  487. <div class="tab-panel active" id="tab-basic">
  488. <div class="section-title"><span>协议基本信息</span></div>
  489. <div class="kv-grid">
  490. <div class="kv-item">
  491. <span class="label">协议号</span>
  492. <span class="value">P2025-0501-001</span>
  493. </div>
  494. <div class="kv-item">
  495. <span class="label">协议状态</span>
  496. <span class="value"><span class="badge green">● 生效中</span></span>
  497. </div>
  498. <div class="kv-item">
  499. <span class="label">登记日期</span>
  500. <span class="value">2025-05-10</span>
  501. </div>
  502. <div class="kv-item">
  503. <span class="label">采集专员</span>
  504. <span class="value">李明</span>
  505. </div>
  506. <div class="kv-item">
  507. <span class="label">创建时间</span>
  508. <span class="value">2025-05-10 14:30:22</span>
  509. </div>
  510. <div class="kv-item">
  511. <span class="label">更新时间</span>
  512. <span class="value">2025-05-10 15:12:08</span>
  513. </div>
  514. <div class="kv-item full-width">
  515. <span class="label">协议附件</span>
  516. <div class="file-list">
  517. <div class="file-thumb"><span class="icon">📄</span> 身份证正面.jpg</div>
  518. <div class="file-thumb"><span class="icon">📄</span> 身份证反面.jpg</div>
  519. <div class="file-thumb"><span class="icon">📑</span> 协议书.pdf</div>
  520. </div>
  521. </div>
  522. <div class="kv-item full-width">
  523. <span class="label">备注</span>
  524. <div class="remark-box">客户要求加急处理,已与采集专员沟通确认。母亲体质特殊需注意采集方式,采集时需由资深医护操作。已安排专人跟踪整个采集流程。</div>
  525. </div>
  526. </div>
  527. </div>
  528. <!-- ==================== 客户信息 ==================== -->
  529. <div class="tab-panel" id="tab-customer">
  530. <!-- 母亲信息 -->
  531. <div class="sub-section">
  532. <div class="sub-section-header"><span>母亲信息</span></div>
  533. <div class="kv-grid">
  534. <div class="kv-item">
  535. <span class="label">关联客户</span>
  536. <span class="value" style="color:#94a3b8;">—</span>
  537. </div>
  538. <div class="kv-item">
  539. <span class="label">姓名</span>
  540. <span class="value">王美丽</span>
  541. </div>
  542. <div class="kv-item">
  543. <span class="label">电话</span>
  544. <span class="value">138****5678</span>
  545. </div>
  546. <div class="kv-item">
  547. <span class="label">身份证号</span>
  548. <span class="value">3401****1234</span>
  549. </div>
  550. <div class="kv-item">
  551. <span class="label">出生年月</span>
  552. <span class="value">1992-06</span>
  553. </div>
  554. <div class="kv-item">
  555. <span class="label">民族</span>
  556. <span class="value">汉族</span>
  557. </div>
  558. <div class="kv-item full-width">
  559. <span class="label">住址</span>
  560. <span class="value">安徽省合肥市蜀山区望江西路XX小区X栋X单元XXX室</span>
  561. </div>
  562. </div>
  563. </div>
  564. <hr class="sub-section-divider">
  565. <!-- 父亲信息 -->
  566. <div class="sub-section">
  567. <div class="sub-section-header"><span>父亲信息</span></div>
  568. <div class="kv-grid">
  569. <div class="kv-item">
  570. <span class="label">姓名</span>
  571. <span class="value">张建国</span>
  572. </div>
  573. <div class="kv-item">
  574. <span class="label">电话</span>
  575. <span class="value">139****8901</span>
  576. </div>
  577. <div class="kv-item">
  578. <span class="label">身份证号</span>
  579. <span class="value">3401****5678</span>
  580. </div>
  581. </div>
  582. </div>
  583. <hr class="sub-section-divider">
  584. <!-- 新生儿信息 -->
  585. <div class="sub-section">
  586. <div class="sub-section-header"><span>新生儿信息</span></div>
  587. <div class="kv-grid">
  588. <div class="kv-item">
  589. <span class="label">姓名</span>
  590. <span class="value">张小明</span>
  591. </div>
  592. <div class="kv-item">
  593. <span class="label">身份证号</span>
  594. <span class="value" style="color:#94a3b8;">—</span>
  595. </div>
  596. <div class="kv-item">
  597. <span class="label">性别</span>
  598. <span class="value">男</span>
  599. </div>
  600. <div class="kv-item">
  601. <span class="label">分娩时间</span>
  602. <span class="value">2025-05-08 06:30</span>
  603. </div>
  604. <div class="kv-item">
  605. <span class="label">分娩方式</span>
  606. <span class="value">剖宫产</span>
  607. </div>
  608. <div class="kv-item">
  609. <span class="label">胎次</span>
  610. <span class="value">1</span>
  611. </div>
  612. <div class="kv-item">
  613. <span class="label">体重</span>
  614. <span class="value">3250g</span>
  615. </div>
  616. <div class="kv-item">
  617. <span class="label">评分 1min</span>
  618. <span class="value">9</span>
  619. </div>
  620. <div class="kv-item">
  621. <span class="label">评分 5min</span>
  622. <span class="value">10</span>
  623. </div>
  624. </div>
  625. </div>
  626. </div>
  627. <!-- ==================== 采集信息 ==================== -->
  628. <div class="tab-panel" id="tab-collect">
  629. <div class="section-title"><span>采集信息</span></div>
  630. <div class="kv-grid">
  631. <div class="kv-item">
  632. <span class="label">采集地区</span>
  633. <span class="value">华东地区</span>
  634. </div>
  635. <div class="kv-item">
  636. <span class="label">采集医院</span>
  637. <span class="value">合肥市第一人民医院</span>
  638. </div>
  639. <div class="kv-item">
  640. <span class="label">采集医护</span>
  641. <span class="value">陈护士</span>
  642. </div>
  643. <div class="kv-item">
  644. <span class="label">销售人员</span>
  645. <span class="value">赵经理</span>
  646. </div>
  647. <div class="kv-item">
  648. <span class="label">样本采集时间</span>
  649. <span class="value">2025-05-08 07:15:00</span>
  650. </div>
  651. <div class="kv-item">
  652. <span class="label">母血采集时间</span>
  653. <span class="value">2025-05-08 07:20:00</span>
  654. </div>
  655. <div class="kv-item full-width">
  656. <span class="label">采集备注</span>
  657. <div class="remark-box">新生儿体重3250g,评分正常。采集过程顺利,母血同步采集完毕,样本已做好标识并移交运输环节。</div>
  658. </div>
  659. </div>
  660. <div style="margin-top: 28px;">
  661. <div class="section-title"><span>采集现场照片</span></div>
  662. <div class="file-list">
  663. <div class="file-thumb"><span class="icon">🖼️</span> 采集现场_01.jpg</div>
  664. <div class="file-thumb"><span class="icon">🖼️</span> 采集现场_02.jpg</div>
  665. <div class="file-thumb"><span class="icon">🖼️</span> 样本标识.jpg</div>
  666. </div>
  667. </div>
  668. </div>
  669. <!-- ==================== 样本及运输 ==================== -->
  670. <div class="tab-panel" id="tab-sample">
  671. <div class="section-title"><span>样本及运输信息</span></div>
  672. <table class="data-table">
  673. <thead>
  674. <tr>
  675. <th>样本类型</th>
  676. <th>样本编码</th>
  677. <th>采集量</th>
  678. <th>单位</th>
  679. <th>价格</th>
  680. <th>存储年限</th>
  681. <th>样本状态</th>
  682. <th>运输类型</th>
  683. <th>目的站点</th>
  684. <th>预计到达</th>
  685. <th>快递/携带</th>
  686. <th>备注</th>
  687. </tr>
  688. </thead>
  689. <tbody>
  690. <tr>
  691. <td>脐带血造血干细胞</td>
  692. <td>CB-20250508-001</td>
  693. <td>120</td>
  694. <td>ml</td>
  695. <td>¥20,000</td>
  696. <td>20年</td>
  697. <td><span class="badge green">已入库</span></td>
  698. <td>冷链快递</td>
  699. <td>上海实验室</td>
  700. <td>2025-05-09</td>
  701. <td>顺丰冷链</td>
  702. <td>温度正常</td>
  703. </tr>
  704. <tr>
  705. <td>脐带组织</td>
  706. <td>CT-20250508-001</td>
  707. <td>15</td>
  708. <td>cm</td>
  709. <td>¥15,000</td>
  710. <td>20年</td>
  711. <td><span class="badge green">已入库</span></td>
  712. <td>冷链快递</td>
  713. <td>上海实验室</td>
  714. <td>2025-05-09</td>
  715. <td>顺丰冷链</td>
  716. <td>—</td>
  717. </tr>
  718. <tr>
  719. <td>胎盘干细胞</td>
  720. <td>PS-20250508-001</td>
  721. <td>80</td>
  722. <td>g</td>
  723. <td>¥15,000</td>
  724. <td>20年</td>
  725. <td><span class="badge blue">运输中</span></td>
  726. <td>专人携带</td>
  727. <td>北京实验室</td>
  728. <td>2025-05-10</td>
  729. <td>专人</td>
  730. <td>加急处理</td>
  731. </tr>
  732. </tbody>
  733. </table>
  734. <div style="margin-top: 24px;">
  735. <div class="section-title"><span>运输温度记录</span></div>
  736. <div class="kv-grid">
  737. <div class="kv-item">
  738. <span class="label">启运温度</span>
  739. <span class="value">2°C ~ 8°C</span>
  740. </div>
  741. <div class="kv-item">
  742. <span class="label">运输方式</span>
  743. <span class="value">冷链专用箱</span>
  744. </div>
  745. <div class="kv-item">
  746. <span class="label">预计全程温控</span>
  747. <span class="value">≤ 24 小时</span>
  748. </div>
  749. </div>
  750. </div>
  751. </div>
  752. <!-- ==================== 缴费信息 ==================== -->
  753. <div class="tab-panel" id="tab-payment">
  754. <div class="section-title"><span>缴费概览</span></div>
  755. <!-- 主缴费卡片 -->
  756. <div class="info-card">
  757. <div class="card-title">缴费主信息</div>
  758. <div class="kv-grid">
  759. <div class="kv-item">
  760. <span class="label">缴费模式</span>
  761. <span class="value">分期付款</span>
  762. </div>
  763. <div class="kv-item">
  764. <span class="label">合同金额</span>
  765. <span class="value" style="color:#059669; font-size:18px; font-weight:700;">¥50,000</span>
  766. </div>
  767. <div class="kv-item">
  768. <span class="label">分期期数</span>
  769. <span class="value">3 期</span>
  770. </div>
  771. <div class="kv-item">
  772. <span class="label">每期间隔</span>
  773. <span class="value">6 月</span>
  774. </div>
  775. <div class="kv-item">
  776. <span class="label">已缴金额</span>
  777. <span class="value" style="color:#10b981; font-weight:600;">¥16,667</span>
  778. </div>
  779. <div class="kv-item">
  780. <span class="label">待缴金额</span>
  781. <span class="value" style="color:#d97706; font-weight:600;">¥33,333</span>
  782. </div>
  783. </div>
  784. </div>
  785. <!-- 缴费进度条 -->
  786. <div style="margin: 24px 0;">
  787. <div class="section-title"><span>缴费进度</span></div>
  788. <div class="timeline">
  789. <div class="timeline-step">
  790. <div class="dot done">✓</div>
  791. <div class="line done"></div>
  792. <div class="step-label">第一期</div>
  793. <div class="step-amount">¥16,667</div>
  794. <div class="step-date">2025-05-10</div>
  795. </div>
  796. <div class="timeline-step">
  797. <div class="dot current">2</div>
  798. <div class="line"></div>
  799. <div class="step-label">第二期</div>
  800. <div class="step-amount">¥16,667</div>
  801. <div class="step-date">2025-11-08</div>
  802. </div>
  803. <div class="timeline-step">
  804. <div class="dot pending">3</div>
  805. <div class="step-label">第三期</div>
  806. <div class="step-amount">¥16,666</div>
  807. <div class="step-date">2026-05-08</div>
  808. </div>
  809. </div>
  810. </div>
  811. <div class="section-title"><span>缴费明细</span></div>
  812. <!-- 缴费明细 Card 1 -->
  813. <div class="info-card">
  814. <div class="payment-status-bar paid">
  815. <div>
  816. <span style="font-size:13px; color:#64748b;">第一期 · 微信转账</span>
  817. </div>
  818. <div class="amount">¥16,667</div>
  819. <span class="badge green">已缴费</span>
  820. </div>
  821. <div class="kv-grid">
  822. <div class="kv-item">
  823. <span class="label">缴费时间</span>
  824. <span class="value">2025-05-10 16:20:35</span>
  825. </div>
  826. <div class="kv-item">
  827. <span class="label">缴费方式</span>
  828. <span class="value">微信转账</span>
  829. </div>
  830. <div class="kv-item">
  831. <span class="label">转账凭证</span>
  832. <div class="file-list" style="margin-top:2px;">
  833. <div class="file-thumb"><span class="icon">📄</span> 微信转账截图.jpg</div>
  834. <div class="file-thumb"><span class="icon">📄</span> 收据.jpg</div>
  835. </div>
  836. </div>
  837. </div>
  838. </div>
  839. <!-- 缴费明细 Card 2 -->
  840. <div class="info-card">
  841. <div class="payment-status-bar unpaid">
  842. <div>
  843. <span style="font-size:13px; color:#64748b;">第二期 · 待缴费</span>
  844. </div>
  845. <div class="amount">¥16,667</div>
  846. <span class="badge yellow">待缴费</span>
  847. </div>
  848. <div class="kv-grid">
  849. <div class="kv-item">
  850. <span class="label">应缴费时间</span>
  851. <span class="value">2025-11-08</span>
  852. </div>
  853. <div class="kv-item">
  854. <span class="label">缴费状态</span>
  855. <span class="value"><span class="badge yellow">待缴费</span></span>
  856. </div>
  857. <div class="kv-item">
  858. <span class="label">距缴费日</span>
  859. <span class="value">剩余 182 天</span>
  860. </div>
  861. </div>
  862. </div>
  863. </div>
  864. <!-- ==================== 审核记录 ==================== -->
  865. <div class="tab-panel" id="tab-audit">
  866. <div class="section-title"><span>审核记录</span></div>
  867. <table class="data-table">
  868. <thead>
  869. <tr>
  870. <th style="width:60px;">序号</th>
  871. <th>审核时间</th>
  872. <th>审核状态</th>
  873. <th>审核备注</th>
  874. <th>审核人</th>
  875. </tr>
  876. </thead>
  877. <tbody>
  878. <tr>
  879. <td>1</td>
  880. <td>2025-05-10 14:35:12</td>
  881. <td><span class="badge green">审核通过</span></td>
  882. <td>资料齐全,信息核实无误,同意通过。</td>
  883. <td>王主管</td>
  884. </tr>
  885. <tr>
  886. <td>2</td>
  887. <td>2025-05-10 10:22:45</td>
  888. <td><span class="badge red">审核退回</span></td>
  889. <td>新生儿分娩方式字段未填写,请补充完善后重新提交。</td>
  890. <td>王主管</td>
  891. </tr>
  892. </tbody>
  893. </table>
  894. <div style="margin-top: 28px;">
  895. <div class="section-title"><span>审核流程</span></div>
  896. <div class="timeline">
  897. <div class="timeline-step">
  898. <div class="dot done">✓</div>
  899. <div class="line done"></div>
  900. <div class="step-label">提交审核</div>
  901. <div class="step-date">05-10 09:15</div>
  902. </div>
  903. <div class="timeline-step">
  904. <div class="dot done" style="background:#ef4444;">✗</div>
  905. <div class="line done"></div>
  906. <div class="step-label">审核退回</div>
  907. <div class="step-date">05-10 10:22</div>
  908. </div>
  909. <div class="timeline-step">
  910. <div class="dot done">✓</div>
  911. <div class="line done"></div>
  912. <div class="step-label">重新提交</div>
  913. <div class="step-date">05-10 14:28</div>
  914. </div>
  915. <div class="timeline-step">
  916. <div class="dot done">✓</div>
  917. <div class="step-label">审核通过</div>
  918. <div class="step-date">05-10 14:35</div>
  919. </div>
  920. </div>
  921. </div>
  922. </div>
  923. </div><!-- /tab-body -->
  924. <!-- Footer -->
  925. <div class="dialog-footer">
  926. <button class="btn-close">关闭</button>
  927. </div>
  928. </div>
  929. </div>
  930. <script>
  931. // Tab switching
  932. const tabItems = document.querySelectorAll('.tab-item');
  933. const tabPanels = document.querySelectorAll('.tab-panel');
  934. tabItems.forEach(item => {
  935. item.addEventListener('click', () => {
  936. const target = item.dataset.tab;
  937. // Update tab bar
  938. tabItems.forEach(t => t.classList.remove('active'));
  939. item.classList.add('active');
  940. // Update panels
  941. tabPanels.forEach(p => p.classList.remove('active'));
  942. const panel = document.getElementById('tab-' + target);
  943. if (panel) {
  944. panel.classList.add('active');
  945. }
  946. });
  947. });
  948. </script>
  949. </body>
  950. </html>