70 lines
4.5 KiB
HTML
70 lines
4.5 KiB
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>新增/编辑弹窗字段 > 8 个时。对齐规范 <code>label-position="top"</code> + 分区，与 <code>dialog-form-layout</code> 滚动配合。</p>
|
|
</div>
|
|
</body>
|
|
</html>
|