# 订单班网站快速制作检查清单

## 🚀 快速启动（10分钟）

### 第一步：定位文件
```bash
/web_frontend/web_result/order-classes/[订单班名称]/
├── css/styles.css       # 主样式文件
├── js/main.js          # 主逻辑文件
└── index.html          # 页面文件
```

### 第二步：关键修改点
1. **CSS变量定义** (styles.css: 4-73行)
   - 亮色主题变量
   - 深色主题变量（74-95行）

2. **主题切换逻辑** (main.js: 249-276行)
   - 默认主题设置

3. **背景图片配置** (styles.css: 287-432行)
   - 6个独立背景图

## ✅ 必改清单

### 1. 颜色主题
- [ ] 根据行业调整主色调
  - 食品：绿色 #4caf50
  - 科技：蓝色 #2196f3
  - 金融：金色 #ff9800
  - 医疗：青色 #00acc1
  
- [ ] 深色主题基色
  - 食品：深绿 #0a1a0f
  - 科技：深蓝 #0a0f1a
  - 金融：深棕 #1a0f0a
  - 医疗：深青 #0a1a1a

### 2. 背景图片
- [ ] 替换6张行业相关图片
  - Hero区域：1张
  - Section 1-6：各1张
  - 使用Unsplash链接格式

### 3. 硬编码颜色替换
```bash
# 搜索命令
grep -n "rgba(255, 255, 255" styles.css
grep -n "rgba(76, 175, 80" styles.css
grep -n "#[0-9a-fA-F]" styles.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)

### 4. 交互状态变量
- [ ] 添加 --hover-bg 变量
- [ ] 添加 --active-bg 变量
- [ ] 所有hover使用变量

### 5. 深色主题覆盖
```css
/* 必须添加的深色主题覆盖 */
body.dark-theme .stat-item { }
body.dark-theme .stat-item:hover { }
body.dark-theme th { }
body.dark-theme tr:hover { }
body.dark-theme .featured-item:first-child { }
```

### 6. 默认主题设置
```javascript
// main.js 修改
if (savedTheme === 'dark' || savedTheme === null) {
    document.body.classList.add('dark-theme');
}
```

### 7. 遮罩透明度
- 亮色：linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(248,250,247,1) 100%)
- 深色：linear-gradient(to bottom, rgba(10,26,15,0.92) 0%, rgba(13,31,19,0.88) 100%)

## 🔍 验证清单

### 功能测试
- [ ] 主题切换正常
- [ ] localStorage记忆
- [ ] 默认显示深色主题
- [ ] 背景图片可见
- [ ] Hover无跳动

### 视觉检查
- [ ] 深色主题所有元素变深
- [ ] 文字对比度足够
- [ ] 背景图片遮罩适度
- [ ] 渐变条宽度(180px)
- [ ] 卡片glassmorphism效果

### 响应式测试
- [ ] 移动端布局
- [ ] 平板布局
- [ ] 大屏适配

## ⚡ 快速命令

### 批量替换CSS变量
```javascript
// 在控制台执行
const replacements = [
  ['rgba(255, 255, 255, 0.9)', 'var(--bg-card)'],
  ['rgba(255, 255, 255, 0.95)', 'var(--bg-semi-dark)'],
  ['rgba(255, 255, 255, 0.8)', 'var(--bg-card)'],
  ['rgba(255, 255, 255, 0.7)', 'var(--bg-overlay)'],
  ['rgba(255, 255, 255, 0.5)', 'var(--bg-overlay)'],
  ['rgba(76, 175, 80, 0.15)', 'var(--active-bg)'],
  ['rgba(76, 175, 80, 0.1)', 'var(--active-bg)'],
  ['rgba(76, 175, 80, 0.08)', 'var(--hover-bg)']
];
```

## 🎨 配色方案模板

### 科技订单班
```css
--primary-dark: #1565c0;
--primary-blue: #2196f3;
--accent-cyan: #00acc1;
/* 深色 */
--bg-dark: #0a0f1a;
```

### 金融订单班
```css
--primary-dark: #f57c00;
--primary-gold: #ff9800;
--accent-amber: #ffc107;
/* 深色 */
--bg-dark: #1a0f0a;
```

### 医疗订单班
```css
--primary-dark: #00838f;
--primary-cyan: #00acc1;
--accent-teal: #26a69a;
/* 深色 */
--bg-dark: #0a1a1a;
```

## 📋 常用代码片段

### 1. Section背景模板
```css
.section:nth-child(n) {
    background-image:
        linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(248,250,247,1) 100%),
        url('https://images.unsplash.com/photo-xxxxx?w=1920&q=80');
}
```

### 2. 深色主题覆盖模板
```css
body.dark-theme .element {
    background: rgba(18, 35, 24, 0.8);
    backdrop-filter: blur(5px);
}
```

### 3. Hover防跳动模板
```css
.element {
    border: 1px solid transparent;
    transition: all var(--transition-base);
}
.element:hover {
    border-color: var(--border-light);
}
```

## 🚨 常见错误避免

1. ❌ 不要硬编码颜色值
2. ❌ 不要忘记深色主题覆盖
3. ❌ 不要遗漏transparent border
4. ❌ 不要使用过高透明度遮罩（>0.95）
5. ❌ 不要忘记设置默认主题

## 💡 优化建议

1. 使用CSS变量管理所有颜色
2. 图片使用w=1920&q=80参数
3. backdrop-filter适度使用
4. 保持fixed attachment
5. 使用localStorage缓存偏好

---
制作时间预估：
- 基础迁移：30分钟
- 主题调整：20分钟  
- 测试优化：10分钟
- 总计：约1小时