市场部按钮 · 对齐【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)
请假申请审批中
申请人张三
天数2 天
OA · 发起页底栏(OaStart)
用章申请
事由合同盖章
OA · 待办批量条(pending batch)
已选 3 项
报销单 · 王五待审批

从 OA 抽取的一致性原则

  1. 一屏一个实心主色:主行动用品牌实心;其余不用同色实心抢戏。
  2. 次要 = 白底描边,不是「另一个实心灰绿」。
  3. 弱操作 = 浅灰软底(存草稿),无描边、无渐变。
  4. 风险操作 = 软色语义(琥珀打回 / 红字描边删除),避免大红大黄渐变块。
  5. 底栏白底 + 顶部分割线 + 轻阴影;圆角统一 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。
市场部现状 Before
详情底栏 · 灰绿实心「次要」
协议详情摘要
状态草稿
表单底栏 · 渐变主按钮
基本信息
客户李女士
对齐 OA 后 After · 推荐
详情底栏 · 对齐 OaDetail
协议详情摘要
状态草稿
表单底栏 · 对齐 OaStart
基本信息
客户李女士

底栏规则

  • 容器:白底、顶边 #eef2f6、阴影 0 -4px 16px rgba(15,23,42,.04)(与 OA 一致)。
  • 详情:高 40 / 圆角 12;表单:高 44 / 圆角 12。
  • 取消/次要 → soft 灰底或 ghost 描边;主保存/提交 → 实心品牌绿,可略加大 flex。
  • 操作过多时:左侧 ⋯ 收纳,主路径保留在底栏(对齐 OA「更多」)。
市场部现状 Before
样本运输 / 缴费 · 胶囊实心
样本与运费
样本 S-001
对齐 OA 后 After · 推荐
行内 · 取消胶囊渐变,改软语义
样本与运费
样本 S-001

行内小按钮规则

  • 取消 border-radius: 999px 胶囊;统一 8px 圆角,与卡内操作一致。
  • 高度约 28px;主添加用实心,配置用 ghost,取消运费用 warn 软底(对齐 OA 打回语义)。
  • 行删除用 danger-soft 浅红底,避免迷你大红块。
市场部现状 Before
批量删除 · 大圆角描边红钮
已勾选 2 条
对齐 OA 后 After · 推荐
批量 · 对齐 OA 底栏语言
已勾选 2 条

批量底栏规则

  • 底栏容器与详情底栏同一套(白底 + 顶线 + 轻阴影),避免单独「大胶囊」。
  • 全选/取消:文字链或 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 为准;小程序壳无需重复按钮皮
图例预览