Files
zkxw/web-admin/demo-protocol-view-a.html
T
2026-05-26 19:04:27 +08:00

1241 lines
35 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>采集协议单查看弹窗 — 方案A:卡片分区+背景色块</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
/* ===== Reset & Base ===== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family:
'Noto Sans SC',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;
background: #0f172a;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
color: #1e293b;
-webkit-font-smoothing: antialiased;
}
/* ===== Modal Overlay ===== */
.overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
animation: overlayIn 0.25s ease-out;
}
@keyframes overlayIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ===== Dialog Shell ===== */
.dialog {
width: 1200px;
max-height: 85vh;
background: #ffffff;
border-radius: 16px;
display: flex;
flex-direction: column;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05);
animation: dialogIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
@keyframes dialogIn {
from {
opacity: 0;
transform: translateY(24px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ===== Dialog Header ===== */
.dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 28px;
border-bottom: 1px solid #e2e8f0;
background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
flex-shrink: 0;
}
.dialog-title {
font-size: 18px;
font-weight: 600;
color: #1e293b;
display: flex;
align-items: center;
gap: 10px;
}
.dialog-title::before {
content: '';
display: inline-block;
width: 4px;
height: 20px;
background: linear-gradient(180deg, #10b981, #059669);
border-radius: 2px;
}
.dialog-title .protocol-id {
font-weight: 400;
color: #64748b;
font-size: 15px;
}
.close-btn {
width: 36px;
height: 36px;
border: none;
background: #f1f5f9;
border-radius: 10px;
font-size: 20px;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.close-btn:hover {
background: #fee2e2;
color: #ef4444;
transform: rotate(90deg);
}
/* ===== Dialog Body (scrollable) ===== */
.dialog-body {
flex: 1;
overflow-y: auto;
padding: 0;
scroll-behavior: smooth;
}
.dialog-body::-webkit-scrollbar {
width: 6px;
}
.dialog-body::-webkit-scrollbar-track {
background: transparent;
}
.dialog-body::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.dialog-body::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* ===== Sticky Tab Bar ===== */
.tab-bar {
position: sticky;
top: 0;
z-index: 10;
background: #ffffff;
padding: 16px 28px 0;
display: flex;
gap: 6px;
border-bottom: 1px solid #f1f5f9;
}
.tab-bar::after {
content: '';
position: absolute;
bottom: 0;
left: 28px;
right: 28px;
height: 1px;
background: #e2e8f0;
}
.tab-pill {
padding: 8px 18px;
border-radius: 8px 8px 0 0;
font-size: 13.5px;
font-weight: 500;
color: #64748b;
cursor: pointer;
transition: all 0.2s;
position: relative;
background: transparent;
border: 1px solid transparent;
border-bottom: none;
}
.tab-pill:hover {
color: #1e293b;
background: #f8fafc;
}
.tab-pill.active {
background: #ffffff;
color: #10b981;
font-weight: 600;
border-color: #e2e8f0;
box-shadow: 0 -2px 8px rgba(16, 185, 129, 0.08);
}
.tab-pill.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: #ffffff;
}
/* ===== Content Area ===== */
.content-area {
padding: 24px 28px 32px;
}
/* ===== Section ===== */
.section {
margin-bottom: 28px;
}
.section:last-child {
margin-bottom: 0;
}
.section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
padding-left: 14px;
position: relative;
}
.section-header::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 18px;
background: linear-gradient(180deg, #10b981, #059669);
border-radius: 2px;
}
.section-title {
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
/* ===== KV Grid ===== */
.kv-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.kv-item {
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 4px;
border-bottom: 1px solid #f1f5f9;
}
.kv-item:nth-child(3n + 1) {
padding-left: 0;
}
.kv-item:nth-child(3n) {
padding-right: 0;
}
.kv-item.span-full {
grid-column: 1 / -1;
padding-left: 0;
padding-right: 0;
}
.kv-label {
font-size: 12.5px;
color: #94a3b8;
font-weight: 400;
line-height: 1;
}
.kv-value {
font-size: 14px;
color: #1e293b;
font-weight: 500;
line-height: 1.5;
}
.kv-value.empty {
color: #cbd5e1;
}
/* ===== Status Badge ===== */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 12px;
border-radius: 20px;
font-size: 12.5px;
font-weight: 500;
}
.badge-green {
background: #ecfdf5;
color: #059669;
}
.badge-green::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
.badge-blue {
background: #eff6ff;
color: #2563eb;
}
.badge-orange {
background: #fff7ed;
color: #ea580c;
}
/* ===== Sub-card (Card-in-Card) ===== */
.sub-card {
border-radius: 12px;
padding: 20px;
margin-bottom: 14px;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.sub-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 12px 12px 0 0;
opacity: 0;
transition: opacity 0.25s;
}
.sub-card:hover::before {
opacity: 1;
}
.sub-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
.sub-card-green {
background: #f0fdf4;
border: 1px solid #dcfce7;
}
.sub-card-green::before {
background: linear-gradient(90deg, #10b981, #34d399);
}
.sub-card-gray {
background: #f8fafc;
border: 1px solid #f1f5f9;
}
.sub-card-gray::before {
background: linear-gradient(90deg, #64748b, #94a3b8);
}
.sub-card .card-title {
font-size: 13.5px;
font-weight: 600;
color: #475569;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 7px;
}
.card-title-icon {
width: 22px;
height: 22px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #ffffff;
flex-shrink: 0;
}
.icon-mom {
background: linear-gradient(135deg, #f472b6, #ec4899);
}
.icon-dad {
background: linear-gradient(135deg, #60a5fa, #3b82f6);
}
.icon-baby {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
/* ===== Wrap Card (for sections with bg) ===== */
.wrap-card {
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 12px;
padding: 20px;
}
/* ===== Attachment Thumbnails ===== */
.attachment-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #f1f5f9;
}
.attachment-label {
font-size: 12.5px;
color: #94a3b8;
margin-bottom: 8px;
}
.att-card {
width: 100px;
height: 80px;
border-radius: 8px;
border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: #ffffff;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.att-card:hover {
border-color: #10b981;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
transform: translateY(-2px);
}
.att-icon {
font-size: 24px;
line-height: 1;
}
.att-name {
font-size: 10px;
color: #64748b;
text-align: center;
line-height: 1.2;
max-width: 88px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ===== Table ===== */
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13.5px;
}
.data-table thead th {
background: #f8fafc;
color: #64748b;
font-weight: 500;
font-size: 12.5px;
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
white-space: nowrap;
}
.data-table thead th:first-child {
border-radius: 8px 0 0 0;
}
.data-table thead th:last-child {
border-radius: 0 8px 0 0;
}
.data-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid #f1f5f9;
color: #1e293b;
vertical-align: middle;
}
.data-table tbody tr {
transition: background 0.15s;
}
.data-table tbody tr:hover {
background: #f0fdf4;
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
.table-wrap {
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
/* ===== Payment Section ===== */
.payment-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 18px;
}
.pay-stat {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 16px;
text-align: center;
transition: all 0.2s;
}
.pay-stat:hover {
border-color: #10b981;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}
.pay-stat-label {
font-size: 12px;
color: #94a3b8;
margin-bottom: 6px;
}
.pay-stat-value {
font-size: 18px;
font-weight: 600;
color: #1e293b;
}
.pay-stat-value.highlight {
color: #10b981;
}
.payment-detail-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 18px 20px;
margin-bottom: 18px;
}
.payment-detail-title {
font-size: 13px;
font-weight: 600;
color: #475569;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.payment-detail-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
.payment-detail-grid .kv-item {
border-bottom: none;
padding: 6px 12px;
}
.payment-detail-grid .kv-item:nth-child(5n + 1) {
padding-left: 0;
}
.payment-detail-grid .kv-item:nth-child(5n) {
padding-right: 0;
}
/* ===== Timeline / Flow Track ===== */
.flow-track {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 20px 40px;
position: relative;
}
.flow-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
flex: 0 0 auto;
}
.flow-circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
transition: all 0.3s;
}
.flow-circle.done {
background: linear-gradient(135deg, #10b981, #059669);
color: #ffffff;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.flow-circle.current {
background: #ffffff;
border: 2px solid #10b981;
color: #10b981;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
animation: currentPulse 2s infinite;
}
@keyframes currentPulse {
0%,
100% {
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
50% {
box-shadow: 0 2px 16px rgba(16, 185, 129, 0.3);
}
}
.flow-circle.pending {
background: #f8fafc;
border: 2px solid #e2e8f0;
color: #94a3b8;
}
.flow-label {
font-size: 12.5px;
color: #64748b;
font-weight: 500;
white-space: nowrap;
}
.flow-label.done {
color: #059669;
}
.flow-label.current {
color: #10b981;
font-weight: 600;
}
.flow-connector {
width: 80px;
height: 2px;
background: #e2e8f0;
position: relative;
flex-shrink: 0;
}
.flow-connector.done {
background: linear-gradient(90deg, #10b981, #34d399);
}
.flow-connector.done::after {
content: '';
position: absolute;
right: -3px;
top: -3px;
width: 8px;
height: 8px;
border-top: 2px solid #10b981;
border-right: 2px solid #10b981;
transform: rotate(45deg);
}
/* ===== Dialog Footer ===== */
.dialog-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 16px 28px;
border-top: 1px solid #e2e8f0;
background: #fafafa;
flex-shrink: 0;
}
.btn-close {
padding: 9px 32px;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #475569;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.btn-close:hover {
border-color: #10b981;
color: #10b981;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}
/* ===== Remark Block ===== */
.remark-block {
background: #fffbeb;
border: 1px solid #fef3c7;
border-radius: 8px;
padding: 12px 16px;
margin-top: 14px;
font-size: 13px;
color: #92400e;
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: 8px;
}
.remark-icon {
font-size: 15px;
flex-shrink: 0;
margin-top: 1px;
}
/* ===== Utility ===== */
.price {
color: #059669;
font-weight: 600;
}
.muted {
color: #94a3b8;
}
</style>
</head>
<body>
<div class="overlay">
<div class="dialog">
<!-- Header -->
<div class="dialog-header">
<div class="dialog-title">
查看协议单
<span class="protocol-id">P2025-0501-001</span>
</div>
<button class="close-btn" title="关闭">×</button>
</div>
<!-- Body -->
<div class="dialog-body">
<!-- Sticky Tab Bar -->
<div class="tab-bar">
<div class="tab-pill active">基本信息</div>
<div class="tab-pill">客户信息</div>
<div class="tab-pill">采集信息</div>
<div class="tab-pill">样本及运输信息</div>
<div class="tab-pill">缴费信息</div>
<div class="tab-pill">审核记录</div>
</div>
<div class="content-area">
<!-- ===================== 基本信息 ===================== -->
<div class="section">
<div class="section-header">
<span class="section-title">基本信息</span>
</div>
<div class="kv-grid">
<div class="kv-item">
<span class="kv-label">协议号</span>
<span class="kv-value">P2025-0501-001</span>
</div>
<div class="kv-item">
<span class="kv-label">协议状态</span>
<span class="kv-value"><span class="badge badge-green">生效中</span></span>
</div>
<div class="kv-item">
<span class="kv-label">登记日期</span>
<span class="kv-value">2025-05-10</span>
</div>
<div class="kv-item">
<span class="kv-label">采集专员</span>
<span class="kv-value">李明</span>
</div>
<div class="kv-item">
<span class="kv-label">创建时间</span>
<span class="kv-value">2025-05-10 14:30:22</span>
</div>
<div class="kv-item">
<span class="kv-label">协议附件</span>
<span class="kv-value">
<div
class="attachment-row"
style="margin-top: 0; padding-top: 0; border-top: none"
>
<div class="att-card">
<span class="att-icon">🖼️</span>
<span class="att-name">身份证正面.jpg</span>
</div>
<div class="att-card">
<span class="att-icon">🖼️</span>
<span class="att-name">身份证反面.jpg</span>
</div>
<div class="att-card">
<span class="att-icon">📄</span>
<span class="att-name">协议书.pdf</span>
</div>
</div>
</span>
</div>
<div class="kv-item span-full">
<span class="kv-label">备注</span>
<div class="remark-block">
<span class="remark-icon">💡</span>
<span>客户要求加急处理,已与采集专员沟通确认</span>
</div>
</div>
</div>
</div>
<!-- ===================== 客户信息 ===================== -->
<div class="section">
<div class="section-header">
<span class="section-title">客户信息</span>
</div>
<!-- 母亲信息 -->
<div class="sub-card sub-card-green">
<div class="card-title">
<span class="card-title-icon icon-mom">♀</span>
母亲信息
</div>
<div class="kv-grid">
<div class="kv-item">
<span class="kv-label">关联客户</span>
<span class="kv-value empty">—</span>
</div>
<div class="kv-item">
<span class="kv-label">母亲姓名</span>
<span class="kv-value">王美丽</span>
</div>
<div class="kv-item">
<span class="kv-label">母亲联系电话</span>
<span class="kv-value">138****5678</span>
</div>
<div class="kv-item">
<span class="kv-label">母亲身份证号</span>
<span class="kv-value">3401**********1234</span>
</div>
<div class="kv-item">
<span class="kv-label">母亲出生年月</span>
<span class="kv-value">1992-06</span>
</div>
<div class="kv-item">
<span class="kv-label">母亲民族</span>
<span class="kv-value">汉族</span>
</div>
<div class="kv-item span-full">
<span class="kv-label">母亲家庭住址</span>
<span class="kv-value">安徽省合肥市蜀山区望江西路XX小区X栋X单元XXX室</span>
</div>
</div>
</div>
<!-- 父亲信息 -->
<div class="sub-card sub-card-gray">
<div class="card-title">
<span class="card-title-icon icon-dad">♂</span>
父亲信息
</div>
<div class="kv-grid">
<div class="kv-item">
<span class="kv-label">父亲姓名</span>
<span class="kv-value">张建国</span>
</div>
<div class="kv-item">
<span class="kv-label">父亲电话</span>
<span class="kv-value">139****8901</span>
</div>
<div class="kv-item">
<span class="kv-label">父亲身份证号</span>
<span class="kv-value">3401**********5678</span>
</div>
</div>
</div>
<!-- 新生儿信息 -->
<div class="sub-card sub-card-green">
<div class="card-title">
<span class="card-title-icon icon-baby">👶</span>
新生儿信息
</div>
<div class="kv-grid">
<div class="kv-item">
<span class="kv-label">新生儿姓名</span>
<span class="kv-value">张小明</span>
</div>
<div class="kv-item">
<span class="kv-label">新生儿身份证</span>
<span class="kv-value empty">—</span>
</div>
<div class="kv-item">
<span class="kv-label">新生儿分娩时间</span>
<span class="kv-value">2025-05-08 06:30</span>
</div>
<div class="kv-item">
<span class="kv-label">新生儿性别</span>
<span class="kv-value">男</span>
</div>
<div class="kv-item">
<span class="kv-label">分娩方式</span>
<span class="kv-value">剖宫产</span>
</div>
<div class="kv-item">
<span class="kv-label">胎次</span>
<span class="kv-value">1</span>
</div>
<div class="kv-item">
<span class="kv-label">新生儿体重(克)</span>
<span class="kv-value">3250</span>
</div>
<div class="kv-item">
<span class="kv-label">新生儿评分1分钟</span>
<span class="kv-value">9</span>
</div>
<div class="kv-item">
<span class="kv-label">新生儿评分5分钟</span>
<span class="kv-value">10</span>
</div>
</div>
</div>
</div>
<!-- ===================== 采集信息 ===================== -->
<div class="section">
<div class="section-header">
<span class="section-title">采集信息</span>
</div>
<div class="wrap-card">
<div class="kv-grid">
<div class="kv-item">
<span class="kv-label">采集地区</span>
<span class="kv-value">华东地区</span>
</div>
<div class="kv-item">
<span class="kv-label">采集医院</span>
<span class="kv-value">合肥市第一人民医院</span>
</div>
<div class="kv-item">
<span class="kv-label">采集医护</span>
<span class="kv-value">陈护士</span>
</div>
<div class="kv-item">
<span class="kv-label">销售人员</span>
<span class="kv-value">赵经理</span>
</div>
<div class="kv-item">
<span class="kv-label">样本采集时间</span>
<span class="kv-value">2025-05-08 07:15:00</span>
</div>
<div class="kv-item">
<span class="kv-label">母血采集时间</span>
<span class="kv-value">2025-05-08 07:20:00</span>
</div>
</div>
</div>
</div>
<!-- ===================== 样本及运输信息 ===================== -->
<div class="section">
<div class="section-header">
<span class="section-title">样本及运输信息</span>
</div>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>样本类型</th>
<th>样本编码</th>
<th>采集量</th>
<th>单位</th>
<th>价格</th>
<th>存储年限</th>
<th>样本状态</th>
<th>运输类型</th>
<th>目的站点</th>
</tr>
</thead>
<tbody>
<tr>
<td>脐带血造血干细胞</td>
<td style="font-family: monospace; font-size: 13px">SC20250508001</td>
<td>100</td>
<td>ml</td>
<td class="price">¥25,000</td>
<td>20年</td>
<td><span class="badge badge-green">已入库</span></td>
<td>快递运输</td>
<td>合肥站</td>
</tr>
<tr>
<td>脐带间充质干细胞</td>
<td style="font-family: monospace; font-size: 13px">SC20250508002</td>
<td>1</td>
<td>份</td>
<td class="price">¥15,000</td>
<td>20年</td>
<td><span class="badge badge-green">已入库</span></td>
<td>快递运输</td>
<td>合肥站</td>
</tr>
<tr>
<td>胎盘干细胞</td>
<td style="font-family: monospace; font-size: 13px">SC20250508003</td>
<td>1</td>
<td>份</td>
<td class="price">¥8,000</td>
<td>10年</td>
<td><span class="badge badge-blue">运输中</span></td>
<td>专人运输</td>
<td>合肥站</td>
</tr>
<tr>
<td>母血样本</td>
<td style="font-family: monospace; font-size: 13px">SC20250508004</td>
<td>10</td>
<td>ml</td>
<td class="price">¥500</td>
<td>5年</td>
<td><span class="badge badge-green">已入库</span></td>
<td>快递运输</td>
<td>合肥站</td>
</tr>
<tr>
<td>脐带血常规检测</td>
<td style="font-family: monospace; font-size: 13px">SC20250508005</td>
<td>—</td>
<td>—</td>
<td class="price">¥1,500</td>
<td>—</td>
<td><span class="badge badge-orange">待检测</span></td>
<td>—</td>
<td>—</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ===================== 缴费信息 ===================== -->
<div class="section">
<div class="section-header">
<span class="section-title">缴费信息</span>
</div>
<!-- Summary Stats -->
<div class="payment-summary">
<div class="pay-stat">
<div class="pay-stat-label">缴费模式</div>
<div class="pay-stat-value">分期</div>
</div>
<div class="pay-stat">
<div class="pay-stat-label">合同金额</div>
<div class="pay-stat-value highlight">¥50,000</div>
</div>
<div class="pay-stat">
<div class="pay-stat-label">分期期数</div>
<div class="pay-stat-value">3 期</div>
</div>
<div class="pay-stat">
<div class="pay-stat-label">每期间隔</div>
<div class="pay-stat-value">6 月</div>
</div>
</div>
<!-- Payment Detail Card -->
<div class="payment-detail-card">
<div class="payment-detail-title">
<span style="color: #10b981">●</span>
第 1 期缴费
</div>
<div class="payment-detail-grid">
<div class="kv-item">
<span class="kv-label">应缴费金额</span>
<span class="kv-value price">¥16,667</span>
</div>
<div class="kv-item">
<span class="kv-label">转账方式</span>
<span class="kv-value">微信</span>
</div>
<div class="kv-item">
<span class="kv-label">转账金额</span>
<span class="kv-value price">¥16,667</span>
</div>
<div class="kv-item">
<span class="kv-label">转账时间</span>
<span class="kv-value">2025-05-09</span>
</div>
<div class="kv-item">
<span class="kv-label">缴费状态</span>
<span class="kv-value"><span class="badge badge-green">已缴费</span></span>
</div>
</div>
</div>
<!-- Payment Flow Track -->
<div class="wrap-card">
<div
style="
text-align: center;
margin-bottom: 12px;
font-size: 13px;
color: #64748b;
font-weight: 500;
"
>缴费确认流程</div
>
<div class="flow-track">
<div class="flow-step">
<div class="flow-circle done">✓</div>
<div class="flow-label done">缴费确认</div>
</div>
<div class="flow-connector done"></div>
<div class="flow-step">
<div class="flow-circle current">2</div>
<div class="flow-label current">退费确认</div>
</div>
<div class="flow-connector"></div>
<div class="flow-step">
<div class="flow-circle pending">3</div>
<div class="flow-label">财务确认</div>
</div>
</div>
</div>
</div>
<!-- ===================== 审核记录 ===================== -->
<div class="section">
<div class="section-header">
<span class="section-title">审核记录</span>
</div>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th style="width: 60px">序号</th>
<th>审核时间</th>
<th>审核状态</th>
<th>审核备注</th>
<th>审核人</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center; color: #94a3b8">1</td>
<td>2025-05-10 15:20:00</td>
<td><span class="badge badge-green">审核通过</span></td>
<td>资料齐全,信息核对无误</td>
<td>张主管</td>
</tr>
<tr>
<td style="text-align: center; color: #94a3b8">2</td>
<td>2025-05-10 14:45:00</td>
<td><span class="badge badge-blue">已提交</span></td>
<td>采集专员提交协议单审核</td>
<td>李明</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="dialog-footer">
<button class="btn-close">关闭</button>
</div>
</div>
</div>
</body>
</html>