97 lines
2.9 KiB
Markdown
97 lines
2.9 KiB
Markdown
|
# Vant 主题色配置说明
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
本项目已配置 Vant UI 组件库的主题色为 `#a22525`，所有相关组件都会使用这个颜色作为主色调。
|
|||
|
|
|
|||
|
|
## 配置文件位置
|
|||
|
|
- 主题配置文件：`src/assets/vant-theme.css`
|
|||
|
|
- 主样式文件：`src/assets/main.css`（已导入主题配置）
|
|||
|
|
|
|||
|
|
## 配置方法
|
|||
|
|
|
|||
|
|
### 方法一：CSS 变量覆盖（推荐）
|
|||
|
|
```css
|
|||
|
|
:root {
|
|||
|
|
--van-primary-color: #a22525;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 方法二：直接覆盖组件样式
|
|||
|
|
```css
|
|||
|
|
.van-button--primary {
|
|||
|
|
background-color: #a22525 !important;
|
|||
|
|
border-color: #a22525 !important;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 已配置的组件
|
|||
|
|
|
|||
|
|
以下组件已经配置为主题色 `#a22525`：
|
|||
|
|
|
|||
|
|
### 基础组件
|
|||
|
|
- ✅ 按钮 (Button) - 主要按钮
|
|||
|
|
- ✅ 开关 (Switch) - 开启状态
|
|||
|
|
- ✅ 复选框 (Checkbox) - 选中状态
|
|||
|
|
- ✅ 单选框 (Radio) - 选中状态
|
|||
|
|
- ✅ 滑动条 (Slider) - 进度条和按钮
|
|||
|
|
- ✅ 进度条 (Progress) - 进度填充
|
|||
|
|
- ✅ 评分 (Rate) - 已评分星星
|
|||
|
|
- ✅ 步进器 (Stepper) - 加减按钮
|
|||
|
|
- ✅ 标签 (Tag) - 主要类型标签
|
|||
|
|
- ✅ 徽章 (Badge) - 主要类型徽章
|
|||
|
|
|
|||
|
|
### 导航组件
|
|||
|
|
- ✅ 导航栏 (NavBar) - 背景色
|
|||
|
|
- ✅ 标签栏 (Tabbar) - 激活状态
|
|||
|
|
- ✅ 步骤条 (Steps) - 激活步骤
|
|||
|
|
- ✅ 侧边栏 (Sidebar) - 选中项
|
|||
|
|
|
|||
|
|
### 反馈组件
|
|||
|
|
- ✅ 通知栏 (NoticeBar) - 主要类型
|
|||
|
|
- ✅ 轮播图 (Swipe) - 指示器
|
|||
|
|
- ✅ 加载 (Loading) - 加载动画
|
|||
|
|
- ✅ 弹窗 (Dialog) - 标题栏
|
|||
|
|
|
|||
|
|
### 表单组件
|
|||
|
|
- ✅ 选择器 (Picker) - 确认按钮
|
|||
|
|
- ✅ 日期选择器 (DatetimePicker) - 确认按钮
|
|||
|
|
- ✅ 地区选择器 (Area) - 确认按钮
|
|||
|
|
- ✅ 搜索 (Search) - 操作按钮
|
|||
|
|
- ✅ 日历 (Calendar) - 选中日期
|
|||
|
|
- ✅ 时间选择器 (TimePicker) - 确认按钮
|
|||
|
|
- ✅ 密码输入框 (PasswordInput) - 聚焦边框
|
|||
|
|
|
|||
|
|
### 业务组件
|
|||
|
|
- ✅ 商品卡片 (Card) - 价格颜色
|
|||
|
|
- ✅ 优惠券 (Coupon) - 折扣颜色
|
|||
|
|
- ✅ 地址编辑 (AddressEdit) - 默认地址
|
|||
|
|
- ✅ 商品规格选择器 (Sku) - 选中项
|
|||
|
|
- ✅ 购物车 (SubmitBar) - 价格颜色
|
|||
|
|
- ✅ 提交订单栏 (SubmitBar) - 主要按钮
|
|||
|
|
- ✅ 联系人列表 (ContactList) - 选中项
|
|||
|
|
- ✅ 树形选择器 (TreeSelect) - 选中项
|
|||
|
|
|
|||
|
|
## 测试页面
|
|||
|
|
|
|||
|
|
可以通过访问 `/example` 路由来查看主题色配置效果，该页面展示了各种 Vant 组件的主题色应用情况。
|
|||
|
|
|
|||
|
|
## 自定义主题色
|
|||
|
|
|
|||
|
|
如果需要修改主题色，只需要：
|
|||
|
|
|
|||
|
|
1. 修改 `src/assets/vant-theme.css` 文件中的颜色值
|
|||
|
|
2. 将所有的 `#a22525` 替换为新的颜色值
|
|||
|
|
3. 同时更新 `theme` 文件中的颜色值
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 使用了 `!important` 来确保样式优先级
|
|||
|
|
2. 配置了激活状态的半透明效果 `rgba(162, 85, 37, 0.8)`
|
|||
|
|
3. 部分组件配置了悬停和聚焦状态的颜色
|
|||
|
|
4. 所有配置都基于 Vant 4.x 版本
|
|||
|
|
|
|||
|
|
## 参考文档
|
|||
|
|
|
|||
|
|
- [Vant 主题定制官方文档](https://vant-ui.github.io/vant-weapp/#/theme)
|
|||
|
|
- [Vant 样式变量参考](https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less)
|