Files
shanxia2.0/docs/fresh-mint-view-dialog-demos.html
T
2026-06-21 09:19:07 +08:00

1334 lines
54 KiB
HTML
Raw 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>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>