# Ledger Hub 风格统一指南
## 📖 概述
本文档说明如何将系统中所有模块页面的样式统一为 **ledger_hub.php** 的现代设计风格。
## 🎨 Ledger Hub 风格特点
### 视觉特征
- **背景色**: 浅灰色 `#f2f4f8`
- **卡片**: 白色背景，圆角 12px，柔和阴影
- **字体**: Microsoft YaHei（微软雅黑）
- **主色调**:
- 绿色 `#4CAF50`（主要按钮、成功状态）
- 蓝色 `#2196F3`（次要按钮、链接）
- 橙色 `#FF9800`（警告、重点标记）
- 红色 `#E74C3C`（危险、删除）
### 设计元素
- 圆角卡片设计（border-radius: 12px）
- 柔和阴影效果（box-shadow）
- 渐变装饰效果
- 悬停动画（transform + box-shadow）
- 响应式网格布局
## 📁 核心文件
### 新建文件
- `assets/css/ledger-hub-style.css` - Ledger Hub 风格统一样式文件（405行）
### 已更新文件
- `ledger_hub.php` - 已应用新样式，移除重复内联样式
## 🚀 如何应用到其他页面
### 方法1：快速应用（推荐）
在目标页面的 `` 中添加以下CSS引用：
```html
页面标题
```
### 方法2：批量应用
创建批量更新脚本（类似之前的 `add_unified_styles_to_all_pages.php`）：
```php
后添加样式引用
$content = preg_replace(
'/(.*?<\/title>)/',
'$1' . "\n <!-- Ledger Hub 风格统一样式 -->\n <link rel=\"stylesheet\" href=\"assets/css/ledger-hub-style.css\">",
$content,
1
);
file_put_contents($file, $content);
echo "已更新: $file\n";
}
}
?>
```
## 📋 需要更新的页面列表
### 用户端页面
- [ ] dashboard.php - 主仪表盘
- [ ] hazard_records.php - 隐患排查记录
- [ ] meeting_records.php - 会议记录
- [ ] drill_records.php - 应急演练记录
- [ ] propaganda_records.php - 安全宣传记录
- [ ] celebration_records.php - 红白喜事记录
- [ ] knock_records.php - 敲门行动记录
- [ ] vehicle_guidance_records.php - 查车劝导记录
- [ ] driver_reminder_records.php - 驾驶员督促记录
- [ ] vehicle_reminder_records.php - 车辆督促记录
### 编辑类页面
- [ ] edit_inspection.php - 编辑检查记录
- [ ] hazard_edit.php - 编辑隐患排查
- [ ] edit_meeting.php - 编辑会议记录
- [ ] edit_drill.php - 编辑应急演练
- [ ] celebration_edit.php - 编辑红白喜事
### Admin后台页面
- [ ] admin/admin_dashboard.php
- [ ] admin/inspection_list.php
- [ ] admin/meeting_list.php
- [ ] admin/drill_list.php
- [ ] admin/propaganda_list.php
- [ ] admin/celebration_list.php
- [ ] admin/knock_list.php
- [ ] admin/vehicle_guidance_list.php
- [ ] admin/driver_reminder_records.php
- [ ] admin/vehicle_reminder_records.php
## 🎯 样式类名参考
### 布局类
```css
.container /* 主容器 */
.page-title /* 页面标题区 */
.summary-grid /* 摘要网格 */
.section-block /* 内容区块 */
```
### 卡片类
```css
.summary-card /* 摘要卡片 */
.summary-header /* 卡片头部 */
.summary-total /* 总计数值 */
.summary-meta /* 元数据网格 */
.meta-item /* 元数据项 */
```
### 按钮类
```css
.back-home-btn /* 返回首页按钮 */
.enter-btn /* 进入按钮 */
.handle-btn /* 操作按钮 */
.btn-primary /* 主要按钮（绿色） */
.btn-secondary /* 次要按钮（蓝色） */
.btn-danger /* 危险按钮（红色） */
```
### 表格类
```css
table /* 基础表格 */
.badge /* 徽章 */
.badge.normal /* 正常状态 */
.badge.key /* 重点标记 */
.badge.overdue /* 逾期标记 */
.table-row-key /* 重点行高亮 */
.table-row-overdue /* 逾期待高亮 */
```
### 其他类
```css
.quick-links /* 快捷链接组 */
.empty-tip /* 空状态提示 */
.section-header /* 区块头部 */
```
## ⚠️ 注意事项
### 1. CSS加载顺序
```html
<!-- 正确顺序 -->
<link rel="stylesheet" href="assets/css/ledger-hub-style.css"> <!-- 第1个 -->
<link rel="stylesheet" href="assets/css/common.css"> <!-- 第2个 -->
<link rel="stylesheet" href="assets/css/components.css"> <!-- 第3个 -->
```
### 2. 避免样式冲突
- 如果页面已有内联样式，检查是否与 ledger-hub-style.css 冲突
- 优先使用外部CSS文件，减少内联样式
- 保留页面特定的样式在内联 `<style>` 中
### 3. 表单字段样式
Ledger Hub 风格的表单字段：
- 白色背景 `#ffffff`
- 浅灰边框 `#e5e9f2`
- 圆角 6px
- 聚焦时蓝色边框和光晕
### 4. 响应式设计
已内置移动端适配：
- 768px以下单列布局
- 表格字体缩小
- 卡片间距调整
## 🔧 自定义扩展
如果需要在 ledger-hub-style.css 基础上添加自定义样式：
```css
/* 在页面内联<style>中添加 */
<style>
/* 页面特定的样式 */
.my-custom-class {
/* 你的样式 */
}
</style>
```
## 📊 样式对比
### 之前（旧风格）
- ❌ 背景色不统一
- ❌ 卡片样式各异
- ❌ 按钮颜色混乱
- ❌ 字体不一致
- ❌ 缺少圆角和阴影
### 之后（Ledger Hub风格）
- ✅ 统一的浅灰背景 #f2f4f8
- ✅ 白色圆角卡片
- ✅ 一致的按钮配色
- ✅ Microsoft YaHei 字体
- ✅ 现代化圆角和阴影
- ✅ 流畅的悬停动画
## 🧪 测试清单
更新页面后，请测试：
- [ ] PC端显示正常（1920x1080, 1366x768）
- [ ] 平板端显示正常（iPad, Android平板）
- [ ] 手机端显示正常（iPhone, Android手机）
- [ ] 表单字段背景为白色
- [ ] 按钮悬停有动画效果
- [ ] 卡片阴影显示正常
- [ ] 表格样式一致
- [ ] 所有功能正常工作
## 📝 示例：更新 dashboard.php
```html
<!-- 修改前 -->
<head>
<title>安全生产检查系统 - 主菜单
安全生产检查系统 - 主菜单
```
## 🎉 完成效果
应用 Ledger Hub 风格后，整个系统将拥有：
- ✨ 统一现代的视觉风格
- 🎨 协调的配色方案
- 📱 完美的响应式体验
- 🚀 流畅的交互动画
- 💎 专业的界面质感
---
**更新日期**: 2026-04-18
**版本**: 1.0.0
**维护者**: 系统开发团队