更新
This commit is contained in:
Your Name
@@ -0,0 +1,252 @@
|
||||
# 中医医院小程序首页 - 简化设计
|
||||
|
||||
## 页面结构
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ 中医医院 │ <- 顶部导航栏
|
||||
└─────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────┐
|
||||
│ │
|
||||
│ [轮播图片 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}`
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 总结
|
||||
|
||||
这个简化设计包含：
|
||||
- ✅ 专业的顶部导航栏
|
||||
- ✅ 吸引人的轮播图
|
||||
- ✅ 清晰的医生列表
|
||||
- ✅ 便捷的咨询按钮
|
||||
- ✅ 中医风格的色彩方案
|
||||
- ✅ 流畅的交互体验
|
||||
|
||||
整个页面简洁明了，重点突出，用户可以快速找到想要的医生并进行咨询。
|
||||
Reference in New Issue
Block a user