zyt/TUICallKit-Vue3/TCM_STYLE_DESIGN.md

中医风格首页设计指南

设计理念

采用绿色系中医风格，结合卡片式布局，营造专业、温和、信任的医疗氛围。

页面结构

┌─────────────────────────────────┐
│  背景装饰（绿色渐变）           │
│                                 │
│  ┌─────────────────────────────┐│
│  │  轮播图                     ││
│  │  ● ○ ○                     ││
│  └─────────────────────────────┘│
│                                 │
│  ┌─────────────────────────────┐│
│  │ [头像] 赵建欣      咨询 >   ││
│  │        主任医师              ││
│  │        中医内科              ││
│  │                              ││
│  │ ⭐ 名医中医                  ││
│  │                              ││
│  │ 👍 好评率 95%  ❤️ 服务人数 ││
│  │                              ││
│  │ 🌐 互联网医院执业许可        ││
│  │ 📋 医师执业许可证            ││
│  └─────────────────────────────┘│
│                                 │
│  ┌─────────────────────────────┐│
│  │ [头像] 李医生      咨询 >   ││
│  │ ...                         ││
│  └─────────────────────────────┘│
└─────────────────────────────────┘

色彩方案

主色系

• 主绿色: #4CAF50 - 中医健康、生命力
• 浅绿色: #81C784 - 柔和、温暖
• 背景绿: #E8F5E9 - 清爽、舒适
• 浅背景: #F1F8F6 - 卡片背景

辅助色

• 金色: #FFB800 - 强调、重要
• 黄色: #FFF9C4 - 标签背景
• 文字: #333 - 主文字
• 辅助: #999 - 次要文字

组件设计

1. 背景装饰

.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. 轮播图

.banner-section {
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.15);
}

.banner {
  height: 280rpx;
}

• 高度: 280rpx
• 圆角: 16rpx
• 绿色阴影
• 自动轮播，5秒切换
• 底部指示器

3. 医生卡片

.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%
• 自动适应屏幕宽度
• 文字自动换行

动画效果

轮播指示器

.dot {
  transition: all 0.3s ease;
  
  &.active {
    width: 24rpx;
    border-radius: 4rpx;
  }
}

• 圆形 → 胶囊形
• 300ms 过渡

卡片交互

.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 集成

获取医生列表

const response = await proxy.apiUrl({
  url: '/api/doctor/lists',
  method: 'GET',
  data: {
    page_no: 1,
    page_size: 10
  }
})

响应数据处理

doctors.value = doctorList.map((doctor, index) => ({
  ...doctor,
  isExpert: index < 2,
  reviewCount: Math.floor(Math.random() * 500) + 100
}))

点击事件

医生卡片点击

selectDoctor(doctor) {
  uni.navigateTo({
    url: `/pages/order/index?doctorId=${doctor.id}&doctorName=${doctor.name}`
  })
}

性能优化

• 使用 CSS 动画而非 JS 动画
• 图片使用 mode="aspectFill"
• 减少重排和重绘
• 支持图片懒加载

无障碍设计

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

总结

这个设计方案特点：

• ✅ 绿色系中医风格
• ✅ 卡片式布局，清晰明了
• ✅ 完整的医生信息展示
• ✅ 医生资质认证显示
• ✅ 流畅的交互体验
• ✅ 专业的医疗感

整个页面简洁专业，重点突出，用户可以快速了解医生信息并进行咨询。