zkxw/docs/oa-start-title-footer-demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>填写审批 · 标题与底栏按钮 Demo</title>
  <style>
    :root {
      --brand: #16a34a;
      --brand-dark: #15803d;
      --brand-soft: #f0fdf4;
      --bg: #f5f8f7;
      --surface: #fff;
      --ink: #1f2a26;
      --muted: #6b7b74;
      --border: #dcebe4;
      --danger: #d14343;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(900px 480px at 0% -10%, #dcfce7 0%, transparent 50%),
        radial-gradient(700px 400px at 100% 0%, #e8f5ee 0%, transparent 45%),
        var(--bg);
      line-height: 1.45;
    }
    .wrap { max-width: 1180px; margin: 0 auto; padding: 24px 18px 80px; }
    h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.02em; }
    .sub { margin: 0; color: var(--muted); font-size: 14px; max-width: 720px; }
    .note {
      margin: 14px 0 22px;
      padding: 10px 12px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #e2e8e5;
      font-size: 13px;
      color: var(--muted);
    }
    h2 {
      margin: 28px 0 12px;
      font-size: 16px;
      font-weight: 700;
    }
    .hint { margin: 0 0 14px; font-size: 13px; color: var(--muted); }

    .phones {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 18px;
    }

    .phone-card {
      background: #fff;
      border: 1px solid #e2e8e5;
      border-radius: 16px;
      padding: 14px;
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
    }
    .phone-card:hover {
      border-color: #86efac;
      box-shadow: 0 8px 28px rgba(21, 128, 61, 0.1);
    }
    .phone-card.selected {
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
    }
    .phone-card .label {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      font-size: 13px;
      font-weight: 600;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--brand-soft);
      color: var(--brand-dark);
      font-size: 12px;
      font-weight: 700;
    }
    .phone-card .desc {
      margin: 0 0 12px;
      font-size: 12px;
      color: var(--muted);
      min-height: 34px;
    }

    .phone {
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid #cbd5d1;
      background: var(--bg);
      box-shadow: 0 10px 30px rgba(31, 42, 38, 0.08);
    }
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 44px;
      padding: 0 10px;
      color: #fff;
      background: var(--brand);
      font-size: 15px;
      font-weight: 600;
    }
    .nav .back { opacity: 0.9; font-weight: 400; font-size: 18px; width: 36px; }
    .nav .title {
      flex: 1;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 4px;
    }
    .nav .right { width: 36px; }

    .inner-hd {
      padding: 12px 14px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      font-size: 15px;
    }
    .inner-hd.gone {
      display: none;
    }

    .body {
      padding: 12px;
      min-height: 220px;
    }
    .field {
      background: #fff;
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 12px 14px;
      margin-bottom: 10px;
    }
    .field .k { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
    .field .v { font-size: 14px; color: #94a3b8; }

    .ft {
      display: flex;
      gap: 8px;
      padding: 10px 12px 14px;
      background: #fff;
      border-top: 1px solid var(--border);
    }
    .btn {
      flex: 1;
      height: 40px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--ink);
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      cursor: default;
    }
    .btn-primary {
      background: var(--brand);
      border-color: var(--brand);
      color: #fff;
      font-weight: 600;
    }

    /* A: 等宽三键，主色提交，描边次要 */
    .style-a .btn-ghost {
      background: #fff;
      border-color: var(--border);
      color: var(--muted);
    }
    .style-a .btn-soft {
      background: var(--brand-soft);
      border-color: #bbf7d0;
      color: var(--brand-dark);
      font-weight: 600;
    }

    /* B: 取消弱化，暂存描边，提交加宽主按钮 */
    .style-b .ft { gap: 10px; }
    .style-b .btn-cancel {
      flex: 0 0 64px;
      background: transparent;
      border-color: transparent;
      color: var(--muted);
    }
    .style-b .btn-draft {
      flex: 1;
      background: #fff;
      border: 1.5px solid var(--brand);
      color: var(--brand-dark);
      font-weight: 600;
    }
    .style-b .btn-submit {
      flex: 1.35;
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      border: none;
      color: #fff;
      font-weight: 700;
      box-shadow: 0 6px 14px rgba(22, 163, 74, 0.28);
    }

    /* C: 圆角胶囊 + 图标感文字层次 */
    .style-c .ft {
      gap: 8px;
      padding: 12px 12px 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.92), #fff);
    }
    .style-c .btn {
      height: 44px;
      border-radius: 999px;
      font-size: 14px;
    }
    .style-c .btn-cancel {
      background: #f5f8f7;
      border-color: transparent;
      color: var(--muted);
    }
    .style-c .btn-draft {
      background: #fff;
      border: 1.5px solid #86efac;
      color: var(--brand-dark);
      font-weight: 600;
    }
    .style-c .btn-submit {
      background: linear-gradient(135deg, #22c55e, var(--brand-dark));
      border: none;
      color: #fff;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(22, 163, 74, 0.32);
    }

    .legend {
      margin-top: 18px;
      padding: 12px 14px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid #e2e8e5;
      font-size: 13px;
      color: var(--muted);
    }
    .legend strong { color: var(--ink); }
    .pick {
      position: sticky;
      bottom: 12px;
      margin-top: 20px;
      padding: 12px 14px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--brand);
      box-shadow: 0 8px 24px rgba(21, 128, 61, 0.12);
      font-size: 14px;
    }
    .pick em { font-style: normal; color: var(--brand-dark); font-weight: 700; }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>填写审批 · 标题与底栏按钮</h1>
    <p class="sub">顶部栏显示流程名称（如「入库单」），去掉页面内重复绿条标题；底部「取消 / 暂存草稿 / 提交」三套样式可选。</p>
    <p class="note">示例流程：入库单。点击下方某一方案卡片即可选中（也可在对话里直接回复 A / B / C）。</p>

    <h2>1. 标题结构（已定方向）</h2>
    <p class="hint">左侧为现状，右侧为调整后：导航栏标题 = 流程名；去掉界面内「入库单」绿条。</p>
    <div class="phones">
      <div class="phone-card" style="cursor: default;">
        <div class="label"><span class="badge">旧</span> 现状</div>
        <p class="desc">导航「填写审批」+ 页内再显示「入库单」，标题重复。</p>
        <div class="phone">
          <div class="nav">
            <span class="back">‹</span>
            <span class="title">填写审批</span>
            <span class="right"></span>
          </div>
          <div class="inner-hd">入库单</div>
          <div class="body">
            <div class="field"><div class="k">仓库</div><div class="v">请选择</div></div>
            <div class="field"><div class="k">备注</div><div class="v">选填</div></div>
          </div>
          <div class="ft">
            <div class="btn">取消</div>
            <div class="btn">暂存草稿</div>
            <div class="btn btn-primary">提交</div>
          </div>
        </div>
      </div>

      <div class="phone-card" style="cursor: default;">
        <div class="label"><span class="badge">新</span> 调整后</div>
        <p class="desc">导航直接显示「入库单」；页内绿条标题移除，表单上移。</p>
        <div class="phone">
          <div class="nav">
            <span class="back">‹</span>
            <span class="title">入库单</span>
            <span class="right"></span>
          </div>
          <div class="body">
            <div class="field"><div class="k">仓库</div><div class="v">请选择</div></div>
            <div class="field"><div class="k">备注</div><div class="v">选填</div></div>
          </div>
          <div class="ft style-b">
            <div class="btn btn-cancel">取消</div>
            <div class="btn btn-draft">暂存草稿</div>
            <div class="btn btn-submit">提交</div>
          </div>
        </div>
      </div>
    </div>

    <h2>2. 底部按钮样式（请选一）</h2>
    <p class="hint">三套均基于品牌绿 #16a34a；主行动「提交」视觉权重最高。</p>

    <div class="phones" id="choices">
      <div class="phone-card" data-choice="a" onclick="pick(this)">
        <div class="label"><span class="badge">A</span> 等宽三键 · 浅绿暂存</div>
        <p class="desc">取消中性描边；暂存浅绿底；提交实心主色。三键等宽，最稳妥。</p>
        <div class="phone style-a">
          <div class="nav">
            <span class="back">‹</span>
            <span class="title">入库单</span>
            <span class="right"></span>
          </div>
          <div class="body">
            <div class="field"><div class="k">仓库</div><div class="v">请选择</div></div>
            <div class="field"><div class="k">备注</div><div class="v">选填</div></div>
          </div>
          <div class="ft">
            <div class="btn btn-ghost">取消</div>
            <div class="btn btn-soft">暂存草稿</div>
            <div class="btn btn-primary">提交</div>
          </div>
        </div>
      </div>

      <div class="phone-card" data-choice="b" onclick="pick(this)">
        <div class="label"><span class="badge">B</span> 取消弱化 · 提交加宽（推荐）</div>
        <p class="desc">取消缩成文字按钮；暂存品牌描边；提交加宽渐变，主次更清晰。</p>
        <div class="phone style-b">
          <div class="nav">
            <span class="back">‹</span>
            <span class="title">入库单</span>
            <span class="right"></span>
          </div>
          <div class="body">
            <div class="field"><div class="k">仓库</div><div class="v">请选择</div></div>
            <div class="field"><div class="k">备注</div><div class="v">选填</div></div>
          </div>
          <div class="ft">
            <div class="btn btn-cancel">取消</div>
            <div class="btn btn-draft">暂存草稿</div>
            <div class="btn btn-submit">提交</div>
          </div>
        </div>
      </div>

      <div class="phone-card" data-choice="c" onclick="pick(this)">
        <div class="label"><span class="badge">C</span> 胶囊圆角 · 更高底栏</div>
        <p class="desc">全圆角胶囊；底栏略高、触达更友好；风格更「C 端」一些。</p>
        <div class="phone style-c">
          <div class="nav">
            <span class="back">‹</span>
            <span class="title">入库单</span>
            <span class="right"></span>
          </div>
          <div class="body">
            <div class="field"><div class="k">仓库</div><div class="v">请选择</div></div>
            <div class="field"><div class="k">备注</div><div class="v">选填</div></div>
          </div>
          <div class="ft">
            <div class="btn btn-cancel">取消</div>
            <div class="btn btn-draft">暂存草稿</div>
            <div class="btn btn-submit">提交</div>
          </div>
        </div>
      </div>
    </div>

    <div class="legend">
      <strong>实现要点（选定后）：</strong>
      uni-app 顶栏用流程名（query 传 <code>appName</code> 或 webview 内加载后同步）；
      <code>OaStart.vue</code> 去掉 <code>.oa-start__hd</code>；
      底栏按所选样式改 Vant 按钮 class / SCSS。
    </div>

    <div class="pick" id="pickBar">当前未选择 — 请点击上方 A / B / C</div>
  </div>

  <script>
    function pick(el) {
      document.querySelectorAll('.phone-card[data-choice]').forEach(function (n) {
        n.classList.remove('selected')
      })
      el.classList.add('selected')
      var map = { a: 'A · 等宽三键', b: 'B · 取消弱化 + 提交加宽（推荐）', c: 'C · 胶囊圆角' }
      var c = el.getAttribute('data-choice')
      document.getElementById('pickBar').innerHTML =
        '已选：<em>' + map[c] + '</em> — 在对话里回复该字母即可继续'
      if (typeof toggleSelect === 'function') {
        try { toggleSelect(el) } catch (e) {}
      }
    }
  </script>
</body>
</html>