104 lines
5.7 KiB
Markdown
104 lines
5.7 KiB
Markdown
# 国聘红 · 国企风格全站换肤 设计文档
|
||
|
||
> 日期：2026-06-25
|
||
> 范围：`offer_frontend` 前端主题视觉换肤，**不改任何功能逻辑/模板结构/接口**。
|
||
> 目标：将现有"黑金"风格改为类似国聘（guopin.com）的"国企红 + 白底"风格，全站统一。
|
||
|
||
## 1. 背景
|
||
|
||
当前前端主题分两套：
|
||
- **公开页（Portal + Splash）**：黑金风格——顶栏 `#1A1A1A`/`#0F0F0F` + 金色 `#C8973A`/`#B8860B`/`#D4AF37`。
|
||
- **后台 / 求职者 / 登录**：Element Plus 默认蓝 `#409eff`，Admin 侧边栏海军蓝 `#001529`。
|
||
|
||
用户要求改为国聘式国企风格，不要黑金，全站统一。
|
||
|
||
## 2. 设计令牌（全局色板）
|
||
|
||
在 `src/style.css` 顶部定义 CSS 变量，并覆盖 Element Plus 主色变量，使全站 `type="primary"` 组件（按钮、分页、链接、开关、标签等）统一变红。
|
||
|
||
| 令牌 | 值 | 用途 |
|
||
|---|---|---|
|
||
| `--brand-red` | `#C8161D` | 主色（中国红） |
|
||
| `--brand-red-2` | `#A11218` | 悬停 / 深红 |
|
||
| `--brand-red-3` | `#E84148` | 浅亮红（强调） |
|
||
| `--brand-red-bg` | `#FDECED` | 红色浅底（标签、选中态背景） |
|
||
| `--bg-page` | `#F7F8FA` | 页面浅灰底 |
|
||
| `--bg-card` | `#FFFFFF` | 卡片白底 |
|
||
| `--text-main` | `#1D2129` | 主文字 |
|
||
| `--text-muted` | `#86909C` | 次要文字 |
|
||
| `--border` | `#E5E6EB` | 分割线/边框 |
|
||
|
||
Element Plus 主色覆盖（写在 `:root`，全局生效）：
|
||
- `--el-color-primary: #C8161D`
|
||
- `--el-color-primary-light-3/5/7`: 红色浅变体（用于 hover、disabled、边框）
|
||
- `--el-color-primary-dark-2: #A11218`
|
||
|
||
同时移除 `style.css` 中 `color-scheme: light dark` 与 `#242424` 暗色默认，强制亮色白底，避免残留暗色样式。
|
||
|
||
## 3. 各文件改造点
|
||
|
||
仅替换颜色/背景/阴影/边框，**不改模板结构、class 名、交互逻辑**。
|
||
|
||
### 3.1 `src/style.css`
|
||
- 新增上述全局令牌与 EP 主色覆盖。
|
||
- 移除暗色默认（`#242424`、`color-scheme: light dark`、暗色 `button`/`a` 规则）。
|
||
- `body` 背景改为 `var(--bg-page)`，文字 `var(--text-main)`。
|
||
|
||
### 3.2 `src/layouts/PortalLayout.vue`
|
||
- 顶部公告条 `#1A1A1A` → 浅灰 `#F2F3F5`，深色文字；星标与链接用红。
|
||
- 主导航 `linear-gradient(#1A1A1A,#0F0F0F)` → 白底 `#FFFFFF`，加底部阴影。
|
||
- logo：金环 `#C8973A` → 红环 `--brand-red`；emblem 字、logo-sub 由金改红。
|
||
- 导航链接：hover/active 下划线与文字色由金改红。
|
||
- `btn-ghost` 边框/字色适配白底；底线装饰 `linear-gradient(#C8973A,#D4AF37)` → `--brand-red`。
|
||
- 页脚 `#1A1A1A` → 浅灰 `#2B2B2B` 或白底配红顶边（采用：浅灰底 `#1D2129` 文字浅 + 红色顶边 3px）。
|
||
- 局部 `:root` 变量块（`--c-red/--c-gold` 等）清理或重定向到全局令牌。
|
||
|
||
### 3.3 `src/views/portal/HomeView.vue`
|
||
- `--gold/--gold-lt/--dark` 等局部变量替换为全局红色令牌。
|
||
- 左栏 `.panel-left` 背景 `--dark(#1A1A1A)` → `--bg-card` 白底，文字改深色，边框 `--border`。
|
||
- 选中态 `.org-row.active`：金色 inset 条 + 金色背景 → 红色 inset 条 + `--brand-red-bg`。
|
||
- `.org-avatar` 金色渐变 → 红色渐变 `linear-gradient(135deg, #C8161D, #8B1014)`。
|
||
- `.left-count`/`.org-stat em` 金色 → 红。
|
||
- 搜索按钮 `.search-btn` 金底 → 红底。
|
||
- 学历徽章 `.edu-total-badge` 金系 → 红系（`--brand-red-bg` 底 + 红字 + 红边）。
|
||
- 薪资 `#E63329` 保留（本就是红，贴合）。
|
||
- 骨架 shimmer 暗色渐变 → 浅灰渐变。
|
||
|
||
### 3.4 `src/views/SplashView.vue`
|
||
- 整体由暗黑改红色国企风。
|
||
- 顶栏 `rgba(0,0,0,.45)` → 白底半透 + 红色底线；logo 金渐变 → 红渐变；nav hover 金 → 红。
|
||
- Hero 背景 `linear-gradient(#0d1b2a…)` → 红色渐变 `linear-gradient(160deg, #C8161D, #8B1014 60%, #6B0C10)`；建筑竖线/光晕的金色 `rgba(184,134,11,*)` → 红色 `rgba(255,255,255,*)`/红色微光。
|
||
- `.hero-badge` 金边金字 → 白边白字 / 红底白字。
|
||
- 主按钮 `.btn-primary-lg` 金渐变 → 白底红字 或 纯白底（红底白字会与红背景融，故 hero 内主按钮用白底红字）。
|
||
- 数据区 `.stats-section` 暗底金字 → 白底红字，分割线红浅。
|
||
- 特色区 `.features-section` 暗底 → `--bg-page` 浅灰底；卡片 `#161616` → 白卡 + 浅边；hover 边框红。
|
||
- footer 暗底 → 浅灰底 `#1D2129` 或 `--bg-page`，链接 hover 红。
|
||
|
||
### 3.5 `src/layouts/AdminLayout.vue`
|
||
- 侧边栏背景 `#001529` → 深红 `#8B1014`（保留"深色侧边栏"视觉习惯，纳入红色家族）。
|
||
- 侧边栏选中项/悬停：调亮红（`#A11218`/`#C8161D`）。
|
||
- 硬编码 `#409eff` → `var(--brand-red)`（其余靠全局 EP 覆盖）。
|
||
|
||
### 3.6 其余视图（JobDetailView / CompanyListView / CompanyDetailView / JobListView / seeker/* / auth/LoginView / RegisterView / ResetPasswordView / admin/*View）
|
||
- 仅替换 scoped 样式中硬编码的 `#409eff`、`#909399`（链接/强调蓝）为 `var(--brand-red)` 或交由全局 EP 主色覆盖。
|
||
- 不动结构与逻辑。
|
||
|
||
## 4. 不在范围内（YAGNI）
|
||
|
||
- 不改组件结构、路由、接口、业务逻辑。
|
||
- 不引入 SCSS / 主题切换 / 暗色模式。
|
||
- 不新增依赖。
|
||
- 不改后端。
|
||
|
||
## 5. 验证
|
||
|
||
1. `npm run dev` 起前端（已运行于 5174）。
|
||
2. 浏览器逐页核对：Splash(`/`)、首页(`/home`)、公司介绍(`/companies`)、登录(`/login`)、求职者中心、后台。
|
||
3. 确认无残留黑金、无 Element Plus 默认蓝。
|
||
4. 截图存档对比。
|
||
|
||
## 6. 风险
|
||
|
||
- Element Plus 组件内部个别硬编码色（如 `el-tag` type 默认色）可能不被变量覆盖——若出现，按需补 `:deep()` 覆盖。
|
||
- scoped 样式中硬编码的 `#409eff`/`#909399` 需逐处替换，遗漏会残留蓝点——实施时全局 grep 兜底。
|