zkxw/docs/mockups/ui-richness-P05-form-sections.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>P05 · 分区表单</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">模式 P05</span> <strong>分区表单</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>
    <div class="compare-row">
      <div class="compare-col plain">
        <h3>❌ 素：平铺字段</h3>
        <section class="panel"><div class="panel-top"><h2>客户信息</h2></div>
          <div style="padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px">
            <div class="form-field"><label>客户名称</label><input class="input" /></div>
            <div class="form-field"><label>客户编码</label><input class="input" /></div>
            <div class="form-field"><label>联系人</label><input class="input" /></div>
            <div class="form-field"><label>电话</label><input class="input" /></div>
            <div class="form-field"><label>结算方式</label><input class="input" /></div>
            <div class="form-field"><label>信用额度</label><input class="input" /></div>
          </div>
        </section>
      </div>
      <div class="compare-col rich">
        <h3>✓ 丰：分区卡片</h3>
        <section class="panel"><div class="panel-top"><h2 class="title-bar-heading">客户信息</h2></div>
          <div class="form-sections">
            <div class="form-section-card">
              <div class="form-section-hd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>基本信息</div>
              <div class="form-section-bd">
                <div class="form-field"><label>客户名称</label><input class="input" value="上海市第一人民医院" /></div>
                <div class="form-field"><label>客户编码</label><input class="input" value="CUS-001" /></div>
                <div class="form-field"><label>客户类型</label><select class="select"><option>医院</option></select></div>
                <div class="form-field"><label>状态</label><select class="select"><option>正常</option></select></div>
              </div>
            </div>
            <div class="form-section-card">
              <div class="form-section-hd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>联系信息</div>
              <div class="form-section-bd">
                <div class="form-field"><label>联系人</label><input class="input" value="张医生" /></div>
                <div class="form-field"><label>联系电话</label><input class="input" value="021-63240000" /></div>
                <div class="form-field full"><label>详细地址</label><input class="input" value="上海市黄浦区武进路 85 号" /></div>
              </div>
            </div>
            <div class="form-section-card">
              <div class="form-section-hd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>结算信息</div>
              <div class="form-section-bd">
                <div class="form-field"><label>结算方式</label><select class="select"><option>月结</option></select></div>
                <div class="form-field"><label>信用额度（元）</label><input class="input" value="500000" /></div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <p class="dim-note"><strong>适用：</strong>新增/编辑弹窗字段 &gt; 8 个时。对齐规范 <code>label-position="top"</code> + 分区，与 <code>dialog-form-layout</code> 滚动配合。</p>
  </div>
</body>
</html>