demo-protocol-view-c.html 33 KB

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