# Ledger Hub 风格 - 快速参考

## 🎨 核心特点
- **背景**: 浅灰色 `#f2f4f8`
- **卡片**: 白色 `#ffffff`，圆角 12px，柔和阴影
- **字体**: Microsoft YaHei
- **表单字段**: 白色背景（不是黑色！）

## 📋 CSS引用顺序
```html
<link rel="stylesheet" href="assets/css/ledger-hub-style.css">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/components.css">
```

## 🎯 常用类名

### 布局
```css
.container          /* 主容器 */
.page-title         /* 页面标题 */
.summary-grid       /* 网格布局 */
.section-block      /* 内容区块 */
```

### 按钮
```css
.back-home-btn      /* 返回首页（绿色） */
.enter-btn          /* 进入按钮（蓝色边框） */
.btn-primary        /* 主要按钮（绿色） */
.btn-secondary      /* 次要按钮（蓝色） */
.btn-danger         /* 危险按钮（红色） */
```

### 表格
```css
.badge              /* 徽章 */
.badge.normal       /* 正常（绿色） */
.badge.key          /* 重点（橙色） */
.badge.overdue      /* 逾期（红色） */
```

## 🚀 快速应用

### 方法1：手动添加
在 `<title>` 后添加：
```html
<!-- Ledger Hub 风格统一样式 -->
<link rel="stylesheet" href="assets/css/ledger-hub-style.css">
```

### 方法2：批量更新
```bash
php add_ledger_hub_style.php
```

## ⚠️ 注意事项
1. ✅ CSS加载顺序很重要
2. ✅ 表单字段必须是白色背景
3. ✅ 保留页面特定样式在内联 `<style>` 中
4. ❌ 不要重复定义已有样式

## 📱 响应式
- 768px以下自动单列布局
- 表格字体自动缩小
- 按钮全宽显示

## 📚 文档
- 详细指南: `LEDGER_HUB_STYLE_GUIDE.md`
- 完成报告: `LEDGER_HUB_STYLE_COMPLETE.md`

---
**提示**: 遇到问题先检查CSS是否正确加载！