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 16:17:03 +08:00
parent 9c31e54df1
commit e19ba19dee
4 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/国家呼吸医学中心.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/assets/国家骨科医学中心.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

4
src/data/homepage.js
View File

@ -59,8 +59,8 @@ export const solutions = [
export const caseCategories = ['国家医学中心', '公立医院', '妇幼保健客户', '医疗集团客户'] export const caseCategories = ['国家医学中心', '公立医院', '妇幼保健客户', '医疗集团客户']
export const cases = [ export const cases = [
{ logo: '/assets/上海六院.png', logoFit: 'round', name: '国家骨科医学中心\n上海市第六人民医院', category: '国家医学中心' }, { logo: '/assets/国家骨科医学中心.webp ', logoFit: 'round', name: '国家骨科医学中心', category: '国家医学中心' },
{ logo: '/assets/国家呼吸中心.gif', logoFit: 'wide', name: '国家呼吸医学中心\n广州医科大学附属第一医院', category: '国家医学中心' }, { logo: '/assets/国家呼吸医学中心.png', logoFit: 'wide', name: '国家呼吸医学中心', category: '国家医学中心' },
{ 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/广医口腔logo.png', logoFit: 'round', name: '广州医科大学附属口腔医院', category: '公立医院' }, { logo: '/assets/广医口腔logo.png', logoFit: 'round', name: '广州医科大学附属口腔医院', category: '公立医院' },

36
src/styles/theme.css
View File

@ -423,7 +423,7 @@ button {
.feature-grid { .feature-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 28px; gap: 20px;
} }
.feature-card { .feature-card {
@ -444,10 +444,11 @@ button {
.feature-head { .feature-head {
position: relative; position: relative;
display: grid; display: flex;
place-items: center; align-items: center;
justify-content: center;
gap: 12px; gap: 12px;
padding: 28px 20px 24px; padding: 18px 18px;
color: #fff; color: #fff;
background: linear-gradient(180deg, var(--brand), #ff7900); background: linear-gradient(180deg, var(--brand), #ff7900);
} }
@ -456,7 +457,7 @@ button {
content: ""; content: "";
position: absolute; position: absolute;
inset: auto -18px -22px -18px; inset: auto -18px -22px -18px;
height: 48px; height: 34px;
border-radius: 50% 50% 0 0; border-radius: 50% 50% 0 0;
background: #fff; background: #fff;
opacity: 0.12; opacity: 0.12;
@ -465,8 +466,9 @@ button {
.feature-icon { .feature-icon {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 72px; flex: 0 0 48px;
height: 72px; width: 48px;
height: 48px;
border-radius: 999px; border-radius: 999px;
display: grid; display: grid;
place-items: center; place-items: center;
@ -474,32 +476,38 @@ button {
background: #fff; background: #fff;
} }
.feature-icon .icon-mark {
width: 28px;
height: 28px;
}
.feature-head h3 { .feature-head h3 {
position: relative; position: relative;
z-index: 1; z-index: 1;
margin: 0; margin: 0;
font-size: 21px; font-size: 18px;
line-height: 1.25;
} }
.feature-list { .feature-list {
list-style: none; list-style: none;
display: grid; display: grid;
gap: 12px; gap: 9px;
margin: 0; margin: 0;
padding: 22px 18px 24px; padding: 16px;
background: linear-gradient(180deg, #fff, #fffaf5); background: linear-gradient(180deg, #fff, #fffaf5);
} }
.feature-list li { .feature-list li {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 9px; gap: 8px;
min-height: 36px; min-height: 32px;
padding: 8px 12px; padding: 7px 10px;
border-radius: 6px; border-radius: 6px;
background: #fff7ec; background: #fff7ec;
color: #535b68; color: #535b68;
font-size: 14px; font-size: 13px;
border: 1px solid rgba(255, 138, 0, 0.12); border: 1px solid rgba(255, 138, 0, 0.12);
} }