253 lines
6.1 KiB
Markdown
253 lines
6.1 KiB
Markdown
# 中医医院小程序首页 - 简化设计
|
|
|
|
## 页面结构
|
|
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ 中医医院 │ <- 顶部导航栏
|
|
└─────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────┐
|
|
│ │
|
|
│ [轮播图片 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}`
|
|
})
|
|
}
|
|
```
|
|
|
|
## 总结
|
|
|
|
这个简化设计包含：
|
|
- ✅ 专业的顶部导航栏
|
|
- ✅ 吸引人的轮播图
|
|
- ✅ 清晰的医生列表
|
|
- ✅ 便捷的咨询按钮
|
|
- ✅ 中医风格的色彩方案
|
|
- ✅ 流畅的交互体验
|
|
|
|
整个页面简洁明了，重点突出，用户可以快速找到想要的医生并进行咨询。
|