更新
This commit is contained in:
Your Name
@@ -0,0 +1,290 @@
|
||||
# 现代中医医院首页设计指南
|
||||
|
||||
## 设计理念
|
||||
|
||||
采用现代医疗应用的设计风格，结合中医特色，为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岁左右的用户
|
||||
|
||||
整个页面设计专业、现代、易用，为用户提供了多种医疗服务选择和便捷的医生查询体验。
|
||||
Reference in New Issue
Block a user