336 lines
9.6 KiB
HTML
336 lines
9.6 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>10 · 样本组标题栏绿底白字 · 质检卡片</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="_shared.css" />
|
||
<style>
|
||
.compare-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 28px;
|
||
padding: 16px 20px 24px;
|
||
}
|
||
|
||
.compare-block__label {
|
||
padding: 12px 16px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
background: #fafafa;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.compare-block__label p {
|
||
margin: 4px 0 0;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: var(--text-muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.compare-block__body {
|
||
padding: 14px;
|
||
background: #f1f5f9;
|
||
}
|
||
|
||
.compare-block__body .qc-work-order-cards-wrap {
|
||
gap: 16px;
|
||
padding: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
/* ── 样本组卡片骨架 ── */
|
||
.qc-sample-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
/* A · 现网 */
|
||
.variant-a .qc-sample-row__ctx {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px 12px;
|
||
padding: 12px 16px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.variant-a .qc-sample-row__idx {
|
||
font-size: 12px;
|
||
color: #94a3b8;
|
||
min-width: 20px;
|
||
}
|
||
|
||
.variant-a .qc-sample-row__code {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
font-family: ui-monospace, Menlo, monospace;
|
||
}
|
||
|
||
.variant-a .qc-sample-row__sub {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.variant-a .qc-sample-row__badge {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
color: #065f46;
|
||
border: 1px solid #a8d4c4;
|
||
}
|
||
|
||
/* B · 绿底白字（主色） */
|
||
.variant-b .qc-sample-row__ctx {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px 12px;
|
||
padding: 12px 16px;
|
||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
border-bottom: none;
|
||
}
|
||
|
||
.variant-b .qc-sample-row__idx {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.72);
|
||
min-width: 20px;
|
||
}
|
||
|
||
.variant-b .qc-sample-row__code {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
font-family: ui-monospace, Menlo, monospace;
|
||
}
|
||
|
||
.variant-b .qc-sample-row__sub {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.88);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.variant-b .qc-sample-row__badge {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
padding: 2px 10px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
color: #fff;
|
||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||
}
|
||
|
||
/* C · 深绿单色（无渐变，更稳重） */
|
||
.variant-c .qc-sample-row__ctx {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px 12px;
|
||
padding: 12px 16px;
|
||
background: #059669;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.variant-c .qc-sample-row__idx {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
min-width: 20px;
|
||
}
|
||
|
||
.variant-c .qc-sample-row__code {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
font-family: ui-monospace, Menlo, monospace;
|
||
}
|
||
|
||
.variant-c .qc-sample-row__sub {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
|
||
.variant-c .qc-sample-row__badge {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
padding: 2px 10px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
color: #fff;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
/* 内层工单头：薄荷浅底（与 09-C 组合） */
|
||
.with-mint-wo-head .qc-work-order-card__head {
|
||
background: #ecfdf5;
|
||
border-bottom: 1px solid #a7f3d0;
|
||
}
|
||
|
||
.with-mint-wo-head .qc-work-order-card__tasks {
|
||
background: #fff;
|
||
}
|
||
|
||
.with-mint-wo-head .qc-sample-row :deep(.qc-work-order-card),
|
||
.with-mint-wo-head .qc-work-order-card {
|
||
border: none;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.pros-cons {
|
||
max-width: 1120px;
|
||
margin: 0 auto;
|
||
padding: 0 24px 16px;
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.pros-cons strong {
|
||
color: var(--text);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="demo-banner">
|
||
<div>
|
||
<h1>10 · 样本组上下文条（qc-sample-row__ctx）绿底白字</h1>
|
||
<p>对比入库质检「同样本分组」顶栏：现网白底 vs 绿底白字 vs 深绿单色。每组含简化工单头 + 任务区。</p>
|
||
</div>
|
||
<div class="demo-banner__actions">
|
||
<a class="demo-link" href="09-strong-header-bg.html">← 09</a>
|
||
<a class="demo-link" href="index.html">索引</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="pros-cons">
|
||
<strong>设计提示：</strong>绿底白字适合作为「整条样本组」的顶栏锚点（区分第 1 条 vs 第 2 条样本组）；
|
||
内层工单标题栏建议仍用浅薄荷底（#ecfdf5），避免一条记录里叠两层深绿。10 条列表时若觉得绿条过多，可改用
|
||
B/C 的深绿或仅首行样本组用绿条。
|
||
</div>
|
||
|
||
<div class="page-container">
|
||
<section class="panel">
|
||
<div class="panel-top">
|
||
<h2 class="title-bar-heading">样本组顶栏 · 三方案（各 4 条）</h2>
|
||
</div>
|
||
<div class="compare-stack">
|
||
<div class="compare-block variant-a">
|
||
<div class="compare-block__label">
|
||
A · 现网（白底深字）
|
||
<p>ctx 背景 #fff，与下方工单头、任务区色差弱，多条时边界不清晰。</p>
|
||
</div>
|
||
<div class="compare-block__body">
|
||
<div class="qc-work-order-cards-wrap" id="list-a"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="compare-block variant-b with-mint-wo-head">
|
||
<div class="compare-block__label">
|
||
B · 绿渐变底 + 白字 + 内层薄荷工单头（推荐）
|
||
<p>ctx：<code>linear-gradient(135deg, #10b981, #059669)</code>；工单头 #ecfdf5。层次：深绿样本条 → 浅绿工单 → 白任务区。</p>
|
||
</div>
|
||
<div class="compare-block__body">
|
||
<div class="qc-work-order-cards-wrap" id="list-b"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="compare-block variant-c with-mint-wo-head">
|
||
<div class="compare-block__label">
|
||
C · 深绿单色 #059669 + 白字
|
||
<p>比渐变更稳重，一屏 10 条时视觉重量略低于 B，分隔感仍很强。</p>
|
||
</div>
|
||
<div class="compare-block__body">
|
||
<div class="qc-work-order-cards-wrap" id="list-c"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<script src="_cards.js"></script>
|
||
<script>
|
||
var SAMPLES = [
|
||
{
|
||
idx: 1,
|
||
code: 'ZK202506120001',
|
||
sub: '脐带血 · 协议 XY-2025-0066 · 已生效 · 接收 2026-06-12 · 李四',
|
||
badge: '2 条质检'
|
||
},
|
||
{
|
||
idx: 2,
|
||
code: 'ZK202506090005',
|
||
sub: '胎盘 · 协议 XY-2025-0055 · 赵敏',
|
||
badge: '3 条质检'
|
||
},
|
||
{
|
||
idx: 3,
|
||
code: 'ZK202506080003',
|
||
sub: '脐带血 · 协议 XY-2025-0088 · 王强',
|
||
badge: ''
|
||
},
|
||
{
|
||
idx: 4,
|
||
code: 'ZK202506070012',
|
||
sub: '脐带血 · 协议 XY-2025-0091 · 陈静 · 接收 2026-06-07',
|
||
badge: '2 条质检'
|
||
}
|
||
]
|
||
|
||
function renderSampleGroup(s, variantClass) {
|
||
var badge =
|
||
s.badge
|
||
? '<span class="qc-sample-row__badge">' + s.badge + '</span>'
|
||
: ''
|
||
var inner = document.createElement('div')
|
||
QcCardDemo.renderSingleCard(inner, false)
|
||
var card = inner.querySelector('.qc-work-order-card')
|
||
if (card) {
|
||
card.className = 'qc-work-order-card'
|
||
}
|
||
return (
|
||
'<article class="qc-sample-row">' +
|
||
'<div class="qc-sample-row__ctx">' +
|
||
'<span class="qc-sample-row__idx">' +
|
||
s.idx +
|
||
'</span>' +
|
||
'<span class="qc-sample-row__code">' +
|
||
s.code +
|
||
'</span>' +
|
||
'<span class="qc-sample-row__sub">' +
|
||
s.sub +
|
||
'</span>' +
|
||
badge +
|
||
'</div>' +
|
||
(card ? card.outerHTML : '') +
|
||
'</article>'
|
||
)
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
;['list-a', 'list-b', 'list-c'].forEach(function (id) {
|
||
var el = document.getElementById(id)
|
||
if (el) {
|
||
el.innerHTML = SAMPLES.map(function (s) {
|
||
return renderSampleGroup(s)
|
||
}).join('')
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|