# 现代中医医院首页设计指南

## 设计理念

采用现代医疗应用的设计风格，结合中医特色，为60岁左右的用户提供专业、易用的医疗服务体验。

## 页面结构

```
┌─────────────────────────────────┐
│ 成都双流蜀养堂互联网医院  ⋯ ◯  │  <- 顶部信息栏
│ 📍 郑州市金水区                 │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ 🔍 输入科室、疾病、医生搜索 搜索 │  <- 搜索栏
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  [轮播图]                       │  <- 轮播图
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ 问诊服务                        │
├─────────────────────────────────┤
│ 专家问诊  │ 健康咨询  │ 快速问诊 │  <- 服务卡片
│ 去找专家  │ 前往咨询  │ 前往问诊 │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ 特色专科医师              更多 > │
├─────────────────────────────────┤
│ [头像]  [头像]  [头像]  [头像]  │  <- 医生横向滚动
│ 赵建欣  雷惧昱  稳骨    ...     │
│ 主任医师 主治医师 主治医师       │
│ 内科    内科    内科            │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ 🏠 首页  📢 消息  👤 我的        │  <- 底部导航
└─────────────────────────────────┘
```

## 色彩方案

### 主色系
- **棕色**: #8B6F47 - 中医传统色
- **绿色**: #4CAF50 - 健康、生命力
- **背景**: #f5f5f5 - 页面背景
- **卡片**: #fff - 内容卡片

### 服务卡片色
- **专家问诊**: 橙色系 (#FFF3E0 - #FFE0B2)
- **健康咨询**: 绿色系 (#E8F5E9 - #C8E6C9)
- **快速问诊**: 紫色系 (#F3E5F5 - #E1BEE7)

## 组件设计

### 1. 顶部信息栏
```scss
.top-bar {
  background: linear-gradient(135deg, #8B6F47 0%, #A0826D 100%);
  padding: 16rpx 20rpx;
  display: flex;
  justify-content: space-between;
}
```
- 棕色渐变背景
- 显示医院名称和位置
- 右侧显示菜单和设置按钮
- 高度: 60rpx

### 2. 搜索栏
```scss
.search-box {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 24rpx;
  padding: 12rpx 16rpx;
}

.search-btn {
  background: #4CAF50;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
}
```
- 灰色背景，圆角搜索框
- 绿色搜索按钮
- 支持输入科室、疾病、医生

### 3. 轮播图
```scss
.banner {
  height: 200rpx;
}
```
- 高度: 200rpx
- 自动轮播，5秒切换
- 圆角: 12rpx
- 阴影: 0 2rpx 8rpx

### 4. 问诊服务卡片
```scss
.service-card {
  border-radius: 12rpx;
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service-1 { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); }
.service-2 { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); }
.service-3 { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); }
```
- 3 列网格布局
- 渐变背景
- 标题 + 描述 + 按钮
- 按下有缩放效果

### 5. 医生卡片
```scss
.doctor-card {
  flex-shrink: 0;
  width: 120rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
  padding: 12rpx;
  text-align: center;
}

.doctor-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
}
```
- 横向滚动布局
- 宽度: 120rpx
- 头像: 80x80rpx
- 显示名字、职位、科室

### 6. 底部导航
```scss
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 12rpx 0 16rpx 0;
}
```
- 固定底部
- 3 个导航项
- 图标 + 文字
- 高度: 80rpx

## 字体规范

### 字体大小
- **医院名称**: 22rpx
- **服务标题**: 24rpx
- **医生名字**: 22rpx
- **职位/科室**: 18rpx
- **搜索框**: 24rpx
- **按钮**: 18-22rpx

### 字体权重
- **标题**: 加粗 (600-700)
- **重要信息**: 加粗 (600)
- **正常文字**: 正常 (400)

## 间距规范

- **页面外边距**: 20rpx
- **卡片内边距**: 12-16rpx
- **元素间距**: 8-12rpx
- **底部空间**: 100rpx (留给导航)

## 圆角规范

- **卡片**: 12rpx
- **头像**: 8rpx
- **按钮**: 16-24rpx
- **搜索框**: 24rpx

## 交互设计

### 轮播图
- 自动轮播，5秒切换
- 支持手动滑动
- 底部指示器

### 服务卡片
- 点击进入对应服务
- 按下有缩放效果 (scale 0.95)
- 300ms 过渡动画

### 医生卡片
- 横向滚动
- 点击进入医生详情
- 按下有阴影效果

### 导航切换
- 点击切换导航
- 颜色和大小变化
- 300ms 过渡动画

## 响应式设计

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

### 布局适配
- 服务卡片 3 列
- 医生卡片横向滚动
- 自动适应屏幕宽度

## 性能优化

- 使用 CSS 动画
- 图片自动缩放
- 减少重排和重绘
- 支持图片懒加载

## 无障碍设计

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

## 数据流

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

## API 集成

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

## 点击事件

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

## 总结

这个设计方案特点：
- ✅ 现代医疗应用风格
- ✅ 中医特色色彩搭配
- ✅ 清晰的信息层级
- ✅ 多种问诊服务选择
- ✅ 医生横向滚动展示
- ✅ 易用的导航设计
- ✅ 适合60岁左右的用户

整个页面设计专业、现代、易用，为用户提供了多种医疗服务选择和便捷的医生查询体验。