zkxw/docs/mockups/ui-richness-P09-side-by-side.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>P09 · 同屏 Before/After</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="ui-richness-shared.css" />
</head>
<body>
  <div class="demo-banner">
    <div><span class="level-tag level-PAT">模式 P09</span> <strong>同屏 Before/After</strong> — 同一业务块改造前后并排</div>
    <a href="ui-richness-index.html">← 返回对比入口</a>
  </div>
  <div class="page-wrap">
    <header class="page-head">
      <h1>列表页 · 局部改造对照</h1>
      <p class="page-desc">不用换整页，逐项叠加丰富化元素——适合评审「改哪几块最有效」。</p>
    </header>

    <h2 style="font-size:15px;margin:0 0 12px">① 页头区</h2>
    <div class="compare-row">
      <div class="compare-col plain">
        <section class="panel"><div class="panel-top"><h2>客户列表</h2></div><div style="padding:16px;color:var(--text-muted);font-size:13px">（无 page-desc，直接进筛选）</div></section>
      </div>
      <div class="compare-col rich">
        <header class="page-head" style="margin:0 0 12px"><h1 style="font-size:17px">客户管理</h1><p class="page-desc">维护客户档案与结算信息，双击行查看详情。</p></header>
        <section class="panel"><div class="panel-top"><h2 class="title-bar-heading">客户列表</h2></div></section>
      </div>
    </div>

    <h2 style="font-size:15px;margin:24px 0 12px">② 工具栏</h2>
    <div class="compare-row">
      <div class="compare-col plain">
        <section class="panel"><div class="list-toolbar"><div class="list-toolbar-row"><button class="btn btn-main" type="button">新增</button><button class="btn btn-ghost" type="button">删除</button></div></div></section>
      </div>
      <div class="compare-col rich">
        <section class="panel"><div class="list-toolbar"><div class="list-toolbar-row"><span>已选 <span class="sel-num">2</span> 项</span><button class="btn btn-main" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>新增客户</button><button class="btn btn-ghost" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>导出</button></div></div></section>
      </div>
    </div>

    <h2 style="font-size:15px;margin:24px 0 12px">③ 表格行</h2>
    <div class="compare-row">
      <div class="compare-col plain">
        <section class="panel"><table class="data-table"><thead><tr><th>客户名称</th><th>状态</th><th>操作</th></tr></thead><tbody><tr><td>上海市第一人民医院</td><td>正常</td><td><button class="btn btn-op" type="button">查看</button></td></tr></tbody></table></section>
      </div>
      <div class="compare-col rich">
        <section class="panel"><table class="data-table"><thead><tr><th class="cell-left">客户</th><th>状态</th><th>操作</th></tr></thead><tbody><tr><td class="cell-left"><div class="cell-composite"><span class="avatar">上</span><div><div>上海市第一人民医院</div><div class="cell-sub">CUS-001</div></div></div></td><td><span class="tag success">正常</span></td><td><button class="btn btn-op primary" type="button"><svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>查看</button></td></tr></tbody></table></section>
      </div>
    </div>

    <h2 style="font-size:15px;margin:24px 0 12px">④ 详情首屏</h2>
    <div class="compare-row">
      <div class="compare-col plain">
        <section class="panel"><table class="data-table"><tr><th style="width:100px;text-align:left;background:var(--table-head)">名称</th><td class="cell-left">上海市第一人民医院</td></tr><tr><th style="text-align:left;background:var(--table-head)">状态</th><td class="cell-left">正常</td></tr></table></section>
      </div>
      <div class="compare-col rich">
        <section class="panel"><div class="view-hero" style="margin:12px"><span class="avatar" style="width:56px;height:56px;border-radius:10px;font-size:20px">上</span><div class="view-hero-main"><h2 style="font-size:16px">上海市第一人民医院</h2><div class="view-hero-tags"><span class="tag success">正常</span><span class="tag info">医院</span></div><p class="view-hero-meta">CUS-001 · 华东/上海/黄浦</p></div></div></section>
      </div>
    </div>

    <p class="dim-note"><strong>评审用法：</strong>和产品/用户逐项勾选「要哪几项」——通常 ①+②+Tag 是 L2 最低配；③ 复合列视业务选做；④ 详情 Hero 用于查看弹窗。</p>
  </div>
</body>
</html>