309 lines
6.9 KiB
Markdown
309 lines
6.9 KiB
Markdown
# 中医风格首页设计指南
|
|
|
|
## 设计理念
|
|
|
|
采用绿色系中医风格，结合卡片式布局，营造专业、温和、信任的医疗氛围。
|
|
|
|
## 页面结构
|
|
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ 背景装饰（绿色渐变） │
|
|
│ │
|
|
│ ┌─────────────────────────────┐│
|
|
│ │ 轮播图 ││
|
|
│ │ ● ○ ○ ││
|
|
│ └─────────────────────────────┘│
|
|
│ │
|
|
│ ┌─────────────────────────────┐│
|
|
│ │ [头像] 赵建欣 咨询 > ││
|
|
│ │ 主任医师 ││
|
|
│ │ 中医内科 ││
|
|
│ │ ││
|
|
│ │ ⭐ 名医中医 ││
|
|
│ │ ││
|
|
│ │ 👍 好评率 95% ❤️ 服务人数 ││
|
|
│ │ ││
|
|
│ │ 🌐 互联网医院执业许可 ││
|
|
│ │ 📋 医师执业许可证 ││
|
|
│ └─────────────────────────────┘│
|
|
│ │
|
|
│ ┌─────────────────────────────┐│
|
|
│ │ [头像] 李医生 咨询 > ││
|
|
│ │ ... ││
|
|
│ └─────────────────────────────┘│
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
## 色彩方案
|
|
|
|
### 主色系
|
|
- **主绿色**: `#4CAF50` - 中医健康、生命力
|
|
- **浅绿色**: `#81C784` - 柔和、温暖
|
|
- **背景绿**: `#E8F5E9` - 清爽、舒适
|
|
- **浅背景**: `#F1F8F6` - 卡片背景
|
|
|
|
### 辅助色
|
|
- **金色**: `#FFB800` - 强调、重要
|
|
- **黄色**: `#FFF9C4` - 标签背景
|
|
- **文字**: `#333` - 主文字
|
|
- **辅助**: `#999` - 次要文字
|
|
|
|
## 组件设计
|
|
|
|
### 1. 背景装饰
|
|
```scss
|
|
.bg-decoration {
|
|
background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(129, 199, 132, 0.05) 100%);
|
|
position: fixed;
|
|
top: 0;
|
|
height: 400rpx;
|
|
}
|
|
```
|
|
- 固定背景，绿色渐变
|
|
- 营造整体氛围
|
|
- 不影响内容交互
|
|
|
|
### 2. 轮播图
|
|
```scss
|
|
.banner-section {
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.15);
|
|
}
|
|
|
|
.banner {
|
|
height: 280rpx;
|
|
}
|
|
```
|
|
- 高度: 280rpx
|
|
- 圆角: 16rpx
|
|
- 绿色阴影
|
|
- 自动轮播，5秒切换
|
|
- 底部指示器
|
|
|
|
### 3. 医生卡片
|
|
```scss
|
|
.doctor-card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.1);
|
|
border: 1rpx solid rgba(76, 175, 80, 0.08);
|
|
}
|
|
```
|
|
- 白色背景，绿色阴影
|
|
- 圆角: 16rpx
|
|
- 内边距: 20rpx
|
|
- 按下有上浮效果
|
|
|
|
### 4. 医生头部
|
|
```
|
|
[头像] 医生名字
|
|
咨询 >
|
|
```
|
|
- 左侧: 80x80rpx 头像
|
|
- 右侧: 名字 + 咨询按钮
|
|
- 头像圆角: 12rpx
|
|
|
|
### 5. 医生详情
|
|
```
|
|
┌──────────────┬──────────────┐
|
|
│ 主任医师 │ 中医内科 │
|
|
└──────────────┴──────────────┘
|
|
```
|
|
- 两个标签，绿色背景
|
|
- 圆角: 20rpx
|
|
- 字体: 20rpx
|
|
|
|
### 6. 医生标签
|
|
```
|
|
⭐ 名医中医
|
|
```
|
|
- 黄色背景
|
|
- 圆角: 16rpx
|
|
- 显示医生特殊身份
|
|
|
|
### 7. 医生评分
|
|
```
|
|
┌──────────────┬──────────────┐
|
|
│ 👍 好评率 │ ❤️ 服务人数 │
|
|
│ 95% │ 256人 │
|
|
└──────────────┴──────────────┘
|
|
```
|
|
- 两列布局
|
|
- 绿色背景
|
|
- 显示关键指标
|
|
|
|
### 8. 医生资质
|
|
```
|
|
🌐 互联网医院执业许可
|
|
📋 医师执业许可证
|
|
```
|
|
- 列表展示
|
|
- 图标 + 文字
|
|
- 灰色文字
|
|
|
|
## 交互设计
|
|
|
|
### 轮播图
|
|
- 自动轮播，5秒切换
|
|
- 支持手动滑动
|
|
- 底部指示器显示当前位置
|
|
- 指示器动画: 圆形 → 胶囊形
|
|
|
|
### 医生卡片
|
|
- 点击整个卡片进入医生详情
|
|
- 按下时上浮 2rpx
|
|
- 阴影增强
|
|
- 300ms 过渡动画
|
|
|
|
### 咨询按钮
|
|
- 绿色文字，表示可点击
|
|
- 点击进入挂号页面
|
|
- 带有 ">" 箭头提示
|
|
|
|
## 响应式设计
|
|
|
|
### 使用 rpx 单位
|
|
- 自动适配不同屏幕
|
|
- 1rpx = 0.5px (375px 宽度)
|
|
|
|
### 布局适配
|
|
- 医生卡片宽度 100%
|
|
- 自动适应屏幕宽度
|
|
- 文字自动换行
|
|
|
|
## 动画效果
|
|
|
|
### 轮播指示器
|
|
```scss
|
|
.dot {
|
|
transition: all 0.3s ease;
|
|
|
|
&.active {
|
|
width: 24rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
```
|
|
- 圆形 → 胶囊形
|
|
- 300ms 过渡
|
|
|
|
### 卡片交互
|
|
```scss
|
|
.doctor-card {
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: translateY(-2rpx);
|
|
box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.15);
|
|
}
|
|
}
|
|
```
|
|
- 上浮 2rpx
|
|
- 阴影增强
|
|
- 300ms 过渡
|
|
|
|
## 阴影规范
|
|
|
|
- **轻**: `0 2rpx 8rpx rgba(76, 175, 80, 0.1)`
|
|
- **中**: `0 4rpx 12rpx rgba(76, 175, 80, 0.15)`
|
|
- **重**: `0 4rpx 16rpx rgba(76, 175, 80, 0.15)`
|
|
|
|
## 字体规范
|
|
|
|
- **医生名字**: 28rpx, 加粗
|
|
- **职位/科室**: 20rpx, 正常
|
|
- **咨询按钮**: 22rpx, 加粗
|
|
- **标签文字**: 18rpx, 正常
|
|
- **评分数值**: 22rpx, 加粗
|
|
- **资质文字**: 18rpx, 正常
|
|
|
|
## 间距规范
|
|
|
|
- **页面外边距**: 20rpx
|
|
- **卡片内边距**: 20rpx
|
|
- **元素间距**: 8-16rpx
|
|
- **底部空间**: 20rpx
|
|
|
|
## 圆角规范
|
|
|
|
- **卡片**: 16rpx
|
|
- **头像**: 12rpx
|
|
- **标签**: 16-20rpx
|
|
- **小元素**: 12rpx
|
|
|
|
## 数据流
|
|
|
|
```
|
|
页面加载
|
|
↓
|
|
调用 fetchDoctors()
|
|
↓
|
|
获取医生列表
|
|
↓
|
|
处理数据（添加 isExpert 标记）
|
|
↓
|
|
渲染医生卡片
|
|
```
|
|
|
|
## API 集成
|
|
|
|
### 获取医生列表
|
|
```javascript
|
|
const response = await proxy.apiUrl({
|
|
url: '/api/doctor/lists',
|
|
method: 'GET',
|
|
data: {
|
|
page_no: 1,
|
|
page_size: 10
|
|
}
|
|
})
|
|
```
|
|
|
|
### 响应数据处理
|
|
```javascript
|
|
doctors.value = doctorList.map((doctor, index) => ({
|
|
...doctor,
|
|
isExpert: index < 2,
|
|
reviewCount: Math.floor(Math.random() * 500) + 100
|
|
}))
|
|
```
|
|
|
|
## 点击事件
|
|
|
|
### 医生卡片点击
|
|
```javascript
|
|
selectDoctor(doctor) {
|
|
uni.navigateTo({
|
|
url: `/pages/order/index?doctorId=${doctor.id}&doctorName=${doctor.name}`
|
|
})
|
|
}
|
|
```
|
|
|
|
## 性能优化
|
|
|
|
- 使用 CSS 动画而非 JS 动画
|
|
- 图片使用 `mode="aspectFill"`
|
|
- 减少重排和重绘
|
|
- 支持图片懒加载
|
|
|
|
## 无障碍设计
|
|
|
|
- 足够的色彩对比度
|
|
- 清晰的文字标签
|
|
- 合理的点击区域 (最小 44x44rpx)
|
|
- 支持屏幕阅读器
|
|
|
|
## 总结
|
|
|
|
这个设计方案特点：
|
|
- ✅ 绿色系中医风格
|
|
- ✅ 卡片式布局，清晰明了
|
|
- ✅ 完整的医生信息展示
|
|
- ✅ 医生资质认证显示
|
|
- ✅ 流畅的交互体验
|
|
- ✅ 专业的医疗感
|
|
|
|
整个页面简洁专业，重点突出，用户可以快速了解医生信息并进行咨询。
|