510 lines
16 KiB
Markdown
510 lines
16 KiB
Markdown
# 微信小程序 VI 设计系统
|
||
|
||
> 最后更新：2026-03-17
|
||
> 适用范围：台球门店小程序前端所有页面
|
||
> 面向对象：设计师、前端开发、AI 代码生成
|
||
|
||
---
|
||
|
||
## 📋 目录
|
||
|
||
1. [任务分类配色](#1-任务分类配色)
|
||
2. [客户标签配色](#2-客户标签配色)
|
||
3. [关系等级配色](#3-关系等级配色)
|
||
4. [置顶/放弃状态](#4-置顶放弃状态)
|
||
5. [助教等级配色](#5-助教等级配色)
|
||
6. [AI 图标配色系统](#6-ai-图标配色系统)
|
||
7. [CSS 变量速查表](#7-css-变量速查表)
|
||
|
||
---
|
||
|
||
## 1. 任务分类配色
|
||
|
||
### 1.1 四种任务类型
|
||
|
||
| 任务类型 | 优先级 | 边框色 | 标签渐变色 | 用途 |
|
||
|---------|--------|--------|-----------|------|
|
||
| 高优先召回 | 0 | `#dc2626` | `#b91c1c → #dc2626` | max(WBI,NCI) > 7 |
|
||
| 优先召回 | 0 | `#f97316` | `#ea580c → #f97316` | max(WBI,NCI) > 5 |
|
||
| 客户回访 | 1 | `#14b8a6` | `#0d9488 → #14b8a6` | 完成召回后未备注 |
|
||
| 关系构建 | 2 | `#f472b6` | `#ec4899 → #f472b6` | RS < 6 |
|
||
|
||
### 1.2 WXSS 类名映射
|
||
|
||
```css
|
||
/* 卡片边框 */
|
||
.task-card--high_priority { border-left-color: #dc2626; }
|
||
.task-card--priority_recall { border-left-color: #f97316; }
|
||
.task-card--callback { border-left-color: #14b8a6; }
|
||
.task-card--relationship { border-left-color: #f472b6; }
|
||
|
||
/* 标签渐变 */
|
||
.task-type-tag--high_priority { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); }
|
||
.task-type-tag--priority_recall { background: linear-gradient(135deg, #ea580c 0%, #f97316 100%); }
|
||
.task-type-tag--callback { background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); }
|
||
.task-type-tag--relationship { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); }
|
||
```
|
||
|
||
### 1.3 TypeScript 常量
|
||
|
||
```typescript
|
||
export const TASK_TYPE_COLORS = {
|
||
high_priority: {
|
||
borderColor: '#dc2626',
|
||
gradientFrom: '#b91c1c',
|
||
gradientTo: '#dc2626',
|
||
label: '高优先召回',
|
||
},
|
||
priority_recall: {
|
||
borderColor: '#f97316',
|
||
gradientFrom: '#ea580c',
|
||
gradientTo: '#f97316',
|
||
label: '优先召回',
|
||
},
|
||
callback: {
|
||
borderColor: '#14b8a6',
|
||
gradientFrom: '#0d9488',
|
||
gradientTo: '#14b8a6',
|
||
label: '客户回访',
|
||
},
|
||
relationship: {
|
||
borderColor: '#f472b6',
|
||
gradientFrom: '#ec4899',
|
||
gradientTo: '#f472b6',
|
||
label: '关系构建',
|
||
},
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 2. 客户标签配色
|
||
|
||
### 2.1 六种客户分类标签
|
||
|
||
| 标签名 | 字体色 | 背景色 | 心理学依据 | 用途 |
|
||
|--------|--------|--------|-----------|------|
|
||
| 客户基础 | `#0052d9` | `#ecf2fe` | 蓝色 - 信任、基础信息 | 基本信息、生日、性别等 |
|
||
| 消费习惯 | `#00a870` | `#e6f7f0` | 绿色 - 增长、消费行为 | 消费频率、金额、时段 |
|
||
| 玩法偏好 | `#ed7b2f` | `#fff3e6` | 橙色 - 活力、娱乐偏好 | 游戏类型、时长偏好 |
|
||
| 促销偏好 | `#d4a017` | `#fffbeb` | 金色 - 价值、优惠敏感度 | 对促销活动的反应 |
|
||
| 社交关系 | `#764ba2` | `#f3e8ff` | 紫色 - 社交、人脉关系 | 推荐、介绍、社交属性 |
|
||
| 重要反馈 | `#e34d59` | `#ffe6e8` | 红色 - 警示、关键信息 | 投诉、建议、重要反馈 |
|
||
|
||
### 2.2 WXSS 类名映射
|
||
|
||
```css
|
||
.clue-tag-primary { background: rgba(0, 82, 217, 0.1); color: #0052d9; }
|
||
.clue-tag-success { background: rgba(0, 168, 112, 0.1); color: #00a870; }
|
||
.clue-tag-orange { background: rgba(237, 123, 47, 0.1); color: #ed7b2f; }
|
||
.clue-tag-gold { background: rgba(212, 160, 23, 0.1); color: #d4a017; }
|
||
.clue-tag-purple { background: rgba(118, 75, 162, 0.1); color: #764ba2; }
|
||
.clue-tag-error { background: rgba(227, 77, 89, 0.1); color: #e34d59; }
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 关系等级配色
|
||
|
||
### 3.1 四个关系等级
|
||
|
||
| 关系等级 | 爱心Icon | 分数范围 | 背景渐变 | 文字色 | 用途 |
|
||
|---------|---------|---------|---------|--------|------|
|
||
| 很好（非常好） | 💖 | > 8.5 | `#e91e63 → #f472b6` | `#fff` | 优质客户 |
|
||
| 良好 | 🧡 | 6-8.5 | `#ea580c → #fb923c` | `#fff` | 稳定客户 |
|
||
| 一般 | 💛 | 3.5-6 | `#eab308 → #fbbf24` | `#fff` | 普通客户 |
|
||
| 待发展 | 💙 | < 3.5 | `#64748b → #94a3b8` | `#fff` | 需维护客户 |
|
||
|
||
### 3.2 WXSS 类名映射
|
||
|
||
```css
|
||
.rel-level-excellent { background: linear-gradient(135deg, #e91e63, #f472b6); box-shadow: 0 4rpx 12rpx rgba(233,30,99,0.30); }
|
||
.rel-level-good { background: linear-gradient(135deg, #ea580c, #fb923c); box-shadow: 0 4rpx 12rpx rgba(234,88,12,0.30); }
|
||
.rel-level-normal { background: linear-gradient(135deg, #eab308, #fbbf24); box-shadow: 0 4rpx 12rpx rgba(234,179,8,0.30); }
|
||
.rel-level-poor { background: linear-gradient(135deg, #64748b, #94a3b8); box-shadow: 0 4rpx 12rpx rgba(100,116,139,0.30); }
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 置顶/放弃状态
|
||
|
||
### 4.1 置顶状态
|
||
|
||
**视觉处理**：金色边框光晕效果
|
||
|
||
```css
|
||
.task-card--pinned {
|
||
box-shadow: 0 5rpx 7rpx rgba(245, 158, 11, 0.12), 0 0 0 8rpx rgba(245, 158, 11, 0.08);
|
||
}
|
||
```
|
||
|
||
**颜色值**：
|
||
- 光晕色：`#f59e0b`（琥珀色）
|
||
- 透明度：12% + 8%
|
||
|
||
### 4.2 放弃状态
|
||
|
||
**视觉处理**：灰化 + 降低透明度
|
||
|
||
```css
|
||
.task-card--abandoned {
|
||
border-left-color: #d1d5db !important;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.task-type-tag--abandoned {
|
||
background: #d1d5db !important;
|
||
}
|
||
|
||
.customer-name--abandoned {
|
||
color: #9ca3af;
|
||
}
|
||
```
|
||
|
||
**颜色值**：
|
||
- 边框色：`#d1d5db`（灰色）
|
||
- 文字色：`#9ca3af`（浅灰）
|
||
- 透明度：55%
|
||
|
||
---
|
||
|
||
## 5. 助教等级配色
|
||
|
||
### 5.1 四级 + 星级
|
||
|
||
| 等级 | 字体色 | 背景色 | 说明 |
|
||
|------|--------|--------|------|
|
||
| 初级 | `#0052d9` | `#ecf2fe` | 蓝色 - 信任、基础 |
|
||
| 中级 | `#ed7b2f` | `#fff3e6` | 橙色 - 活力、进阶 |
|
||
| 高级 | `#e91e63` | `#ffe6e8` | 粉色 - 优雅、资深 |
|
||
| ⭐ 星级 | `#fbbf24` | `#fffef0` | 金黄色 - 价值、顶级 |
|
||
|
||
### 5.2 WXSS 类名映射
|
||
|
||
```css
|
||
.coach-level-junior { color: #0052d9; background: #ecf2fe; }
|
||
.coach-level-middle { color: #ed7b2f; background: #fff3e6; }
|
||
.coach-level-senior { color: #e91e63; background: #ffe6e8; }
|
||
.coach-level-star { color: #fbbf24; background: #fffef0; }
|
||
```
|
||
|
||
---
|
||
|
||
## 6. AI 图标配色系统
|
||
|
||
### 6.1 概览
|
||
|
||
AI 图标系统包含 **2 个标准组件** × **6 种配色**，共 12 种组合。
|
||
|
||
| 组件 | 路径 | 用途 | 图标文件 |
|
||
|------|------|------|----------|
|
||
| `ai-inline-icon` | `/components/ai-inline-icon/` | 卡片行首小图标（30rpx 容器） | `ai-robot-inline.svg` |
|
||
| `ai-title-badge` | `/components/ai-title-badge/` | 标题行右侧徽章（胶囊形态） | `ai-robot-sm.svg` |
|
||
|
||
### 6.2 六种配色
|
||
|
||
| 配色名 | 主色 | 浅色 | 深色 | 用途 |
|
||
|--------|------|------|------|------|
|
||
| Red | `#e74c3c` | `#f39c9c` | `#c0392b` | 警示、重要 |
|
||
| Orange | `#e67e22` | `#f5c77e` | `#ca6c17` | 活力、推荐 |
|
||
| Yellow | `#d4a017` | `#f7dc6f` | `#b8860b` | 价值、优化 |
|
||
| Blue | `#2980b9` | `#7ec8e3` | `#1a5276` | 信息、分析 |
|
||
| Indigo | `#667eea` | `#a78bfa` | `#4a5fc7` | 默认、通用 |
|
||
| Purple | `#764ba2` | `#c084fc` | `#5b3080` | 创意、特殊 |
|
||
|
||
### 6.3 组件注册
|
||
|
||
在页面的 `.json` 文件中按需注册：
|
||
|
||
```json
|
||
{
|
||
"usingComponents": {
|
||
"ai-inline-icon": "/components/ai-inline-icon/ai-inline-icon",
|
||
"ai-title-badge": "/components/ai-title-badge/ai-title-badge"
|
||
}
|
||
}
|
||
```
|
||
|
||
### 6.4 ai-inline-icon（行首嵌入小图标）
|
||
|
||
**外观**：
|
||
- 尺寸：30rpx × 30rpx，圆角 6rpx
|
||
- 背景：淡色渐变（主色 ~8% 透明度）
|
||
- 内部图标：`ai-robot-inline.svg`（白色机身）
|
||
- 动效：微光扫过（12s 周期）
|
||
|
||
**WXML 用法**：
|
||
|
||
```wxml
|
||
<!-- 固定配色 —— indigo（默认） -->
|
||
<ai-inline-icon />
|
||
|
||
<!-- 固定配色 —— orange -->
|
||
<ai-inline-icon color="orange" />
|
||
|
||
<!-- 页面随机配色（推荐） -->
|
||
<ai-inline-icon color="{{aiColor}}" />
|
||
```
|
||
|
||
**属性**：
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| `color` | String | `indigo` | 配色：`red` \| `orange` \| `yellow` \| `blue` \| `indigo` \| `purple` |
|
||
|
||
### 6.5 ai-title-badge（标题行 AI 徽章）
|
||
|
||
**外观**：
|
||
- 形态：胶囊，`padding: 4rpx 14rpx 4rpx 6rpx`，圆角 18rpx
|
||
- 背景：主色 ~8% 透明度渐变 + 主色 35% 边框
|
||
- 文字：深色主色，20rpx，font-weight 500
|
||
- 动效：呼吸脉冲（3s）+ 高光扫过（14s）
|
||
|
||
**WXML 用法**：
|
||
|
||
```wxml
|
||
<!-- 默认配色 + 默认文字「AI智能洞察」 -->
|
||
<ai-title-badge />
|
||
|
||
<!-- 指定配色 -->
|
||
<ai-title-badge color="blue" />
|
||
|
||
<!-- 自定义文字 -->
|
||
<ai-title-badge color="orange" label="AI 建议" />
|
||
|
||
<!-- 页面随机配色（推荐） -->
|
||
<ai-title-badge color="{{aiColor}}" />
|
||
```
|
||
|
||
**属性**：
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| `color` | String | `indigo` | 配色：`red` \| `orange` \| `yellow` \| `blue` \| `indigo` \| `purple` |
|
||
| `label` | String | `AI智能洞察` | 徽章文字 |
|
||
|
||
### 6.6 页面随机配色方案（推荐）
|
||
|
||
每个页面在 `onLoad` 时随机选取一种配色，全页所有 AI 图标统一使用同一配色。
|
||
|
||
**TS 实现**：
|
||
|
||
```typescript
|
||
const AI_COLORS = ['red', 'orange', 'yellow', 'blue', 'indigo', 'purple'] as const
|
||
type AiColor = typeof AI_COLORS[number]
|
||
|
||
Page({
|
||
data: {
|
||
aiColor: 'indigo' as AiColor,
|
||
},
|
||
|
||
onLoad() {
|
||
const aiColor = AI_COLORS[Math.floor(Math.random() * AI_COLORS.length)]
|
||
this.setData({ aiColor })
|
||
},
|
||
})
|
||
```
|
||
|
||
**WXML 绑定**：
|
||
|
||
```wxml
|
||
<!-- 行首图标 -->
|
||
<ai-inline-icon color="{{aiColor}}" />
|
||
|
||
<!-- 标题徽章 -->
|
||
<ai-title-badge color="{{aiColor}}" />
|
||
```
|
||
|
||
### 6.7 各页面配色建议（可选固定配色）
|
||
|
||
如不使用随机方案，可按以下建议固定配色：
|
||
|
||
| 页面 | 建议配色 | 原因 |
|
||
|------|---------|------|
|
||
| `task-list` | 随机 | 每日新鲜感 |
|
||
| `task-detail` | `indigo` | 通用默认 |
|
||
| `task-detail-callback` | `orange` | 与 banner 主题色呼应 |
|
||
| `task-detail-relationship` | `purple` | 与 banner 粉色系呼应 |
|
||
| `performance` | `blue` | 数据分析感 |
|
||
| `customer-detail` | `yellow` | 黑金页面，黄色点缀 |
|
||
| `coach-detail` | `red` | coral banner 配红色 AI |
|
||
|
||
---
|
||
|
||
## 7. CSS 变量速查表
|
||
|
||
### 7.1 全局颜色变量（app.wxss）
|
||
|
||
```css
|
||
page {
|
||
/* 主色系 */
|
||
--color-primary: #0052d9;
|
||
--color-primary-light: #ecf2fe;
|
||
--color-success: #00a870;
|
||
--color-warning: #ed7b2f;
|
||
--color-error: #e34d59;
|
||
|
||
/* 灰度系（13级） */
|
||
--color-gray-1: #f3f3f3;
|
||
--color-gray-2: #eeeeee;
|
||
--color-gray-3: #e7e7e7;
|
||
--color-gray-4: #dcdcdc;
|
||
--color-gray-5: #c5c5c5;
|
||
--color-gray-6: #a6a6a6;
|
||
--color-gray-7: #8b8b8b;
|
||
--color-gray-8: #777777;
|
||
--color-gray-9: #5e5e5e;
|
||
--color-gray-10: #4b4b4b;
|
||
--color-gray-11: #393939;
|
||
--color-gray-12: #2c2c2c;
|
||
--color-gray-13: #242424;
|
||
}
|
||
```
|
||
|
||
### 7.2 快速查询
|
||
|
||
**任务类型边框色**：
|
||
- 高优先召回：`#dc2626`
|
||
- 优先召回：`#f97316`
|
||
- 客户回访：`#14b8a6`
|
||
- 关系构建：`#f472b6`
|
||
|
||
**客户标签字体色**：
|
||
- 客户基础：`#0052d9`
|
||
- 消费习惯：`#00a870`
|
||
- 玩法偏好：`#ed7b2f`
|
||
- 促销偏好：`#d4a017`
|
||
- 社交关系：`#764ba2`
|
||
- 重要反馈：`#e34d59`
|
||
|
||
**关系等级渐变**：
|
||
- 很好：`#e91e63 → #f472b6`
|
||
- 良好：`#ea580c → #fb923c`
|
||
- 一般：`#eab308 → #fbbf24`
|
||
- 待发展：`#64748b → #94a3b8`
|
||
|
||
**助教等级**：
|
||
- 初级：`#0052d9` / `#ecf2fe`
|
||
- 中级：`#ed7b2f` / `#fff3e6`
|
||
- 高级：`#e91e63` / `#ffe6e8`
|
||
- ⭐ 星级：`#fbbf24` / `#fffef0`
|
||
|
||
---
|
||
|
||
## 8. 头像颜色系统
|
||
|
||
### 8.1 概览
|
||
|
||
所有客户头像、助教头像统一使用本色板，共 **24 种**渐变色。
|
||
全局 WXSS 类名格式：`.avatar-{key}`，定义在 `app.wxss`。
|
||
TS 工具函数：`nameToAvatarColor(name)` 位于 `utils/avatar-color.ts`。
|
||
|
||
### 8.2 24 色标准色板
|
||
|
||
| Key | 渐变起点 | 渐变终点 | 视觉风格 |
|
||
|-----|---------|---------|--------|
|
||
| `blue` | `#60a5fa` | `#3b82f6` | 经典蓝 |
|
||
| `indigo` | `#818cf8` | `#4f46e5` | 靛蓝 |
|
||
| `violet` | `#a78bfa` | `#7c3aed` | 紫罗兰 |
|
||
| `purple` | `#c084fc` | `#9333ea` | 紫色 |
|
||
| `fuchsia` | `#bd58c8` | `#7a1486` | 紫红 |
|
||
| `pink` | `#d44d96` | `#b83077` | 粉色 |
|
||
| `rose` | `#d05060` | `#aa1535` | 玫瑰红 |
|
||
| `red` | `#c85050` | `#a81c1c` | 红色 |
|
||
| `orange` | `#cc6e22` | `#b04208` | 橙色 |
|
||
| `amber` | `#fbbf24` | `#d97706` | 琥珀 |
|
||
| `yellow` | `#facc15` | `#ca8a04` | 黄色 |
|
||
| `lime` | `#a3e635` | `#65a30d` | 黄绿 |
|
||
| `green` | `#4ade80` | `#16a34a` | 绿色 |
|
||
| `emerald` | `#34d399` | `#059669` | 翡翠绿 |
|
||
| `teal` | `#2dd4bf` | `#0d9488` | 青绿 |
|
||
| `cyan` | `#22d3ee` | `#0891b2` | 青色 |
|
||
| `sky` | `#38bdf8` | `#0284c7` | 天蓝 |
|
||
| `slate` | `#94a3b8` | `#475569` | 石板灰 |
|
||
| `coral` | `#cc6245` | `#ad3512` | 珊瑚 |
|
||
| `mint` | `#67e8f9` | `#0891b2` | 薄荷 |
|
||
| `lavender` | `#c4b5fd` | `#7c3aed` | 薰衣草 |
|
||
| `gold` | `#fcd34d` | `#b45309` | 金色 |
|
||
| `crimson` | `#c42844` | `#750d28` | 深红 |
|
||
| `ocean` | `#38bdf8` | `#1d4ed8` | 海洋蓝 |
|
||
|
||
### 8.3 WXSS 类名（全局，定义在 app.wxss）
|
||
|
||
```css
|
||
.avatar-blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
|
||
.avatar-indigo { background: linear-gradient(135deg, #818cf8, #4f46e5); }
|
||
.avatar-violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
|
||
.avatar-purple { background: linear-gradient(135deg, #c084fc, #9333ea); }
|
||
.avatar-fuchsia { background: linear-gradient(135deg, #bd58c8, #7a1486); }
|
||
.avatar-pink { background: linear-gradient(135deg, #d44d96, #b83077); }
|
||
.avatar-rose { background: linear-gradient(135deg, #d05060, #aa1535); }
|
||
.avatar-red { background: linear-gradient(135deg, #c85050, #a81c1c); }
|
||
.avatar-orange { background: linear-gradient(135deg, #cc6e22, #b04208); }
|
||
.avatar-amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
|
||
.avatar-yellow { background: linear-gradient(135deg, #facc15, #ca8a04); }
|
||
.avatar-lime { background: linear-gradient(135deg, #a3e635, #65a30d); }
|
||
.avatar-green { background: linear-gradient(135deg, #4ade80, #16a34a); }
|
||
.avatar-emerald { background: linear-gradient(135deg, #34d399, #059669); }
|
||
.avatar-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
|
||
.avatar-cyan { background: linear-gradient(135deg, #22d3ee, #0891b2); }
|
||
.avatar-sky { background: linear-gradient(135deg, #38bdf8, #0284c7); }
|
||
.avatar-slate { background: linear-gradient(135deg, #94a3b8, #475569); }
|
||
.avatar-coral { background: linear-gradient(135deg, #cc6245, #ad3512); }
|
||
.avatar-mint { background: linear-gradient(135deg, #67e8f9, #0891b2); }
|
||
.avatar-lavender { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }
|
||
.avatar-gold { background: linear-gradient(135deg, #fcd34d, #b45309); }
|
||
.avatar-crimson { background: linear-gradient(135deg, #c42844, #750d28); }
|
||
.avatar-ocean { background: linear-gradient(135deg, #38bdf8, #1d4ed8); }
|
||
```
|
||
|
||
### 8.4 TypeScript 工具（utils/avatar-color.ts）
|
||
|
||
```typescript
|
||
import { nameToAvatarColor } from '../../utils/avatar-color'
|
||
|
||
// 根据姓名首字稳定映射颜色（相同输入永远返回相同结果）
|
||
const color = nameToAvatarColor('王先生') // => 'blue'
|
||
```
|
||
|
||
### 8.5 WXML 用法
|
||
|
||
```wxml
|
||
<!-- 客户/助教头像 -->
|
||
<view class="record-avatar avatar-{{item.avatarColor}}">
|
||
<text>{{item.avatarChar}}</text>
|
||
</view>
|
||
```
|
||
|
||
### 8.6 迁移说明
|
||
|
||
各页面原有的散乱类名统一替换为 `.avatar-{key}`：
|
||
|
||
| 旧类名 | 新类名 | 页面 |
|
||
|--------|--------|------|
|
||
| `.avatar-from-blue` | `.avatar-blue` | performance, performance-records |
|
||
| `.avatar-from-pink` | `.avatar-pink` | performance, performance-records |
|
||
| `.avatar-from-teal` | `.avatar-teal` | performance, performance-records |
|
||
| `.avatar-from-green` | `.avatar-green` | performance, performance-records |
|
||
| `.avatar-from-orange` | `.avatar-orange` | performance, performance-records |
|
||
| `.avatar-from-purple` | `.avatar-purple` | performance, performance-records |
|
||
| `.avatar-from-violet` | `.avatar-violet` | performance, performance-records |
|
||
| `.avatar-from-amber` | `.avatar-amber` | performance, performance-records |
|
||
| `.avatar-gradient-pink` | `.avatar-pink` | coach-detail |
|
||
| `.avatar-gradient-amber` | `.avatar-amber` | coach-detail |
|
||
| `.avatar-gradient-green` | `.avatar-green` | coach-detail |
|
||
| `.avatar-gradient-blue` | `.avatar-blue` | coach-detail |
|
||
| `.avatar-gradient-purple` | `.avatar-violet` | coach-detail |
|
||
| `.avatar-gradient-teal` | `.avatar-teal` | coach-detail |
|
||
| `.avatar--blue` | `.avatar-blue` | board-coach |
|
||
| `.avatar--green` | `.avatar-green` | board-coach |
|
||
| `.avatar--pink` | `.avatar-pink` | board-coach |
|
||
| `.avatar--amber` | `.avatar-amber` | board-coach |
|
||
| `.avatar--purple` | `.avatar-violet` | board-coach |
|
||
| `.avatar--cyan` | `.avatar-cyan` | board-coach |
|
||
|
||
---
|
||
|
||
**版本：** 1.1
|
||
**最后更新：** 2026-03-17
|
||
**维护者：** 设计系统团队
|