填写审批 · 标题与底栏按钮

顶部栏显示流程名称(如「入库单」),去掉页面内重复绿条标题;底部「取消 / 暂存草稿 / 提交」三套样式可选。

示例流程:入库单。点击下方某一方案卡片即可选中(也可在对话里直接回复 A / B / C)。

1. 标题结构(已定方向)

左侧为现状,右侧为调整后:导航栏标题 = 流程名;去掉界面内「入库单」绿条。

旧 现状

导航「填写审批」+ 页内再显示「入库单」,标题重复。

入库单
仓库
请选择
备注
选填
取消
暂存草稿
提交
新 调整后

导航直接显示「入库单」;页内绿条标题移除,表单上移。

仓库
请选择
备注
选填
取消
暂存草稿
提交

2. 底部按钮样式(请选一)

三套均基于品牌绿 #16a34a;主行动「提交」视觉权重最高。

A 等宽三键 · 浅绿暂存

取消中性描边;暂存浅绿底;提交实心主色。三键等宽,最稳妥。

仓库
请选择
备注
选填
取消
暂存草稿
提交
B 取消弱化 · 提交加宽(推荐)

取消缩成文字按钮;暂存品牌描边;提交加宽渐变,主次更清晰。

仓库
请选择
备注
选填
取消
暂存草稿
提交
C 胶囊圆角 · 更高底栏

全圆角胶囊;底栏略高、触达更友好;风格更「C 端」一些。

仓库
请选择
备注
选填
取消
暂存草稿
提交
实现要点(选定后): uni-app 顶栏用流程名(query 传 appName 或 webview 内加载后同步); OaStart.vue 去掉 .oa-start__hd; 底栏按所选样式改 Vant 按钮 class / SCSS。
当前未选择 — 请点击上方 A / B / C