一、系统样式架构概述
智慧养老手表管理系统前端样式层基于 Element UI 组件库构建，结合自定义业务样式，形成了一套适配养老场景的视觉体系。整体样式架构采用模块化设计，分为基础组件样式、业务组件样式、布局样式三大核心模块，通过 CSS 预编译技术实现样式复用与维护，同时保障了多终端适配能力，可满足养老机构管理人员、老人家属等不同角色的操作视觉需求。
系统样式文件总计 527 个，核心样式集中在 dist/static/css/app.387c26bfa2d6281e5880d40ab9feb9c8.css 主文件中，同时集成了 Element UI 的主题样式（如 node_modules/element-ui/lib/theme-chalk/ 目录下的组件样式文件），形成了统一且可扩展的样式生态。
二、基础组件样式功能
（一）核心交互组件样式
- 按钮组件（Button）
- 提供多状态样式支持，包括默认、主要、成功、警告、危险、信息六种类型，适配养老系统中不同操作的视觉区分（如'紧急呼叫'用危险样式、'确认提交'用主要样式）。
- 支持尺寸定制（默认、中等、小型、迷你），满足不同界面布局需求，例如在数据表格操作列使用迷你尺寸按钮，避免空间占用过大。
- 特殊样式扩展：支持圆角（is-round）、圆形（is-circle）样式，其中圆形按钮常用于老人信息卡片中的快捷操作（如定位、通话）。
- 表单组件（Form）
- 表单标签（Form Item）采用清晰的左右布局，标签宽度固定，输入区域自适应，确保养老机构工作人员录入老人信息时界面整齐。
- 表单验证样式：错误状态（is-error）时输入框边框变红，并显示红色错误提示文字，降低数据录入错误率；成功状态（is-success）则显示绿色边框，提供操作反馈。
- 适配老年用户家属操作场景，表单输入框（Input）聚焦时边框高亮，输入提示文字（placeholder）采用浅灰色，提升视觉辨识度。
- 数据展示组件（Table）
- 表格样式支持边框（--border）、斑马纹（--striped）两种模式，养老数据列表（如老人健康数据、设备状态列表）采用斑马纹样式，减少视觉疲劳。
- 表头固定 + 内容滚动：当表格数据量较大时（如月度健康数据记录），表头保持固定，内容区域可滚动，方便查看数据对应字段。
- 操作列样式优化：表格操作按钮（编辑、删除、查看）采用统一间距和迷你尺寸，避免操作区域拥挤，提升操作效率。
（二）反馈类组件样式
- 提示组件（Message/Alert）
- 消息提示（Message）支持四种类型：成功、警告、错误、信息，对应不同业务场景（如设备连接成功用成功提示、数据同步失败用错误提示）。
- 警告组件（Alert）采用背景色 + 图标组合样式，例如'设备电量低'警告使用黄色背景 + 警告图标，在监控界面醒目显示，提醒工作人员及时处理。
- 弹窗组件（Dialog）
- 弹窗默认居中显示，宽度自适应（默认 50%），支持全屏模式（is-fullscreen），适用于老人健康数据详情查看场景。
- 弹窗头部（Dialog Header）包含标题和关闭按钮，标题字体加粗且尺寸较大，关闭按钮 hover 时颜色加深，操作反馈清晰。
- 弹窗动画：采用淡入淡出 + 上下平移动画（dialog-fade-in/dialog-fade-out），避免弹窗弹出时生硬，提升用户体验。
三、业务专属样式功能
（一）登录与首页样式
- 登录页面（login）
- 全屏背景设计：登录页面采用 #52bab5（浅青色）作为背景色，与养老系统'健康、安全'的核心定位匹配。
- 登录表单（login-form）采用白色背景 + 圆角（15px）样式，表单内边距 25px，整体视觉简洁且突出，降低登录操作干扰。
- 登录按钮（green）使用与背景色一致的浅青色，文字白色，hover 时无明显色变，避免视觉跳跃，符合老年家属操作习惯。
- 首页布局（home）
- 头部（home-header）采用 #52bab5 背景色，高度 60px，包含系统 logo、标题、用户信息、退出按钮四个核心元素。
- Logo 字体加粗（700）、尺寸 30px，白色显示，确保品牌识别度；用户信息（username）和退出按钮（logout）采用白色文字，hover 时无下划线，操作简洁。
