5.7 KiB
5.7 KiB
国聘红 · 国企风格全站换肤 设计文档
日期：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. 验证
npm run dev起前端（已运行于 5174）。- 浏览器逐页核对：Splash(
/)、首页(/home)、公司介绍(/companies)、登录(/login)、求职者中心、后台。 - 确认无残留黑金、无 Element Plus 默认蓝。
- 截图存档对比。
6. 风险
- Element Plus 组件内部个别硬编码色（如
el-tagtype 默认色）可能不被变量覆盖——若出现，按需补:deep()覆盖。 - scoped 样式中硬编码的
#409eff/#909399需逐处替换，遗漏会残留蓝点——实施时全局 grep 兜底。