润致GEO v3.0 · 2026-06

共享一、品牌基础

1.1 品牌色板

主色系（Primary — 品牌蓝）

强调色系（Accent — 活力橙）

功能色系

中性色系

Token	值	用途
--bg-page	#F5F6FA	页面底色（三端统一）
--bg-card	#FFFFFF	卡片 / 列表项背景
--bg-input	#FAFBFC	输入框背景
--border-color	#E0E4EA	默认边框
--border-light	#EEF0F4	浅色边框 / 分割线
--text-primary	#1F1F1F	标题 / 正文
--text-secondary	#777777	描述 / 次要信息
--text-placeholder	#999999	占位符 / 空状态 / 禁用
--text-muted	#B0B0B0	更弱化的辅助文字

1.2 排版层级

Token	字号	字重	用途
--fs-display	28px	700	大标题（登录页品牌名等）
--fs-title	20px	700	页面标题 / 金额数字
--fs-subtitle	16px	600	区块标题 / 弹窗标题
--fs-body	14px	400	正文 / 表单标签
--fs-caption	12px	400	辅助说明 / 表格表头
--fs-small	11px	400	标签 / 时间戳

字重 Token：--fw-regular: 400 · --fw-medium: 500 · --fw-semibold: 600 · --fw-bold: 700

字体族：-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif

等宽字体："SF Mono", "Cascadia Code", "Consolas", monospace（用于编号/金额/代码）

1.3 间距体系（4px 基准）

Token	值	用途
--spacing-xs	4px	极小间距 / 图标与文字
--spacing-sm	8px	紧凑间距 / 按钮组 gap
--spacing-md	12px	常规间距 / 表单项之间
--spacing-lg	16px	宽松间距 / 卡片内边距 / 页面边距
--spacing-xl	24px	大间距 / 区块之间 / 页面标题下方
--spacing-2xl	32px	超大间距 / 页面级分区

1.4 圆角层级

Token	值	适用组件
--radius-sm	4px	标签 / Badge / 小按钮 / 分页器
--radius-md	4px	输入框 / 选择器 / 按钮（对齐 Element Plus）
--radius-lg	8px	卡片 / 面板 / 表格容器
--radius-xl	12px	弹窗 / 大卡片
--radius-2xl	16px	登录卡片 / 特殊场景
--radius-pill	20px	胶囊按钮 / 流程步骤
--phone-radius	24px	小程序手机框外框

1.5 阴影层级

Token	值	适用场景
--shadow-sm	0 1px 3px rgba(0,0,0,0.06)	卡片 / 面板默认态
--shadow-md	0 2px 8px rgba(0,0,0,0.08)	卡片 hover / 下拉面板
--shadow-lg	0 4px 20px rgba(0,0,0,0.12)	弹窗 / 抽屉
--shadow-xl	0 8px 40px rgba(0,0,0,0.16)	模态框（PC 端）
--shadow-phone	0 20px 60px rgba(0,0,0,0.3)	小程序手机框外框

1.6 动效时长

Token	值	适用场景
--transition-fast	0.15s	hover 变色 / 按钮反馈
--transition-normal	0.25s	弹窗进出 / 侧栏折叠 / 菜单展开
--transition-slow	0.35s	页面过渡 / 复杂动画

1.7 图标体系

常用图标映射表

功能	Iconify 图标名	尺寸
首页	ep:home-filled	16-24px
数据看板	ep:data-board	16-24px
用户 / 个人	ep:user	16-24px
企业 / 建筑	ep:office-building	16-24px
订单 / 文档	ep:document	16-24px
分润 / 金额	ep:money	16-24px
产品 / 套餐	ep:goods	16-24px
发票 / 票据	ep:tickets	16-24px
商学院 / 阅读	ep:reading	16-24px
资讯 / 笔记本	ep:notebook	16-24px
系统设置	ep:setting	16-24px
通知铃铛	ep:bell	14-18px
搜索	ep:search	14-18px
关闭	ep:close	14-20px
折叠/展开	ep:expand / ep:fold	16-20px
电话	ep:phone	16-24px
日历	ep:calendar	16-24px
刷新	ep:refresh	16-24px
相机/拍照	ep:camera	20-24px
锁	ep:lock	14-20px
趋势/图表	ep:trend-charts	24px
星/推荐	ep:star-filled	16-24px
信用卡	ep:credit-card	16-24px
消息/聊天	ep:chat-dot-square	16-24px
上传	ep:upload	16-24px
编辑	ep:edit	14-18px
加号	ep:plus	14-20px
警告（实心）	ep:warning-filled	20-24px
信息（实心）	ep:info-filled	20-24px
成功（实心）	ep:circle-check-filled	20-24px
失败（实心）	ep:circle-close-filled	20-24px
时钟	ep:clock	16-20px
指南针	ep:compass	16-24px
名片	ep:postcard	16-24px
电灯泡	ep:lightbulb	16-24px
链接	ep:connection	16-24px

1.8 通用组件：按钮

类名	背景	文字色	边框	圆角	高度	字号
.btn-primary	var(--color-primary)	#fff	同背景	4px	32px	13px
.btn-outline	var(--bg-card)	var(--text-secondary)	var(--border-color)	4px	32px	13px
.btn-ghost	transparent	var(--color-primary)	transparent	4px	32px	13px
.btn-plain	var(--bg-card)	var(--color-primary)	var(--color-primary)	4px	32px	13px
.btn-danger	var(--color-danger)	#fff	同背景	4px	32px	13px
.btn-sm	小尺寸变体：高度 28px、padding 0 10px、字号 12px
.btn-lg	大尺寸变体：高度 40px、padding 0 24px、字号 15px

1.9 通用组件：标签 / 徽标

类名	背景色	文字色（深色变体，满足 AA）	圆角	padding	字号
.tag-blue	#E3F2FD	#0D47A1	4px	2px 8px	12px
.tag-orange	#FFF3E0	#E65100	4px	2px 8px	12px
.tag-green	#E8F5E9	#1B5E20	4px	2px 8px	12px
.tag-red	#FFEBEE	#B71C1C	4px	2px 8px	12px
.tag-gray	#F0F0F0	#888	4px	2px 8px	12px
.tag-purple	#F3E5F5	#7B1FA2	4px	2px 8px	12px

PC二、运营平台端（1280px+）

2.1 布局框架

区域	尺寸	背景	说明
侧栏	230px 宽（折叠 64px）	#1A2332	深色主题，品牌 icon + 菜单 + 用户信息
顶栏	52px 高	#FFFFFF	底边框 2px 品牌蓝，含折叠按钮 + 面包屑 + 通知 + 时间
内容区	自适应（max 1400/1600px）	#F5F6FA	iframe 加载子页面，右侧可选 PRD 面板 380px
子页面布局	page-wrap 居中	—	页头（标题+操作）+ 面包屑 + 内容区

侧栏色板

Token	值	用途
--sidebar-bg	#1A2332	侧栏底色
--sidebar-hover	#232D3E	菜单项 hover
--sidebar-active	#1E3A5F	菜单项激活
--sidebar-text	#A0AEC0	菜单文字默认
--sidebar-text-active	#FFFFFF	菜单文字激活

2.2 数据表格

属性	值	说明
表头背景	#FAFBFC	--bg-table-header
表头字号/字重	13px / 500	对齐 Element Plus medium
表头底边	1px solid var(--border-light)	1px 替代原 2px
单元格 padding	12px	--table-cell-padding-y/x
行 hover	#F5F7FA	--bg-table-hover
等宽字体列	.text-mono	编号/金额使用等宽字体
操作列	.col-narrow	white-space: nowrap; width: 1%

2.3 弹窗（Modal）

尺寸	max-width	用途
.modal-sm	420px	确认弹窗 / 简单表单
.modal（默认）	640px	标准弹窗 / 编辑表单
.modal-lg	860px	详情查看 / 复杂表单
.modal-xl	1020px	大型表单 / 多列布局

动画：打开 fade（overlay 0→1 opacity）+ scale（modal 0.95→1），关闭反向。关闭按钮使用 ep:close 图标。确认弹窗使用 showConfirm() 函数（index.html 全局可用）。

2.4 分页器

元素	样式
页码按钮	32×32px、边框 var(--border-color)、圆角 4px、hover 变蓝
激活页	背景 var(--color-primary)、文字 #fff
信息文字	"共 N 条记录，第 X/Y 页"（字号 13px、色 var(--text-secondary)）

2.5 步骤条

状态	编号背景	文字色
.done（已完成）	var(--color-success)	var(--color-success)
.active（进行中）	var(--color-primary)	var(--color-primary)
默认（待处理）	#E0E0E0	var(--text-placeholder)

2.6 全局反馈

组件	说明
.toast	顶部居中通知，4 种类型：success（绿）/ error（红）/ warning（橙）/ info（蓝）。自动 2s 消失，带 fadeInDown 动画
.skeleton	骨架屏加载占位，脉冲动画。提供 .skeleton-text（短/中/长）、.skeleton-title、.skeleton-avatar、.skeleton-card、.skeleton-table-row 变体
.loading-spinner	旋转加载指示器，20px 默认 / 36px .lg 大尺寸
.empty-state	空数据状态，居中布局，图标 + 提示文字
:focus-visible	全局键盘焦点环（2px 品牌蓝 outline），满足 WCAG 2.4.7

2.7 页面模板

页面类型	结构
列表页	面包屑 → 页头（标题+操作按钮）→ 筛选栏 → 表格 → 分页器
仪表盘	面包屑 → 统计卡片行（3列）→ 快捷入口（4列）→ 图表+待办+动态
详情弹窗	modal-lg → detail-grid（2列）→ 操作日志列表

小程序三、小程序端（合伙人 + 客户端 · 375×812）

3.1 布局框架

区域	尺寸	背景	说明
手机框	375×812px	#F5F6FA	圆角 --phone-radius: 24px，阴影 --shadow-phone
状态栏	44px 高	#1565C0	品牌蓝底白色文字，时间左 + 图标右
导航栏	44px 高	#1565C0	品牌蓝底，标题居中（17px 粗体），返回箭头左
内容区	flex: 1 可滚动	#F5F6FA	隐藏滚动条，iOS 平滑滚动
TabBar	50px 高	#FFFFFF	顶边框，3-4 个 Tab，激活态品牌蓝
底部安全区	34px	—	iOS Home Indicator 占位

3.2 卡片与列表

组件	圆角	内边距	阴影	用途
.card	16px	16px	--shadow-sm	通用卡片、详情卡片
.list-card	12px	14px 16px	--shadow-sm	列表项、菜单项
.list-card:active	点击反馈：opacity 0.8 或轻微背景变灰

3.3 底部弹窗（ActionSheet）

属性	值
遮罩	rgba(0,0,0,0.5)，点击关闭
面板	白色背景、顶部圆角 16px、slideUp 动画
宽度	100%，max-width: 375px
关闭按钮	ep:close 图标，右上角

3.4 标签切换（Tabs）

属性	值
容器	flex 横向、白色背景、底边框 1px
标签项	flex: 1 等分、字号 14px、padding 12px 0
激活态	品牌蓝文字 + 底边框 2px 品牌蓝 + 字重 600
类名	.tab-switch / .tabs（两种命名均支持）

3.5 搜索栏

属性	值
容器	flex 横向、白色背景、padding 10px 16px、gap 8px
输入框	flex: 1、高度 36px、圆角 18px（胶囊形）、浅灰背景

3.6 空状态 / 加载

组件	样式
.empty-state	居中、padding 40px 20px、文字色 placeholder
.loading-spinner	20px 旋转圆环、品牌蓝 top-border

3.7 页面模板

页面类型	结构
列表页	搜索栏（可选）→ 标签切换（可选）→ 卡片列表 → 底部操作（可选）
首页	Hero 区（品牌蓝渐变）→ 统计卡片 → 快捷入口 → 底部浮按钮
详情页	导航栏（标题+返回）→ 状态横幅 → 信息卡片 → 操作日志
个人中心	用户信息卡片 → 菜单列表（图标+文字+箭头+右侧值）→ 退出按钮

3.8 PRD 面板（原型阶段专用）

四、CSS 变量速查表（可直接复制）

:root {
  /* ══ 品牌色 ══ */
  --color-primary: #1565C0;
  --color-primary-light: #1E88E5;
  --color-primary-dark: #0D47A1;
  --color-primary-bg: #E3F2FD;
  --color-accent: #FF6F00;
  --color-accent-light: #FF8F00;
  --color-accent-bg: #FFF3E0;

  /* 渐变色端点 */
  --color-primary-gradient-end: #42A5F5;
  --color-accent-gradient-end: #FF8F00;

  /* ══ 功能色 ══ */
  --color-success: #2E7D32;
  --color-success-bg: #E8F5E9;
  --color-danger: #E53935;
  --color-danger-bg: #FFEBEE;
  --color-warning: #F57C00;
  --color-warning-bg: #FFF3E0;
  --color-info: #0288D1;
  --color-info-bg: #E1F5FE;

  /* 标签扩展色 */
  --color-purple: #7B1FA2;
  --color-purple-bg: #F3E5F5;

  /* WCAG AA 标签文字色（浅底深字） */
  --color-primary-text-on-bg: #0D47A1;
  --color-accent-text-on-bg: #E65100;
  --color-success-text-on-bg: #1B5E20;
  --color-danger-text-on-bg: #B71C1C;

  /* Alert 文字色 */
  --color-info-text: #01579B;
  --color-warning-text: #E65100;
  --color-success-text: #1B5E20;
  --color-danger-text: #B71C1C;

  /* ══ 中性色 ══ */
  --bg-page: #F5F6FA;
  --bg-card: #FFFFFF;
  --bg-input: #FAFBFC;
  --border-color: #E0E4EA;
  --border-light: #EEF0F4;
  --text-primary: #1F1F1F;
  --text-secondary: #777777;
  --text-placeholder: #999999;
  --text-muted: #B0B0B0;

  /* ══ 侧边栏（PC端） ══ */
  --sidebar-bg: #1A2332;
  --sidebar-hover: #232D3E;
  --sidebar-active: #1E3A5F;
  --sidebar-text: #A0AEC0;
  --sidebar-text-active: #FFFFFF;

  /* ══ 尺寸 ══ */
  --sidebar-width: 230px;
  --header-height: 52px;

  /* ══ 圆角 ══ */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 20px;
  --phone-radius: 24px;

  /* ══ 阴影 ══ */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.12);
  --shadow-xl: 0 8px 40px rgba(0,0,0,0.16);
  --shadow-phone: 0 20px 60px rgba(0,0,0,0.3);

  /* ══ 字体 ══ */
  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Consolas", monospace;

  /* 排版层级 */
  --fs-display: 28px;
  --fs-title: 20px;
  --fs-subtitle: 16px;
  --fs-body: 14px;
  --fs-caption: 12px;
  --fs-small: 11px;

  /* 字重 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ══ 间距 ══ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* ══ 动效 ══ */
  --transition-fast: 0.15s;
  --transition-normal: 0.25s;
  --transition-slow: 0.35s;

  /* ══ 图标尺寸 ══ */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  /* ══ 内容宽度（PC端） ══ */
  --content-max-width: 1400px;
  --content-max-width-wide: 1600px;

  /* ══ 表格（PC端） ══ */
  --bg-table-header: #FAFBFC;
  --bg-table-hover: #F5F7FA;
  --table-cell-padding-y: 12px;
  --table-cell-padding-x: 12px;

  /* ══ 组件背景（PC端） ══ */
  --bg-progress: #E8ECF1;
  --bg-step-num: #E0E0E0;
  --bg-toggle-off: #CCC;
  --bg-modal: #FFFFFF;
  --bg-card-footer: #FAFBFC;
  --color-breadcrumb-sep: #CCC;

  /* ══ 布局（小程序端） ══ */
  --phone-width: 375px;
  --phone-height: 812px;
  --nav-height: 44px;
  --tabbar-height: 50px;
}