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