style: SplashView 去除 hero 红色背景,改为干净浅色
- hero 背景改白→浅灰渐变,去掉红色块 - 文案改深色文字,徽章/按钮改红描边+红底白字 - 装饰竖线/光晕调整为浅底适配 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
3cc48ed91a
commit
fe095f5859
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue