style: SplashView 去除 hero 红色背景,改为干净浅色

- hero 背景改白→浅灰渐变,去掉红色块
- 文案改深色文字,徽章/按钮改红描边+红底白字
- 装饰竖线/光晕调整为浅底适配

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude 2026-06-26 09:32:18 +08:00
parent 3cc48ed91a
commit fe095f5859
1 changed files with 24 additions and 35 deletions

View File

@ -242,24 +242,13 @@ const router = useRouter()
.hero-bg { .hero-bg {
position: absolute; position: absolute;
inset: 0; inset: 0;
/* 国聘红渐变背景 */ /* 干净浅色背景 */
background: background: linear-gradient(160deg, #FFFFFF 0%, #F5F5F5 100%);
linear-gradient(160deg,
#EB2C26 0%,
#C81E18 35%,
#B80006 70%,
#8C0008 100%
);
} }
.hero-overlay { .hero-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient( background: transparent;
to bottom,
rgba(0,0,0,0.2) 0%,
rgba(0,0,0,0.1) 40%,
rgba(0,0,0,0.5) 100%
);
} }
/* 建筑风格竖线装饰 */ /* 建筑风格竖线装饰 */
@ -276,8 +265,8 @@ const router = useRouter()
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
transparent, transparent,
rgba(255,255,255,0.18) 30%, rgba(0,0,0,0.04) 30%,
rgba(255,255,255,0.08) 70%, rgba(0,0,0,0.02) 70%,
transparent transparent
); );
} }
@ -300,8 +289,8 @@ const router = useRouter()
height: 400px; height: 400px;
background: radial-gradient( background: radial-gradient(
ellipse, ellipse,
rgba(255,255,255,0.22) 0%, rgba(235,44,38,0.08) 0%,
rgba(255,255,255,0.06) 50%, rgba(235,44,38,0.02) 50%,
transparent 70% transparent 70%
); );
pointer-events: none; pointer-events: none;
@ -317,26 +306,25 @@ const router = useRouter()
.hero-badge { .hero-badge {
display: inline-block; display: inline-block;
padding: 5px 18px; padding: 5px 18px;
border: 1px solid rgba(255,255,255,0.7); border: 1px solid var(--brand-red);
border-radius: 20px; border-radius: 20px;
font-size: 13px; font-size: 13px;
color: #fff; color: var(--brand-red);
letter-spacing: 0.15em; letter-spacing: 0.15em;
margin-bottom: 28px; margin-bottom: 28px;
background: rgba(255,255,255,0.12); background: var(--brand-red-bg);
} }
.hero-slogan { .hero-slogan {
font-size: 56px; font-size: 56px;
font-weight: 900; font-weight: 900;
color: #fff; color: var(--text-main);
letter-spacing: 0.12em; letter-spacing: 0.12em;
margin: 0 0 16px; margin: 0 0 16px;
text-shadow: 0 2px 20px rgba(0,0,0,0.4);
line-height: 1.15; line-height: 1.15;
} }
.hero-sub { .hero-sub {
font-size: 18px; font-size: 18px;
color: rgba(255,255,255,0.65); color: var(--text-muted);
margin: 0 0 48px; margin: 0 0 48px;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
@ -347,9 +335,9 @@ const router = useRouter()
} }
.btn-primary-lg { .btn-primary-lg {
padding: 14px 42px; padding: 14px 42px;
background: #FFFFFF; background: var(--brand-red);
border: none; border: none;
color: var(--brand-red); color: #fff;
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
@ -359,19 +347,20 @@ const router = useRouter()
display: flex; display: flex;
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, background 0.2s;
box-shadow: 0 4px 20px rgba(0,0,0,0.2); box-shadow: 0 4px 14px rgba(235,44,38,0.3);
} }
.btn-primary-lg:hover { .btn-primary-lg:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0,0,0,0.28); background: var(--brand-red-2);
box-shadow: 0 8px 22px rgba(235,44,38,0.4);
} }
.btn-arrow { font-size: 18px; } .btn-arrow { font-size: 18px; }
.btn-secondary-lg { .btn-secondary-lg {
padding: 14px 42px; padding: 14px 42px;
background: transparent; background: transparent;
border: 1px solid rgba(255,255,255,0.45); border: 1px solid var(--brand-red);
color: rgba(255,255,255,0.85); color: var(--brand-red);
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
@ -380,9 +369,9 @@ const router = useRouter()
transition: all 0.2s; transition: all 0.2s;
} }
.btn-secondary-lg:hover { .btn-secondary-lg:hover {
border-color: rgba(255,255,255,0.8); background: var(--brand-red-bg);
color: #fff; color: var(--brand-red-2);
background: rgba(255,255,255,0.06); border-color: var(--brand-red-2);
} }
.scroll-hint { .scroll-hint {
@ -395,7 +384,7 @@ const router = useRouter()
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
color: rgba(255,255,255,0.35); color: var(--text-muted);
font-size: 12px; font-size: 12px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }