zkxw/docs/qc-card-separation-demos/10-sample-ctx-green-header.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>