# 订单班网站设计规范 - 完整制作流程

## 一、设计体系架构

### 1. CSS变量系统（核心）
```css
/* 基础设计变量 */
:root {
    /* 背景层次 */
    --bg-dark: #f8faf7;              /* 主背景 */
    --bg-semi-dark: rgba(248, 250, 247, 0.95);  /* 半透明背景 */
    --bg-overlay: rgba(255, 255, 255, 0.85);    /* 遮罩层 */
    --bg-card: rgba(255, 255, 255, 0.9);        /* 卡片背景 */
    
    /* 主题色彩 */
    --primary-dark: #2d7a3f;         /* 主色深 */
    --primary-green: #4caf50;        /* 主色 */
    --accent-gold: #ff9800;          /* 强调色 */
    --accent-gold-light: #ffa726;    /* 浅强调色 */
    
    /* 文字颜色 */
    --text-light: #1a1a1a;           /* 深色文字 */
    --text-gray: #666666;            /* 灰色文字 */
    
    /* 交互状态 */
    --hover-bg: rgba(255, 152, 0, 0.15);     /* 悬停背景 */
    --active-bg: rgba(76, 175, 80, 0.2);     /* 激活背景 */
}
```

### 2. 深色主题设计（重点）
```css
body.dark-theme {
    /* 深邃森林绿配色方案 */
    --bg-dark: #0a1a0f;                      /* 深邃森林绿背景 */
    --bg-semi-dark: rgba(10, 26, 15, 0.95);  /* 深绿半透明 */
    --bg-overlay: rgba(13, 31, 19, 0.85);    /* 深绿遮罩层 */
    --bg-card: rgba(18, 35, 24, 0.9);        /* 深绿卡片背景 */
    
    /* 调整后的主题色 */
    --primary-green: #4a9d5f;                /* 翡翠绿 */
    --accent-gold: #d4a574;                  /* 暖棕金色 */
    --text-light: #e8f5e9;                   /* 浅绿白色文字 */
    --text-gray: #a4c3a8;                    /* 绿灰色文字 */
}
```

### 3. 响应式间距系统
```css
--spacing-xs: 0.75rem;    /* 12px */
--spacing-sm: 1.25rem;    /* 20px */
--spacing-md: 2rem;       /* 32px */
--spacing-lg: 3rem;       /* 48px */
--spacing-xl: 4rem;       /* 64px */
--spacing-2xl: 6rem;      /* 96px */
```

## 二、关键技术实现

### 1. 背景图片系统
**多图片独立配置方案：**
```css
/* 亮色主题 - 顶部微透，底部完全遮挡 */
.section:nth-child(1) {
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 247, 1) 100%),
        url('图片1');
}

/* 深色主题 - 深绿遮罩 */
body.dark-theme .section:nth-child(1) {
    background-image:
        linear-gradient(to bottom, rgba(10, 26, 15, 0.92) 0%, rgba(13, 31, 19, 0.88) 100%),
        url('图片1');
}
```

**关键参数：**
- 亮色遮罩：0.9 → 1（顶部略透，底部不透）
- 深色遮罩：0.92 → 0.88（高透明度深绿）
- 图片数量：前6个section独立，超出后循环

### 2. 主题切换实现
```javascript
// 默认暗色主题
function initThemeToggle() {
    const savedTheme = localStorage.getItem('theme');
    // 无保存偏好时默认暗色
    if (savedTheme === 'dark' || savedTheme === null) {
        document.body.classList.add('dark-theme');
    }
}
```

### 3. 避免硬编码颜色
**错误示范：**
```css
background: rgba(255, 255, 255, 0.8); /* 硬编码白色 */
```

**正确做法：**
```css
background: var(--bg-card); /* 使用CSS变量 */
```

## 三、完整制作流程

### Phase 1: 环境准备
1. 确认项目路径结构
2. 检查现有HTML结构
3. 备份原始样式文件

### Phase 2: 设计系统搭建
1. **建立CSS变量体系**
   - 定义亮色主题变量
   - 定义深色主题变量
   - 添加hover/active状态变量

2. **设置默认主题**
   - 修改JS初始化逻辑
   - 设置localStorage默认值

### Phase 3: 样式迁移
1. **查找所有硬编码颜色**
   ```bash
   grep -n "rgba(255, 255, 255" styles.css
   grep -n "rgba(76, 175, 80" styles.css
   ```

2. **批量替换为CSS变量**
   - rgba(255, 255, 255, 0.9) → var(--bg-card)
   - rgba(255, 255, 255, 0.95) → var(--bg-semi-dark)
   - rgba(255, 255, 255, 0.7) → var(--bg-overlay)

3. **添加深色主题特定覆盖**
   ```css
   body.dark-theme .stat-item { ... }
   body.dark-theme th { ... }
   body.dark-theme tr:hover { ... }
   ```

### Phase 4: 背景优化
1. **配置多背景图片**
   - 每个section独立图片
   - 设置合理的遮罩透明度
   - 保持fixed attachment

2. **调整遮罩平衡**
   - 亮色：0.9 → 1 渐变
   - 深色：0.88-0.92 深绿遮罩

### Phase 5: 细节完善
1. **修复hover跳动**
   - 添加transparent初始border
   - 使用box-shadow增强效果

2. **优化视觉层次**
   - 标题渐变条宽度（80px → 180px）
   - 调整阴影系统
   - 完善过渡动画

### Phase 6: 测试验证
1. 切换主题测试
2. 检查所有交互状态
3. 验证响应式布局
4. 确认背景图片显示

## 四、常见问题解决

### 问题1: 深色主题部分元素仍显示白色
**原因：** 硬编码rgba颜色值
**解决：** 全局搜索并替换为CSS变量

### 问题2: Hover时元素跳动
**原因：** 初始无border，hover时添加border
**解决：** 初始设置transparent border

### 问题3: 背景图片不可见
**原因：** 遮罩层透明度过高
**解决：** 调整gradient透明度值

### 问题4: 深色主题不是默认
**原因：** JS逻辑仅检查'dark'值
**解决：** 添加 `|| savedTheme === null` 条件

## 五、可复用组件模板

### 1. 带背景的Section
```css
.section:nth-child(n) {
    background-image:
        linear-gradient(渐变方向, 起始色, 结束色),
        url('背景图片');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
```

### 2. 响应式卡片
```css
.card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-2xl);
    border: 2px solid var(--border-light);
    transition: all var(--transition-base);
}
```

### 3. 统计数据组件
```css
.stat-item {
    background: var(--bg-card);
    border: 1px solid transparent;
    transition: all var(--transition-base);
}
.stat-item:hover {
    background: var(--hover-bg);
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}
```

## 六、命名规范

### CSS类名
- 容器：`.section`, `.container`, `.wrapper`
- 组件：`.card`, `.stat-item`, `.nav-item`
- 状态：`.active`, `.dark-theme`, `.loaded`

### CSS变量
- 背景：`--bg-*`
- 颜色：`--primary-*`, `--accent-*`
- 文字：`--text-*`
- 间距：`--spacing-*`
- 其他：`--shadow-*`, `--radius-*`, `--transition-*`

## 七、性能优化建议

1. **图片优化**
   - 使用Unsplash的优化参数（w=1920&q=80）
   - fixed attachment提升视觉效果

2. **CSS优化**
   - 使用CSS变量减少重复
   - backdrop-filter谨慎使用（性能消耗）

3. **JS优化**
   - localStorage缓存用户偏好
   - 主题切换避免重排

## 八、适配其他订单班的要点

1. **颜色主题调整**
   - 根据行业特点选择主色调
   - 保持深色主题的深度感

2. **图片选择**
   - 选择与行业相关的背景图
   - 保持图片风格一致性

3. **内容结构**
   - 保持统一的section划分
   - 复用组件结构

此规范可作为制作其他订单班网站的标准模板。