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

style: SplashView 暗黑金改国聘红国企风 

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude 2026-06-25 17:24:55 +08:00
parent cfb9ed8dfd
commit bf151d180c
1 changed files with 51 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
offer_frontend/src/views/SplashView.vue
View File

@ -12,7 +12,6 @@
</div> </div>
<nav class="header-nav"> <nav class="header-nav">
<span class="nav-item" @click="router.push('/home')">首页</span> <span class="nav-item" @click="router.push('/home')">首页</span>
<span class="nav-item" @click="router.push('/jobs')">职位列表</span>
<span class="nav-item" @click="router.push('/companies')">公司介绍</span> <span class="nav-item" @click="router.push('/companies')">公司介绍</span>
</nav> </nav>
<div class="header-actions"> <div class="header-actions">
@ -125,7 +124,6 @@
</div> </div>
<p class="footer-copy">Copyright © 集团招聘平台 · All Rights Reserved · 为国家建设输送优秀人才</p> <p class="footer-copy">Copyright © 集团招聘平台 · All Rights Reserved · 为国家建设输送优秀人才</p>
<div class="footer-links"> <div class="footer-links">
<span @click="router.push('/jobs')">职位列表</span>
<span @click="router.push('/companies')">公司介绍</span> <span @click="router.push('/companies')">公司介绍</span>
<span @click="router.push('/login')">登录</span> <span @click="router.push('/login')">登录</span>
</div> </div>
@ -144,8 +142,8 @@ const router = useRouter()
.splash-page { .splash-page {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: #0a0a0a; background: var(--bg-page);
color: #fff; color: var(--text-main);
overflow-x: hidden; overflow-x: hidden;
} }
@ -160,9 +158,10 @@ const router = useRouter()
height: 64px; height: 64px;
display: flex; display: flex;
align-items: center; align-items: center;
background: rgba(0, 0, 0, 0.45); background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid var(--border);
box-shadow: 0 1px 8px rgba(0,0,0,0.04);
} }
.header-inner { .header-inner {
width: 100%; width: 100%;
@ -179,7 +178,7 @@ const router = useRouter()
.logo-icon { .logo-icon {
width: 38px; width: 38px;
height: 38px; height: 38px;
background: linear-gradient(135deg, #B8860B, #8B6407); background: linear-gradient(135deg, #C8161D, #8B1014);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -190,35 +189,35 @@ const router = useRouter()
} }
.logo-icon.sm { width: 28px; height: 28px; font-size: 13px; border-radius: 6px; } .logo-icon.sm { width: 28px; height: 28px; font-size: 13px; border-radius: 6px; }
.logo-text { display: flex; flex-direction: column; } .logo-text { display: flex; flex-direction: column; }
.logo-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; } .logo-title { font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.2; }
.logo-en { font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.1em; } .logo-en { font-size: 10px; color: var(--brand-red); opacity: 0.7; letter-spacing: 0.1em; }
.header-nav { display: flex; gap: 36px; } .header-nav { display: flex; gap: 36px; }
.nav-item { .nav-item {
font-size: 14px; font-size: 14px;
color: rgba(255,255,255,0.8); color: var(--text-muted);
cursor: pointer; cursor: pointer;
transition: color 0.2s; transition: color 0.2s;
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
.nav-item:hover { color: #D4AF37; } .nav-item:hover { color: var(--brand-red); }
.header-actions { display: flex; gap: 12px; } .header-actions { display: flex; gap: 12px; }
.btn-outline { .btn-outline {
padding: 7px 20px; padding: 7px 20px;
border: 1px solid rgba(255,255,255,0.4); border: 1px solid var(--border);
background: transparent; background: transparent;
color: rgba(255,255,255,0.85); color: var(--text-main);
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
font-family: inherit; font-family: inherit;
} }
.btn-outline:hover { border-color: #D4AF37; color: #D4AF37; } .btn-outline:hover { border-color: var(--brand-red); color: var(--brand-red); }
.btn-solid { .btn-solid {
padding: 7px 20px; padding: 7px 20px;
background: linear-gradient(135deg, #B8860B, #8B6407); background: var(--brand-red);
border: none; border: none;
color: #fff; color: #fff;
border-radius: 4px; border-radius: 4px;
@ -243,14 +242,13 @@ const router = useRouter()
.hero-bg { .hero-bg {
position: absolute; position: absolute;
inset: 0; inset: 0;
/* 模拟建筑照片的深色调背景 */ /* 国聘红渐变背景 */
background: background:
linear-gradient(160deg, linear-gradient(160deg,
#0d1b2a 0%, #C8161D 0%,
#1a2744 25%, #A11218 35%,
#0f1f35 50%, #8B1014 70%,
#0d1520 75%, #6B0C10 100%
#060e18 100%
); );
} }
.hero-overlay { .hero-overlay {
@ -278,8 +276,8 @@ const router = useRouter()
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
transparent, transparent,
rgba(184, 134, 11, 0.15) 30%, rgba(255,255,255,0.18) 30%,
rgba(184, 134, 11, 0.08) 70%, rgba(255,255,255,0.08) 70%,
transparent transparent
); );
} }
@ -302,8 +300,8 @@ const router = useRouter()
height: 400px; height: 400px;
background: radial-gradient( background: radial-gradient(
ellipse, ellipse,
rgba(184, 134, 11, 0.18) 0%, rgba(255,255,255,0.22) 0%,
rgba(184, 134, 11, 0.05) 50%, rgba(255,255,255,0.06) 50%,
transparent 70% transparent 70%
); );
pointer-events: none; pointer-events: none;
@ -319,13 +317,13 @@ const router = useRouter()
.hero-badge { .hero-badge {
display: inline-block; display: inline-block;
padding: 5px 18px; padding: 5px 18px;
border: 1px solid rgba(184, 134, 11, 0.6); border: 1px solid rgba(255,255,255,0.7);
border-radius: 20px; border-radius: 20px;
font-size: 13px; font-size: 13px;
color: #D4AF37; color: #fff;
letter-spacing: 0.15em; letter-spacing: 0.15em;
margin-bottom: 28px; margin-bottom: 28px;
background: rgba(184, 134, 11, 0.08); background: rgba(255,255,255,0.12);
} }
.hero-slogan { .hero-slogan {
font-size: 56px; font-size: 56px;
@ -349,9 +347,9 @@ const router = useRouter()
} }
.btn-primary-lg { .btn-primary-lg {
padding: 14px 42px; padding: 14px 42px;
background: linear-gradient(135deg, #B8860B, #D4AF37); background: #FFFFFF;
border: none; border: none;
color: #fff; color: var(--brand-red);
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
@ -362,11 +360,11 @@ const router = useRouter()
align-items: center; align-items: center;
gap: 8px; gap: 8px;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 20px rgba(184,134,11,0.4); box-shadow: 0 4px 20px rgba(0,0,0,0.2);
} }
.btn-primary-lg:hover { .btn-primary-lg:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(184,134,11,0.5); box-shadow: 0 8px 28px rgba(0,0,0,0.28);
} }
.btn-arrow { font-size: 18px; } .btn-arrow { font-size: 18px; }
.btn-secondary-lg { .btn-secondary-lg {
@ -412,9 +410,9 @@ const router = useRouter()
/* ── 数据亮点 ── */ /* ── 数据亮点 ── */
.stats-section { .stats-section {
background: linear-gradient(135deg, #111 0%, #1a1a1a 100%); background: #FFFFFF;
border-top: 1px solid rgba(184,134,11,0.25); border-top: 1px solid var(--border);
border-bottom: 1px solid rgba(184,134,11,0.25); border-bottom: 1px solid var(--border);
padding: 48px 0; padding: 48px 0;
} }
.stats-inner { .stats-inner {
@ -428,29 +426,29 @@ const router = useRouter()
.stat-num { .stat-num {
font-size: 44px; font-size: 44px;
font-weight: 900; font-weight: 900;
color: #D4AF37; color: var(--brand-red);
line-height: 1; line-height: 1;
margin-bottom: 8px; margin-bottom: 8px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.stat-plus { font-size: 24px; } .stat-plus { font-size: 24px; }
.stat-label { font-size: 14px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; } .stat-label { font-size: 14px; color: var(--text-muted); letter-spacing: 0.08em; }
.stat-divider { .stat-divider {
width: 1px; width: 1px;
height: 48px; height: 48px;
background: rgba(184,134,11,0.2); background: var(--border);
} }
/* ── 特色区 ── */ /* ── 特色区 ── */
.features-section { .features-section {
background: #0d0d0d; background: var(--bg-page);
padding: 96px 48px; padding: 96px 48px;
} }
.features-inner { width: 100%; } .features-inner { width: 100%; }
.section-label { .section-label {
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
color: #D4AF37; color: var(--brand-red);
letter-spacing: 0.2em; letter-spacing: 0.2em;
margin-bottom: 12px; margin-bottom: 12px;
text-transform: uppercase; text-transform: uppercase;
@ -459,7 +457,7 @@ const router = useRouter()
text-align: center; text-align: center;
font-size: 34px; font-size: 34px;
font-weight: 800; font-weight: 800;
color: #fff; color: var(--text-main);
margin: 0 0 56px; margin: 0 0 56px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
} }
@ -469,15 +467,16 @@ const router = useRouter()
gap: 24px; gap: 24px;
} }
.feature-card { .feature-card {
background: #161616; background: var(--bg-card);
border: 1px solid rgba(184,134,11,0.15); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
padding: 36px 24px; padding: 36px 24px;
text-align: center; text-align: center;
transition: border-color 0.25s, transform 0.25s; transition: border-color 0.25s, transform 0.25s;
box-shadow: 0 1px 6px rgba(0,0,0,0.04);
} }
.feature-card:hover { .feature-card:hover {
border-color: rgba(184,134,11,0.5); border-color: var(--brand-red);
transform: translateY(-4px); transform: translateY(-4px);
} }
.feature-icon { .feature-icon {
@ -487,21 +486,21 @@ const router = useRouter()
.feature-card h3 { .feature-card h3 {
font-size: 17px; font-size: 17px;
font-weight: 700; font-weight: 700;
color: #fff; color: var(--text-main);
margin: 0 0 12px; margin: 0 0 12px;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
.feature-card p { .feature-card p {
font-size: 13px; font-size: 13px;
color: rgba(255,255,255,0.45); color: var(--text-muted);
line-height: 1.8; line-height: 1.8;
margin: 0; margin: 0;
} }
/* ── 底部 ── */ /* ── 底部 ── */
.splash-footer { .splash-footer {
background: #060606; background: #1D2129;
border-top: 1px solid rgba(255,255,255,0.06); border-top: 1px solid var(--brand-red);
padding: 32px 48px; padding: 32px 48px;
} }
.footer-inner { .footer-inner {
@ -515,11 +514,11 @@ const router = useRouter()
align-items: center; align-items: center;
gap: 10px; gap: 10px;
font-size: 14px; font-size: 14px;
color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.7);
} }
.footer-copy { .footer-copy {
font-size: 12px; font-size: 12px;
color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.4);
margin: 0; margin: 0;
} }
.footer-links { .footer-links {
@ -528,9 +527,9 @@ const router = useRouter()
} }
.footer-links span { .footer-links span {
font-size: 12px; font-size: 12px;
color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.6);
cursor: pointer; cursor: pointer;
transition: color 0.2s; transition: color 0.2s;
} }
.footer-links span:hover { color: #D4AF37; } .footer-links span:hover { color: var(--brand-red-3); }
</style> </style>