# 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)