# 中医风格首页设计指南

## 设计理念

采用绿色系中医风格，结合卡片式布局，营造专业、温和、信任的医疗氛围。

## 页面结构

```
┌─────────────────────────────────┐
│  背景装饰（绿色渐变）           │
│                                 │
│  ┌─────────────────────────────┐│
│  │  轮播图                     ││
│  │  ● ○ ○                     ││
│  └─────────────────────────────┘│
│                                 │
│  ┌─────────────────────────────┐│
│  │ [头像] 赵建欣      咨询 >   ││
│  │        主任医师              ││
│  │        中医内科              ││
│  │                              ││
│  │ ⭐ 名医中医                  ││
│  │                              ││
│  │ 👍 好评率 95%  ❤️ 服务人数 ││
│  │                              ││
│  │ 🌐 互联网医院执业许可        ││
│  │ 📋 医师执业许可证            ││
│  └─────────────────────────────┘│
│                                 │
│  ┌─────────────────────────────┐│
│  │ [头像] 李医生      咨询 >   ││
│  │ ...                         ││
│  └─────────────────────────────┘│
└─────────────────────────────────┘
```

## 色彩方案

### 主色系
- **主绿色**: `#4CAF50` - 中医健康、生命力
- **浅绿色**: `#81C784` - 柔和、温暖
- **背景绿**: `#E8F5E9` - 清爽、舒适
- **浅背景**: `#F1F8F6` - 卡片背景

### 辅助色
- **金色**: `#FFB800` - 强调、重要
- **黄色**: `#FFF9C4` - 标签背景
- **文字**: `#333` - 主文字
- **辅助**: `#999` - 次要文字

## 组件设计

### 1. 背景装饰
```scss
.bg-decoration {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(129, 199, 132, 0.05) 100%);
  position: fixed;
  top: 0;
  height: 400rpx;
}
```
- 固定背景，绿色渐变
- 营造整体氛围
- 不影响内容交互

### 2. 轮播图
```scss
.banner-section {
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.15);
}

.banner {
  height: 280rpx;
}
```
- 高度: 280rpx
- 圆角: 16rpx
- 绿色阴影
- 自动轮播，5秒切换
- 底部指示器

### 3. 医生卡片
```scss
.doctor-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.1);
  border: 1rpx solid rgba(76, 175, 80, 0.08);
}
```
- 白色背景，绿色阴影
- 圆角: 16rpx
- 内边距: 20rpx
- 按下有上浮效果

### 4. 医生头部
```
[头像]  医生名字
        咨询 >
```
- 左侧: 80x80rpx 头像
- 右侧: 名字 + 咨询按钮
- 头像圆角: 12rpx

### 5. 医生详情
```
┌──────────────┬──────────────┐
│ 主任医师     │ 中医内科     │
└──────────────┴──────────────┘
```
- 两个标签，绿色背景
- 圆角: 20rpx
- 字体: 20rpx

### 6. 医生标签
```
⭐ 名医中医
```
- 黄色背景
- 圆角: 16rpx
- 显示医生特殊身份

### 7. 医生评分
```
┌──────────────┬──────────────┐
│ 👍 好评率    │ ❤️ 服务人数  │
│    95%       │    256人     │
└──────────────┴──────────────┘
```
- 两列布局
- 绿色背景
- 显示关键指标

### 8. 医生资质
```
🌐 互联网医院执业许可
📋 医师执业许可证
```
- 列表展示
- 图标 + 文字
- 灰色文字

## 交互设计

### 轮播图
- 自动轮播，5秒切换
- 支持手动滑动
- 底部指示器显示当前位置
- 指示器动画: 圆形 → 胶囊形

### 医生卡片
- 点击整个卡片进入医生详情
- 按下时上浮 2rpx
- 阴影增强
- 300ms 过渡动画

### 咨询按钮
- 绿色文字，表示可点击
- 点击进入挂号页面
- 带有 ">" 箭头提示

## 响应式设计

### 使用 rpx 单位
- 自动适配不同屏幕
- 1rpx = 0.5px (375px 宽度)

### 布局适配
- 医生卡片宽度 100%
- 自动适应屏幕宽度
- 文字自动换行

## 动画效果

### 轮播指示器
```scss
.dot {
  transition: all 0.3s ease;
  
  &.active {
    width: 24rpx;
    border-radius: 4rpx;
  }
}
```
- 圆形 → 胶囊形
- 300ms 过渡

### 卡片交互
```scss
.doctor-card {
  transition: all 0.3s ease;
  
  &:active {
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.15);
  }
}
```
- 上浮 2rpx
- 阴影增强
- 300ms 过渡

## 阴影规范

- **轻**: `0 2rpx 8rpx rgba(76, 175, 80, 0.1)`
- **中**: `0 4rpx 12rpx rgba(76, 175, 80, 0.15)`
- **重**: `0 4rpx 16rpx rgba(76, 175, 80, 0.15)`

## 字体规范

- **医生名字**: 28rpx, 加粗
- **职位/科室**: 20rpx, 正常
- **咨询按钮**: 22rpx, 加粗
- **标签文字**: 18rpx, 正常
- **评分数值**: 22rpx, 加粗
- **资质文字**: 18rpx, 正常

## 间距规范

- **页面外边距**: 20rpx
- **卡片内边距**: 20rpx
- **元素间距**: 8-16rpx
- **底部空间**: 20rpx

## 圆角规范

- **卡片**: 16rpx
- **头像**: 12rpx
- **标签**: 16-20rpx
- **小元素**: 12rpx

## 数据流

```
页面加载
  ↓
调用 fetchDoctors()
  ↓
获取医生列表
  ↓
处理数据（添加 isExpert 标记）
  ↓
渲染医生卡片
```

## API 集成

### 获取医生列表
```javascript
const response = await proxy.apiUrl({
  url: '/api/doctor/lists',
  method: 'GET',
  data: {
    page_no: 1,
    page_size: 10
  }
})
```

### 响应数据处理
```javascript
doctors.value = doctorList.map((doctor, index) => ({
  ...doctor,
  isExpert: index < 2,
  reviewCount: Math.floor(Math.random() * 500) + 100
}))
```

## 点击事件

### 医生卡片点击
```javascript
selectDoctor(doctor) {
  uni.navigateTo({
    url: `/pages/order/index?doctorId=${doctor.id}&doctorName=${doctor.name}`
  })
}
```

## 性能优化

- 使用 CSS 动画而非 JS 动画
- 图片使用 `mode="aspectFill"`
- 减少重排和重绘
- 支持图片懒加载

## 无障碍设计

- 足够的色彩对比度
- 清晰的文字标签
- 合理的点击区域 (最小 44x44rpx)
- 支持屏幕阅读器

## 总结

这个设计方案特点：
- ✅ 绿色系中医风格
- ✅ 卡片式布局，清晰明了
- ✅ 完整的医生信息展示
- ✅ 医生资质认证显示
- ✅ 流畅的交互体验
- ✅ 专业的医疗感

整个页面简洁专业，重点突出，用户可以快速了解医生信息并进行咨询。