shanxia2.0/mobile-ui/shanxia-mp-pattern-form.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 href="shanxia-mp-pattern-list.html">列表</a>
    <a href="shanxia-mp-pattern-view.html">查看</a>
    <a class="active" href="shanxia-mp-pattern-form.html">表单</a>
    <a href="shanxia-mp-pattern-feedback.html">弹窗</a>
  </nav>

  <main class="phone no-tabbar mp-form-page">
    <!-- 白底精简导航（表单/编辑页推荐） -->
    <header class="mp-navbar">
      <button class="mp-navbar__back" type="button" onclick="history.back()">← 取消</button>
      <h1 class="mp-navbar__title">新增线索</h1>
      <span class="mp-navbar__action" style="visibility:hidden">占位</span>
    </header>

    <div class="mp-pattern-note">
      <strong>P-FORM · 新增/编辑表单</strong>
      分组面板 + 堆叠输入（长文本）+ 行式选择器。必填红星在 label；注释用浅色小字。底栏固定「取消 + 提交」。
    </div>

    <!-- 分组一：基本信息（行式选择器） -->
    <section class="mp-form-group">
      <h2 class="mp-form-group__title">基本信息</h2>
      <div class="mp-form-panel">
        <div class="mp-field-row">
          <span class="mp-field-row__label mp-field-row__label--required">线索来源</span>
          <span class="mp-field-row__value is-placeholder">请选择<span class="mp-field-row__chevron">›</span></span>
        </div>
        <div class="mp-field-row">
          <span class="mp-field-row__label mp-field-row__label--required">意向产品</span>
          <span class="mp-field-row__value">甲醇<span class="mp-field-row__chevron">›</span></span>
        </div>
        <div class="mp-field-row">
          <span class="mp-field-row__label">负责人</span>
          <span class="mp-field-row__value is-placeholder">请选择<span class="mp-field-row__chevron">›</span></span>
        </div>
        <div class="mp-field-row">
          <span class="mp-field-row__label">预计成交</span>
          <span class="mp-field-row__value is-placeholder">选择日期<span class="mp-field-row__chevron">›</span></span>
        </div>
      </div>
    </section>

    <!-- 分组二：客户信息（堆叠输入） -->
    <section class="mp-form-group">
      <h2 class="mp-form-group__title">客户信息</h2>
      <div class="mp-form-panel">
        <div class="mp-field">
          <label class="mp-field__label mp-field__label--required">联系人</label>
          <input class="mp-field__input" type="text" placeholder="请输入联系人姓名" />
        </div>
        <div class="mp-field mp-field--error">
          <label class="mp-field__label mp-field__label--required">手机号</label>
          <input class="mp-field__input" type="tel" value="138abc" placeholder="请输入手机号" />
          <p class="mp-field__error">请输入正确的手机号</p>
        </div>
        <div class="mp-field">
          <label class="mp-field__label">公司名称</label>
          <input class="mp-field__input" type="text" placeholder="请输入公司全称" />
        </div>
        <div class="mp-field">
          <label class="mp-field__label">预估用量<span class="mp-field__tip">（吨/月）</span></label>
          <input class="mp-field__input" type="number" placeholder="请输入数量" />
        </div>
        <div class="mp-field">
          <label class="mp-field__label">备注</label>
          <textarea class="mp-field__textarea" placeholder="补充客户需求、跟进要点等"></textarea>
        </div>
      </div>
    </section>

    <!-- 分组三：附件 + 开关 -->
    <section class="mp-form-group">
      <h2 class="mp-form-group__title">附件与其他</h2>
      <div class="mp-form-panel">
        <div style="padding:12px;border-bottom:1px solid var(--border-light)">
          <div style="font-size:13px;color:var(--text-muted);margin-bottom:10px">附件<span class="mp-field__tip">（选填，最多 5 个）</span></div>
          <div class="mp-attach-row" style="padding:0">
            <button class="mp-attach-upload" type="button"><span class="mp-attach-upload__plus">+</span>上传</button>
            <div class="mp-attach-card">
              <div class="mp-attach-card__thumb">IMG</div>
              <span class="mp-attach-card__name">名片.jpg</span>
            </div>
          </div>
        </div>
        <div class="mp-field-row">
          <span class="mp-field-row__label">同步创建跟进提醒</span>
          <span class="mp-field-row__switch" aria-label="开关开启"></span>
        </div>
        <div class="mp-field-row">
          <span class="mp-field-row__label">加入公海池</span>
          <span class="mp-field-row__switch mp-field-row__switch--off" aria-label="开关关闭"></span>
        </div>
      </div>
    </section>

    <p style="margin:0 16px 20px;font-size:11px;color:var(--text-muted);line-height:1.6">
      编辑模式：导航标题改为「编辑线索」，底栏主按钮改为「保存」。只读字段用灰色右对齐文本，不可点击。
    </p>

    <footer class="mp-footer-bar">
      <button class="mp-btn mp-btn--ghost" type="button">取消</button>
      <button class="mp-btn mp-btn--primary" type="button">提交</button>
    </footer>
  </main>
</body>
</html>