AI和Mine页面的样式改成新样式了。
This commit is contained in:
+103
-76
@@ -1,59 +1,57 @@
|
||||
# 陪诊小程序 配色规范
|
||||
|
||||
本文件只规定**颜色**,不涉及布局、间距、圆角、触控尺寸。那些属于界面规范,另行处理。
|
||||
|
||||
适用范围:`ui/wxapp_escort/` 下全部小程序页面。
|
||||
适用范围:`ui/wxapp_escort/` 全部页面。本文只规定**颜色**;布局、间距、圆角、触控尺寸属界面规范,另行处理。
|
||||
|
||||
---
|
||||
|
||||
## 一、总原则
|
||||
|
||||
**全站只有一个色相。**
|
||||
**全站只有一个色相**——暖橙,承载品牌、交互、强调。第二色不是新色相,而是**暖墨文字层**(暖偏棕的深灰),只用来拉开层级,不与暖橙争彩。浅橙三档(描边、浅底、深字)都是主色同色阶。状态色只在**表达状态**时出现,不做装饰。
|
||||
|
||||
- 第一色是暖橙,承载品牌、交互、强调。
|
||||
- 第二色不是另一个色相,是**暖墨文字层**(暖偏棕的深灰)。它的作用是把层级拉开,不与暖橙争彩。
|
||||
- 浅橙三档(描边、浅底、深字)都是主色的同色阶,不是新颜色。
|
||||
- 状态色只允许在**表达状态**时出现,不做装饰。
|
||||
|
||||
判断一个颜色是否该用:如果它既不是暖橙的同色阶、也不是暖墨、也不是明确的状态色,就不该出现在页面里。历史遗留的灰金 `#D4A853`、亮橙 `#FF8500`、青灰、翠绿都是这条原则的违反项。
|
||||
判断一个颜色能否用:既不是暖橙同色阶、也不是暖墨、也不是明确状态色的,就不该出现。灰金 `#D4A853`、亮橙 `#FF8500`、青灰、翠绿均为违反项。
|
||||
|
||||
---
|
||||
|
||||
## 二、核心色板
|
||||
|
||||
令牌按项目惯例定义在各页面的 `page {}` 选择器内。技术上 `app.wxss` 的 `page {}` 也能全局定义变量,但各页自带可以让页面样式自包含、互不牵连,这是本项目的约定。
|
||||
令牌集中在 `app.wxss` 的 `page{}` 内,是**全站唯一来源——改配色只改这一处**。注入顺序 app.wxss 先、页面 wxss 后,同特异度页面胜出,某页确需例外时可在自己 `page{}` 覆盖同名变量。
|
||||
|
||||
**四处硬编码走不了变量,改色须一并手改**(逐文件见 §7.3):`t-icon` 的 `color`、`app.json` 的 `tabBar.selectedColor`、首页 base64 线图标的 `stroke`、着色的位图(`images/home-ink.png`)。
|
||||
|
||||
迁移进度:`home/index`、`escort/itemlist` 两页副本已删;`itemdetail`、`attendantlist`、`guide`、`mine/contact` 四页仍各带副本(停在旧值 `#C2410C`),待重构时按同一方式删。
|
||||
|
||||
### 2.1 第一色:暖橙色阶
|
||||
|
||||
主色于 2026-10-04 由 `#C2410C`(H18°)折中右移到下表值(H25°)。沿革与回滚见 §七。
|
||||
|
||||
| 令牌 | 色值 | 用途 | 对比度 |
|
||||
|---|---|---|---|
|
||||
| `--brand-strong` | `#C2410C` | 主按钮、价格数字、选中态、实心强调块 | 纸面 4.89:1,白卡 5.18:1 |
|
||||
| `--brand-ink` | `#9A3412` | 标签文字、文字链、暖色小标题、图标 | 浅橙底 6.74:1,纸面 6.89:1 |
|
||||
| `--brand-strong` | `#B8520A` | 主按钮、价格数字、选中态、实心强调块 | 纸面 4.66:1,白卡 4.94:1;白字压其上 4.94:1 |
|
||||
| `--brand-ink` | `#9B4508` | 标签文字、文字链、暖色小标题、图标 | 浅橙底 5.96:1,纸面 6.10:1,白卡 6.46:1 |
|
||||
| `--brand-line` | `#FFE0C2` | 浅橙块描边、浅橙档的状态描边 | 仅做描边 |
|
||||
| `--brand-soft` | `#FFF4E8` | 浅橙底:说明砖、图标衬底、按钮按下态 | 仅做底 |
|
||||
|
||||
用法边界:
|
||||
|
||||
- `--brand-strong` 是唯一可以当"实心大色块"用的值。全页同类实心块建议不超过一处,避免主色泛滥。
|
||||
- `--brand-soft` 只能当底,不能当文字色,也不能当描边色(它做描边时等于没有描边)。
|
||||
- `--brand-ink` 是浅橙底上的首选强调字色。`--brand-strong` 落在 `--brand-soft` 上实测 4.77:1,过 AA 但余量小,浅橙底上的文字一律走 `--brand-ink`。
|
||||
- 例外(已登记):`escort/itemlist` 的价目单里,价格数字为弱化表达改走 `--muted` + 字重 500,不走 `--brand-strong`,让「预约」空心胶囊按钮独占焦点。同一页价格列必须只用这一个色值、一种字重,不得混用。
|
||||
- `escort/itemlist` 的「预约」按钮走**空心胶囊**:3rpx `--brand-strong` 环 + 28rpx 满圆角(= 高 56rpx 的一半)+ `--brand-ink` 字 30rpx/500(纸面 6.89:1),无填充、无阴影,按下填 `--brand-line`。不用填充是因为它与同行的规格签撞形——签是「浅橙底 + 6rpx 圆角」,按钮若同族,一行里就是两个标签,分不清哪个能点。规则:**同一行只允许一个填充物(这里是签),按钮独占「环」这一形态**;可点性由环承担,字重因此可以降到 500(注意 500 在部分 Android 中文会落回常规)。该页因此不存在实心大色块,§2.1「同类实心块不超过一处」无需开口子。
|
||||
- `--brand-strong` 是唯一可当"实心大色块"的值;全页同类实心块不超过一处。
|
||||
- `--brand-soft` 只能当底,不能当文字色或描边色。
|
||||
- 浅橙底上的文字一律走 `--brand-ink`(`--brand-strong` 落其上仅 4.56:1,余量小)。
|
||||
- 例外(已登记):`escort/itemlist` 价格数字改走 `--muted` + 字重 500,让「预约」空心胶囊独占焦点;同页价格列只用这一个色值、一种字重。
|
||||
- 例外(已登记):`escort/itemlist`「预约」按钮走**空心胶囊**——3rpx `--brand-strong` 环 + 28rpx 满圆角 + `--brand-ink` 字 30rpx/500,无填充无阴影,按下填 `--brand-line`。同行规格签已是"浅橙底 + 6rpx 圆角",按钮若同族会与之撞形;**同一行只允许一个填充物**,按钮独占"环"形态。该页因此无实心大色块。
|
||||
|
||||
### 2.2 第二色:暖墨文字层
|
||||
|
||||
| 令牌 | 色值 | 用途 | 对比度 |
|
||||
|---|---|---|---|
|
||||
| `--ink` | `#2B2521` | 标题、需要最重的正文 | 纸面 14.26:1 |
|
||||
| `--ink` | `#2B2521` | 标题、需最重的正文 | 纸面 14.26:1 |
|
||||
| `--ink-2` | `#4A4038` | 正文 | 纸面 9.52:1 |
|
||||
| `--muted` | `#6F655C` | 次要文字、元信息、说明、未选中态 | 纸面 5.37:1,白卡 5.69:1,浅橙底 5.24:1 |
|
||||
|
||||
用法边界:
|
||||
|
||||
- 三档只表示文字层级,不表示状态,不表示可点击性。
|
||||
- `--muted` 是最浅的一档,不得再浅。它是全站文字对比度的底线,任何比它更浅的文字色都视为不合格。
|
||||
- `--muted` 是三元色里的关键值:它在暖白纸面、白卡、浅橙底上都能过 4.5:1。历史值 `#7A7068` 压线达标但无余量(纸面 4.56:1),已废弃,所有硬编码 `#7A7068` 都要替换。
|
||||
- 注意 `t-icon` 组件的 `color` 属性读不到 CSS 变量,只能用硬编码色值。这类硬编码必须与令牌同步(当前应为 `#9A3412`、`#6F655C`、`#C2410C` 三者之一)。
|
||||
- 三档只表示文字层级,不表示状态或可点击性。
|
||||
- `--muted` 是最浅一档,不得再浅——它是全站文字对比度底线。历史值 `#7A7068`(纸面 4.56:1,压线无余量)已废弃,硬编码需全部替换。
|
||||
- `t-icon` 的 `color` 读不到 CSS 变量,只能硬编码,且必须与令牌同步(当前为 `#9B4508`、`#6F655C`、`#B8520A` 三者之一)。
|
||||
|
||||
### 2.3 底与线
|
||||
|
||||
@@ -66,107 +64,136 @@
|
||||
|
||||
用法边界:
|
||||
|
||||
- 这两组线不是装饰,是**切分工具**,本身不表意。不要给它们上主色或状态色。
|
||||
- `--line` 与 `--sep` 的分工是固定的:浅橙底上必须用 `--sep`,因为 `--brand-line` 落在 `--brand-soft` 上只有约 1.16:1,肉眼看不见;`--sep` 比 `--line` 深一档,专门负责在彩色底上还能被看到。
|
||||
- `--paper` 与 `--brand-soft` 的明度差只有约 1.03:1。所以浅橙块落在纸面上时,形状必须靠 **2rpx `--brand-line` 描边**承担,不能用更大的色差去解决,也不加阴影——首页 `.intro-card` / `.quick-item-full` 与 `escort/itemlist` 的页脚收口卡都是"描边 + 去阴影"这一种做法。浅橙块靠大面自身可辨,不靠阴影托形。
|
||||
- **白卡一律走中性阴影**(`--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07)`,首页与 `escort/itemlist` 同值),圆角 28rpx。彩色(暖橙)阴影**不得用在 `--white` 面上**——白面加暖橙阴影会在卡边泛出一圈暖晕,与全站白卡不是同一种东西;它只允许出现在实心 CTA、品牌印记这类小体量元素上(如首页 `--shadow-cta: 0 2rpx 8rpx rgba(194, 65, 12, 0.16)`)。
|
||||
- 例外(已登记):`escort/itemlist` 的三个服务分组做成**通栏白底块**——`--white` 面 + 上下各 2rpx `--line` 发丝边 + 上述中性 `--shadow-card`,**圆角为 0**。做法是 `margin: 36rpx -32rpx 0` 加等量 `padding: 28rpx 32rpx`,白面顶到屏幕两侧而行宽仍落在容器原有的 686rpx 上。这是该页唯一可行的"白底卡"解法:卡内缩 32rpx 再自带 24rpx 内距会把内容宽压到 638rpx,最长服务名「VIP 5次 半天陪诊」(249rpx) 当场折行。圆角必须为 0,否则满宽块的圆角会切在屏幕边上、露出纸色缺口。页首 `.notice` 仍是内缩 28rpx 圆角白卡(同上中性阴影),两者是"提示卡 / 章节带"两种角色,形不同不算同类撞形。白底块内每组的末行不画分隔虚线,收口交给卡底发丝边。
|
||||
|
||||
例外(已登记):`escort/itemlist` 的**页脚做成浅橙收口卡**——`--brand-soft` 底 + 2rpx `--brand-line` 描边 + 28rpx 圆角 + 去阴影,与首页 `.quick-item-full`(「联系我们」)同源。用途是把首页"每个区块都收在暖色卡上"的节奏带过来:该页其余四块都是白面,页脚若也走白,全页暖色就只剩"线"(竖条 / 按钮环 / 暖陶土字),比首页轻一档;这张"面"是补回来的暖色落点。
|
||||
|
||||
浅橙块不使用彩色阴影(按上条,靠描边托形)。以下值曾是"浅橙块托形阴影"的唯一候选,但首页与 `escort/itemlist` 实际都用描边,此值当前无使用位置,仅作登记——若将来确需给浅橙块托形,只能用它:
|
||||
|
||||
```css
|
||||
box-shadow: 0 2rpx 10rpx rgba(194, 65, 12, 0.08);
|
||||
```
|
||||
- 线是切分工具,不表意,不上主色或状态色。浅橙底上必须用 `--sep`(`--brand-line` 落 `--brand-soft` 上仅 1.16:1,肉眼看不出)。
|
||||
- `--paper` 与 `--brand-soft` 明度差仅约 1.03:1,浅橙块落纸面须靠 **2rpx `--brand-line` 描边**托形,不加阴影。
|
||||
- **白卡一律走中性阴影** `--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07)`,圆角 28rpx。彩色(暖橙)阴影不得用在 `--white` 面上;它只允许用于实心 CTA、品牌印记等小体量元素(`--shadow-cta: 0 2rpx 8rpx rgba(184, 82, 10, 0.16)`)。
|
||||
- 例外(已登记):`escort/itemlist` 三个服务分组做成**通栏白底块**——`--white` + 上下各 2rpx `--line` + `--shadow-card`,**圆角 0**;做法 `margin: 36rpx -32rpx 0` + `padding: 28rpx 32rpx`,行宽仍为 686rpx(若内缩,最长名称「VIP 5次 半天陪诊」会折行)。圆角必须为 0,否则满宽块的圆角会切在屏幕边上。页首 `.notice` 仍是内缩 28rpx 圆角白卡。
|
||||
- 例外(已登记):`escort/itemlist` 页脚做**浅橙收口卡**(`--brand-soft` + 2rpx `--brand-line` + 28rpx 圆角 + 去阴影),与首页 `.quick-item-full` 同源,补回该页"暖色只剩线、没有面"的那一档。
|
||||
|
||||
---
|
||||
|
||||
## 三、状态色
|
||||
|
||||
状态色只在订单、记录这类**有明确状态字段**的地方使用,且同一个页面里同类状态只能有一种颜色。
|
||||
状态色只用于订单、记录这类**有明确状态字段**处,同页同类状态只允许一种颜色。
|
||||
|
||||
| 状态 | 底色 | 描边 | 字色 | 对比度 |
|
||||
|---|---|---|---|---|
|
||||
| 待服务 | `#ECF7F4` | `#C7E5DF` | `#0F766E` | 5.00:1 |
|
||||
| 服务中 | `#FFF4E8` | `#FFE0C2` | `#C2410C` | 4.77:1 |
|
||||
| 服务中 | `#FFF4E8` | `#FFE0C2` | `#B8520A` | 4.56:1 |
|
||||
| 已完成 | `#EAF6EE` | `#CDE9D7` | `#1F7A4D` | 4.79:1 |
|
||||
| 已取消 | `#FCF0EE` | `#F2D6D1` | `#B4231A` | 5.89:1 |
|
||||
|
||||
用法边界:
|
||||
|
||||
- **不得仅用颜色传达状态。** 状态胶囊必须带文字,颜色只做强化。这条是 WCAG 1.4.1(Use of Color,Severity: High)的要求——将来任何"纯色圆点表示状态"的写法都视为违规。
|
||||
- **青绿(待服务)是全站唯一的冷色**,也是唯一"反暖色"的特权。它只给"等你去处理"这一个语义。其他任何状态都不许用冷色,否则这个信号就废了。
|
||||
- **服务中直接复用主色浅档**,不另立色相。服务中是一个正常中间态,不需要报警感。
|
||||
- 已取消的红是状态色里唯一脱离暖色体系的。若后续想让全站色相更少,可把已取消收成 `--muted` 字 + 中性底(`#EFEFF2`),代价是列表里不易扫到。当前按上表执行。
|
||||
- 状态色不得用在:区块标题、图标衬底、按钮、装饰条。它只包住状态文字本身。
|
||||
- 表单错误提示复用已取消档(`#B4231A` 字 + `#FCF0EE` 底),不新增令牌;错误必须带文字,不能只把输入框描红。
|
||||
- 禁用态不使用暖橙(可点性由暖橙表达,禁用即收回):`--muted` 字 + `--sep` 描边 + 透明底。
|
||||
- **不得仅用颜色传达状态**(WCAG 1.4.1):状态胶囊必须带文字,颜色只做强化。
|
||||
- 青绿(待服务)是全站唯一冷色,只给"等你去处理"这一个语义。
|
||||
- 服务中复用主色浅档,字色跟随该页 `--brand-strong`(已迁移页 `#B8520A`,未迁移页 `#C2410C`)。
|
||||
- 状态色不得用于区块标题、图标衬底、按钮、装饰条,只包住状态文字本身。
|
||||
- 表单错误复用已取消档(`#B4231A` 字 + `#FCF0EE` 底),错误必须带文字。
|
||||
- 禁用态不用暖橙:`--muted` 字 + `--sep` 描边 + 透明底。
|
||||
|
||||
---
|
||||
|
||||
## 四、硬约束(可验证)
|
||||
|
||||
1. 所有文字对底色的对比度必须达到 WCAG AA 4.5:1;中文最小字号不低于 24rpx(12px)。
|
||||
2. 图标对衬底的对比度必须达到 WCAG 非文本 3:1。反例:`#22A45D` 落在 `#EBF8F0` 上只有 2.94:1,不达标;同位置的合格值是 `#19814A`(4.49:1)。
|
||||
3. 不得新增色相。需要区分时先改结构(分组、加留白、换线),不要加颜色。
|
||||
4. 不得使用渐变色。历史遗留的 `#FF9B33 → #FF7A33`、`#4CAF50 → #45A049` 属于违反项。
|
||||
5. 卡片、面板、说明砖的**填充色必须中性**(`--white` / `--paper` / `--brand-soft`)。不得用 `--brand-strong` 或状态色做面填充,它们只做描边、图标、文字、mark。
|
||||
6. 暖橙以外的暖色(灰金、亮橙)不得出现。金色 `#D4A853` 属于旧体系,已废弃。
|
||||
7. 每个页面内,同一种含义只能对应一个色值。同一页出现两种"次要文字灰"即为不合格。
|
||||
8. 不得仅用颜色传达信息(WCAG 1.4.1)。状态、错误、选中态都必须有文字或图标伴随,颜色只做强化。
|
||||
1. 所有文字对底色对比度 ≥ WCAG AA 4.5:1;中文最小字号不低于 24rpx(12px)。
|
||||
2. 图标对衬底对比度 ≥ WCAG 非文本 3:1。
|
||||
3. 不得新增色相;需区分时先改结构(分组、留白、换线),不要加颜色。
|
||||
4. 不得使用渐变色。
|
||||
5. 卡片、面板、说明砖的填充必须中性(`--white` / `--paper` / `--brand-soft`)。
|
||||
6. 暖橙以外的暖色(灰金、亮橙)不得出现。
|
||||
7. 同页同一含义只能对应一个色值。
|
||||
8. 不得仅用颜色传达信息(WCAG 1.4.1)。
|
||||
|
||||
---
|
||||
|
||||
## 五、历史遗留收口清单
|
||||
|
||||
以下为当前与规范冲突的位置,**本文档阶段不执行**,仅登记,供后续代码阶段按表替换。
|
||||
以下为当前与规范冲突的位置,**本文档阶段不执行**,仅登记供后续代码阶段按表替换。
|
||||
|
||||
### 5.1 页面级
|
||||
|
||||
| 范围 | 现状色值 | 替换为 |
|
||||
| 范围 | 现状 | 替换为 |
|
||||
|---|---|---|
|
||||
| `mine/mine.wxss`、`mine/about.wxss` | `#D4A853`、`#FF8500` | `--brand-strong` / `--brand-ink` |
|
||||
| `mine/about.wxss`、`mine/mine.wxss` | `#22A45D` | `--brand-strong` |
|
||||
| `mine/comp_address.wxml`(`switch` 属性) | 旧金色 | `#C2410C`(属性值需硬编码) |
|
||||
| `health/profilelist.js`(`confirmColor`) | 旧金色 | `#C2410C` |
|
||||
| `mine/about.wxss` | `#D4A853`、`#FF8500`、`#22A45D` | `--brand-strong` / `--brand-ink` |
|
||||
| `mine/comp_address.wxml`(`switch` 属性) | 旧金色 | `#B8520A`(属性值需硬编码) |
|
||||
| `health/profilelist.js`(`confirmColor`) | 旧金色 | `#B8520A` |
|
||||
| `health/profilelist.wxss`、`profileedit.wxss` | `#D4A853` 系 | 暖橙令牌 |
|
||||
| `escort/recordlist.wxss` | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
|
||||
| `escort/recorddetail.wxss`(12 处) | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
|
||||
| `escort/agreement.wxss` | 底 `#FAF6F1`、`#D4A853` 系 | `--paper` / `--brand-soft` / 暖橙令牌 |
|
||||
| `hospital/contact.wxss`、`hospital/ranking.wxss` | 底 `#F5F7F6`,字 `#1F2937`,绿 `#6B8E7B` `#2D6A4F`,灰 `#6B7280` `#9CA3AF` `#F3F4F6` `#E5E7EB` | 整体并入暖橙体系 |
|
||||
| `pages/ai/aichat.wxss` | 金 `#D4A853`,橙渐变 `#FF9B33→#FF7A33`,绿渐变 `#4CAF50→#45A049`,中性 `#F5F5F5` `#EEEEEE` `#999999` `#333333` `#E5E5E5` | 去渐变,气泡改单色 + 浅底,中性色归入纸面与线 |
|
||||
| `hospital/contact.wxss`、`hospital/ranking.wxss` | 底 `#F5F7F6`、字 `#1F2937`、绿灰系 | 整体并入暖橙体系 |
|
||||
|
||||
### 5.2 系统级(不在任何页面里,最容易漏)
|
||||
已完成(2026-10-04):`mine/mine.wxss`、`pages/ai/aichat.wxss` 已按本节并入暖橙体系。
|
||||
|
||||
### 5.2 系统级(不在页面里,最易漏)
|
||||
|
||||
| 位置 | 现状 | 应改为 |
|
||||
|---|---|---|
|
||||
| `app.json` tabBar 选中图标 | `images/home-green.png`、`ai-green.png`、`mine-green.png`(绿色图片) | 暖橙 `#C2410C` 版本,与 `selectedColor` 一致 |
|
||||
| `app.json` tabBar 选中图标 | `home-green.png` / `ai-green.png` / `mine-green.png`(绿色图片) | 暖橙 `#B8520A` 版本,与 `selectedColor` 一致 |
|
||||
| `app.json` tabBar `color` | `#999999` | `--muted` 等价色 `#6F655C` |
|
||||
| `app.wxss` 全局变量 | `--td-brand-color-1..10` 整套翠绿(基准 `#22A45D`)、`--c-ink #1c1917` | 已确认业务页面零引用(页面只用了 `t-icon`),是死代码,可整体重写或删除 |
|
||||
| `app.wxss` 全局变量 | `--td-brand-color-1..10` 整套翠绿(基准 `#22A45D`)、`--c-ink #1c1917` | 已确认业务页面零引用,是死代码,可整体重写或删除 |
|
||||
| `custom-tab-bar/index.wxss`、`index.js` | 未选中色硬编码 `#7A7068` | `#6F655C` |
|
||||
|
||||
### 5.3 通用色值映射表
|
||||
|
||||
| 旧值 | 新值 | 说明 |
|
||||
|---|---|---|
|
||||
| `#D4A853` | `#9A3412` 或 `#C2410C` | 灰金转暖橙,按"文字/图标"或"实心"分 |
|
||||
| `#FF8500` | `#C2410C` | 亮橙转主色 |
|
||||
| `#FF9B33` / `#FF7A33` | `#C2410C` + `#FFF4E8` | 去渐变,拆成字色与底色 |
|
||||
| `#22A45D` / `#6B8E7B` / `#2D6A4F` / `#4CAF50` / `#45A049` | `#C2410C`;若语义是"已完成"则 `#1F7A4D` | 绿系全部转暖橙;仅状态语义保留绿 |
|
||||
| `#D4A853` | `#9B4508` 或 `#B8520A` | 灰金转暖橙,按"文字/图标"或"实心"分 |
|
||||
| `#FF8500` | `#B8520A` | 亮橙转主色 |
|
||||
| `#FF9B33` / `#FF7A33` | `#B8520A` + `#FFF4E8` | 去渐变,拆成字色与底色 |
|
||||
| `#22A45D` / `#6B8E7B` / `#2D6A4F` / `#4CAF50` / `#45A049` | `#B8520A`;语义为"已完成"则 `#1F7A4D` | 绿系转暖橙,仅状态语义保留绿 |
|
||||
| `#FAF6F1` / `#F5F7F6` / `#F5F5F5` | `#FAF8F5` 或 `#FFFFFF` | 旧底转纸面或卡片 |
|
||||
| `#F3F4F6` / `#EEEEEE` / `#E5E5E5` | `#ECE3D6` 或 `#E5DACC` | 冷灰线转暖线 |
|
||||
| `#E5E7EB` | `#ECE3D6`;浅橙底上用 `#E5DACC` | 同上 |
|
||||
| `#1F2937` | `#2B2521` | 冷黑转暖墨 |
|
||||
| `#333333` | `#2B2521` | 同上 |
|
||||
| `#F3F4F6` / `#EEEEEE` / `#E5E5E5` / `#E5E7EB` | `#ECE3D6`(浅橙底上用 `#E5DACC`) | 冷灰线转暖线 |
|
||||
| `#1F2937` / `#333333` | `#2B2521` | 冷黑转暖墨 |
|
||||
| `#6B7280` / `#9CA3AF` / `#999999` / `#7A7068` | `#6F655C` | 各版"次要灰"统一 |
|
||||
|
||||
---
|
||||
|
||||
## 六、一句话检验
|
||||
|
||||
改完任何页面后,用这三条自检:
|
||||
1. 页面去色(灰度化)后层级还清楚吗?去掉颜色就散架 = 在用颜色凑层级。
|
||||
2. 数一下色相:超过"暖橙 + 暖墨 + 至多一个状态色"就有问题。
|
||||
3. 最浅的那行字是 `--muted` 或更深吗?比它更浅的要拉回来。
|
||||
|
||||
1. 把页面截图去色(灰度化),层级还清楚吗?如果去掉颜色就散架,说明是在用颜色凑层级。
|
||||
2. 数一下页面上有几个色相。超过"暖橙 + 暖墨 + 至多一个状态色",就有问题。
|
||||
3. 页面里最浅的那行字,是 `--muted` 或更深吗?比它更浅的,都要拉回来。
|
||||
---
|
||||
|
||||
## 七、主题色沿革与回滚
|
||||
|
||||
主色做过一次色相右移。照 §7.3 倒着改即可整体回滚。
|
||||
|
||||
### 7.1 三套值
|
||||
|
||||
| 版本 | `--brand-strong` | HSL | `--brand-ink` | HSL | 状态 |
|
||||
|---|---|---|---|---|---|
|
||||
| **现行** | `#B8520A` | H25° · S90% · L38% | `#9B4508` | H25° · S90% · L32% | 首页、`escort/itemlist`、自定义 tabBar 已落地 |
|
||||
| **之前** | `#C2410C` | H18° · S88% · L40% | `#9A3412` | H15° · S79% · L34% | 其余页面仍是此值 |
|
||||
| 已否候选 | `#A85A00` | H32° · S100% · L33% | — | — | 为凑白字 AA 把明度压到 33% 致画面发闷,仅登记 |
|
||||
|
||||
`--brand-soft #FFF4E8`、`--brand-line #FFE0C2` 全程未动,回滚无需处理。
|
||||
|
||||
### 7.2 为什么离开旧值
|
||||
|
||||
旧值 `#C2410C`(H18° 偏红、饱和偏高)大面积铺开会读成"锈橙 ≈ 干血",与就医语境不合。折中右移到 H25°,明度只让 40%→38%、饱和 88%→90%,保住"眼前一亮"的抓力。若日后仍嫌血色,**正解是收缩橙色面积,不是继续调暗**。
|
||||
|
||||
### 7.3 回滚清单
|
||||
|
||||
回滚或再改主色只需改第 1 行(`app.wxss`);其余 10 处是 CSS 变量读不到的地方(`t-icon` color、base64 stroke、位图、`app.json`、自绘阴影),须一并手改。`--brand-soft` / `--brand-line` 未变,不在表内。
|
||||
|
||||
| # | 文件 | 位置 | 现行 | 回滚为 |
|
||||
|---|---|---|---|---|
|
||||
| 1 | `app.wxss` | `page{}` 内 `--brand-strong` / `--brand-ink`(全站唯一来源) | `#B8520A` / `#9B4508` | `#C2410C` / `#9A3412` |
|
||||
| 2 | `app.wxss` | `page{}` 内 `--shadow-cta` | `rgba(184, 82, 10, 0.16)` | `rgba(194, 65, 12, 0.16)` |
|
||||
| 3 | `pages/home/index.wxss` | `.brand-mark` 的 `box-shadow` | `rgba(184, 82, 10, 0.16)` | `rgba(194, 65, 12, 0.16)` |
|
||||
| 4 | `pages/home/index.wxss` | 8 个 base64 线图标的 `stroke` | `#B8520A` | `#C2410C` |
|
||||
| 5 | `pages/home/index.wxml` | 第 119 行 `t-icon` 的 `color` | `#9B4508` | `#9A3412` |
|
||||
| 6 | `pages/escort/itemlist.wxml` | 第 25 / 30 / 96 行 `t-icon` 的 `color` | `#9B4508` | `#9A3412` |
|
||||
| 7 | `custom-tab-bar/index.js` | 第 8 行 `activeColor` | `#B8520A` | `#C2410C` |
|
||||
| 8 | `custom-tab-bar/index.wxss` | 第 39 行 `.tab-item.is-active .tab-text` | `#B8520A` | `#C2410C` |
|
||||
| 9 | `app.json` | 第 30 行 `tabBar.selectedColor` | `#B8520A` | `#C2410C` |
|
||||
| 10 | `images/ai-ink.png` | 整图纯色(AI客服选中态位图) | `#9B4508` | `#8A4B08`(位图需重上色,不能按文本替换) |
|
||||
| 11 | `images/home-ink.png` | 整图纯色(「我的」默认头像位图,由灰色 `home.png` 重上色) | `#9B4508` | `#8A4B08`(同上) |
|
||||
|
||||
**无需回滚**:其余页面从未迁移。仍定义旧值 `#C2410C` / `#9A3412` 的是 `itemdetail`、`attendantlist`、`guide`、`mine/contact` 四页八文件(各含 `.wxss` 令牌与 `.wxml` 里 `t-icon` 硬编码),本就是回滚后的目标态;`agreement`、`recordlist`、`recorddetail`、`mine/*` 等页走更早的金色体系(`#D4A853`),见 §5.1。
|
||||
|
||||
注:`custom-tab-bar` 未选中灰硬编码 `#7A7068` 是独立历史遗留项(应改 `#6F655C`,见 §5.2),与本次主色调整无关。
|
||||
Reference in New Issue
Block a user