1334 lines
54 KiB
HTML
1334 lines
54 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>Fresh Mint · 查看弹窗风格 Demo</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--primary: #10b981;
|
||
--primary-dark: #059669;
|
||
--primary-bg: #ecfdf5;
|
||
--text: #1e293b;
|
||
--text-muted: #64748b;
|
||
--border: #d9e8e2;
|
||
--surface: #ffffff;
|
||
--table-head: #f8fafc;
|
||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||
--shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||
--radius: 10px;
|
||
--warn: #d97706;
|
||
--warn-bg: #fffbeb;
|
||
--danger: #dc2626;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
font-family: Inter, -apple-system, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: var(--text);
|
||
background: #f8fafc;
|
||
}
|
||
|
||
/* ── 展示页骨架 ── */
|
||
.demo-page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }
|
||
.demo-head { margin-bottom: 32px; }
|
||
.demo-head h1 {
|
||
margin: 0 0 8px;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.demo-head h1 span { color: var(--primary); }
|
||
.demo-head p { margin: 0; color: var(--text-muted); max-width: 640px; }
|
||
.demo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
.demo-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow);
|
||
transition: box-shadow 0.2s, transform 0.2s;
|
||
}
|
||
.demo-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
|
||
.demo-card-preview {
|
||
height: 200px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, var(--primary-bg) 0%, #fff 60%);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.demo-card-preview::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to top, rgba(255,255,255,0.9) 0%, transparent 50%);
|
||
}
|
||
.demo-card-body { padding: 16px 18px 18px; }
|
||
.demo-card-body h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
|
||
.demo-card-body p { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
|
||
.demo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
|
||
.demo-tag {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
padding: 2px 8px;
|
||
border-radius: 6px;
|
||
background: var(--primary-bg);
|
||
color: var(--primary-dark);
|
||
}
|
||
.demo-tag.muted { background: var(--table-head); color: var(--text-muted); }
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
height: 36px;
|
||
padding: 0 14px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
border: 1px solid var(--border);
|
||
background: var(--surface);
|
||
color: var(--text);
|
||
transition: background 0.15s;
|
||
}
|
||
.btn:hover { background: var(--table-head); }
|
||
.btn-primary {
|
||
background: var(--primary);
|
||
border-color: var(--primary);
|
||
color: #fff;
|
||
}
|
||
.btn-primary:hover { background: var(--primary-dark); }
|
||
.btn-ghost { background: transparent; }
|
||
.ic { width: 16px; height: 16px; flex-shrink: 0; }
|
||
|
||
/* 缩略预览(各风格 mini 版) */
|
||
.mini-dialog {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -42%);
|
||
width: 88%;
|
||
max-width: 280px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
.mini-hero { height: 48px; background: linear-gradient(135deg, var(--primary-bg), #fff); border-bottom: 1px solid var(--border); }
|
||
.mini-body { padding: 8px 10px; }
|
||
.mini-line { height: 6px; background: #e2e8f0; border-radius: 3px; margin-bottom: 6px; }
|
||
.mini-line.short { width: 60%; }
|
||
.mini-line.green { background: var(--primary); opacity: 0.3; width: 40%; }
|
||
|
||
/* ── 弹窗通用 ── */
|
||
.backdrop {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(15, 23, 42, 0.45);
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
z-index: 1000;
|
||
/* 无背景模糊 — 对齐规范 */
|
||
backdrop-filter: none;
|
||
}
|
||
.backdrop.open { display: flex; }
|
||
.dialog {
|
||
background: var(--surface);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow-lg);
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
animation: dlgIn 0.22s ease;
|
||
}
|
||
@keyframes dlgIn {
|
||
from { opacity: 0; transform: scale(0.96) translateY(8px); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
.dialog-scroll { overflow-y: auto; flex: 1; }
|
||
.dialog-foot {
|
||
padding: 12px 22px;
|
||
border-top: 1px solid var(--border);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
background: var(--table-head);
|
||
}
|
||
|
||
/* 通用 tag */
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 2px 10px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
background: var(--primary-bg);
|
||
color: var(--primary-dark);
|
||
border: 1px solid rgba(16, 185, 129, 0.25);
|
||
}
|
||
.tag.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(217,119,6,0.25); }
|
||
.tag.danger { background: #fef2f2; color: var(--danger); border-color: rgba(220,38,38,0.2); }
|
||
.tag.muted { background: var(--table-head); color: var(--text-muted); border-color: var(--border); }
|
||
.tag.info { background: #eff6ff; color: #2563eb; border-color: rgba(37,99,235,0.2); }
|
||
.money-val { color: var(--danger); font-weight: 600; }
|
||
|
||
/* ═══════════════════════════════════════
|
||
风格 A · 经典 Hero + KV(当前 SystemViewDialog)
|
||
═══════════════════════════════════════ */
|
||
.style-a { max-width: 720px; max-height: calc(100vh - 48px); }
|
||
.style-a .view-hero {
|
||
display: flex;
|
||
gap: 16px;
|
||
padding: 20px 22px;
|
||
background: linear-gradient(135deg, var(--primary-bg) 0%, #fff 55%);
|
||
border-bottom: 1px solid var(--border);
|
||
align-items: center;
|
||
}
|
||
.style-a .view-hero-icon {
|
||
width: 72px; height: 72px;
|
||
border-radius: 12px;
|
||
border: 1px solid rgba(16,185,129,0.2);
|
||
background: rgba(16,185,129,0.08);
|
||
color: var(--primary-dark);
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.style-a .view-hero-main h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
|
||
.style-a .view-hero-meta { margin: 0; font-size: 13px; color: var(--text-muted); }
|
||
.style-a .view-section { padding: 18px 22px; border-bottom: 1px solid #ebeef5; }
|
||
.style-a .view-section:last-child { border-bottom: none; }
|
||
.style-a .view-section h3 {
|
||
margin: 0 0 14px;
|
||
padding-left: 10px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border-left: 3px solid var(--primary);
|
||
line-height: 1;
|
||
}
|
||
.style-a .view-kv-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px 20px;
|
||
}
|
||
.style-a .view-kv dt { margin: 0; font-size: 11px; color: var(--text-muted); }
|
||
.style-a .view-kv dd { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
|
||
|
||
/* ═══════════════════════════════════════
|
||
风格 B · 数据看板(Bento 指标卡)
|
||
═══════════════════════════════════════ */
|
||
.style-b { max-width: 920px; max-height: calc(100vh - 48px); }
|
||
.style-b .view-hero {
|
||
padding: 20px 22px;
|
||
background: linear-gradient(135deg, var(--primary-bg) 0%, #fff 55%);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.style-b .view-hero-top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.style-b .view-hero-top h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
|
||
.style-b .view-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.style-b .view-stat-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
margin-top: 16px;
|
||
}
|
||
@media (max-width: 720px) { .style-b .view-stat-row { grid-template-columns: repeat(2, 1fr); } }
|
||
.style-b .stat-chip {
|
||
background: #fff;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 12px 14px;
|
||
text-align: center;
|
||
}
|
||
.style-b .stat-chip .label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
|
||
.style-b .stat-chip .value { font-size: 20px; font-weight: 700; color: var(--primary-dark); }
|
||
.style-b .stat-chip.warn .value { color: var(--warn); }
|
||
.style-b .view-section { padding: 18px 22px; border-bottom: 1px solid var(--border); }
|
||
.style-b .view-section h3 {
|
||
margin: 0 0 14px;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.style-b .view-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.style-b .view-card {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 14px 16px;
|
||
}
|
||
.style-b .view-card h4 { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
|
||
.style-b .view-card p { margin: 0; font-size: 13px; line-height: 1.55; }
|
||
.style-b .view-route-bar {
|
||
height: 100px;
|
||
border-radius: var(--radius);
|
||
background: linear-gradient(90deg, #ecfdf5, #d1fae5, #a7f3d0);
|
||
border: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
}
|
||
.style-b .route-pin { text-align: center; font-size: 12px; }
|
||
.style-b .route-pin strong { display: block; font-size: 13px; margin-bottom: 2px; }
|
||
.style-b .route-line { flex: 1; height: 3px; background: var(--primary); opacity: 0.4; margin: 0 10px; border-radius: 2px; }
|
||
|
||
/* ═══════════════════════════════════════
|
||
风格 C · 左右分栏(Split Panel)
|
||
═══════════════════════════════════════ */
|
||
.style-c { max-width: 960px; max-height: calc(100vh - 48px); }
|
||
.style-c .view-split { display: flex; min-height: 480px; max-height: calc(100vh - 120px); }
|
||
.style-c .view-split-left {
|
||
flex: 0 0 380px;
|
||
border-right: 1px solid var(--border);
|
||
overflow-y: auto;
|
||
}
|
||
.style-c .view-split-right {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 16px 20px;
|
||
background: var(--table-head);
|
||
}
|
||
.style-c .view-hero {
|
||
display: flex;
|
||
gap: 14px;
|
||
padding: 18px 20px;
|
||
background: linear-gradient(135deg, var(--primary-bg), #fff);
|
||
border-bottom: 1px solid var(--border);
|
||
align-items: center;
|
||
}
|
||
.style-c .view-hero-icon {
|
||
width: 56px; height: 56px;
|
||
border-radius: 10px;
|
||
background: rgba(16,185,129,0.1);
|
||
color: var(--primary-dark);
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.style-c .view-hero-main h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
|
||
.style-c .view-hero-meta { margin: 0; font-size: 12px; color: var(--text-muted); }
|
||
.style-c .view-section { padding: 16px 20px; border-bottom: 1px solid #ebeef5; }
|
||
.style-c .view-section h3 {
|
||
margin: 0 0 12px;
|
||
padding-left: 10px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
border-left: 3px solid var(--primary);
|
||
line-height: 1;
|
||
}
|
||
.style-c .view-kv { margin-bottom: 10px; }
|
||
.style-c .view-kv dt { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
|
||
.style-c .view-kv dd { margin: 0; font-size: 13px; font-weight: 600; }
|
||
.style-c .right-panel-title {
|
||
margin: 0 0 14px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
.style-c .view-timeline {
|
||
position: relative;
|
||
padding-left: 18px;
|
||
border-left: 2px solid var(--border);
|
||
margin-left: 6px;
|
||
}
|
||
.style-c .view-tl-item { position: relative; padding-bottom: 18px; font-size: 13px; }
|
||
.style-c .view-tl-item:last-child { padding-bottom: 0; }
|
||
.style-c .view-tl-item::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: -25px; top: 4px;
|
||
width: 10px; height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
border: 2px solid #fff;
|
||
box-shadow: 0 0 0 1px var(--primary);
|
||
}
|
||
.style-c .view-tl-item.muted::before { background: var(--border); box-shadow: none; }
|
||
.style-c .view-tl-time { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
|
||
.style-c .view-tl-title { font-weight: 600; }
|
||
.style-c .view-tl-desc { color: var(--text-muted); margin-top: 2px; font-size: 12px; }
|
||
@media (max-width: 768px) {
|
||
.style-c .view-split { flex-direction: column; max-height: none; }
|
||
.style-c .view-split-left { flex: none; border-right: none; border-bottom: 1px solid var(--border); }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
风格 D · 紧凑清单(Compact List)
|
||
═══════════════════════════════════════ */
|
||
.style-d { max-width: 560px; max-height: calc(100vh - 48px); }
|
||
.style-d .view-compact-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.style-d .view-compact-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
|
||
.style-d .view-compact-head .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
||
.style-d .view-compact-body { padding: 4px 0; }
|
||
.style-d .view-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 11px 20px;
|
||
border-bottom: 1px solid #f1f5f9;
|
||
font-size: 13px;
|
||
}
|
||
.style-d .view-row:last-child { border-bottom: none; }
|
||
.style-d .view-row dt { margin: 0; color: var(--text-muted); flex-shrink: 0; }
|
||
.style-d .view-row dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }
|
||
.style-d .view-row-group {
|
||
padding: 12px 20px 4px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
background: var(--table-head);
|
||
border-bottom: 1px solid var(--border);
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.style-d .view-row-group:first-child { border-top: none; }
|
||
|
||
/* ═══════════════════════════════════════
|
||
风格 E · 票据档案(Document Archive)
|
||
═══════════════════════════════════════ */
|
||
.style-e { max-width: 780px; max-height: calc(100vh - 48px); }
|
||
.style-e .doc-header {
|
||
position: relative;
|
||
padding: 24px 28px 20px;
|
||
background: #fff;
|
||
border-bottom: 2px solid var(--primary);
|
||
overflow: hidden;
|
||
}
|
||
.style-e .doc-watermark {
|
||
position: absolute;
|
||
right: -20px;
|
||
top: 50%;
|
||
transform: translateY(-50%) rotate(-12deg);
|
||
font-size: 72px;
|
||
font-weight: 800;
|
||
color: rgba(16,185,129,0.06);
|
||
letter-spacing: 0.1em;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
.style-e .doc-header-top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
position: relative;
|
||
}
|
||
.style-e .doc-header h2 {
|
||
margin: 0 0 4px;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.style-e .doc-no { font-size: 13px; color: var(--text-muted); font-family: ui-monospace, monospace; }
|
||
.style-e .doc-stamp {
|
||
width: 72px; height: 72px;
|
||
border: 3px solid var(--primary);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
transform: rotate(-15deg);
|
||
flex-shrink: 0;
|
||
opacity: 0.85;
|
||
}
|
||
.style-e .doc-meta-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
margin-top: 14px;
|
||
padding-top: 14px;
|
||
border-top: 1px dashed var(--border);
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
.style-e .doc-meta-bar strong { color: var(--text); font-weight: 600; }
|
||
.style-e .doc-body { padding: 20px 28px; }
|
||
.style-e .doc-section { margin-bottom: 20px; }
|
||
.style-e .doc-section:last-child { margin-bottom: 0; }
|
||
.style-e .doc-section h3 {
|
||
margin: 0 0 12px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--primary-dark);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.style-e .doc-section h3::before {
|
||
content: "";
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
}
|
||
.style-e .doc-kv-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
.style-e .doc-kv-table td {
|
||
padding: 8px 0;
|
||
border-bottom: 1px dotted #e2e8f0;
|
||
vertical-align: top;
|
||
}
|
||
.style-e .doc-kv-table td:first-child {
|
||
width: 120px;
|
||
color: var(--text-muted);
|
||
font-weight: 500;
|
||
}
|
||
.style-e .doc-kv-table td:last-child { font-weight: 600; }
|
||
.style-e .doc-kv-table tr:last-child td { border-bottom: none; }
|
||
.style-e .doc-sign {
|
||
margin-top: 24px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid var(--border);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
风格 F · 标签页(Tabbed View)
|
||
═══════════════════════════════════════ */
|
||
.style-f { max-width: 880px; max-height: calc(100vh - 48px); }
|
||
.style-f .view-tab-head {
|
||
padding: 16px 22px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
background: linear-gradient(180deg, var(--primary-bg) 0%, #fff 100%);
|
||
}
|
||
.style-f .view-tab-head-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.style-f .view-tab-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
|
||
.style-f .view-tab-head .code { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
||
.style-f .view-tabs {
|
||
display: flex;
|
||
gap: 4px;
|
||
overflow-x: auto;
|
||
}
|
||
.style-f .view-tab {
|
||
padding: 8px 16px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
background: transparent;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
white-space: nowrap;
|
||
margin-bottom: -1px;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
.style-f .view-tab:hover { color: var(--text); }
|
||
.style-f .view-tab.active {
|
||
color: var(--primary-dark);
|
||
border-bottom-color: var(--primary);
|
||
}
|
||
.style-f .view-tab-panel { display: none; padding: 18px 22px; }
|
||
.style-f .view-tab-panel.active { display: block; }
|
||
.style-f .view-kv-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px 24px;
|
||
}
|
||
.style-f .view-kv dt { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
|
||
.style-f .view-kv dd { margin: 0; font-size: 13px; font-weight: 600; }
|
||
.style-f .view-subtable-wrap {
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.style-f .view-subtable {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
.style-f .view-subtable th,
|
||
.style-f .view-subtable td {
|
||
padding: 8px 12px;
|
||
text-align: center;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.style-f .view-subtable th {
|
||
background: var(--table-head);
|
||
color: var(--text-muted);
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
}
|
||
.style-f .view-subtable .ta-left { text-align: left; }
|
||
.style-f .view-subtable tr:last-child td { border-bottom: none; }
|
||
.style-f .attach-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px;
|
||
}
|
||
.style-f .attach-card {
|
||
border: 1px dashed #a7f3d0;
|
||
border-radius: 8px;
|
||
padding: 14px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
background: var(--primary-bg);
|
||
}
|
||
.style-f .attach-card strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 4px; }
|
||
|
||
/* ═══════════════════════════════════════
|
||
风格 G · 卡片堆叠(Card Stack)
|
||
═══════════════════════════════════════ */
|
||
.style-g { max-width: 800px; max-height: calc(100vh - 48px); }
|
||
.style-g .dialog-scroll { padding: 20px 22px; background: #f1f5f9; }
|
||
.style-g .stack-hero {
|
||
background: #fff;
|
||
border-radius: var(--radius);
|
||
padding: 18px 20px;
|
||
box-shadow: var(--shadow);
|
||
margin-bottom: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
.style-g .stack-hero-avatar {
|
||
width: 64px; height: 64px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
.style-g .stack-hero h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
|
||
.style-g .stack-hero p { margin: 0; font-size: 13px; color: var(--text-muted); }
|
||
.style-g .stack-card {
|
||
background: #fff;
|
||
border-radius: var(--radius);
|
||
padding: 16px 18px;
|
||
box-shadow: var(--shadow);
|
||
margin-bottom: 14px;
|
||
}
|
||
.style-g .stack-card:last-child { margin-bottom: 0; }
|
||
.style-g .stack-card h3 {
|
||
margin: 0 0 12px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.style-g .stack-card h3 .dot {
|
||
width: 8px; height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
}
|
||
.style-g .stack-kv-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px 16px;
|
||
}
|
||
.style-g .stack-kv .k { font-size: 11px; color: var(--text-muted); }
|
||
.style-g .stack-kv .v { font-size: 13px; font-weight: 600; margin-top: 2px; }
|
||
.style-g .stack-highlight {
|
||
background: var(--primary-bg);
|
||
border: 1px solid rgba(16,185,129,0.2);
|
||
border-radius: 8px;
|
||
padding: 12px 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.style-g .stack-highlight .amount { font-size: 22px; font-weight: 700; color: var(--primary-dark); }
|
||
|
||
@media (max-width: 640px) {
|
||
.style-a .view-kv-grid,
|
||
.style-f .view-kv-grid,
|
||
.style-g .stack-kv-grid { grid-template-columns: 1fr; }
|
||
.style-b .view-bento { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo-page">
|
||
<header class="demo-head">
|
||
<h1><span>Fresh Mint</span> · 查看弹窗风格 Demo</h1>
|
||
<p>
|
||
基于 <code>web-admin</code> 设计规范(主色 <code>#10b981</code>、无遮罩模糊、查看态仅关闭按钮)的 6 套查看弹窗方案。
|
||
点击下方卡片预览各风格,或在业务选型时对照适用场景。
|
||
另见 <a href="fresh-mint-view-kv-layout-demos.html">KV 字段布局对比 Demo</a>(上下 vs 左右 vs 表格)·
|
||
<a href="fresh-mint-view-wide-dialog-demos.html">宽弹窗多列 Demo</a>(920~1120px)。
|
||
</p>
|
||
</header>
|
||
|
||
<div class="demo-grid">
|
||
<!-- A -->
|
||
<article class="demo-card">
|
||
<div class="demo-card-preview">
|
||
<div class="mini-dialog">
|
||
<div class="mini-hero"></div>
|
||
<div class="mini-body">
|
||
<div class="mini-line green"></div>
|
||
<div class="mini-line"></div>
|
||
<div class="mini-line short"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-card-body">
|
||
<div class="demo-tags">
|
||
<span class="demo-tag">A · 经典 Hero</span>
|
||
<span class="demo-tag muted">SystemViewDialog</span>
|
||
</div>
|
||
<h2>经典 Hero + KV 分块</h2>
|
||
<p>当前 <code>SystemViewDialog</code> 标准方案:渐变 Hero 区 + 绿条区块标题 + 双列键值。适合用户、角色、主数据等通用 CRUD 查看。</p>
|
||
<button type="button" class="btn btn-primary" data-open="dlgA">
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
预览弹窗
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- B -->
|
||
<article class="demo-card">
|
||
<div class="demo-card-preview" style="background:linear-gradient(135deg,#ecfdf5,#d1fae5)">
|
||
<div class="mini-dialog">
|
||
<div class="mini-body" style="padding-top:12px">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px">
|
||
<div class="mini-line" style="height:24px;background:#ecfdf5;border:1px solid #d9e8e2"></div>
|
||
<div class="mini-line" style="height:24px;background:#ecfdf5;border:1px solid #d9e8e2"></div>
|
||
</div>
|
||
<div class="mini-line" style="margin-top:8px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-card-body">
|
||
<div class="demo-tags">
|
||
<span class="demo-tag">B · 数据看板</span>
|
||
<span class="demo-tag muted">订单/配送</span>
|
||
</div>
|
||
<h2>数据看板 + Bento 指标</h2>
|
||
<p>Hero 内嵌 4 格指标卡 + Bento 信息卡 + 路由示意条。适合订单、配送任务、运单等含数量/金额/路线的业务详情。</p>
|
||
<button type="button" class="btn btn-primary" data-open="dlgB">
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
预览弹窗
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- C -->
|
||
<article class="demo-card">
|
||
<div class="demo-card-preview">
|
||
<div class="mini-dialog" style="display:flex;max-width:300px">
|
||
<div style="width:38%;background:#ecfdf5;border-right:1px solid #d9e8e2">
|
||
<div class="mini-hero" style="height:36px"></div>
|
||
<div class="mini-body"><div class="mini-line short"></div></div>
|
||
</div>
|
||
<div style="flex:1;background:#f8fafc">
|
||
<div class="mini-body"><div class="mini-line"></div><div class="mini-line short"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-card-body">
|
||
<div class="demo-tags">
|
||
<span class="demo-tag">C · 左右分栏</span>
|
||
<span class="demo-tag muted">Split Layout</span>
|
||
</div>
|
||
<h2>左右分栏 + 时间轴</h2>
|
||
<p>左侧固定摘要与 KV,右侧展示审批流/轨迹/子表。对应 <code>layout="split"</code>,适合工作流待办、检测任务等「摘要 + 过程」场景。</p>
|
||
<button type="button" class="btn btn-primary" data-open="dlgC">
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
预览弹窗
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- D -->
|
||
<article class="demo-card">
|
||
<div class="demo-card-preview" style="background:#fff">
|
||
<div class="mini-dialog" style="max-width:220px">
|
||
<div style="padding:8px 10px;border-bottom:1px solid #d9e8e2;display:flex;justify-content:space-between;align-items:center">
|
||
<div class="mini-line short" style="width:50%;margin:0"></div>
|
||
<div style="width:40px;height:16px;background:#ecfdf5;border-radius:4px;border:1px solid rgba(16,185,129,0.3)"></div>
|
||
</div>
|
||
<div class="mini-body">
|
||
<div class="mini-line"></div>
|
||
<div class="mini-line"></div>
|
||
<div class="mini-line short"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-card-body">
|
||
<div class="demo-tags">
|
||
<span class="demo-tag">D · 紧凑清单</span>
|
||
<span class="demo-tag muted">轻量实体</span>
|
||
</div>
|
||
<h2>紧凑行式清单</h2>
|
||
<p>无 Hero 渐变,单行 label-value 对齐,分组灰底标题。宽度 560px,适合字典项、单位、岗位等字段少、无需视觉强调的轻量查看。</p>
|
||
<button type="button" class="btn btn-primary" data-open="dlgD">
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
预览弹窗
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- E -->
|
||
<article class="demo-card">
|
||
<div class="demo-card-preview" style="background:linear-gradient(180deg,#fff,#f8fafc)">
|
||
<div class="mini-dialog">
|
||
<div style="height:8px;background:var(--primary)"></div>
|
||
<div class="mini-body" style="padding-top:10px">
|
||
<div class="mini-line" style="width:70%"></div>
|
||
<div class="mini-line short"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-card-body">
|
||
<div class="demo-tags">
|
||
<span class="demo-tag">E · 票据档案</span>
|
||
<span class="demo-tag muted">合同/证书</span>
|
||
</div>
|
||
<h2>票据档案风</h2>
|
||
<p>正式文档头 + 水印 + 圆形印章态 + 表格式 KV + 签章区。适合合同、报价单、运输计划证、质检报告等需「归档感」的只读详情。</p>
|
||
<button type="button" class="btn btn-primary" data-open="dlgE">
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
预览弹窗
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- F -->
|
||
<article class="demo-card">
|
||
<div class="demo-card-preview">
|
||
<div class="mini-dialog">
|
||
<div style="padding:6px 8px 0;border-bottom:1px solid #d9e8e2">
|
||
<div class="mini-line short" style="margin-bottom:6px"></div>
|
||
<div style="display:flex;gap:4px">
|
||
<div style="width:28px;height:4px;background:#10b981;border-radius:2px"></div>
|
||
<div style="width:28px;height:4px;background:#e2e8f0;border-radius:2px"></div>
|
||
<div style="width:28px;height:4px;background:#e2e8f0;border-radius:2px"></div>
|
||
</div>
|
||
</div>
|
||
<div class="mini-body"><div class="mini-line"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-card-body">
|
||
<div class="demo-tags">
|
||
<span class="demo-tag">F · 标签页</span>
|
||
<span class="demo-tag muted">复杂业务</span>
|
||
</div>
|
||
<h2>标签页分区查看</h2>
|
||
<p>顶部 Tab 切换基本信息 / 明细 / 审批 / 附件,避免单页过长滚动。适合 CRM 合同、报价、商机等多区块复杂对象。</p>
|
||
<button type="button" class="btn btn-primary" data-open="dlgF">
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
预览弹窗
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- G -->
|
||
<article class="demo-card">
|
||
<div class="demo-card-preview" style="background:#f1f5f9">
|
||
<div class="mini-dialog" style="background:transparent;box-shadow:none">
|
||
<div style="background:#fff;border-radius:6px;height:28px;margin-bottom:4px;box-shadow:0 1px 3px rgba(0,0,0,0.08)"></div>
|
||
<div style="background:#fff;border-radius:6px;height:36px;margin-bottom:4px;box-shadow:0 1px 3px rgba(0,0,0,0.08)"></div>
|
||
<div style="background:#fff;border-radius:6px;height:28px;box-shadow:0 1px 3px rgba(0,0,0,0.08)"></div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-card-body">
|
||
<div class="demo-tags">
|
||
<span class="demo-tag">G · 卡片堆叠</span>
|
||
<span class="demo-tag muted">客户/供应商</span>
|
||
</div>
|
||
<h2>卡片堆叠分区</h2>
|
||
<p>灰底容器 + 独立浮卡,每卡一个主题区块,视觉层次清晰。适合客户档案、供应商资质、人员档案等「多维度画像」类查看。</p>
|
||
<button type="button" class="btn btn-primary" data-open="dlgG">
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
预览弹窗
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 弹窗 A · 经典 Hero ═══ -->
|
||
<div class="backdrop" id="dlgA" role="dialog" aria-modal="true">
|
||
<div class="dialog style-a">
|
||
<div class="dialog-scroll">
|
||
<div class="view-hero">
|
||
<div class="view-hero-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||
</div>
|
||
<div class="view-hero-main">
|
||
<h2>张三</h2>
|
||
<p class="view-hero-meta">工号:SX-2024-0086 · 华东区域 · 调度员</p>
|
||
</div>
|
||
<span class="tag">正常</span>
|
||
</div>
|
||
<div class="view-section">
|
||
<h3>账号信息</h3>
|
||
<dl class="view-kv-grid">
|
||
<div class="view-kv"><dt>用户名</dt><dd>zhangsan</dd></div>
|
||
<div class="view-kv"><dt>手机号</dt><dd>138****6688</dd></div>
|
||
<div class="view-kv"><dt>所属角色</dt><dd>调度主管、区域管理员</dd></div>
|
||
<div class="view-kv"><dt>所属部门</dt><dd>运营中心 / 华东调度组</dd></div>
|
||
</dl>
|
||
</div>
|
||
<div class="view-section">
|
||
<h3>状态与审计</h3>
|
||
<dl class="view-kv-grid">
|
||
<div class="view-kv"><dt>账号状态</dt><dd><span class="tag">正常</span></dd></div>
|
||
<div class="view-kv"><dt>最后登录</dt><dd>2026-06-18 09:32:15</dd></div>
|
||
<div class="view-kv"><dt>创建时间</dt><dd>2024-03-12 14:20:00</dd></div>
|
||
<div class="view-kv"><dt>备注</dt><dd>—</dd></div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-foot">
|
||
<button type="button" class="btn btn-ghost" data-close>
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 弹窗 B · 数据看板 ═══ -->
|
||
<div class="backdrop" id="dlgB" role="dialog" aria-modal="true">
|
||
<div class="dialog style-b">
|
||
<div class="dialog-scroll">
|
||
<div class="view-hero">
|
||
<div class="view-hero-top">
|
||
<div>
|
||
<h2>配送任务 PS-20260620-0031</h2>
|
||
<div class="view-hero-tags">
|
||
<span class="tag">执行中</span>
|
||
<span class="tag muted">优先级 · 高</span>
|
||
<span class="tag muted">华东区域</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="view-stat-row">
|
||
<div class="stat-chip"><div class="label">配送件数</div><div class="value">128</div></div>
|
||
<div class="stat-chip"><div class="label">本单金额</div><div class="value">¥4,860</div></div>
|
||
<div class="stat-chip warn"><div class="label">在途时长</div><div class="value">2.5h</div></div>
|
||
<div class="stat-chip"><div class="label">站点数</div><div class="value">6</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="view-section">
|
||
<h3>基础信息</h3>
|
||
<dl class="view-kv-grid" style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px">
|
||
<div class="view-kv"><dt>任务号</dt><dd>PS-20260620-0031</dd></div>
|
||
<div class="view-kv"><dt>计划时间</dt><dd>2026-06-20 08:00 — 14:00</dd></div>
|
||
<div class="view-kv"><dt>司机 / 车辆</dt><dd>李师傅 · 浙A·8K326</dd></div>
|
||
<div class="view-kv"><dt>线路</dt><dd>华东中心仓 → 城配集散 → 6 门店</dd></div>
|
||
</dl>
|
||
</div>
|
||
<div class="view-section">
|
||
<h3>费用说明</h3>
|
||
<div class="view-bento">
|
||
<div class="view-card">
|
||
<h4>路桥费(元)</h4>
|
||
<p style="font-size:18px;font-weight:700;color:var(--primary-dark)">¥186.00</p>
|
||
</div>
|
||
<div class="view-card">
|
||
<h4>装卸费(元)</h4>
|
||
<p style="font-size:18px;font-weight:700;color:var(--primary-dark)">¥320.00</p>
|
||
</div>
|
||
<div class="view-card" style="grid-column:1/-1">
|
||
<h4>备注</h4>
|
||
<p>含温控附加费;实际结算以回单签收后财务对账为准。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="view-section">
|
||
<h3>路由示意</h3>
|
||
<div class="view-route-bar">
|
||
<div class="route-pin"><strong>始发仓</strong>华东中心仓</div>
|
||
<div class="route-line"></div>
|
||
<div class="route-pin"><strong>经停</strong>城配集散</div>
|
||
<div class="route-line"></div>
|
||
<div class="route-pin"><strong>目的地</strong>6 门店</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-foot">
|
||
<button type="button" class="btn btn-ghost" data-close>
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 弹窗 C · 左右分栏 ═══ -->
|
||
<div class="backdrop" id="dlgC" role="dialog" aria-modal="true">
|
||
<div class="dialog style-c">
|
||
<div class="view-split">
|
||
<div class="view-split-left">
|
||
<div class="view-hero">
|
||
<div class="view-hero-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||
</div>
|
||
<div class="view-hero-main">
|
||
<h2>质检工单 QC-0618-042</h2>
|
||
<p class="view-hero-meta">样品编码:SP-2026-A0186</p>
|
||
</div>
|
||
</div>
|
||
<div class="view-section">
|
||
<h3>任务信息</h3>
|
||
<dl>
|
||
<div class="view-kv"><dt>检测项目</dt><dd>纯度 · 水分 · 重金属</dd></div>
|
||
<div class="view-kv"><dt>委托方</dt><dd>山峡化工 · 生产一部</dd></div>
|
||
<div class="view-kv"><dt>优先级</dt><dd><span class="tag warn">加急</span></dd></div>
|
||
<div class="view-kv"><dt>当前状态</dt><dd><span class="tag">检测中</span></dd></div>
|
||
</dl>
|
||
</div>
|
||
<div class="view-section">
|
||
<h3>样品信息</h3>
|
||
<dl>
|
||
<div class="view-kv"><dt>采样时间</dt><dd>2026-06-18 07:45</dd></div>
|
||
<div class="view-kv"><dt>采样地点</dt><dd>3 号产线 · 成品罐</dd></div>
|
||
<div class="view-kv"><dt>留样编号</dt><dd>LY-20260618-009</dd></div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
<div class="view-split-right">
|
||
<h3 class="right-panel-title">执行轨迹</h3>
|
||
<div class="view-timeline">
|
||
<div class="view-tl-item">
|
||
<div class="view-tl-time">2026-06-18 08:00</div>
|
||
<div class="view-tl-title">样品接收 · 已入库</div>
|
||
<div class="view-tl-desc">收样员:王芳 · 冷库 2℃ 暂存</div>
|
||
</div>
|
||
<div class="view-tl-item">
|
||
<div class="view-tl-time">2026-06-18 09:30</div>
|
||
<div class="view-tl-title">前处理完成 · 进入检测</div>
|
||
<div class="view-tl-desc">分配至理化组 · 仪器 GC-2024</div>
|
||
</div>
|
||
<div class="view-tl-item">
|
||
<div class="view-tl-time">2026-06-18 11:15</div>
|
||
<div class="view-tl-title">纯度检测 · 进行中</div>
|
||
<div class="view-tl-desc">预计 14:00 出初步结果</div>
|
||
</div>
|
||
<div class="view-tl-item muted">
|
||
<div class="view-tl-time">待发生</div>
|
||
<div class="view-tl-title">报告签发 · 审核归档</div>
|
||
<div class="view-tl-desc">需 QC 主管复核后发布</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-foot">
|
||
<button type="button" class="btn btn-ghost" data-close>
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 弹窗 D · 紧凑清单 ═══ -->
|
||
<div class="backdrop" id="dlgD" role="dialog" aria-modal="true">
|
||
<div class="dialog style-d">
|
||
<div class="view-compact-head">
|
||
<div>
|
||
<h2>计量单位 · 吨(t)</h2>
|
||
<div class="sub">编码 unit_t · 排序 10</div>
|
||
</div>
|
||
<span class="tag">启用</span>
|
||
</div>
|
||
<div class="dialog-scroll view-compact-body">
|
||
<div class="view-row-group">基本信息</div>
|
||
<dl class="view-row"><dt>单位名称</dt><dd>吨</dd></dl>
|
||
<dl class="view-row"><dt>单位符号</dt><dd>t</dd></dl>
|
||
<dl class="view-row"><dt>单位编码</dt><dd>unit_t</dd></dl>
|
||
<div class="view-row-group">系统信息</div>
|
||
<dl class="view-row"><dt>状态</dt><dd><span class="tag">启用</span></dd></dl>
|
||
<dl class="view-row"><dt>创建人</dt><dd>系统管理员</dd></dl>
|
||
<dl class="view-row"><dt>创建时间</dt><dd>2024-01-08 10:00:00</dd></dl>
|
||
<dl class="view-row"><dt>备注</dt><dd>地磅称重默认单位</dd></dl>
|
||
</div>
|
||
<div class="dialog-foot">
|
||
<button type="button" class="btn btn-ghost" data-close>
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 弹窗 E · 票据档案 ═══ -->
|
||
<div class="backdrop" id="dlgE" role="dialog" aria-modal="true">
|
||
<div class="dialog style-e">
|
||
<div class="dialog-scroll">
|
||
<div class="doc-header">
|
||
<div class="doc-watermark">合同</div>
|
||
<div class="doc-header-top">
|
||
<div>
|
||
<h2>产品销售合同</h2>
|
||
<div class="doc-no">HT-2026-SX-00428</div>
|
||
</div>
|
||
<div class="doc-stamp">已生效</div>
|
||
</div>
|
||
<div class="doc-meta-bar">
|
||
<span>签订日期:<strong>2026-06-01</strong></span>
|
||
<span>有效期至:<strong>2027-05-31</strong></span>
|
||
<span>甲方:<strong>山峡化工有限公司</strong></span>
|
||
<span>乙方:<strong>华东精细化工贸易公司</strong></span>
|
||
</div>
|
||
</div>
|
||
<div class="doc-body">
|
||
<div class="doc-section">
|
||
<h3>合同概要</h3>
|
||
<table class="doc-kv-table">
|
||
<tr><td>合同类型</td><td>年度框架 · 化工原料</td></tr>
|
||
<tr><td>合同金额</td><td class="money-val">¥ 2,580,000.00</td></tr>
|
||
<tr><td>付款方式</td><td>月结 30 天 · 银行承兑</td></tr>
|
||
<tr><td>交货方式</td><td>卖方送货 · 华东区域仓</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="doc-section">
|
||
<h3>主要条款</h3>
|
||
<table class="doc-kv-table">
|
||
<tr><td>质量标准</td><td>GB/T 标准 · 每批次附质检报告</td></tr>
|
||
<tr><td>违约责任</td><td>逾期交货按日 0.5‰ 计罚 · 上限 5%</td></tr>
|
||
<tr><td>争议解决</td><td>协商不成提交杭州仲裁委员会</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="doc-sign">
|
||
<span>生成时间:2026-06-01 16:30:00</span>
|
||
<span>系统归档编号:ARC-20260601-00428</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-foot">
|
||
<button type="button" class="btn btn-ghost" data-close>
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 弹窗 F · 标签页 ═══ -->
|
||
<div class="backdrop" id="dlgF" role="dialog" aria-modal="true">
|
||
<div class="dialog style-f">
|
||
<div class="view-tab-head">
|
||
<div class="view-tab-head-top">
|
||
<div>
|
||
<h2>报价单 QO-20260615-008</h2>
|
||
<div class="code">客户:华东精细化工 · 商机:年产 500 吨催化剂项目</div>
|
||
</div>
|
||
<span class="tag">已审批</span>
|
||
</div>
|
||
<div class="view-tabs" role="tablist">
|
||
<button type="button" class="view-tab active" data-tab="tab-info" role="tab">基本信息</button>
|
||
<button type="button" class="view-tab" data-tab="tab-items" role="tab">产品明细</button>
|
||
<button type="button" class="view-tab" data-tab="tab-flow" role="tab">审批记录</button>
|
||
<button type="button" class="view-tab" data-tab="tab-files" role="tab">附件</button>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-scroll">
|
||
<div class="view-tab-panel active" id="tab-info">
|
||
<dl class="view-kv-grid">
|
||
<div class="view-kv"><dt>报价编号</dt><dd>QO-20260615-008</dd></div>
|
||
<div class="view-kv"><dt>报价状态</dt><dd><span class="tag">已审批</span></dd></div>
|
||
<div class="view-kv"><dt>报价金额</dt><dd class="money-val">¥ 186,500.00</dd></div>
|
||
<div class="view-kv"><dt>有效期</dt><dd>2026-06-15 — 2026-07-15</dd></div>
|
||
<div class="view-kv"><dt>销售负责人</dt><dd>陈经理</dd></div>
|
||
<div class="view-kv"><dt>创建时间</dt><dd>2026-06-15 10:22:00</dd></div>
|
||
</dl>
|
||
</div>
|
||
<div class="view-tab-panel" id="tab-items">
|
||
<div class="view-subtable-wrap">
|
||
<table class="view-subtable">
|
||
<thead>
|
||
<tr>
|
||
<th class="ta-left">产品名称</th>
|
||
<th>规格</th>
|
||
<th>数量</th>
|
||
<th>单价</th>
|
||
<th>小计</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="ta-left">催化剂 A 型</td>
|
||
<td>25kg/桶</td>
|
||
<td>200</td>
|
||
<td class="money-val">¥680.00</td>
|
||
<td class="money-val">¥136,000</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="ta-left">助剂 B 型</td>
|
||
<td>10kg/袋</td>
|
||
<td>100</td>
|
||
<td class="money-val">¥505.00</td>
|
||
<td class="money-val">¥50,500</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="view-tab-panel" id="tab-flow">
|
||
<div class="view-timeline" style="padding-left:18px;border-left:2px solid var(--border);margin-left:6px">
|
||
<div class="view-tl-item" style="position:relative;padding-bottom:16px;font-size:13px">
|
||
<div style="font-size:12px;color:var(--text-muted)">2026-06-15 14:30</div>
|
||
<div style="font-weight:600">销售总监 · 已通过</div>
|
||
<div style="color:var(--text-muted);font-size:12px;margin-top:2px">同意报价,注意交货周期。</div>
|
||
</div>
|
||
<div class="view-tl-item" style="position:relative;padding-bottom:0;font-size:13px">
|
||
<div style="font-size:12px;color:var(--text-muted)">2026-06-15 11:05</div>
|
||
<div style="font-weight:600">陈经理 · 提交审批</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="view-tab-panel" id="tab-files">
|
||
<div class="attach-grid">
|
||
<div class="attach-card"><strong>报价单.pdf</strong>2.4 MB · 2026-06-15</div>
|
||
<div class="attach-card"><strong>产品规格书.pdf</strong>1.8 MB · 2026-06-14</div>
|
||
<div class="attach-card"><strong>客户询价函.jpg</strong>856 KB · 2026-06-12</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-foot">
|
||
<button type="button" class="btn btn-ghost" data-close>
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 弹窗 G · 卡片堆叠 ═══ -->
|
||
<div class="backdrop" id="dlgG" role="dialog" aria-modal="true">
|
||
<div class="dialog style-g">
|
||
<div class="dialog-scroll">
|
||
<div class="stack-hero">
|
||
<div class="stack-hero-avatar">华</div>
|
||
<div>
|
||
<h2>华东精细化工贸易公司</h2>
|
||
<p>客户编码 KH-2023-0186 · <span class="tag" style="font-size:11px">战略客户</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="stack-card">
|
||
<h3><span class="dot"></span>联系信息</h3>
|
||
<div class="stack-kv-grid">
|
||
<div class="stack-kv"><div class="k">联系人</div><div class="v">刘总 · 采购部</div></div>
|
||
<div class="stack-kv"><div class="k">手机</div><div class="v">139****8821</div></div>
|
||
<div class="stack-kv"><div class="k">地址</div><div class="v">浙江省杭州市 · 滨江区</div></div>
|
||
<div class="stack-kv"><div class="k">所属行业</div><div class="v">精细化工 / 贸易</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="stack-card">
|
||
<h3><span class="dot"></span>业务概览</h3>
|
||
<div class="stack-highlight">
|
||
<div>
|
||
<div style="font-size:12px;color:var(--text-muted)">累计成交额(近 12 月)</div>
|
||
<div class="amount">¥ 8,620,000</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<div style="font-size:12px;color:var(--text-muted)">进行中商机</div>
|
||
<div style="font-size:18px;font-weight:700;color:var(--primary-dark)">3 个</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stack-card">
|
||
<h3><span class="dot"></span>最近跟进</h3>
|
||
<p style="margin:0;font-size:13px;line-height:1.6;color:var(--text)">
|
||
2026-06-12 · 陈经理:客户对催化剂 A 型报价满意,计划下周签约框架合同。需协调技术部提供样品检测报告。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-foot">
|
||
<button type="button" class="btn btn-ghost" data-close>
|
||
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.querySelectorAll("[data-open]").forEach(function (btn) {
|
||
btn.addEventListener("click", function () {
|
||
var id = btn.getAttribute("data-open");
|
||
var dlg = document.getElementById(id);
|
||
if (dlg) dlg.classList.add("open");
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll("[data-close]").forEach(function (btn) {
|
||
btn.addEventListener("click", function () {
|
||
btn.closest(".backdrop").classList.remove("open");
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll(".backdrop").forEach(function (backdrop) {
|
||
backdrop.addEventListener("click", function (e) {
|
||
if (e.target === backdrop) backdrop.classList.remove("open");
|
||
});
|
||
});
|
||
|
||
document.addEventListener("keydown", function (e) {
|
||
if (e.key === "Escape") {
|
||
document.querySelectorAll(".backdrop.open").forEach(function (b) {
|
||
b.classList.remove("open");
|
||
});
|
||
}
|
||
});
|
||
|
||
document.querySelectorAll(".style-f .view-tab").forEach(function (tab) {
|
||
tab.addEventListener("click", function () {
|
||
var panelId = tab.getAttribute("data-tab");
|
||
var dialog = tab.closest(".style-f");
|
||
dialog.querySelectorAll(".view-tab").forEach(function (t) { t.classList.remove("active"); });
|
||
dialog.querySelectorAll(".view-tab-panel").forEach(function (p) { p.classList.remove("active"); });
|
||
tab.classList.add("active");
|
||
var panel = document.getElementById(panelId);
|
||
if (panel) panel.classList.add("active");
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|