zyt/TUICallKit-Vue3/SIMPLE_UI_DESIGN.md

中医医院小程序首页 - 简化设计

页面结构

┌─────────────────────────────────┐
│ 中医医院                        │  <- 顶部导航栏
└─────────────────────────────────┘

┌─────────────────────────────────┐
│                                 │
│  [轮播图片 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. 顶部导航栏

.header {
  background: linear-gradient(135deg, #8B6914 0%, #A0826D 100%);
  padding: 20rpx 30rpx;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

• 固定顶部，棕色渐变背景
• 显示医院名称
• 高度: 60rpx

2. 轮播图

.banner {
  height: 320rpx;
}

.banner-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  padding: 40rpx 30rpx;
}

• 高度: 320rpx
• 自动轮播，5秒切换
• 底部显示标题和描述
• 使用渐变遮罩

3. 医生卡片

.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. 咨询按钮

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

获取医生列表

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

响应格式

{
  "code": 1,
  "msg": "success",
  "data": {
    "lists": [
      {
        "id": 1,
        "name": "张医生",
        "title": "主任医师",
        "specialty": "中医内科",
        "avatar": "http://...",
        "rating": "4.9"
      }
    ]
  }
}

点击事件

医生卡片点击

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

总结

这个简化设计包含：

• ✅ 专业的顶部导航栏
• ✅ 吸引人的轮播图
• ✅ 清晰的医生列表
• ✅ 便捷的咨询按钮
• ✅ 中医风格的色彩方案
• ✅ 流畅的交互体验

整个页面简洁明了，重点突出，用户可以快速找到想要的医生并进行咨询。