1651 lines
55 KiB
HTML
1651 lines
55 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>方案D:混合方案 — 采集协议单查看弹窗</title>
|
|
<style>
|
|
/* ── Reset & Base ── */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
body {
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
|
'Helvetica Neue', Arial, sans-serif;
|
|
color: #1e293b;
|
|
background: #e2e8f0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 40px 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ── Modal Overlay ── */
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.45);
|
|
backdrop-filter: none;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 32px 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ── Dialog Shell ── */
|
|
.dialog {
|
|
width: 1200px;
|
|
max-width: 98vw;
|
|
background: #f5f7fa;
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 20px 60px rgba(0, 0, 0, 0.15),
|
|
0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
margin: auto 0;
|
|
}
|
|
|
|
/* ── Dialog Header ── */
|
|
.dialog-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 28px;
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
color: #fff;
|
|
}
|
|
.dialog-header h2 {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
.dialog-header .protocol-id {
|
|
opacity: 0.85;
|
|
font-weight: 400;
|
|
margin-left: 8px;
|
|
}
|
|
.dialog-close {
|
|
width: 36px;
|
|
height: 36px;
|
|
border: none;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.2s;
|
|
}
|
|
.dialog-close:hover {
|
|
background: rgba(255, 255, 255, 0.32);
|
|
}
|
|
|
|
/* ── Dialog Body ── */
|
|
.dialog-body {
|
|
padding: 24px 28px;
|
|
overflow-y: auto;
|
|
max-height: calc(100vh - 160px);
|
|
flex: 1;
|
|
}
|
|
|
|
/* ── Dialog Footer ── */
|
|
.dialog-footer {
|
|
padding: 16px 28px;
|
|
background: #fff;
|
|
border-top: 1px solid #e2e8f0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.btn-close {
|
|
padding: 10px 32px;
|
|
background: #fff;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
color: #374151;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-close:hover {
|
|
border-color: #10b981;
|
|
color: #10b981;
|
|
background: #ecfdf5;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
LAYER 1: SUMMARY KPI STRIP
|
|
═══════════════════════════════════════════ */
|
|
.kpi-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.kpi-card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 18px 20px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
border-left: 3px solid #10b981;
|
|
transition:
|
|
transform 0.2s,
|
|
box-shadow 0.2s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.kpi-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.06), transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.kpi-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
|
|
}
|
|
.kpi-label {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
margin-bottom: 6px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.kpi-value {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
.kpi-value .status-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
.kpi-value .status-dot.active {
|
|
background: #10b981;
|
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
LAYER 2: SECTION CARDS
|
|
═══════════════════════════════════════════ */
|
|
.section-card {
|
|
border-radius: 12px;
|
|
padding: 22px 24px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
transition:
|
|
transform 0.2s,
|
|
box-shadow 0.2s;
|
|
position: relative;
|
|
}
|
|
.section-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
.section-card.bg-white {
|
|
background: #fff;
|
|
}
|
|
.section-card.bg-green {
|
|
background: #f0fdf4;
|
|
}
|
|
.section-card.bg-gray {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
/* Section Title */
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 18px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.section-title::before {
|
|
content: '';
|
|
width: 3px;
|
|
height: 18px;
|
|
background: #10b981;
|
|
border-radius: 2px;
|
|
margin-right: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
.section-title h3 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* ── Data Grid ── */
|
|
.data-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px 20px;
|
|
}
|
|
.data-grid.col-2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.data-item {
|
|
}
|
|
.data-label {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
margin-bottom: 3px;
|
|
}
|
|
.data-value {
|
|
font-size: 14px;
|
|
color: #1e293b;
|
|
font-weight: 500;
|
|
}
|
|
.data-value.full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* ── Attachment Row ── */
|
|
.attachment-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
padding-top: 14px;
|
|
border-top: 1px dashed #e2e8f0;
|
|
}
|
|
.attachment-label {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
flex-shrink: 0;
|
|
padding-top: 20px;
|
|
}
|
|
.attachment-thumb {
|
|
width: 72px;
|
|
height: 54px;
|
|
border-radius: 6px;
|
|
background: #f1f5f9;
|
|
border: 1px solid #e2e8f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: #94a3b8;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.attachment-thumb:hover {
|
|
border-color: #10b981;
|
|
}
|
|
.attachment-thumb svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke: #94a3b8;
|
|
fill: none;
|
|
}
|
|
.attachment-thumb .file-name {
|
|
position: absolute;
|
|
bottom: 3px;
|
|
font-size: 9px;
|
|
color: #64748b;
|
|
text-align: center;
|
|
width: 100%;
|
|
padding: 0 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* ── Remark ── */
|
|
.remark-row {
|
|
margin-top: 14px;
|
|
padding-top: 14px;
|
|
border-top: 1px dashed #e2e8f0;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
CLIENT INFO — SUB CARDS
|
|
═══════════════════════════════════════════ */
|
|
.client-sub-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
.client-sub-card {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 18px 20px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
transition:
|
|
transform 0.2s,
|
|
box-shadow 0.2s;
|
|
}
|
|
.client-sub-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
|
|
}
|
|
.sub-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 14px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
.sub-card-header .icon {
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
}
|
|
.sub-card-header h4 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
TABLE STYLES
|
|
═══════════════════════════════════════════ */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
font-size: 13px;
|
|
}
|
|
.data-table thead th {
|
|
background: #f8fafc;
|
|
color: #64748b;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
padding: 10px 14px;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
white-space: nowrap;
|
|
}
|
|
.data-table thead th:first-child {
|
|
border-radius: 6px 0 0 0;
|
|
}
|
|
.data-table thead th:last-child {
|
|
border-radius: 0 6px 0 0;
|
|
}
|
|
.data-table tbody td {
|
|
padding: 11px 14px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
color: #1e293b;
|
|
}
|
|
.data-table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.data-table tbody tr:hover td {
|
|
background: #f0fdf4;
|
|
}
|
|
|
|
/* ── Status Badges ── */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
.badge-green {
|
|
background: #ecfdf5;
|
|
color: #059669;
|
|
}
|
|
.badge-blue {
|
|
background: #eff6ff;
|
|
color: #2563eb;
|
|
}
|
|
.badge-amber {
|
|
background: #fffbeb;
|
|
color: #d97706;
|
|
}
|
|
.badge-gray {
|
|
background: #f1f5f9;
|
|
color: #64748b;
|
|
}
|
|
.badge-purple {
|
|
background: #faf5ff;
|
|
color: #7c3aed;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
PAYMENT SECTION
|
|
═══════════════════════════════════════════ */
|
|
.payment-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.payment-metric {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 12px 16px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
.payment-metric .pm-label {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
margin-bottom: 4px;
|
|
}
|
|
.payment-metric .pm-value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
}
|
|
.payment-metric .pm-value.amount {
|
|
color: #059669;
|
|
}
|
|
|
|
.payment-details {
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
.payment-detail-card {
|
|
flex: 1;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 14px 16px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
.pdc-title {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.pdc-title::before {
|
|
content: '';
|
|
width: 2px;
|
|
height: 12px;
|
|
background: #10b981;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* ── Timeline ── */
|
|
.payment-timeline {
|
|
margin-top: 16px;
|
|
padding-top: 14px;
|
|
border-top: 1px dashed #e2e8f0;
|
|
}
|
|
.timeline-title {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
.timeline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
position: relative;
|
|
}
|
|
.timeline-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
.timeline-dot {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
z-index: 1;
|
|
transition: transform 0.2s;
|
|
}
|
|
.timeline-dot.done {
|
|
background: #10b981;
|
|
color: #fff;
|
|
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
|
|
}
|
|
.timeline-dot.current {
|
|
background: #fff;
|
|
border: 2px solid #10b981;
|
|
color: #10b981;
|
|
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
|
|
}
|
|
.timeline-dot.pending {
|
|
background: #f1f5f9;
|
|
color: #94a3b8;
|
|
border: 2px solid #e2e8f0;
|
|
}
|
|
.timeline-label {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-top: 8px;
|
|
text-align: center;
|
|
max-width: 80px;
|
|
}
|
|
.timeline-label.done {
|
|
color: #059669;
|
|
font-weight: 600;
|
|
}
|
|
.timeline-connector {
|
|
position: absolute;
|
|
top: 14px;
|
|
height: 2px;
|
|
background: #e2e8f0;
|
|
z-index: 0;
|
|
}
|
|
.timeline-connector.done {
|
|
background: #10b981;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
AUDIT TABLE
|
|
═══════════════════════════════════════════ */
|
|
.audit-table .data-table tbody td {
|
|
padding: 9px 14px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
REFUND STYLES
|
|
═══════════════════════════════════════════ */
|
|
|
|
/* Red badge for 已退费 */
|
|
.badge-red {
|
|
background: #fef2f2;
|
|
color: #dc2626;
|
|
}
|
|
|
|
/* Refund amount text color */
|
|
.pm-value.refund {
|
|
color: #dc2626 !important;
|
|
}
|
|
|
|
/* Payment details: vertical stack for richer cards */
|
|
.payment-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
/* Refunded card — red left border */
|
|
.payment-detail-card.refunded {
|
|
border-left: 3px solid #dc2626;
|
|
border-color: #e2e8f0;
|
|
border-left-color: #dc2626;
|
|
}
|
|
|
|
/* Refund-pending card — amber left border */
|
|
.payment-detail-card.refund-pending {
|
|
border-left: 3px solid #d97706;
|
|
border-color: #e2e8f0;
|
|
border-left-color: #d97706;
|
|
}
|
|
|
|
/* Red accent bar on title */
|
|
.pdc-title.refunded::before {
|
|
background: #dc2626;
|
|
}
|
|
|
|
/* Amber accent bar on title */
|
|
.pdc-title.refund-pending::before {
|
|
background: #d97706;
|
|
}
|
|
|
|
/* Card header with badge */
|
|
.pdc-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
.pdc-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
.pdc-header-left::before {
|
|
content: '';
|
|
width: 2px;
|
|
height: 14px;
|
|
border-radius: 1px;
|
|
flex-shrink: 0;
|
|
}
|
|
.pdc-header-left.green::before {
|
|
background: #10b981;
|
|
}
|
|
.pdc-header-left.red::before {
|
|
background: #dc2626;
|
|
}
|
|
.pdc-header-left.amber::before {
|
|
background: #d97706;
|
|
}
|
|
.pdc-header-amount {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
margin-left: 4px;
|
|
}
|
|
.pdc-header-amount.green {
|
|
color: #059669;
|
|
}
|
|
.pdc-header-amount.red {
|
|
color: #dc2626;
|
|
}
|
|
.pdc-header-amount.amber {
|
|
color: #d97706;
|
|
}
|
|
|
|
/* Payment info row */
|
|
.pdc-info-row {
|
|
display: flex;
|
|
gap: 24px;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.pdc-info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.pdc-info-item .info-label {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
}
|
|
.pdc-info-item .info-value {
|
|
font-size: 13px;
|
|
color: #1e293b;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Mini flow track inside cards */
|
|
.mini-flow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
margin: 12px 0;
|
|
padding: 10px 14px;
|
|
background: #f8fafc;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
}
|
|
.mini-flow-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
flex: 1;
|
|
z-index: 1;
|
|
}
|
|
.mini-flow-dot {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
z-index: 1;
|
|
}
|
|
.mini-flow-dot.done {
|
|
background: #10b981;
|
|
color: #fff;
|
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
|
|
}
|
|
.mini-flow-dot.done-red {
|
|
background: #dc2626;
|
|
color: #fff;
|
|
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
|
|
}
|
|
.mini-flow-dot.current-amber {
|
|
background: #fff;
|
|
border: 2px solid #d97706;
|
|
color: #d97706;
|
|
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
|
|
animation: pulseAmber 2s ease-in-out infinite;
|
|
}
|
|
.mini-flow-dot.pending-gray {
|
|
background: #f1f5f9;
|
|
color: #94a3b8;
|
|
border: 2px solid #e2e8f0;
|
|
}
|
|
.mini-flow-label {
|
|
font-size: 10px;
|
|
margin-top: 6px;
|
|
text-align: center;
|
|
max-width: 80px;
|
|
line-height: 1.3;
|
|
}
|
|
.mini-flow-label.done {
|
|
color: #059669;
|
|
font-weight: 600;
|
|
}
|
|
.mini-flow-label.done-red {
|
|
color: #dc2626;
|
|
font-weight: 600;
|
|
}
|
|
.mini-flow-label.current-amber {
|
|
color: #d97706;
|
|
font-weight: 600;
|
|
}
|
|
.mini-flow-label.pending-gray {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
/* Mini flow connectors */
|
|
.mini-flow-connector {
|
|
position: absolute;
|
|
top: 22px;
|
|
height: 2px;
|
|
z-index: 0;
|
|
}
|
|
.mini-flow-connector.done {
|
|
background: #10b981;
|
|
}
|
|
.mini-flow-connector.done-red {
|
|
background: #dc2626;
|
|
}
|
|
.mini-flow-connector.current-amber {
|
|
background: #d97706;
|
|
}
|
|
.mini-flow-connector.pending-gray {
|
|
background: #e2e8f0;
|
|
}
|
|
|
|
/* Refund detail area — red or amber tint */
|
|
.refund-area {
|
|
margin-top: 12px;
|
|
padding: 14px 16px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.refund-area.red-tint {
|
|
background: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
.refund-area.amber-tint {
|
|
background: #fffbeb;
|
|
border: 1px solid #fde68a;
|
|
}
|
|
.refund-area-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
margin-bottom: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.refund-area-title.red {
|
|
color: #dc2626;
|
|
}
|
|
.refund-area-title.amber {
|
|
color: #d97706;
|
|
}
|
|
.refund-area-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px 20px;
|
|
}
|
|
.refund-area-grid .data-label {
|
|
font-size: 11px;
|
|
}
|
|
.refund-area-grid .data-value {
|
|
font-size: 13px;
|
|
}
|
|
.refund-area-grid .data-value.red {
|
|
color: #dc2626;
|
|
font-weight: 700;
|
|
}
|
|
.refund-area-grid .data-value.amber {
|
|
color: #d97706;
|
|
font-weight: 700;
|
|
}
|
|
.refund-area-grid .full-col {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* Refund attachments inside refund area */
|
|
.refund-attachments {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-end;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Finance confirmation area (green tint) */
|
|
.finance-area {
|
|
margin-top: 12px;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
background: #f0fdf4;
|
|
border: 1px solid #bbf7d0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.finance-area-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #059669;
|
|
margin-bottom: 2px;
|
|
}
|
|
.finance-area-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px 20px;
|
|
}
|
|
.finance-area-grid .data-label {
|
|
font-size: 11px;
|
|
}
|
|
.finance-area-grid .data-value {
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Timeline dot variants */
|
|
.timeline-dot.refund {
|
|
background: #dc2626;
|
|
color: #fff;
|
|
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
|
|
}
|
|
.timeline-dot.refund-current {
|
|
background: #fff;
|
|
border: 2px solid #d97706;
|
|
color: #d97706;
|
|
box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15);
|
|
animation: pulseAmber 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Timeline connector variants */
|
|
.timeline-connector.refund {
|
|
background: #dc2626;
|
|
}
|
|
.timeline-connector.refund-current {
|
|
background: #d97706;
|
|
}
|
|
|
|
/* Pulsing amber animation */
|
|
@keyframes pulseAmber {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.25);
|
|
}
|
|
}
|
|
|
|
/* Overall timeline step label variants */
|
|
.timeline-label.refund {
|
|
color: #dc2626;
|
|
font-weight: 600;
|
|
}
|
|
.timeline-label.refund-current {
|
|
color: #d97706;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
RESPONSIVE HINT
|
|
═══════════════════════════════════════════ */
|
|
@media (max-width: 900px) {
|
|
.kpi-strip {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.client-sub-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.data-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.payment-summary {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.payment-details {
|
|
flex-direction: column;
|
|
}
|
|
.pdc-info-row {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.refund-area-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.finance-area-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ── Page Title (for demo context) ── */
|
|
.demo-page-title {
|
|
text-align: center;
|
|
color: #64748b;
|
|
font-size: 13px;
|
|
margin-bottom: 16px;
|
|
letter-spacing: 1px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="overlay" id="overlay">
|
|
<div class="dialog">
|
|
<!-- ── Header ── -->
|
|
<div class="dialog-header">
|
|
<h2>查看协议单 <span class="protocol-id">— P2025-0501-001</span></h2>
|
|
<button
|
|
class="dialog-close"
|
|
title="关闭"
|
|
onclick="document.getElementById('overlay').style.display='none'"
|
|
>✕</button
|
|
>
|
|
</div>
|
|
|
|
<!-- ── Body ── -->
|
|
<div class="dialog-body">
|
|
<!-- ════════════════════════════════
|
|
LAYER 1: KPI SUMMARY STRIP
|
|
════════════════════════════════ -->
|
|
<div class="kpi-strip">
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">协议编号</div>
|
|
<div class="kpi-value">P2025-0501-001</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">协议状态</div>
|
|
<div class="kpi-value"><span class="status-dot active"></span>生效中</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">母亲姓名</div>
|
|
<div class="kpi-value">王美丽</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">登记日期</div>
|
|
<div class="kpi-value">2025-05-08</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════
|
|
SECTION 1: 基本信息
|
|
════════════════════════════════ -->
|
|
<div class="section-card bg-white">
|
|
<div class="section-title"><h3>基本信息</h3></div>
|
|
<div class="data-grid">
|
|
<div class="data-item">
|
|
<div class="data-label">协议号</div>
|
|
<div class="data-value">P2025-0501-001</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">协议状态</div>
|
|
<div class="data-value"><span class="badge badge-green">生效中</span></div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">登记日期</div>
|
|
<div class="data-value">2025-05-08</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">采集专员</div>
|
|
<div class="data-value">李专员</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">创建时间</div>
|
|
<div class="data-value">2025-05-08 08:30:22</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">最后更新</div>
|
|
<div class="data-value">2025-05-08 09:15:40</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 附件 -->
|
|
<div class="attachment-row">
|
|
<div class="attachment-label">附件</div>
|
|
<div class="attachment-thumb">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.5">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14 2 14 8 20 8" />
|
|
</svg>
|
|
<span class="file-name">知情同意书.pdf</span>
|
|
</div>
|
|
<div class="attachment-thumb">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<circle cx="8.5" cy="8.5" r="1.5" />
|
|
<path d="m21 15-5-5L5 21" />
|
|
</svg>
|
|
<span class="file-name">身份证明.jpg</span>
|
|
</div>
|
|
<div class="attachment-thumb">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.5">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14 2 14 8 20 8" />
|
|
</svg>
|
|
<span class="file-name">检验报告.pdf</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 备注 -->
|
|
<div class="remark-row">
|
|
<div class="data-grid">
|
|
<div class="data-item data-value full-width">
|
|
<div class="data-label">备注</div>
|
|
<div class="data-value" style="font-weight: 400; color: #64748b"
|
|
>产妇及家属已充分了解采集流程,同意进行干细胞采集。婴儿体重偏大,需注意采集量。</div
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════
|
|
SECTION 2: 客户信息
|
|
════════════════════════════════ -->
|
|
<div class="section-card bg-green">
|
|
<div class="section-title"><h3>客户信息</h3></div>
|
|
<div class="client-sub-cards">
|
|
<!-- 母亲 -->
|
|
<div class="client-sub-card">
|
|
<div class="sub-card-header">
|
|
<span class="icon">🤱</span>
|
|
<h4>母亲信息</h4>
|
|
</div>
|
|
<div class="data-grid col-2">
|
|
<div class="data-item">
|
|
<div class="data-label">姓名</div>
|
|
<div class="data-value">王美丽</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">电话</div>
|
|
<div class="data-value">138****5678</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">身份证号</div>
|
|
<div class="data-value">3401****1234</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">出生年月</div>
|
|
<div class="data-value">1992-06</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">民族</div>
|
|
<div class="data-value">汉族</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9">
|
|
<div class="data-label">住址</div>
|
|
<div
|
|
class="data-value"
|
|
style="font-weight: 400; font-size: 13px; line-height: 1.5"
|
|
>安徽省合肥市蜀山区望江西路XX小区X栋X单元XXX室</div
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 父亲 -->
|
|
<div class="client-sub-card">
|
|
<div class="sub-card-header">
|
|
<span class="icon">👨</span>
|
|
<h4>父亲信息</h4>
|
|
</div>
|
|
<div class="data-grid col-2">
|
|
<div class="data-item">
|
|
<div class="data-label">姓名</div>
|
|
<div class="data-value">张建国</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">电话</div>
|
|
<div class="data-value">139****8901</div>
|
|
</div>
|
|
<div class="data-item data-value full-width">
|
|
<div class="data-label">身份证号</div>
|
|
<div class="data-value">3401****5678</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新生儿 -->
|
|
<div class="client-sub-card">
|
|
<div class="sub-card-header">
|
|
<span class="icon">👶</span>
|
|
<h4>新生儿信息</h4>
|
|
</div>
|
|
<div class="data-grid col-2">
|
|
<div class="data-item">
|
|
<div class="data-label">姓名</div>
|
|
<div class="data-value">张小明</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">性别</div>
|
|
<div class="data-value">男</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">分娩时间</div>
|
|
<div class="data-value">2025-05-08 06:30</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">分娩方式</div>
|
|
<div class="data-value">剖宫产</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">胎次</div>
|
|
<div class="data-value">1</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">体重</div>
|
|
<div class="data-value">3250g</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">Apgar 1min</div>
|
|
<div class="data-value">9</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">Apgar 5min</div>
|
|
<div class="data-value">10</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════
|
|
SECTION 3: 采集信息
|
|
════════════════════════════════ -->
|
|
<div class="section-card bg-white">
|
|
<div class="section-title"><h3>采集信息</h3></div>
|
|
<div class="data-grid">
|
|
<div class="data-item">
|
|
<div class="data-label">采集地区</div>
|
|
<div class="data-value">华东地区</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">采集医院</div>
|
|
<div class="data-value">合肥市第一人民医院</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">采集医护</div>
|
|
<div class="data-value">陈护士</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">销售人员</div>
|
|
<div class="data-value">赵经理</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">样本采集时间</div>
|
|
<div class="data-value">2025-05-08 07:15</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">母血采集时间</div>
|
|
<div class="data-value">2025-05-08 07:20</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════
|
|
SECTION 4: 样本及运输信息
|
|
════════════════════════════════ -->
|
|
<div class="section-card bg-white">
|
|
<div class="section-title"><h3>样本及运输信息</h3></div>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<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: 12px; color: #64748b"
|
|
>CB-20250508-001</td
|
|
>
|
|
<td>120ml</td>
|
|
<td style="font-weight: 600; color: #059669">¥19,800</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: 12px; color: #64748b"
|
|
>UC-20250508-001</td
|
|
>
|
|
<td>15cm</td>
|
|
<td style="font-weight: 600; color: #059669">¥9,800</td>
|
|
<td>20年</td>
|
|
<td><span class="badge badge-blue">运输中</span></td>
|
|
<td>冷链专运</td>
|
|
<td>华东中心库</td>
|
|
</tr>
|
|
<tr>
|
|
<td>胎盘干细胞</td>
|
|
<td style="font-family: monospace; font-size: 12px; color: #64748b"
|
|
>PL-20250508-001</td
|
|
>
|
|
<td>80g</td>
|
|
<td style="font-weight: 600; color: #059669">¥12,600</td>
|
|
<td>20年</td>
|
|
<td><span class="badge badge-amber">待检测</span></td>
|
|
<td>常温运输</td>
|
|
<td>南京分库</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════
|
|
SECTION 5: 缴费信息
|
|
════════════════════════════════ -->
|
|
<div class="section-card bg-gray">
|
|
<div class="section-title"><h3>缴费信息</h3></div>
|
|
|
|
<!-- Payment Summary Metrics (4 cards) -->
|
|
<div class="payment-summary">
|
|
<div class="payment-metric">
|
|
<div class="pm-label">应缴总额</div>
|
|
<div class="pm-value amount">¥50,000</div>
|
|
</div>
|
|
<div class="payment-metric">
|
|
<div class="pm-label">已缴金额</div>
|
|
<div class="pm-value amount">¥30,000</div>
|
|
</div>
|
|
<div class="payment-metric">
|
|
<div class="pm-label">已退金额</div>
|
|
<div class="pm-value refund">¥20,000</div>
|
|
</div>
|
|
<div class="payment-metric">
|
|
<div class="pm-label">净待缴金额</div>
|
|
<div class="pm-value" style="color: #d97706">¥20,000</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Detail Cards (vertical stack) -->
|
|
<div class="payment-details">
|
|
<!-- ── Card 1: 首付 — FULL REFUND (已退费) ── -->
|
|
<div class="payment-detail-card refunded">
|
|
<div class="pdc-header">
|
|
<div class="pdc-header-left red">
|
|
首付 · <span class="pdc-header-amount red">¥20,000</span>
|
|
</div>
|
|
<span class="badge badge-red">已退费</span>
|
|
</div>
|
|
|
|
<!-- Payment info -->
|
|
<div class="pdc-info-row">
|
|
<div class="pdc-info-item">
|
|
<span class="info-label">转账方式</span>
|
|
<span class="info-value">银行卡转账</span>
|
|
</div>
|
|
<div class="pdc-info-item">
|
|
<span class="info-label">转账时间</span>
|
|
<span class="info-value">2025-05-09 10:30</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lifecycle flow track: 缴费确认 → 财务确认 → 退费申请 → 退费确认 -->
|
|
<div class="mini-flow">
|
|
<div
|
|
class="mini-flow-connector done"
|
|
style="left: calc(12.5% + 12px); width: calc(25% - 12px)"
|
|
></div>
|
|
<div
|
|
class="mini-flow-connector done"
|
|
style="left: calc(37.5% + 12px); width: calc(25% - 12px)"
|
|
></div>
|
|
<div
|
|
class="mini-flow-connector done-red"
|
|
style="left: calc(62.5% + 12px); width: calc(25% - 12px)"
|
|
></div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot done">✓</div>
|
|
<div class="mini-flow-label done">缴费确认</div>
|
|
</div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot done">✓</div>
|
|
<div class="mini-flow-label done">财务确认</div>
|
|
</div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot done">✓</div>
|
|
<div class="mini-flow-label done">退费申请</div>
|
|
</div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot done-red">✓</div>
|
|
<div class="mini-flow-label done-red">退费确认</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Refund details (red tint) -->
|
|
<div class="refund-area red-tint">
|
|
<div class="refund-area-title red">📋 退费详情</div>
|
|
<div class="refund-area-grid">
|
|
<div class="data-item">
|
|
<div class="data-label">退费金额</div>
|
|
<div class="data-value red">¥20,000</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">退费方式</div>
|
|
<div class="data-value">原路退回</div>
|
|
</div>
|
|
<div class="data-item full-col">
|
|
<div class="data-label">退费备注</div>
|
|
<div class="data-value" style="font-weight: 400; color: #64748b"
|
|
>客户因个人原因申请退费,已与销售确认</div
|
|
>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">退费附件</div>
|
|
<div class="refund-attachments">
|
|
<div class="attachment-thumb" style="width: 64px; height: 48px">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.5">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14 2 14 8 20 8" />
|
|
</svg>
|
|
<span class="file-name">退款凭证.pdf</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-item full-col">
|
|
<div class="data-label">财务退费备注</div>
|
|
<div class="data-value" style="font-weight: 400; color: #64748b"
|
|
>已核实,同意退费,3个工作日内到账</div
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Card 2: 二期款 — NORMAL COMPLETED (已缴费) ── -->
|
|
<div class="payment-detail-card">
|
|
<div class="pdc-header">
|
|
<div class="pdc-header-left green">
|
|
二期款 · <span class="pdc-header-amount green">¥16,667</span>
|
|
</div>
|
|
<span class="badge badge-green">已缴费</span>
|
|
</div>
|
|
|
|
<!-- Payment info -->
|
|
<div class="pdc-info-row">
|
|
<div class="pdc-info-item">
|
|
<span class="info-label">转账方式</span>
|
|
<span class="info-value">微信</span>
|
|
</div>
|
|
<div class="pdc-info-item">
|
|
<span class="info-label">转账金额</span>
|
|
<span class="info-value" style="color: #059669; font-weight: 600">¥16,667</span>
|
|
</div>
|
|
<div class="pdc-info-item">
|
|
<span class="info-label">转账时间</span>
|
|
<span class="info-value">2025-05-10 14:22</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mini flow: 缴费 → 财务确认 -->
|
|
<div class="mini-flow">
|
|
<div
|
|
class="mini-flow-connector done"
|
|
style="left: calc(25% + 12px); width: calc(50% - 12px)"
|
|
></div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot done">✓</div>
|
|
<div class="mini-flow-label done">缴费</div>
|
|
</div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot done">✓</div>
|
|
<div class="mini-flow-label done">财务确认</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Finance confirmation -->
|
|
<div class="finance-area">
|
|
<div class="finance-area-title">✅ 财务确认</div>
|
|
<div class="finance-area-grid">
|
|
<div class="data-item">
|
|
<div class="data-label">财务备注</div>
|
|
<div class="data-value" style="font-weight: 400; color: #64748b"
|
|
>已核实到账</div
|
|
>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">财务附件</div>
|
|
<div class="refund-attachments">
|
|
<div class="attachment-thumb" style="width: 64px; height: 48px">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<circle cx="8.5" cy="8.5" r="1.5" />
|
|
<path d="m21 15-5-5L5 21" />
|
|
</svg>
|
|
<span class="file-name">转账凭证.jpg</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Card 3: 尾款 — REFUND IN PROGRESS (退费确认中) ── -->
|
|
<div class="payment-detail-card refund-pending">
|
|
<div class="pdc-header">
|
|
<div class="pdc-header-left amber">
|
|
尾款 · <span class="pdc-header-amount amber">¥13,333</span>
|
|
</div>
|
|
<span class="badge badge-amber">退费确认中</span>
|
|
</div>
|
|
|
|
<!-- Payment info -->
|
|
<div class="pdc-info-row">
|
|
<div class="pdc-info-item">
|
|
<span class="info-label">转账方式</span>
|
|
<span class="info-value">支付宝</span>
|
|
</div>
|
|
<div class="pdc-info-item">
|
|
<span class="info-label">转账金额</span>
|
|
<span class="info-value" style="color: #059669; font-weight: 600">¥13,333</span>
|
|
</div>
|
|
<div class="pdc-info-item">
|
|
<span class="info-label">转账时间</span>
|
|
<span class="info-value">2025-05-12 09:00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lifecycle flow: ✓缴费确认 → ✓财务确认 → ●退费申请(当前) → ○财务退费确认(待处理) -->
|
|
<div class="mini-flow">
|
|
<div
|
|
class="mini-flow-connector done"
|
|
style="left: calc(12.5% + 12px); width: calc(25% - 12px)"
|
|
></div>
|
|
<div
|
|
class="mini-flow-connector current-amber"
|
|
style="left: calc(37.5% + 12px); width: calc(25% - 12px)"
|
|
></div>
|
|
<div
|
|
class="mini-flow-connector pending-gray"
|
|
style="left: calc(62.5% + 12px); width: calc(25% - 12px)"
|
|
></div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot done">✓</div>
|
|
<div class="mini-flow-label done">缴费确认</div>
|
|
</div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot done">✓</div>
|
|
<div class="mini-flow-label done">财务确认</div>
|
|
</div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot current-amber">●</div>
|
|
<div class="mini-flow-label current-amber"
|
|
>退费申请<br /><span style="font-weight: 400; font-size: 9px"
|
|
>(当前)</span
|
|
></div
|
|
>
|
|
</div>
|
|
<div class="mini-flow-step">
|
|
<div class="mini-flow-dot pending-gray">○</div>
|
|
<div class="mini-flow-label pending-gray"
|
|
>财务退费确认<br /><span style="font-size: 9px">(待处理)</span></div
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Refund application details (amber tint) -->
|
|
<div class="refund-area amber-tint">
|
|
<div class="refund-area-title amber">⏳ 退费申请详情</div>
|
|
<div class="refund-area-grid">
|
|
<div class="data-item">
|
|
<div class="data-label">退费金额</div>
|
|
<div class="data-value amber">¥13,333</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div class="data-label">退费备注</div>
|
|
<div class="data-value" style="font-weight: 400; color: #64748b"
|
|
>采样不合格,客户申请全额退费</div
|
|
>
|
|
</div>
|
|
<div class="data-item full-col">
|
|
<div class="data-label">退费附件</div>
|
|
<div class="refund-attachments">
|
|
<div class="attachment-thumb" style="width: 64px; height: 48px">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.5">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14 2 14 8 20 8" />
|
|
</svg>
|
|
<span class="file-name">退费申请表.pdf</span>
|
|
</div>
|
|
<div class="attachment-thumb" style="width: 64px; height: 48px">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.5">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14 2 14 8 20 8" />
|
|
</svg>
|
|
<span class="file-name">检验报告.pdf</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> </div
|
|
><!-- /payment-details -->
|
|
|
|
<!-- Overall Payment Timeline (sophisticated) -->
|
|
<div class="payment-timeline">
|
|
<div class="timeline-title">缴费总览</div>
|
|
<div class="timeline">
|
|
<!-- Connector lines -->
|
|
<div
|
|
class="timeline-connector refund"
|
|
style="left: calc(12.5% + 14px); width: calc(25% - 14px)"
|
|
></div>
|
|
<div
|
|
class="timeline-connector done"
|
|
style="left: calc(37.5% + 14px); width: calc(25% - 14px)"
|
|
></div>
|
|
<div
|
|
class="timeline-connector refund-current"
|
|
style="left: calc(62.5% + 14px); width: calc(25% - 14px)"
|
|
></div>
|
|
|
|
<div class="timeline-step">
|
|
<div class="timeline-dot refund">✓</div>
|
|
<div class="timeline-label refund"
|
|
>首付<br /><span style="font-size: 10px; font-weight: 400">已退费</span></div
|
|
>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="timeline-dot done">✓</div>
|
|
<div class="timeline-label done"
|
|
>二期款<br /><span style="font-size: 10px; font-weight: 400">已缴费</span></div
|
|
>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="timeline-dot refund-current">●</div>
|
|
<div class="timeline-label refund-current"
|
|
>尾款<br /><span style="font-size: 10px; font-weight: 400">退费中</span></div
|
|
>
|
|
</div>
|
|
<div class="timeline-step">
|
|
<div class="timeline-dot pending">○</div>
|
|
<div class="timeline-label">待完成</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════
|
|
SECTION 6: 审核记录
|
|
════════════════════════════════ -->
|
|
<div class="section-card bg-white audit-table">
|
|
<div class="section-title"><h3>审核记录</h3></div>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>审核节点</th>
|
|
<th>审核人</th>
|
|
<th>审核时间</th>
|
|
<th>审核结果</th>
|
|
<th>审核意见</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>采集信息审核</td>
|
|
<td>张主管</td>
|
|
<td>2025-05-08 08:45:30</td>
|
|
<td><span class="badge badge-green">通过</span></td>
|
|
<td style="color: #64748b">信息完整,确认无误</td>
|
|
</tr>
|
|
<tr>
|
|
<td>样本入库审核</td>
|
|
<td>李主任</td>
|
|
<td>2025-05-08 11:20:15</td>
|
|
<td><span class="badge badge-green">通过</span></td>
|
|
<td style="color: #64748b">样本质量达标,准许入库</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div> </div
|
|
><!-- /dialog-body -->
|
|
|
|
<!-- ── Footer ── -->
|
|
<div class="dialog-footer">
|
|
<button class="btn-close">关闭</button>
|
|
</div> </div
|
|
><!-- /dialog --> </div
|
|
><!-- /overlay -->
|
|
</body>
|
|
</html>
|