蓉易创
编辑 | blame | 历史 | 原始文档

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. 测试响应式效果

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