# 中医医院小程序首页 - 简化设计

## 页面结构

```
┌─────────────────────────────────┐
│ 中医医院                        │  <- 顶部导航栏
└─────────────────────────────────┘

┌─────────────────────────────────┐
│                                 │
│  [轮播图片 1]                   │
│  中医药文化                     │
│  传承千年中医精粹，守护您的健康 │
│                                 │
│  ● ○ ○                         │  <- 指示器
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ 名医推荐                        │
├─────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ [头像] 张医生      [咨询]   │ │
│ │ 专家   主任医师              │ │
│ │        中医内科              │ │
│ │        ★★★★★ 4.9         │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ [头像] 李医生      [咨询]   │ │
│ │        副主任医师            │ │
│ │        中医妇科              │ │
│ │        ★★★★★ 4.8         │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ [头像] 王医生      [咨询]   │ │
│ │        主治医师              │ │
│ │        中医儿科              │ │
│ │        ★★★★★ 4.7         │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘
```

## 设计规范

### 色彩方案
- **主色**: `#8B6914` (棕色) - 中医传统色
- **辅助色**: `#A0826D` (浅棕) - 渐变用
- **强调色**: `#FFB800` (金色) - 星级评分
- **背景**: `#f8f8f8` (浅灰)
- **卡片**: `#fff` (白色)
- **文字**: `#333` (深灰)

### 字体规范
- **标题**: 32rpx, 加粗
- **医生名字**: 28rpx, 加粗
- **职位/科室**: 22rpx, 正常
- **评分**: 20rpx, 正常

### 间距规范
- **页面外边距**: 20rpx
- **卡片内边距**: 16rpx
- **元素间距**: 4-8rpx

### 圆角规范
- **卡片**: 12rpx
- **头像**: 8rpx
- **按钮**: 20rpx

## 组件详解

### 1. 顶部导航栏
```scss
.header {
  background: linear-gradient(135deg, #8B6914 0%, #A0826D 100%);
  padding: 20rpx 30rpx;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
```
- 固定顶部，棕色渐变背景
- 显示医院名称
- 高度: 60rpx

### 2. 轮播图
```scss
.banner {
  height: 320rpx;
}

.banner-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  padding: 40rpx 30rpx;
}
```
- 高度: 320rpx
- 自动轮播，5秒切换
- 底部显示标题和描述
- 使用渐变遮罩

### 3. 医生卡片
```scss
.doctor-item {
  display: flex;
  gap: 16rpx;
  padding: 16rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
  border: 1rpx solid #f0f0f0;
}
```
- 左侧: 头像 (100x100rpx) + 专家标签
- 中间: 医生信息 (名字、职位、科室、评分)
- 右侧: 咨询按钮
- 按下有反馈效果

### 4. 医生信息
```
医生名字 (28rpx, 加粗)
职位 (22rpx, 棕色)
科室 (20rpx, 灰色)
★★★★★ 4.9 (20rpx, 金色)
```

### 5. 咨询按钮
```scss
.consult-btn {
  background: #8B6914;
  color: #fff;
  padding: 12rpx 20rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
}
```
- 棕色背景，白色文字
- 圆角按钮
- 点击跳转到挂号页面

## 交互设计

### 轮播图
- 自动轮播，5秒切换一次
- 支持手动滑动
- 显示指示器点

### 医生卡片
- 点击整个卡片进入医生详情
- 按下时有缩放和阴影效果
- 咨询按钮点击进入挂号页面

### 按钮反馈
- 按下时背景变深
- 有 300ms 过渡动画
- 提供视觉反馈

## 响应式设计

### 使用 rpx 单位
- 1rpx = 0.5px (在 375px 宽度下)
- 自动适配不同屏幕尺寸
- 无需手动计算

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

## 性能优化

### 图片优化
- 使用 `mode="aspectFill"` 保持宽高比
- 图片自动缩放
- 支持懒加载

### 动画优化
- 使用 CSS 过渡而非 JS 动画
- 轮播使用原生 swiper 组件
- 减少重排和重绘

## 数据流

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

## API 集成

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

### 响应格式
```json
{
  "code": 1,
  "msg": "success",
  "data": {
    "lists": [
      {
        "id": 1,
        "name": "张医生",
        "title": "主任医师",
        "specialty": "中医内科",
        "avatar": "http://...",
        "rating": "4.9"
      }
    ]
  }
}
```

## 点击事件

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

## 总结

这个简化设计包含：
- ✅ 专业的顶部导航栏
- ✅ 吸引人的轮播图
- ✅ 清晰的医生列表
- ✅ 便捷的咨询按钮
- ✅ 中医风格的色彩方案
- ✅ 流畅的交互体验

整个页面简洁明了，重点突出，用户可以快速找到想要的医生并进行咨询。