# Web前端更新计划

## Dashboard页面改造计划

### 整体页面布局
**当前状态分析：**
- 页面背景：默认白色
- 整体布局：使用Element Plus的栅格系统
- 间距：统一使用20px间距

**目标设计要求：**
- 页面背景色：#F8F9FA（浅灰色）
- 保持响应式栅格布局
- 卡片间距保持20px

### 1. 统计卡片区域改造

#### 1.1 卡片整体样式
**当前样式：**
```css
.box-card {
  width: 100%;
}
```

**目标样式规范：**
- 背景色：#FFFFFF（纯白）
- 圆角：12px
- 阴影：0 4px 12px rgba(0, 0, 0, 0.08)
- 边框：无
- 内边距：24px

#### 1.2 统计卡片具体设计

**卡片1 - 当前进行比赛**
- 图标：日历图标（Calendar）
- 图标背景：#E0E7FF（浅蓝色圆形背景）
- 图标颜色：#6366F1（蓝紫色）
- 数字颜色：#1F2937（深灰色）
- 数字字体：32px，font-weight: 700
- 标题颜色：#6B7280（中灰色）
- 标题字体：14px，font-weight: 500

**卡片2 - 参赛总人数**
- 图标：用户群组图标（Users）
- 图标背景：#D1FAE5（浅绿色圆形背景）
- 图标颜色：#10B981（绿色）
- 数字和标题样式同卡片1

**卡片3 - 报名待审核**
- 图标：警告图标（Warning）
- 图标背景：#FEF3C7（浅黄色圆形背景）
- 图标颜色：#F59E0B（橙黄色）
- 数字和标题样式同卡片1

**卡片4 - 评委总数**
- 图标：用户图标（User）
- 图标背景：#FECACA（浅红色圆形背景）
- 图标颜色：#EF4444（红色）
- 数字和标题样式同卡片1

#### 1.3 卡片内部布局
```
┌─────────────────────────────┐
│  [图标]              [数字] │
│  标题文字                   │
└─────────────────────────────┘
```
- 图标尺寸：48px × 48px圆形背景，内部图标24px
- 图标位置：左上角
- 数字位置：右上角，右对齐
- 标题位置：左下角

### 2. 最近比赛表格区域改造

#### 2.1 表格容器卡片
**目标样式：**
- 背景色：#FFFFFF
- 圆角：12px
- 阴影：0 4px 12px rgba(0, 0, 0, 0.08)
- 内边距：24px

#### 2.2 表格头部
**当前：**
```html
<div class="card-header">
  <span>最近比赛</span>
  <el-button type="primary">查看全部</el-button>
</div>
```

**目标样式：**
- 标题："最近比赛"
- 标题字体：18px，font-weight: 600，颜色：#1F2937
- 按钮："创建新比赛"
- 按钮背景：#6366F1（紫色）
- 按钮文字：#FFFFFF
- 按钮圆角：8px
- 按钮内边距：12px 20px

#### 2.3 表格样式
**表头样式：**
- 背景色：#F9FAFB
- 文字颜色：#374151
- 字体：14px，font-weight: 500
- 高度：48px

**表格行样式：**
- 奇数行背景：#FFFFFF
- 偶数行背景：#F9FAFB
- 行高：56px
- 文字颜色：#1F2937
- 字体：14px，font-weight: 400

#### 2.4 状态标签样式
**已发布状态：**
- 背景色：#D1FAE5
- 文字颜色：#065F46
- 圆角：16px
- 内边距：4px 12px
- 字体：12px，font-weight: 500

**未发布状态：**
- 背景色：#FEF3C7
- 文字颜色：#92400E
- 其他样式同上

#### 2.5 操作按钮样式
**查看按钮：**
- 背景色：透明
- 文字颜色：#6366F1
- 边框：1px solid #E5E7EB
- 圆角：6px
- 内边距：6px 12px

**管理按钮：**
- 背景色：#6366F1
- 文字颜色：#FFFFFF
- 圆角：6px
- 内边距：6px 12px

### 3. 左侧导航栏（如需修改）
**目标样式：**
- 背景色：#1F2937（深灰色）
- 选中项背景：#6366F1
- 文字颜色：#D1D5DB
- 选中项文字：#FFFFFF

### 4. 顶部导航栏
**目标样式：**
- 背景色：#FFFFFF
- 阴影：0 1px 3px rgba(0, 0, 0, 0.1)
- 高度：64px

### 5. 响应式断点处理
**保持当前响应式逻辑：**
- xl: 6列布局（≥1200px）
- lg: 6列布局（≥992px）
- md: 12列布局（≥768px）
- sm: 24列布局（<768px）

### 6. 需要确认的细节问题

1. **图标库选择**：使用Element Plus Icons还是引入其他图标库？
2. **字体设置**：是否需要引入特定字体，还是使用系统默认字体？
3. **表格数据格式**：比赛时间显示格式是否需要调整？
4. **状态映射**：当前后端返回的状态值与颜色的对应关系？

### 7. 实施步骤
1. 更新全局CSS变量定义主题色
2. 修改页面背景和布局容器样式
3. 重构统计卡片组件，添加图标和新样式
4. 更新表格样式和状态标签
5. 调整按钮样式
6. 测试响应式效果

---

*注：以上颜色值基于图片分析得出，如有偏差请及时反馈调整*