# 系统页面风格统一方案
## 更新日期
2026-04-18
## 更新目标
统一整个系统的页面风格，包括图标、按钮、字段框、页面背景等所有UI元素，确保在不同编程工具创建的页面之间保持一致的视觉效果。
## 核心原则
1. **保持功能不变**：不改变任何页面功能（相机拍照、上传图片、实时压缩、删除图片、手写签名等）
2. **统一视觉风格**：使用一致的颜色、间距、圆角、阴影等设计元素
3. **响应式设计**：确保在PC端和移动端都有良好的显示效果
4. **向后兼容**：保留现有功能，仅优化样式
## 主要更改
### 1. 创建统一样式文件
**文件**: `assets/css/unified-styles.css`
这是全局样式规范文件，定义了：
- CSS变量（颜色、间距、圆角、阴影等）
- 统一的按钮样式（.btn, .btn-primary, .btn-success等）
- 统一的表单样式（.form-control, .form-group等）
- 统一的表格样式（.table）
- 统一的卡片样式（.card）
- 统一的标题样式（.page-title, .section-title）
- 图片上传和预览样式（.upload-area, .image-preview-item, .delete-image-btn）
- 手写签名样式（.signature-container, .signature-canvas）
- 响应式设计规则
**主题色定义**：
- 主色调：#4CAF50（绿色 - 安全管理系统主题色）
- 次要色：#2196F3（蓝色）
- 危险色：#F44336（红色）
- 成功色：#4CAF50（绿色）
- 警告色：#FFC107（黄色）
### 2. 更新公共头部文件
**文件**: `includes/common_head.php`
添加了统一样式文件的引用：
```html
```
### 3. 更新Admin后台样式
**文件**: `admin/includes/style.css`
- 更新主题色为绿色系（#4CAF50）
- 添加统一的图片上传和预览样式
- 添加手写签名样式
- 与unified-styles.css保持一致
### 4. 典型页面更新示例
#### edit_inspection.php
- 添加unified-styles.css引用
- 移除重复的内联样式（已在统一样式文件中定义）
- 保留页面特定的样式（如懒加载图片）
#### hazard_edit.php
- 添加unified-styles.css引用
#### hazard_records.php
- 添加unified-styles.css引用
## 样式规范详情
### 按钮样式
所有按钮使用统一的类名：
- `.btn` - 基础按钮
- `.btn-primary` - 主按钮（绿色）
- `.btn-secondary` - 次要按钮（蓝色）
- `.btn-success` - 成功按钮（绿色）
- `.btn-danger` - 危险按钮（红色）
- `.btn-warning` - 警告按钮（黄色）
- `.btn-sm`, `.btn-md`, `.btn-lg` - 不同尺寸
### 表单样式
- `.form-group` - 表单组
- `.form-control` - 表单控件（输入框、选择框、文本域）
- `.form-label` - 表单标签
- 统一的焦点状态和验证状态样式
### 图片上传和预览
- `.upload-area` - 上传区域（虚线边框，悬停效果）
- `.image-preview-container` - 图片预览容器
- `.image-preview-item` - 单个图片预览项（120x90px桌面端，100x75px移动端）
- `.delete-image-btn` - 删除图片按钮（红色圆形，右上角）
- `.image-grid` - 图片网格布局
### 手写签名
- `.signature-container` - 签名容器
- `.signature-canvas` - 签名画布
- `.signature-actions` - 签名操作按钮组
### 响应式设计
- **桌面端** (>768px): 完整布局，较大间距和字体
- **平板端** (481px-768px): 适中布局
- **移动端** (≤768px):
- 按钮全宽显示
- 图片预览缩小（100x75px）
- 表格字体缩小
- 签名画布占满宽度
- **超小屏幕** (≤480px):
- 进一步缩小图片和字体
- 紧凑布局
## 迁移指南
### 对于新页面
在``中添加以下CSS引用（顺序很重要）：
```html
```
### 对于现有页面
1. 在``中添加unified-styles.css引用（放在最前面）
2. 检查并移除重复的内联样式（如果已在unified-styles.css中定义）
3. 保留页面特定的样式
4. 测试所有功能是否正常
### Admin后台页面
Admin页面已自动使用更新后的`admin/includes/style.css`，无需单独修改。
## 功能保持不变
以下功能完全保持不变，仅优化了视觉样式：
- ✅ 相机拍照功能
- ✅ 图片上传功能
- ✅ 图片实时压缩
- ✅ 图片删除功能（删除按钮样式统一）
- ✅ 手写签名功能
- ✅ 表单提交和验证
- ✅ 数据查询和显示
- ✅ 所有业务逻辑
## 测试建议
### 浏览器兼容性测试
- Chrome/Edge（最新版本）
- Firefox（最新版本）
- Safari（iOS设备）
- 微信内置浏览器
### 设备测试
- PC端（1920x1080, 1366x768）
- 平板端（iPad, Android平板）
- 手机端（iPhone, Android手机）
### 功能测试
- 测试所有表单提交
- 测试图片上传和删除
- 测试手写签名
- 测试响应式布局
- 测试打印功能
## 注意事项
1. **CSS加载顺序**：unified-styles.css必须在common.css和components.css之前加载
2. **避免重复定义**：不要在页面中重复定义已在unified-styles.css中的样式
3. **使用CSS变量**：优先使用CSS变量（如var(--color-primary)）而非硬编码颜色值
4. **移动端优化**：注意移动端的触摸体验和字体大小（防止iOS缩放）
5. **打印样式**：打印页面可能需要单独的样式处理
## 后续优化建议
1. 逐步将所有页面的内联样式迁移到统一的CSS文件
2. 建立组件库，复用常见的UI模式
3. 添加暗色主题支持
4. 优化动画和过渡效果
5. 添加无障碍支持（ARIA标签等）
## 相关文件清单
### 核心样式文件
- `assets/css/unified-styles.css` - 全局统一样式（新建）
- `assets/css/common.css` - 公共样式
- `assets/css/components.css` - 组件样式
- `admin/includes/style.css` - Admin后台样式（已更新）
### 公共模板
- `includes/common_head.php` - 移动端公共头部（已更新）
- `admin/includes/header.php` - Admin头部
### 已更新的示例页面
- `edit_inspection.php`
- `hazard_edit.php`
- `hazard_records.php`
## 技术支持
如有样式相关问题，请参考：
1. unified-styles.css中的注释和文档
2. 使用浏览器开发者工具检查元素样式
3. 确保CSS文件正确加载（检查网络请求）
4. 清除浏览器缓存后重试
---
**重要提示**：本次更新仅涉及样式层面，不影响任何业务逻辑和功能。所有页面的功能保持不变，只是视觉效果更加统一和专业。