shanxia2.0/docs/demos/pl-plan-pair-stack-no-label.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>运输计划 · 无「装/送」文字区分 Demo</title>
  <style>
    :root {
      --load: #059669;
      --delivery: #0284c7;
      --text: #1e293b;
      --muted: #64748b;
      --border: #e2e8f0;
      --page: #f8fafc;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 32px 24px 64px;
      font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      color: var(--text);
      background: var(--page);
    }
    h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
    .lead { margin: 0 0 12px; color: var(--muted); max-width: 760px; }
    .hint {
      margin: 0 0 28px;
      padding: 10px 14px;
      max-width: 760px;
      border-radius: 8px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      font-size: 13px;
      color: #065f46;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 20px;
    }
    .card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
    }
    .card__head {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 14px 16px; border-bottom: 1px solid var(--border);
    }
    .card__title { margin: 0; font-size: 15px; font-weight: 700; }
    .badge {
      flex-shrink: 0; padding: 2px 8px; border-radius: 999px;
      font-size: 11px; font-weight: 600;
    }
    .badge--rec { color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; }
    .badge--alt { color: #334155; background: #f1f5f9; border: 1px solid #cbd5e1; }
    .card__body { padding: 16px; }
    .card__note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
    .cell {
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
    }
    .name { font-size: 13px; font-weight: 600; line-height: 1.45; word-break: break-word; }
    .sub { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
    .body { flex: 1; min-width: 0; }

    /* 图例：列头可放小图例 */
    .col-legend {
      display: flex; gap: 12px; margin-bottom: 8px;
      font-size: 11px; color: var(--muted);
    }
    .col-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .col-legend i {
      display: inline-block; width: 10px; height: 10px; border-radius: 2px;
    }
    .col-legend i.load { background: var(--load); }
    .col-legend i.delivery { background: var(--delivery); }

    /* N1 左侧色条 */
    .n1 { display: flex; flex-direction: column; gap: 0; }
    .n1__row {
      display: flex; align-items: flex-start;
      padding: 4px 0 4px 10px;
      border-left: 3px solid transparent;
    }
    .n1__row--load { border-left-color: var(--load); }
    .n1__row--delivery { border-left-color: var(--delivery); }
    .n1__row + .n1__row {
      margin-top: 8px; padding-top: 8px;
      border-top: 1px dashed var(--border);
    }

    /* N2 时间轴 */
    .n2 { display: flex; flex-direction: column; }
    .n2__row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 2px 0 10px;
    }
    .n2__row:last-child { padding-bottom: 2px; }
    .n2__rail {
      flex-shrink: 0; display: flex; flex-direction: column; align-items: center; width: 12px;
    }
    .n2__dot {
      width: 10px; height: 10px; border-radius: 50%; z-index: 1;
    }
    .n2__dot--load { background: var(--load); }
    .n2__dot--delivery { background: var(--delivery); }
    .n2__line {
      flex: 1; width: 2px; min-height: 12px; margin-top: 2px; background: #cbd5e1;
    }
    .n2__row:last-child .n2__line { display: none; }

    /* N3 箭头图标 */
    .n3 { display: flex; flex-direction: column; gap: 0; }
    .n3__row {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 2px 0;
    }
    .n3__row + .n3__row {
      margin-top: 8px; padding-top: 8px;
      border-top: 1px dashed var(--border);
    }
    .n3__icon {
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; margin-top: 1px;
      color: #fff; border-radius: 4px;
    }
    .n3__icon--load { background: var(--load); }
    .n3__icon--delivery { background: var(--delivery); }
    .n3__icon svg { width: 12px; height: 12px; display: block; }

    /* N4 仅顺序 + 极淡色点 */
    .n4 { display: flex; flex-direction: column; gap: 0; }
    .n4__row {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 2px 0;
    }
    .n4__row + .n4__row {
      margin-top: 8px; padding-top: 8px;
      border-top: 1px dashed var(--border);
    }
    .n4__dot {
      flex-shrink: 0; width: 6px; height: 6px; margin-top: 6px;
      border-radius: 50%;
    }
    .n4__dot--load { background: var(--load); }
    .n4__dot--delivery { background: var(--delivery); }

    /* N5 流程箭头夹在中间 */
    .n5 { display: flex; flex-direction: column; gap: 4px; }
    .n5__row {
      display: flex; align-items: flex-start;
      padding: 4px 0 4px 10px;
      border-left: 3px solid transparent;
    }
    .n5__row--load { border-left-color: var(--load); }
    .n5__row--delivery { border-left-color: var(--delivery); }
    .n5__flow {
      display: flex; align-items: center; justify-content: flex-start;
      padding: 0 0 0 2px;
      color: #94a3b8; font-size: 11px; line-height: 1;
    }
    .n5__flow svg { width: 14px; height: 14px; }

    .legend {
      margin-top: 28px; padding: 16px 18px; max-width: 860px;
      border-radius: 10px; background: #fff; border: 1px solid var(--border);
    }
    .legend h2 { margin: 0 0 8px; font-size: 14px; }
    .legend ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
    .legend li { margin: 4px 0; }
    .legend strong { color: var(--text); }
  </style>
</head>
<body>
  <h1>无「装 / 送」文字 · 如何表达装货与送货</h1>
  <p class="lead">
    约定不变：<strong>上行 = 装货</strong>，<strong>下行 = 送货</strong>。色语义：绿 = 装、蓝 = 送。单元格内不再出现「装」「送」二字，靠色条 / 时间轴 / 图标 / 圆点表达。
  </p>
  <p class="hint">
    建议：列头旁加一行小图例「■ 装货　■ 送货」，新用户也能懂。下方 N1 / N2 已示范图例。
  </p>

  <div class="grid">
    <!-- N1 -->
    <section class="card">
      <div class="card__head">
        <h2 class="card__title">N1. 左侧色条</h2>
        <span class="badge badge--rec">推荐</span>
      </div>
      <div class="card__body">
        <div class="col-legend">
          <span><i class="load"></i>装货</span>
          <span><i class="delivery"></i>送货</span>
        </div>
        <div class="cell">
          <div class="n1">
            <div class="n1__row n1__row--load">
              <div class="body">
                <div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
                <div class="sub">2026-09-16 08:30</div>
              </div>
            </div>
            <div class="n1__row n1__row--delivery">
              <div class="body">
                <div class="name">武汉市东西湖区物流大道 88 号</div>
                <div class="sub">2026-09-16 16:00</div>
              </div>
            </div>
          </div>
        </div>
        <p class="card__note">无标签字；扫视靠左边线颜色。与当前结构最接近，只隐藏 label。</p>
      </div>
    </section>

    <!-- N2 -->
    <section class="card">
      <div class="card__head">
        <h2 class="card__title">N2. 时间轴圆点</h2>
        <span class="badge badge--rec">推荐</span>
      </div>
      <div class="card__body">
        <div class="col-legend">
          <span><i class="load"></i>装货</span>
          <span><i class="delivery"></i>送货</span>
        </div>
        <div class="cell">
          <div class="n2">
            <div class="n2__row">
              <div class="n2__rail">
                <span class="n2__dot n2__dot--load"></span>
                <span class="n2__line"></span>
              </div>
              <div class="body">
                <div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
                <div class="sub">2026-09-16 08:30</div>
              </div>
            </div>
            <div class="n2__row">
              <div class="n2__rail">
                <span class="n2__dot n2__dot--delivery"></span>
                <span class="n2__line"></span>
              </div>
              <div class="body">
                <div class="name">武汉市东西湖区物流大道 88 号</div>
                <div class="sub">2026-09-16 16:00</div>
              </div>
            </div>
          </div>
        </div>
        <p class="card__note">绿→蓝连线天然表达「先装后送」流程，地址/时间列尤其合适。</p>
      </div>
    </section>

    <!-- N3 -->
    <section class="card">
      <div class="card__head">
        <h2 class="card__title">N3. 入/出箭头图标</h2>
        <span class="badge badge--alt">备选</span>
      </div>
      <div class="card__body">
        <div class="cell">
          <div class="n3">
            <div class="n3__row">
              <span class="n3__icon n3__icon--load" title="装货" aria-label="装货">
                <!-- download-into = 装入 -->
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>
              </span>
              <div class="body">
                <div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
                <div class="sub">2026-09-16 08:30</div>
              </div>
            </div>
            <div class="n3__row">
              <span class="n3__icon n3__icon--delivery" title="送货" aria-label="送货">
                <!-- upload-out = 送出 -->
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21V9"/><path d="m7 14 5-5 5 5"/><path d="M5 3h14"/></svg>
              </span>
              <div class="body">
                <div class="name">武汉市东西湖区物流大道 88 号</div>
                <div class="sub">2026-09-16 16:00</div>
              </div>
            </div>
          </div>
        </div>
        <p class="card__note">↓ 装入 / ↑ 送出。无汉字但有语义；需统一全列表图标含义。</p>
      </div>
    </section>

    <!-- N4 -->
    <section class="card">
      <div class="card__head">
        <h2 class="card__title">N4. 色点前缀</h2>
        <span class="badge badge--alt">备选</span>
      </div>
      <div class="card__body">
        <div class="cell">
          <div class="n4">
            <div class="n4__row">
              <span class="n4__dot n4__dot--load" title="装货"></span>
              <div class="body">
                <div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
                <div class="sub">2026-09-16 08:30</div>
              </div>
            </div>
            <div class="n4__row">
              <span class="n4__dot n4__dot--delivery" title="送货"></span>
              <div class="body">
                <div class="name">武汉市东西湖区物流大道 88 号</div>
                <div class="sub">2026-09-16 16:00</div>
              </div>
            </div>
          </div>
        </div>
        <p class="card__note">最省空间；辨识弱于色条/时间轴，适合列很多、信息极密时。</p>
      </div>
    </section>

    <!-- N5 -->
    <section class="card">
      <div class="card__head">
        <h2 class="card__title">N5. 色条 + 中间流向箭头</h2>
        <span class="badge badge--alt">备选</span>
      </div>
      <div class="card__body">
        <div class="cell">
          <div class="n5">
            <div class="n5__row n5__row--load">
              <div class="body">
                <div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
                <div class="sub">2026-09-16 08:30</div>
              </div>
            </div>
            <div class="n5__flow" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
            </div>
            <div class="n5__row n5__row--delivery">
              <div class="body">
                <div class="name">武汉市东西湖区物流大道 88 号</div>
                <div class="sub">2026-09-16 16:00</div>
              </div>
            </div>
          </div>
        </div>
        <p class="card__note">中间 ↓ 强化「从装到送」；略占高度，多列重复时可能略吵。</p>
      </div>
    </section>
  </div>

  <div class="legend">
    <h2>怎么选</h2>
    <ul>
      <li><strong>N1 色条</strong>：改动最小（隐藏文字即可），适合所有配对列统一样式。</li>
      <li><strong>N2 时间轴</strong>：流程感最强，优先用在地址/时间这类「有先后」的列。</li>
      <li><strong>N3 图标</strong>：语义明确但要培训/图例，避免与别的操作图标混淆。</li>
      <li>无论哪种，列头或工具栏旁加「绿=装 / 蓝=送」小图例，可弥补去掉汉字后的学习成本。</li>
    </ul>
  </div>
</body>
</html>