zkxw/docs/qc-card-separation-demos/07-inner-task-cards.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>07 · 组内任务小卡片 · 质检卡片间距</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-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 16px;
      }

      @media (max-width: 900px) {
        .compare-grid {
          grid-template-columns: 1fr;
        }
      }

      .compare-block {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--surface);
      }

      .compare-block__label {
        padding: 10px 14px;
        font-size: 12px;
        font-weight: 600;
        color: var(--primary-dark);
        background: var(--primary-bg);
        border-bottom: 1px solid #a7f3d0;
      }

      .compare-block__label span {
        display: block;
        margin-top: 2px;
        font-weight: 400;
        color: var(--text-muted);
      }

      .compare-block__body {
        padding: 12px 14px 14px;
        background: #f8fafc;
      }

      /* A · 现状 */
      .task-variant-a .qc-task-cards-grid {
        gap: 10px;
      }

      .task-variant-a .qc-task-card {
        border: 1px solid var(--border);
        background: #fff;
        box-shadow: none;
      }

      /* B · 浅绿底 + 白卡阴影 */
      .task-variant-b .qc-task-cards-grid {
        gap: 12px;
        padding: 10px;
        border-radius: var(--radius-sm);
        background: #ecfdf5;
      }

      .task-variant-b .qc-task-card {
        border: 1px solid #d1fae5;
        box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08);
      }

      /* C · 加大 gap + 略深边框 */
      .task-variant-c .qc-task-cards-grid {
        gap: 14px;
      }

      .task-variant-c .qc-task-card {
        border: 1px solid #cbd5e1;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      }

      /* D · 交替底色 */
      .task-variant-d .qc-task-cards-grid {
        gap: 10px;
      }

      .task-variant-d .qc-task-card:nth-child(odd) {
        background: #fff;
        border-color: var(--border);
      }

      .task-variant-d .qc-task-card:nth-child(even) {
        background: #f8fafc;
        border-color: #cbd5e1;
      }

      .task-variant-d .qc-task-card:nth-child(3) {
        background: #fff;
      }
    </style>
  </head>
  <body>
    <header class="demo-banner">
      <div>
        <h1>07 · 组内质检任务小卡片（四方案并排）</h1>
        <p>工单内 <code>#f8fafc</code> 任务区、三列 compact 任务卡片的边界增强方案；可与 02–06 任一工单级方案组合使用。</p>
      </div>
      <div class="demo-banner__actions">
        <a class="demo-link" href="06-elevated-no-border.html">← 上一方案</a>
        <a class="demo-link" href="index.html">索引</a>
        <a class="demo-link demo-link--primary" href="compare-all.html">总览对比 →</a>
      </div>
    </header>

    <div class="page-container">
      <section class="panel">
        <div class="panel-top">
          <h2 class="title-bar-heading">组内任务卡片 · 四方案对比</h2>
        </div>
        <p class="variant-note">
          <strong>说明：</strong>下方每个区块均为同一条工单的任务区，仅任务网格样式不同。A 为现网；B 在任务区加薄荷浅底；C 加大间距并加深边框；D 奇偶行微色差。
        </p>

        <div class="compare-grid">
          <div class="compare-block task-variant-a">
            <div class="compare-block__label">
              A · 现状基线
              <span>gap 10px · 1px #e2e8f0 · 白底</span>
            </div>
            <div class="compare-block__body">
              <div class="qc-work-order-task-sublist__head">
                <div class="qc-work-order-task-sublist__head-title">质检任务</div>
                <span class="qc-work-order-task-sublist__count">共 3 项</span>
              </div>
              <div class="qc-task-cards-grid" data-task-grid="a"></div>
            </div>
          </div>

          <div class="compare-block task-variant-b">
            <div class="compare-block__label">
              B · 薄荷浅底容器
              <span>任务网格外包 #ecfdf5 · 卡片轻阴影</span>
            </div>
            <div class="compare-block__body">
              <div class="qc-work-order-task-sublist__head">
                <div class="qc-work-order-task-sublist__head-title">质检任务</div>
                <span class="qc-work-order-task-sublist__count">共 3 项</span>
              </div>
              <div class="qc-task-cards-grid" data-task-grid="b"></div>
            </div>
          </div>

          <div class="compare-block task-variant-c">
            <div class="compare-block__label">
              C · 间距 + 深边框
              <span>gap 14px · 边框 #cbd5e1 · 轻阴影</span>
            </div>
            <div class="compare-block__body">
              <div class="qc-work-order-task-sublist__head">
                <div class="qc-work-order-task-sublist__head-title">质检任务</div>
                <span class="qc-work-order-task-sublist__count">共 3 项</span>
              </div>
              <div class="qc-task-cards-grid" data-task-grid="c"></div>
            </div>
          </div>

          <div class="compare-block task-variant-d">
            <div class="compare-block__label">
              D · 奇偶微色差
              <span>相邻任务卡 #fff / #f8fafc 交替</span>
            </div>
            <div class="compare-block__body">
              <div class="qc-work-order-task-sublist__head">
                <div class="qc-work-order-task-sublist__head-title">质检任务</div>
                <span class="qc-work-order-task-sublist__count">共 3 项</span>
              </div>
              <div class="qc-task-cards-grid" data-task-grid="d"></div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <script src="_cards.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('[data-task-grid]').forEach(function (grid) {
          var temp = document.createElement('div')
          QcCardDemo.renderSingleCard(temp, false)
          var tasks = temp.querySelector('.qc-task-cards-grid')
          if (tasks) grid.innerHTML = tasks.innerHTML
        })
      })
    </script>
  </body>
</html>