huangjiafeng/yk-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style：首页优化调整

Browse Source
This commit is contained in:
Jafeng 2026-05-09 15:46:17 +08:00
parent 1eeb673953
commit 9c31e54df1
2 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/data/homepage.js
View File

@ -76,7 +76,7 @@ export const cases = [
{ logo: '/assets/邹平市妇保院.jpg', logoFit: 'round', name: '邹平市妇幼保健院', category: '妇幼保健客户' }, { logo: '/assets/邹平市妇保院.jpg', logoFit: 'round', name: '邹平市妇幼保健院', category: '妇幼保健客户' },
{ logo: '/assets/浦江妇幼保健医院.png', logoFit: 'round', name: '浦江妇幼保健医院', category: '妇幼保健客户' }, { logo: '/assets/浦江妇幼保健医院.png', logoFit: 'round', name: '浦江妇幼保健医院', category: '妇幼保健客户' },
{ logo: '/assets/磐安县妇幼保健院.jpg', logoFit: 'round', name: '磐安县妇幼保健院', category: '妇幼保健客户' }, { logo: '/assets/磐安县妇幼保健院.jpg', logoFit: 'round', name: '磐安县妇幼保健院', category: '妇幼保健客户' },
{ logo: '/assets/杭州仁德.png', name: '杭州仁德妇产医院', category: '公立医院' }, { logo: '/assets/杭州仁德.png', name: '杭州仁德妇产医院', category: '妇幼保健客户' },
{ logo: '/assets/中信医疗logo.jpg', logoFit: 'wide', name: '中信医疗', category: '医疗集团客户' }, { logo: '/assets/中信医疗logo.jpg', logoFit: 'wide', name: '中信医疗', category: '医疗集团客户' },
{ logo: '/assets/震元.png', logoFit: 'wide', name: '浙江震元股份有限公司', category: '医疗集团客户' }, { logo: '/assets/震元.png', logoFit: 'wide', name: '浙江震元股份有限公司', category: '医疗集团客户' },
{ logo: '/assets/圣德logo.png', logoFit: 'wide', name: '圣德', category: '医疗集团客户' }, { logo: '/assets/圣德logo.png', logoFit: 'wide', name: '圣德', category: '医疗集团客户' },

38
src/styles/theme.css
View File

@ -1026,9 +1026,20 @@ button {
} }
.hero-section { .hero-section {
padding: 18px 0 22px; padding: 18px 0 22px;
min-height: calc(100svh - 74px);
display: flex;
align-items: stretch;
}
.hero-section::after {
right: -230px;
bottom: -250px;
width: 620px;
height: 330px;
border-width: 18px;
} }
.hero-grid { .hero-grid {
gap: 0; gap: 0;
align-content: start;
} }
.hero-copy { .hero-copy {
max-width: 100%; max-width: 100%;
@ -1058,11 +1069,24 @@ button {
.hero-visual { .hero-visual {
min-height: 0; min-height: 0;
margin-top: -4px; margin-top: -4px;
overflow: hidden;
}
.hero-visual::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
height: 42%;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 250, 242, 0.88), rgba(255, 250, 242, 0));
} }
.hero-visual img { .hero-visual img {
width: min(60vw, 280px); width: min(68vw, 310px);
border-radius: 30px; border-radius: 30px;
filter: drop-shadow(0 18px 34px rgba(255, 138, 0, 0.12)); filter: drop-shadow(0 18px 34px rgba(255, 138, 0, 0.12));
transform: translateY(-18px);
} }
.mobile-scroll-cue { .mobile-scroll-cue {
display: inline-grid; display: inline-grid;
@ -1249,6 +1273,9 @@ button {
line-height: 1.22; line-height: 1.22;
letter-spacing: -0.05em; letter-spacing: -0.05em;
} }
.hero-section {
min-height: calc(100svh - 73px);
}
.hero-badge { .hero-badge {
width: fit-content; width: fit-content;
max-width: 100%; max-width: 100%;
@ -1259,7 +1286,8 @@ button {
margin-top: -6px; margin-top: -6px;
} }
.hero-visual img { .hero-visual img {
width: min(62vw, 250px); width: min(70vw, 286px);
transform: translateY(-18px);
} }
.mobile-scroll-cue { .mobile-scroll-cue {
margin-top: -6px; margin-top: -6px;
@ -1354,6 +1382,9 @@ button {
font-size: 24px; font-size: 24px;
line-height: 1.25; line-height: 1.25;
} }
.hero-section {
min-height: calc(100svh - 67px);
}
.hero-badge { .hero-badge {
font-size: 15px; font-size: 15px;
padding: 8px 14px; padding: 8px 14px;
@ -1366,7 +1397,8 @@ button {
line-height: 1.58; line-height: 1.58;
} }
.hero-visual img { .hero-visual img {
width: min(58vw, 220px); width: min(68vw, 244px);
transform: translateY(-14px);
} }
} }