# 长者档案功能 - 视觉演示指南 ## 📱 界面演示 ### 1. 老人列表界面 ``` ┌─────────────────────────────────────────────────────────────────┐ │ 老人列表 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ [头像] 王奶奶 [长者档案] [添加设备] │ ← 档案按钮 │ │ 72岁 • 女 │ │ │ │ ● 身体状态良好 │ │ │ │ 📍 北京市朝阳区建国路1号 │ │ │ │ 3 个设备 │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ [头像] 李爷爷 [长者档案] [添加设备] │ │ │ │ 78岁 • 男 │ │ │ │ ● 需要关注 │ │ │ [object Object]海市浦东新区世纪大道100号 │ │ │ │ 2 个设备 │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ [头像] 张奶奶 [长者档案] [添加设备] │ │ │ │ 68岁 • 女 │ │ │ │ ● 身体状态良好 │ │ │ │ 📍 广州市天河区珠江新城 │ │ │ │ 4 个设备 │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### 2. 点击档案按钮后的弹窗 ``` ┌────────────────────────────────────────────────────┐ │ 长者档案 [×] │ ← 标题和关闭按钮 ├────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ [王] 姓名：王奶奶 │ │ ← 基本信息卡片 │ │ 年龄：72岁 │ │ │ │ 性别：女 │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ 联系方式 │ │ ← 联系方式卡片 │ │ 长者电话：13800138000 │ │ │ │ 家属电话：13900139000 │ │ │ │ 地址：北京市朝阳区建国路1号 │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ 预警历史 (3) │ │ ← 预警历史卡片 │ │ ┌────────────────────────────────────────┐ │ │ │ │ │ [跌倒预警] 2024-01-15 10:30 │ │ │ │ │ │ 检测到长者跌倒，请立即查看 │ │ │ │ │ └────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ │ [心率异常] 2024-01-14 14:20 │ │ │ │ │ │ 心率过高，建议就医检查 │ │ │ │ │ └────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ │ [血压偏高] 2024-01-13 09:15 │ │ │ │ │ │ 血压偏高，请注意休息 │ │ │ │ │ └────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────┘ ``` ## 🎨 颜色方案 ### 主要颜色 ``` ┌─────────────────────────────────────────────────┐ │ 主色 (Primary) │ │ #1a73e8 │ │ RGB(26, 115, 232) │ │ ████████████████████████████████████████████ │ └─────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────┐ │ 辅色 (Secondary) │ │ #7b61ff │ │ RGB(123, 97, 255) │ │ ████████████████████████████████████████████ │ └─────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────┐ │ 强调色 (Accent) │ │ #fd9644 │ │ RGB(253, 150, 68) │ │ ████████████████████████████████████████████ │ └─────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────┐ │ 背景色 (Background) │ │ #1a1f2e │ │ RGB(26, 31, 46) │ │ ████████████████████████████████████████████ │ └─────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────┐ │ 文字色 (Text) │ │ #ffffff │ │ RGB(255, 255, 255) │ │ ████████████████████████████████████████████ │ └─────────────────────────────────────────────────┘ ``` ## 📐 布局尺寸 ### 弹窗尺寸 ``` ┌──────────────────────────────────┐ │ │ │ 弹窗宽度: 600px │ │ │ │ ┌────────────────────────────┐ │ │ │ │ │ │ │ 内容区域 │ │ │ │ 最大高度: 600px │ │ │ │ 支持滚动 │ │ │ │ │ │ │ └────────────────────────────┘ │ │ │ └──────────────────────────────────┘ ``` ### 卡片尺寸 ``` ┌──────────────────────────────────┐ │ 基本信息卡片 │ │ 高度: 120px │ │ 内边距: 20px │ │ 边框: 1px solid rgba(255,255,255,0.1) │ │ 圆角: 12px │ └──────────────────────────────────┘ ┌──────────────────────────────────┐ │ 预警项目 │ │ 高度: 80px │ │ 内边距: 12px │ │ 边框左: 3px solid #fd9644 │ │ 圆角: 6px │ └──────────────────────────────────┘ ``` ### 头像尺寸 ``` ┌────────────┐ │ │ │ [王] │ 80px × 80px │ │ 圆形 │ │ 字体: 32px │ │ └────────────┘ ``` ## 🎭 状态演示 ### 加载状态 ``` ┌────────────────────────────────────────────────────┐ │ 长者档案 [×] │ ├────────────────────────────────────────────────────┤ │ │ │ │ │ ⟳ 加载中... │ │ │ │ │ └────────────────────────────────────────────────────┘ ``` ### 空状态 ``` ┌────────────────────────────────────────────────────┐ │ 长者档案 [×] │ ├────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ 预警历史 │ │ │ │ │ │ │ │ 暂无预警记录 │ │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────┘ ``` ### 错误状态 ``` ┌────────────────────────────────────────────────────┐ │ 长者档案 [×] │ ├────────────────────────────────────────────────────┤ │ │ │ 加载失败，请重试 │ │ │ └────────────────────────────────────────────────────┘ ``` ## 🎬 交互动画 ### 弹窗打开 ``` 时间轴: 0ms ───────────────────────────────────── 弹窗从中心缩放出现 透明度: 0 → 1 缩放: 0.8 → 1 300ms ───────────────────────────────────── 动画完成 弹窗完全显示 ``` ### 弹窗关闭 ``` 时间轴: 0ms ───────────────────────────────────── 弹窗开始缩小 透明度: 1 → 0 缩放: 1 → 0.8 300ms ───────────────────────────────────── 动画完成 弹窗完全隐藏 ``` ### 预警列表滚动 ``` 滚动条样式: ┌─────────────────────────────────┐ │ 内容 │█ │ 内容 │█ │ 内容 │█ │ 内容 │ │ 内容 │ └─────────────────────────────────┘ 宽度: 6px 颜色: rgba(26, 115, 232, 0.5) 悬停: rgba(26, 115, 232, 0.7) ``` ## 📊 响应式设计 ### 桌面版 (1920px) ``` ┌─────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────────┐ ┌─────────────────────────────────┐ │ │ │ 老人列表 │ │ 详情区域 │ │ │ │ │ │ │ │ │ │ [长者卡片] │ │ [长者档案弹窗] │ │ │ │ [长者卡片] │ │ │ │ │ │ [长者卡片] │ │ │ │ │ │ │ │ │ │ │ └──────────────────┘ └─────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ### 平板版 (768px) ``` ┌──────────────────────────────────┐ │ │ │ ┌────────────────────────────┐ │ │ │ 老人列表 │ │ │ │ │ │ │ │ [长者卡片] │ │ │ │ [长者卡片] │ │ │ │ │ │ │ └────────────────────────────┘ │ │ │ │ ┌────────────────────────────┐ │ │ │ [长者档案弹窗] │ │ │ │ │ │ │ └────────────────────────────┘ │ │ │ └──────────────────────────────────┘ ``` ### 手机版 (375px) ``` ┌──────────────────┐ │ │ │ ┌────────────┐ │ │ │ 老人列表 │ │ │ │ │ │ │ │[长者卡片] │ │ │ │[长者卡片] │ │ │ │ │ │ │ └────────────┘ │ │ │ │ ┌────────────┐ │ │ │档案弹窗 │ │ │ │ │ │ │ └────────────┘ │ │ │ └──────────────────┘ ``` ## 🎯 用户交互流程 ### 完整交互流程图 ``` ┌─────────────────────────────────────────────────────────┐ │ 用户界面 │ ├─────────────────────────────────────────────────────────┤ │ │ │ 1. 用户看到老人列表 │ │ ↓ │ │ 2. 点击"长者档案"按钮 │ │ ↓ │ │ 3. 弹窗打开，显示加载状态 │ │ ↓ │ │ 4. 调用接口获取数据 │ │ ├─ 成功 → 显示真实数据 │ │ └─ 失败 → 显示假数据 │ │ ↓ │ │ 5. 用户查看长者信息 │ │ ├─ 查看基本信息 │ │ ├─ 查看联系方式 │ │ └─ 查看预警历史（支持滚动） │ │ ↓ │ │ 6. 用户关闭弹窗 │ │ ├─ 点击关闭按钮 │ │ └─ 按 ESC 键 │ │ ↓ │ │ 7. 弹窗关闭，返回列表 │ │ │ └─────────────────────────────────────────────────────────┘ ``` ## 🎨 样式细节 ### 按钮样式 #### 档案按钮 ``` ┌──────────────┐ │ 长者档案 │ 背景: #909399 │ │ 颜色: 白色 └──────────────┘ 圆角: 4px 内边距: 10px 悬停: 背景变深 ``` #### 添加设备按钮 ``` ┌──────────────┐ │ 添加设备 │ 背景: #1a73e8 │ │ 颜色: 白色 └──────────────┘ 圆角: 4px 内边距: 10px 悬停: 背景变深 ``` ### 文本样式 ``` 标题: 字体大小: 18px 字体粗细: 600 颜色: 白色 标签: 字体大小: 14px 字体粗细: 500 颜色: 灰色 内容: 字体大小: 14px 字体粗细: 400 颜色: 白色 时间: 字体大小: 12px 字体粗细: 400 颜色: 灰色 ``` ## 📱 移动端适配 ### 触摸目标大小 ``` 按钮最小高度: 44px 按钮最小宽度: 44px 间距: 最少 8px ``` ### 弹窗适配 ``` 最小宽度: 320px 最大宽度: 90% 屏幕宽度 最大高度: 80% 屏幕高度 ``` --- **本指南提供了长者档案功能的完整视觉演示和设计规范。**