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 {
|
.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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue