zcdsj
/
Recruitment_site
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 更新网站整体样式为黑金高端主题 

将PortalLayout.vue和HomeView.vue的配色方案更新为高端黑金风格：
- 深黑背景：#1A1A1A (导航、页脚、banner)
- 黑色渐变：#2A2A2A -> #1A1A1A (深沉、高级感)
- 金色强调：#B8860B (按钮、装饰、链接)
- 浅金色：#D4AF37 (次要强调)
- 页面背景：#FAFAFA (纯白接近，简洁)
- 深灰文字：#3A3A3A (易读)
- 边框色：#D3D3D3 (细致)

配色定位：高端、专业、大气，适合央企形象

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
TianyangZhang 2026-03-25 14:50:25 +08:00
parent 5e3d521096
commit 2b818f1ce7
2 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
offer_frontend/src/layouts/PortalLayout.vue
View File

@ -112,13 +112,13 @@ a { text-decoration: none; }
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #FBF5F5; background: #FAFAFA;
font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
} }
/* 顶部公告条 */ /* 顶部公告条 */
.top-bar { .top-bar {
background: #8B4545; background: #1A1A1A;
color: rgba(255,255,255,0.75); color: rgba(255,255,255,0.75);
font-size: 12px; font-size: 12px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@ -133,19 +133,19 @@ a { text-decoration: none; }
} }
.top-bar-left::before { .top-bar-left::before {
content: '★'; content: '★';
color: #C8973A; color: #B8860B;
margin-right: 6px; margin-right: 6px;
font-size: 10px; font-size: 10px;
} }
.top-bar-right { display: flex; align-items: center; gap: 6px; } .top-bar-right { display: flex; align-items: center; gap: 6px; }
.top-link { color: rgba(255,255,255,0.65); transition: color 0.2s; } .top-link { color: rgba(255,255,255,0.65); transition: color 0.2s; }
.top-link:hover, .clickable:hover { color: #C8973A; cursor: pointer; } .top-link:hover, .clickable:hover { color: #B8860B; cursor: pointer; }
.top-divider { color: rgba(255,255,255,0.25); } .top-divider { color: rgba(255,255,255,0.25); }
/* 主导航 */ /* 主导航 */
.main-header { .main-header {
background: linear-gradient(180deg, #C17A7A 0%, #A85555 100%); background: linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 100%);
box-shadow: 0 4px 20px rgba(168,85,85,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.3);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
@ -171,15 +171,15 @@ a { text-decoration: none; }
.emblem-ring { .emblem-ring {
width: 48px; height: 48px; width: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #C8973A; border: 2px solid #B8860B;
background: linear-gradient(135deg, rgba(200,151,58,0.15), rgba(200,151,58,0.05)); background: linear-gradient(135deg, rgba(184,134,11,0.15), rgba(184,134,11,0.05));
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 16px rgba(200,151,58,0.3), inset 0 0 8px rgba(200,151,58,0.1); box-shadow: 0 0 16px rgba(184,134,11,0.3), inset 0 0 8px rgba(184,134,11,0.1);
} }
.emblem-char { .emblem-char {
font-size: 20px; font-size: 20px;
font-weight: 900; font-weight: 900;
color: #C8973A; color: #B8860B;
letter-spacing: -1px; letter-spacing: -1px;
} }
.logo-text-block { display: flex; flex-direction: column; } .logo-text-block { display: flex; flex-direction: column; }
@ -192,7 +192,7 @@ a { text-decoration: none; }
} }
.logo-sub { .logo-sub {
font-size: 9px; font-size: 9px;
color: rgba(200,151,58,0.7); color: rgba(184,134,11,0.7);
letter-spacing: 0.2em; letter-spacing: 0.2em;
margin-top: 2px; margin-top: 2px;
} }
@ -218,13 +218,13 @@ a { text-decoration: none; }
position: absolute; position: absolute;
bottom: 4px; left: 50%; right: 50%; bottom: 4px; left: 50%; right: 50%;
height: 2px; height: 2px;
background: #C8973A; background: #B8860B;
border-radius: 1px; border-radius: 1px;
transition: left 0.25s ease, right 0.25s ease; transition: left 0.25s ease, right 0.25s ease;
} }
.nav-link:hover { color: #fff; } .nav-link:hover { color: #fff; }
.nav-link:hover::after, .nav-link.active::after { left: 20%; right: 20%; } .nav-link:hover::after, .nav-link.active::after { left: 20%; right: 20%; }
.nav-link.active { color: #C8973A; font-weight: 600; } .nav-link.active { color: #B8860B; font-weight: 600; }
/* 操作区 */ /* 操作区 */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
@ -240,11 +240,11 @@ a { text-decoration: none; }
transition: all 0.2s; transition: all 0.2s;
font-family: inherit; font-family: inherit;
} }
.btn-ghost:hover { border-color: #C8973A; color: #C8973A; } .btn-ghost:hover { border-color: #B8860B; color: #B8860B; }
.btn-primary { .btn-primary {
padding: 7px 20px; padding: 7px 20px;
background: #E57373; background: #B8860B;
border: 1px solid #E57373; border: 1px solid #B8860B;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
font-size: 13px; font-size: 13px;
@ -254,7 +254,7 @@ a { text-decoration: none; }
font-weight: 600; font-weight: 600;
font-family: inherit; font-family: inherit;
} }
.btn-primary:hover { background: #E86C6C; border-color: #E86C6C; } .btn-primary:hover { background: #A67C07; border-color: #A67C07; }
.user-badge { .user-badge {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 6px 14px; padding: 6px 14px;
@ -264,18 +264,18 @@ a { text-decoration: none; }
} }
.user-avatar { .user-avatar {
width: 26px; height: 26px; width: 26px; height: 26px;
background: #B5272C; background: #B8860B;
border-radius: 50%; border-radius: 50%;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: #fff; font-size: 12px; font-weight: 700; color: #fff;
} }
.user-name { color: rgba(255,255,255,0.85); font-size: 13px; } .user-name { color: rgba(255,255,255,0.85); font-size: 13px; }
/* 红色底线装饰 */ /* 金色底线装饰 */
.header-underline { height: 3px; background: #8B4545; } .header-underline { height: 3px; background: #1A1A1A; }
.underline-fill { .underline-fill {
height: 100%; height: 100%;
background: linear-gradient(90deg, #E57373 0%, #EF9A9A 40%, #D4A95D 100%); background: linear-gradient(90deg, #B8860B 0%, #D4AF37 50%, #B8860B 100%);
} }
/* 内容区 */ /* 内容区 */
@ -289,8 +289,8 @@ a { text-decoration: none; }
/* 页脚 */ /* 页脚 */
.portal-footer { .portal-footer {
background: #8B4545; background: #1A1A1A;
border-top: 3px solid #E57373; border-top: 3px solid #B8860B;
padding: 20px 0; padding: 20px 0;
} }
.footer-inner { .footer-inner {
@ -308,8 +308,8 @@ a { text-decoration: none; }
} }
.f-emblem { .f-emblem {
width: 28px; height: 28px; border-radius: 50%; width: 28px; height: 28px; border-radius: 50%;
border: 1px solid #C8973A; border: 1px solid #B8860B;
color: #C8973A; font-weight: 900; font-size: 13px; color: #B8860B; font-weight: 900; font-size: 13px;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
} }
.footer-copy { .footer-copy {

60
offer_frontend/src/views/portal/HomeView.vue
View File

@ -333,14 +333,14 @@ onMounted(async () => {
<style scoped> <style scoped>
/* ── 变量 ── */ /* ── 变量 ── */
.three-panel { .three-panel {
--red: #E57373; --red: #B8860B;
--dark: #8B4545; --dark: #1A1A1A;
--gold: #D4A95D; --gold: #B8860B;
--gold-lt: #E8C573; --gold-lt: #D4AF37;
--cream: #FBF5F5; --cream: #FAFAFA;
--border: #E8DDD8; --border: #D3D3D3;
--text: #2A1A1A; --text: #2A1A1A;
--muted: #8B6B6B; --muted: #3A3A3A;
display: flex; display: flex;
height: calc(100vh - 220px); height: calc(100vh - 220px);
@ -348,7 +348,7 @@ onMounted(async () => {
overflow: hidden; overflow: hidden;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--border); border: 1px solid var(--border);
box-shadow: 0 4px 24px rgba(139,69,69,0.12); box-shadow: 0 4px 24px rgba(0,0,0,0.12);
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
} }
@ -404,12 +404,12 @@ onMounted(async () => {
.org-row:hover { background: rgba(255,255,255,0.06); } .org-row:hover { background: rgba(255,255,255,0.06); }
.org-row.active { .org-row.active {
border-left-color: var(--gold); border-left-color: var(--gold);
background: rgba(200,151,58,0.1); background: rgba(184,134,11,0.1);
} }
.org-avatar { .org-avatar {
width: 34px; height: 34px; width: 34px; height: 34px;
border-radius: 6px; border-radius: 6px;
background: linear-gradient(135deg, #C8973A, #9A6E28); background: linear-gradient(135deg, #B8860B, #8B6407);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 900; color: #fff; font-size: 15px; font-weight: 900; color: #fff;
flex-shrink: 0; overflow: hidden; flex-shrink: 0; overflow: hidden;
@ -417,7 +417,7 @@ onMounted(async () => {
.org-avatar img { width: 100%; height: 100%; object-fit: cover; } .org-avatar img { width: 100%; height: 100%; object-fit: cover; }
.child-avatar { .child-avatar {
width: 28px; height: 28px; font-size: 12px; width: 28px; height: 28px; font-size: 12px;
background: linear-gradient(135deg, #C8A080, #9A7860); background: linear-gradient(135deg, #A67C07, #7D5A05);
} }
.org-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .org-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.org-name { .org-name {
@ -438,7 +438,7 @@ onMounted(async () => {
} }
.child-line { .child-line {
display: block; width: 10px; height: 1px; display: block; width: 10px; height: 1px;
background: rgba(200,151,58,0.35); background: rgba(184,134,11,0.35);
} }
/* ── 中栏 ── */ /* ── 中栏 ── */
@ -464,7 +464,7 @@ onMounted(async () => {
.mid-title.muted { color: var(--muted); font-weight: 400; } .mid-title.muted { color: var(--muted); font-weight: 400; }
.mid-count { .mid-count {
font-size: 11px; color: var(--muted); font-size: 11px; color: var(--muted);
background: #EDE8E1; border-radius: 10px; padding: 1px 8px; background: #F0F0F0; border-radius: 10px; padding: 1px 8px;
} }
.mid-body { flex: 1; overflow-y: auto; } .mid-body { flex: 1; overflow-y: auto; }
@ -477,10 +477,10 @@ onMounted(async () => {
transition: background 0.15s; transition: background 0.15s;
background: #fff; background: #fff;
} }
.job-row:hover { background: #F5EFE8; } .job-row:hover { background: #F8F8F8; }
.job-row.active { .job-row.active {
border-left-color: var(--red); border-left-color: var(--red);
background: #FFF5F5; background: #FFFAF9;
} }
.job-row-title { .job-row-title {
font-size: 13px; font-weight: 600; font-size: 13px; font-weight: 600;
@ -500,20 +500,20 @@ onMounted(async () => {
.panel-right { .panel-right {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
background: #F8F4EF; background: #FAFAFA;
} }
/* Banner */ /* Banner */
.detail-banner { .detail-banner {
position: relative; position: relative;
background: linear-gradient(135deg, #8B4545 0%, #A85555 50%, #9A4C4C 100%); background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 50%, #222222 100%);
overflow: hidden; overflow: hidden;
} }
.banner-deco { .banner-deco {
position: absolute; inset: 0; position: absolute; inset: 0;
background: background:
repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(212,169,93,0.03) 20px, rgba(212,169,93,0.03) 21px), repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(184,134,11,0.03) 20px, rgba(184,134,11,0.03) 21px),
repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(212,169,93,0.03) 20px, rgba(212,169,93,0.03) 21px); repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(184,134,11,0.03) 20px, rgba(184,134,11,0.03) 21px);
} }
.banner-content { .banner-content {
position: relative; position: relative;
@ -527,8 +527,8 @@ onMounted(async () => {
.banner-category { .banner-category {
display: inline-block; display: inline-block;
padding: 3px 12px; padding: 3px 12px;
background: rgba(212,169,93,0.15); background: rgba(184,134,11,0.15);
border: 1px solid rgba(212,169,93,0.35); border: 1px solid rgba(184,134,11,0.35);
color: var(--gold-lt); color: var(--gold-lt);
font-size: 11px; letter-spacing: 0.1em; font-size: 11px; letter-spacing: 0.1em;
border-radius: 2px; margin-bottom: 10px; border-radius: 2px; margin-bottom: 10px;
@ -557,13 +557,13 @@ onMounted(async () => {
display: flex; align-items: center; gap: 6px; display: flex; align-items: center; gap: 6px;
padding: 9px 18px; padding: 9px 18px;
background: transparent; background: transparent;
border: 1px solid rgba(212,169,93,0.5); border: 1px solid rgba(184,134,11,0.5);
color: var(--gold-lt); color: var(--gold-lt);
border-radius: 3px; font-size: 13px; border-radius: 3px; font-size: 13px;
cursor: pointer; transition: all 0.2s; cursor: pointer; transition: all 0.2s;
font-family: inherit; font-family: inherit;
} }
.btn-collect:hover { background: rgba(212,169,93,0.1); border-color: var(--gold); } .btn-collect:hover { background: rgba(184,134,11,0.1); border-color: var(--gold); }
.btn-apply { .btn-apply {
padding: 9px 24px; padding: 9px 24px;
background: var(--red); background: var(--red);
@ -572,9 +572,9 @@ onMounted(async () => {
cursor: pointer; transition: all 0.2s; cursor: pointer; transition: all 0.2s;
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-family: inherit; font-family: inherit;
box-shadow: 0 4px 16px rgba(229,115,115,0.4); box-shadow: 0 4px 16px rgba(184,134,11,0.4);
} }
.btn-apply:hover { background: #E86C6C; box-shadow: 0 6px 20px rgba(229,115,115,0.5); } .btn-apply:hover { background: #A67C07; box-shadow: 0 6px 20px rgba(184,134,11,0.5); }
.btn-apply.loading { opacity: 0.7; cursor: not-allowed; } .btn-apply.loading { opacity: 0.7; cursor: not-allowed; }
.banner-hint { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 8px; } .banner-hint { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 8px; }
.banner-hint.success { color: #6FCF97; } .banner-hint.success { color: #6FCF97; }
@ -591,7 +591,7 @@ onMounted(async () => {
background: #fff; background: #fff;
border-radius: 6px; border-radius: 6px;
padding: 24px 28px; padding: 24px 28px;
box-shadow: 0 2px 12px rgba(139,69,69,0.07); box-shadow: 0 2px 12px rgba(0,0,0,0.07);
border: 1px solid var(--border); border: 1px solid var(--border);
} }
.detail-right { width: 224px; flex-shrink: 0; } .detail-right { width: 224px; flex-shrink: 0; }
@ -643,7 +643,7 @@ onMounted(async () => {
background: #fff; background: #fff;
border-radius: 6px; border-radius: 6px;
padding: 18px; padding: 18px;
box-shadow: 0 2px 12px rgba(139,69,69,0.07); box-shadow: 0 2px 12px rgba(0,0,0,0.07);
border: 1px solid var(--border); border: 1px solid var(--border);
} }
.company-card-label { .company-card-label {
@ -655,7 +655,7 @@ onMounted(async () => {
.cc-logo { .cc-logo {
width: 48px; height: 48px; width: 48px; height: 48px;
border-radius: 8px; overflow: hidden; flex-shrink: 0; border-radius: 8px; overflow: hidden; flex-shrink: 0;
background: linear-gradient(135deg, #D4A95D, #B08C3A); background: linear-gradient(135deg, #B8860B, #8B6407);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 900; color: #fff; font-size: 20px; font-weight: 900; color: #fff;
border: 1px solid var(--border); border: 1px solid var(--border);
@ -677,7 +677,7 @@ onMounted(async () => {
transition: background 0.2s; transition: background 0.2s;
font-family: inherit; letter-spacing: 0.05em; font-family: inherit; letter-spacing: 0.05em;
} }
.btn-apply-card:hover { background: #E86C6C; } .btn-apply-card:hover { background: #A67C07; }
.btn-apply-card.loading { opacity: 0.7; cursor: not-allowed; } .btn-apply-card.loading { opacity: 0.7; cursor: not-allowed; }
.apply-success { text-align: center; font-size: 12px; color: #27AE60; margin-top: 8px; } .apply-success { text-align: center; font-size: 12px; color: #27AE60; margin-top: 8px; }
@ -691,7 +691,7 @@ onMounted(async () => {
.empty-icon { opacity: 0.5; } .empty-icon { opacity: 0.5; }
.detail-loading { padding: 24px 28px; } .detail-loading { padding: 24px 28px; }
.skeleton-row { .skeleton-row {
height: 14px; background: linear-gradient(90deg, #EDE3DE 25%, #F5EDED 50%, #EDE3DE 75%); height: 14px; background: linear-gradient(90deg, #E8E8E8 25%, #F0F0F0 50%, #E8E8E8 75%);
background-size: 200% 100%; background-size: 200% 100%;
border-radius: 3px; margin-bottom: 10px; border-radius: 3px; margin-bottom: 10px;
animation: shimmer 1.5s infinite; animation: shimmer 1.5s infinite;