shanxia2.0/mobile-ui/shanxia-mp-pattern-list.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>山峡化工 · 标准列表页 Pattern</title>
  <link rel="stylesheet" href="shanxia-mp-base.css" />
</head>
<body>
  <nav class="proto-nav">
    <strong>Pattern</strong>
    <a href="shanxia-mp-pattern-index.html">索引</a>
    <a class="active" href="shanxia-mp-pattern-list.html">列表</a>
    <a href="shanxia-mp-pattern-view.html">查看</a>
    <a href="shanxia-mp-pattern-form.html">表单</a>
    <a href="shanxia-mp-pattern-feedback.html">弹窗</a>
  </nav>

  <main class="phone no-tabbar">
    <!-- 方案 A：渐变 Header + 搜索（适合模块首页感） -->
    <header class="mp-header">
      <div class="mp-header__row">
        <a class="mp-subpage-back" href="shanxia-mp-workbench-demo.html" style="color:#fff;font-size:13px;opacity:.95">← 工作台</a>
        <button class="mp-header__action" type="button">+ 新增</button>
      </div>
      <h1 class="mp-header__title" style="margin-top:4px">线索管理</h1>
      <div class="mp-header__search" style="margin-top:10px"><span class="mp-header__search-dot"></span>搜索线索 / 客户 / 联系人</div>
    </header>

    <div class="mp-pattern-note">
      <strong>P-LIST · 标准业务列表</strong>
      结构：顶栏 → 筛选 Tab → 卡片列表 → 触底提示。卡片可整卡点击查看；底栏操作区放次要动作 + 主按钮。
    </div>

    <!-- 状态 Tab -->
    <section class="mp-section" style="margin-top:8px">
      <div class="mp-tabs">
        <button class="mp-tab active" type="button">全部</button>
        <button class="mp-tab" type="button">新线索</button>
        <button class="mp-tab" type="button">跟进中</button>
        <button class="mp-tab" type="button">已转化</button>
        <button class="mp-tab" type="button">已关闭</button>
      </div>
    </section>

    <!-- 列表区 -->
    <section class="mp-section">
      <div class="mp-list">
        <a class="mp-card mp-card--clickable mp-card--accent" href="shanxia-mp-pattern-view.html">
          <div class="mp-card__head">
            <div>
              <div class="mp-card__title">苏州新材料询价</div>
              <div class="mp-card__sub">XS-20260706-001 · 官网表单</div>
            </div>
            <span class="mp-tag mp-tag--info">新线索</span>
          </div>
          <div class="mp-card__row"><span>联系人</span><span>陈先生 138****2201</span></div>
          <div class="mp-card__row"><span>意向产品</span><span>甲醇 · 32 吨/月</span></div>
          <div class="mp-card__row"><span>创建时间</span><span>2026-07-06 09:12</span></div>
          <div class="mp-card__foot">
            <button class="mp-btn mp-btn--ghost" type="button" onclick="event.preventDefault();event.stopPropagation()">分配</button>
            <span class="mp-card__chevron">›</span>
          </div>
        </a>

        <a class="mp-card mp-card--clickable" href="shanxia-mp-pattern-view.html">
          <div class="mp-card__head">
            <div>
              <div class="mp-card__title">合肥化工展会留资</div>
              <div class="mp-card__sub">XS-20260705-018 · 线下展会</div>
            </div>
            <span class="mp-tag mp-tag--warning">跟进中</span>
          </div>
          <div class="mp-card__row"><span>负责人</span><span>王销售</span></div>
          <div class="mp-card__row"><span>最近跟进</span><span>2026-07-05 16:40</span></div>
          <div class="mp-card__foot">
            <button class="mp-btn mp-btn--primary" type="button" onclick="event.preventDefault();event.stopPropagation()">转化商机</button>
          </div>
        </a>

        <article class="mp-card">
          <div class="mp-card__head">
            <div>
              <div class="mp-card__title">南通物流合作咨询</div>
              <div class="mp-card__sub">XS-20260704-006</div>
            </div>
            <span class="mp-tag mp-tag--success">已转化</span>
          </div>
          <div class="mp-card__row"><span>关联商机</span><span>SJ-20260704-002</span></div>
        </article>
      </div>
      <p class="mp-list-end">— 没有更多了 —</p>
    </section>

    <!-- 空态示例（注释说明，默认隐藏可切换展示） -->
    <section class="mp-section" style="display:none" id="empty-demo">
      <div class="mp-empty">
        <div class="mp-empty__icon"></div>
        <p>暂无线索数据</p>
        <button class="mp-btn mp-btn--primary" type="button" style="margin-top:14px">+ 新增线索</button>
      </div>
    </section>

    <!-- 骨架屏示例 -->
    <section class="mp-section">
      <div class="mp-section__head"><h2>加载态参考</h2></div>
      <div class="mp-skeleton-card">
        <div class="mp-skeleton mp-skeleton-line mp-skeleton-line--title"></div>
        <div class="mp-skeleton mp-skeleton-line"></div>
        <div class="mp-skeleton mp-skeleton-line mp-skeleton-line--short"></div>
      </div>
    </section>

    <p style="margin:0 16px 20px;font-size:11px;color:var(--text-muted);line-height:1.6">
      备选顶栏：业务子页可使用 <code style="font-size:10px">.mp-navbar</code> 白底精简导航（见表单页）。列表主操作「新增」放 Header 右侧；批量操作本期不做底栏。
    </p>
  </main>
</body>
</html>