市场部按钮 · 对齐【OA工作流】样式
从已上线的 OA 详情底栏、发起页底栏、待办批量条抽取按钮语言,映射到市场部列表卡操作、详情/表单底栏、行内小按钮与批量删除。
主色保留市场三墙绿 #0a9f6d,不套用 OA 的 #22c55e。
设计结论(推荐):
市场部放弃「全员实心灰绿 / 渐变」,改为 OA 同构的四级语义:
主操作实心品牌绿 · 次操作白底描边 · 弱操作浅灰软底 ·
警告/危险用软色底或描边(非高饱和渐变实心)。圆角与高度分层:卡内 32px/8px,底栏 40–44px/12px。
OA 工作流(上线源)
- 主按钮:实心
#22c55e,高 40/44,圆角 12
- 次按钮:白底 +
#e2e8f0 描边,字 #334155
- 草稿/弱:软灰底
#f1f5f9
- 打回:琥珀软底 + 描边(待办批量)
- 更多:44×44 方钮,描边白底
市场部现状(问题)
- primary / default / plain 几乎都是实心色(plain 也被刷成
#5f8f7d)
- 主按钮用 135° 渐变,与 OA 扁平实心不一致
- 危险/警告同样渐变实心,同屏饱和度过高
- 卡内 32px、预签 44px、底栏 round 混用,层级不清
市场部对齐方案
- 主:实心
#0a9f6d(无渐变)
- 次:白底描边(查看/编辑/取消)
- 弱:浅灰软底(保存草稿类)
- 危险:白底红字描边,或浅红软底
- 警告:琥珀软底(对齐 OA 打回)
OA · 待办详情底栏(OaDetail)
审批详情
OA · 待办批量条(pending batch)
待办中心
从 OA 抽取的一致性原则
- 一屏一个实心主色:主行动用品牌实心;其余不用同色实心抢戏。
- 次要 = 白底描边,不是「另一个实心灰绿」。
- 弱操作 = 浅灰软底(存草稿),无描边、无渐变。
- 风险操作 = 软色语义(琥珀打回 / 红字描边删除),避免大红大黄渐变块。
- 底栏白底 + 顶部分割线 + 轻阴影;圆角统一 12(底栏)/ 8(卡内)。
市场部现状 Before
协议列表卡 · 全员实心
协议单
XY-2026-0312进行中
客户李女士
金额¥28,000
预签 · PS-8891待转
意向金¥5,000
对齐 OA 后 After · 推荐
协议列表卡 · 描边次要 + 实心主
协议单
XY-2026-0312进行中
客户李女士
金额¥28,000
预签 · PS-8891待转
意向金¥5,000
列表卡规则
- 每卡仅 1 个
primary(查看 / 转正式 / 查看缴费 等主路径)。
- 编辑、催缴、关联等 →
ghost 白底描边。
- 删除 / 取消关联 →
danger 白底红字描边(不对齐大红渐变块)。
- 尺寸:min-height 32px,padding 0 12px,radius 8,字号 12,字重 600/700。
底栏规则
- 容器:白底、顶边
#eef2f6、阴影 0 -4px 16px rgba(15,23,42,.04)(与 OA 一致)。
- 详情:高 40 / 圆角 12;表单:高 44 / 圆角 12。
- 取消/次要 → soft 灰底或 ghost 描边;主保存/提交 → 实心品牌绿,可略加大 flex。
- 操作过多时:左侧 ⋯ 收纳,主路径保留在底栏(对齐 OA「更多」)。
行内小按钮规则
- 取消
border-radius: 999px 胶囊;统一 8px 圆角,与卡内操作一致。
- 高度约 28px;主添加用实心,配置用 ghost,取消运费用 warn 软底(对齐 OA 打回语义)。
- 行删除用
danger-soft 浅红底,避免迷你大红块。
批量底栏规则
- 底栏容器与详情底栏同一套(白底 + 顶线 + 轻阴影),避免单独「大胶囊」。
- 全选/取消:文字链或 ghost;删除:danger-soft 或白底红描边,高 40 / 圆角 12。
- 若后续有「批量通过」类正向操作,用实心品牌绿(对齐 OA pending
is-ok)。
| 场景 |
OA 参考 |
市场部现状 |
对齐后 |
| 主操作 |
实心 #22c55e,无渐变 |
渐变 #12b981→#087f57 |
实心 #0a9f6d,无渐变 |
| 次操作 |
白底 + #e2e8f0 描边 |
实心 #5f8f7d(含 plain) |
白底描边 ghost |
| 弱操作 |
软灰 #f1f5f9 |
缺失 / 被当成次实心 |
soft 灰底(取消/草稿) |
| 警告 |
琥珀软底 + 描边 |
黄橙渐变实心 |
warn 软底(取消运费等) |
| 危险 |
Sheet 行红字 / 少用实心红块 |
红渐变实心 |
白底红描边或浅红软底 |
| 底栏容器 |
白底 + 顶线 + 轻阴影 |
渐变淡出底 + 更重阴影 / round |
对齐 OA 底栏容器 |
| 卡内高度 |
—(OA 以底栏为主) |
32px / 预签 44px 混用 |
统一 32px · radius 8 |
| 底栏高度 |
详情 40 / 发起 44 |
约 40 + round |
详情 40 / 表单 44 · radius 12 |
| 品牌色 |
#22c55e(OA token) |
#0a9f6d(三墙) |
保持 #0a9f6d,只借结构 |
落地时拟改文件(确认后再动代码)
mobile-oa-h5/src/styles/market.css — 全局 .van-button--*、列表卡、底栏、批量条
MarketListCard.vue / PresignOrderCard.vue — primary/plain 语义映射
MarketBottomBar.vue — 去掉 round 渐变心智,改 ghost/soft/primary
- 协议样本运输 / 缴费面板 — mini 按钮从胶囊实心改为软语义
mobile-h5 若仅 WebView 嵌套市场 H5,样式以 mobile-oa-h5 为准;小程序壳无需重复按钮皮
图例预览