423 lines
13 KiB
HTML
423 lines
13 KiB
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>
|