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

feat: 优化页面，添加更多医院

Browse Source
This commit is contained in:
Jafeng 2026-05-09 15:38:24 +08:00
parent 19b3fcc0e3
commit 1eeb673953
22 changed files with 194 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -4,7 +4,17 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="柚康 - 医疗行业患者全周期管理服务数智化升级服务" />
<link rel="icon" type="image/png" href="/assets/logo.png" />
<link rel="apple-touch-icon" href="/assets/logo.png" />
<title>柚康｜患者精细化管理服务平台</title>
<script>
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual'
}
if (!location.hash) {
scrollTo(0, 0)
}
</script>
</head>
<body>
<div id="app"></div>

BIN
public/assets/上海长宁区精神卫生中心.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

0
public/assets/广附一.gif → public/assets/国家呼吸中心.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/assets/复旦大学附属中山医院吴淞医院.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 366 KiB

BIN
public/assets/奉化妇保院.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
public/assets/广附一.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
public/assets/杭州仁德.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/assets/杭州嘉誉护理院有限公司.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
public/assets/杭州市上城区九堡街道社区卫生服务中心.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
public/assets/杭州整形医院.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
public/assets/杭州钱塘新区和禾康复医院.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/assets/浦江妇幼保健医院.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
public/assets/磐安县妇幼保健院.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
public/assets/绍兴市震元堂中医院.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
public/assets/衡阳县中医医院.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
public/assets/邹平市妇保院.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

5
src/components/CaseSection.vue
View File

@ -1,6 +1,7 @@
<script setup>
import { computed, ref } from 'vue'
import { caseCategories, cases } from '../data/homepage'
import LucideHospitalIcon from './LucideHospitalIcon.vue'
import SectionTitle from './SectionTitle.vue'
const active = ref(caseCategories[0])
@ -74,7 +75,9 @@ const handleCategoryKeydown = (event, index) => {
<article v-for="item in filteredCases" :key="`${active}-${item.name}`" class="case-card">
<div :class="['case-logo-slot', item.logoFit && `case-logo-slot--${item.logoFit}`, { 'case-logo-slot--placeholder': !item.logo }]">
<img v-if="item.logo" :src="item.logo" :alt="`${item.name.replace(/\n/g, '')} logo`" />
<span v-else :class="['case-logo-fallback', `case-logo--${item.tone}`]">{{ item.short }}</span>
<span v-else class="case-logo-fallback">
<LucideHospitalIcon :size="30" />
</span>
</div>
<p>{{ item.name }}</p>
</article>

16
src/components/HeroSection.vue
View File

@ -5,9 +5,7 @@
<div class="container hero-grid">
<div class="hero-copy">
<h1>
<span class="hero-title-line hero-title-line--main">
<span>医疗行业</span><span class="hero-title-nowrap">患者全周期管理服务</span>
</span>
<span class="hero-title-line hero-title-nowrap">患者全周期管理服务</span>
<span class="hero-title-line">数智化升级服务商</span>
</h1>
<div class="hero-badge">专注于医疗服务提质提效增收</div>
@ -22,8 +20,18 @@
<div class="hero-visual" aria-label="医疗服务场景图片占位">
<img src="/assets/medical.png" alt="医生与患者沟通场景占位图" />
</div>
<a class="mobile-scroll-cue" href="#platform" aria-label="继续向下浏览">
<svg width="28" height="18" viewBox="0 0 28 18" fill="none" aria-hidden="true">
<defs>
<linearGradient id="scrollCueGradient" x1="4" y1="4" x2="24" y2="14" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF8A00" />
<stop offset="1" stop-color="#FFB84D" />
</linearGradient>
</defs>
<path d="M5 5L14 14L23 5" stroke="url(#scrollCueGradient)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</section>
</template>

27
src/components/LucideHospitalIcon.vue Normal file
View File

@ -0,0 +1,27 @@
<script setup>
defineProps({
size: { type: Number, default: 30 }
})
</script>
<template>
<svg
class="icon-mark"
:width="size"
:height="size"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.25"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M12 6v4" />
<path d="M14 14h-4" />
<path d="M14 18h-4" />
<path d="M14 8h-4" />
<path d="M18 12h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<path d="M18 22V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v18" />
</svg>
</template>

31
src/data/homepage.js
View File

@ -59,12 +59,27 @@ export const solutions = [
export const caseCategories = ['国家医学中心', '公立医院', '妇幼保健客户', '医疗集团客户']
export const cases = [
{ short: '骨', logo: '/assets/上海六院.png', logoFit: 'round', name: '国家骨科医学中心\n上海市第六人民医院', tone: 'blue', category: '国家医学中心' },
{ short: '呼', logo: '/assets/广附一.gif', logoFit: 'wide', name: '国家呼吸医学中心\n广州医科大学附属第一医院', tone: 'orange', category: '国家医学中心' },
{ short: '广', logo: '/assets/广医口腔logo.png', logoFit: 'round', name: '广医口腔', tone: 'blue', category: '公立医院' },
{ short: '十', logo: '/assets/圣德logo.png', name: '圣德', tone: 'green', category: '医疗集团客户' },
{ short: '中', logo: '/assets/中信医疗logo.jpg', logoFit: 'wide', name: '中信医疗', tone: 'red', category: '医疗集团客户' },
{ short: 'Z', logo: '/assets/震元.png', logoFit: 'wide', name: '浙江震元', tone: 'cyan', category: '医疗集团客户' },
{ short: '合', logo: '', name: '合禾', tone: 'green', category: '医疗集团客户' },
{ short: '丹', logo: '', name: '中丹红互联网医院', tone: 'red', category: '医疗集团客户' },
{ logo: '/assets/上海六院.png', logoFit: 'round', name: '国家骨科医学中心\n上海市第六人民医院', category: '国家医学中心' },
{ logo: '/assets/国家呼吸中心.gif', logoFit: 'wide', name: '国家呼吸医学中心\n广州医科大学附属第一医院', category: '国家医学中心' },
{ logo: '/assets/广附一.jpg', logoFit: 'round', name: '广州医科大学附属第一医院', category: '公立医院' },
{ logo: '/assets/上海六院.png', logoFit: 'round', name: '上海市第六人民医院', category: '公立医院' },
{ logo: '/assets/广医口腔logo.png', logoFit: 'round', name: '广州医科大学附属口腔医院', category: '公立医院' },
{ logo: '/assets/复旦大学附属中山医院吴淞医院.png', 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/杭州嘉誉护理院有限公司.jpg', logoFit: 'round', name: '杭州嘉誉护理院', category: '公立医院' },
{ logo: '/assets/杭州钱塘新区和禾康复医院.png', logoFit: 'wide', name: '杭州钱塘新区和禾康复医院', category: '公立医院' },
{ logo: '/assets/杭州市上城区九堡街道社区卫生服务中心.png', logoFit: 'round', name: '杭州市上城区九堡街道社区卫生服务中心', category: '公立医院' },
{ logo: '/assets/奉化妇保院.jpg', name: '宁波市奉化区妇幼保健院', category: '妇幼保健客户' },
{ logo: '/assets/邹平市妇保院.jpg', logoFit: 'round', name: '邹平市妇幼保健院', category: '妇幼保健客户' },
{ logo: '/assets/浦江妇幼保健医院.png', logoFit: 'round', name: '浦江妇幼保健医院', category: '妇幼保健客户' },
{ logo: '/assets/磐安县妇幼保健院.jpg', logoFit: 'round', name: '磐安县妇幼保健院', category: '妇幼保健客户' },
{ logo: '/assets/杭州仁德.png', name: '杭州仁德妇产医院', category: '公立医院' },
{ logo: '/assets/中信医疗logo.jpg', logoFit: 'wide', name: '中信医疗', category: '医疗集团客户' },
{ logo: '/assets/震元.png', logoFit: 'wide', name: '浙江震元股份有限公司', category: '医疗集团客户' },
{ logo: '/assets/圣德logo.png', logoFit: 'wide', name: '圣德', category: '医疗集团客户' },
// { logo: '/assets/杭州钱塘新区和禾康复医院.png', logoFit: 'wide', name: '杭州钱塘新区和禾康复医院', category: '医疗集团客户' },
// { logo: '', name: '中丹红互联网医院', category: '医疗集团客户' },
]

15
src/main.js
View File

@ -2,4 +2,19 @@ import { createApp } from 'vue'
import App from './App.vue'
import './styles/theme.css'
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual'
}
if (!window.location.hash) {
const scrollToTop = () => window.scrollTo(0, 0)
scrollToTop()
requestAnimationFrame(scrollToTop)
window.addEventListener('load', scrollToTop, { once: true })
window.addEventListener('pageshow', scrollToTop, { once: true })
window.setTimeout(scrollToTop, 120)
window.setTimeout(scrollToTop, 360)
}
createApp(App).mount('#app')

126
src/styles/theme.css
View File

@ -339,6 +339,10 @@ button {
filter: drop-shadow(0 28px 56px rgba(255, 138, 0, 0.14));
}
.mobile-scroll-cue {
display: none;
}
.float-card {
position: absolute;
display: grid;
@ -818,10 +822,10 @@ button {
margin: auto;
display: grid;
place-items: center;
border-radius: 13px;
color: #fff;
font-weight: 900;
font-size: 19px;
border-radius: 50%;
color: #7d8795;
background: linear-gradient(135deg, #f3f5f8, #dfe4eb);
box-shadow: inset 0 0 0 1px rgba(126, 136, 150, 0.16);
}
.case-logo--blue { background: linear-gradient(135deg, #2e6bd4, #153d93); }
@ -1021,7 +1025,10 @@ button {
transform: none;
}
.hero-section {
padding: 32px 0 42px;
padding: 18px 0 22px;
}
.hero-grid {
gap: 0;
}
.hero-copy {
max-width: 100%;
@ -1036,19 +1043,39 @@ button {
column-gap: 0;
}
.hero-badge {
font-size: 18px;
padding: 11px 22px;
font-size: 17px;
margin-top: 12px;
padding: 9px 18px;
}
.intro-card {
margin-top: 24px;
padding: 18px;
margin-top: 12px;
padding: 14px 16px;
}
.intro-card p {
font-size: 15px;
line-height: 1.9;
line-height: 1.62;
}
.hero-visual {
min-height: auto;
min-height: 0;
margin-top: -4px;
}
.hero-visual img {
width: min(60vw, 280px);
border-radius: 30px;
filter: drop-shadow(0 18px 34px rgba(255, 138, 0, 0.12));
}
.mobile-scroll-cue {
display: inline-grid;
place-items: center;
justify-self: center;
width: 44px;
height: 22px;
margin-top: -4px;
opacity: 0.86;
animation: scroll-cue-float 2.8s ease-in-out infinite;
}
.mobile-scroll-cue svg {
display: block;
}
.float-card {
display: none;
@ -1057,6 +1084,10 @@ button {
.contact-manager-grid {
grid-template-columns: 1fr;
}
.contact-manager-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.solution-grid--desktop {
display: none;
}
@ -1149,10 +1180,25 @@ button {
transition: transform 0.26s ease;
}
.contact-card {
padding: 24px 18px;
padding: 20px 16px;
}
.manager-card {
align-items: center;
padding: 16px 12px;
}
.contact-manager-grid .qr-wrap {
gap: 6px;
}
.contact-manager-grid .qr-image,
.contact-manager-grid .qr-fake {
width: 108px;
height: 108px;
border-width: 5px;
}
.contact-manager-grid .qr-label {
max-width: 116px;
font-size: 12px;
line-height: 1.25;
}
.footer-inner {
flex-direction: column;
@ -1193,24 +1239,34 @@ button {
height: 42px;
}
.page-section {
padding: 44px 0;
padding: 34px 0;
}
.page-section--compact {
padding-top: 28px;
padding-top: 22px;
}
.hero-copy h1 {
font-size: 28px;
font-size: 26px;
line-height: 1.22;
letter-spacing: -0.05em;
}
.hero-badge {
width: fit-content;
max-width: 100%;
font-size: 17px;
font-size: 16px;
white-space: normal;
}
.hero-visual {
margin-top: -6px;
}
.hero-visual img {
width: min(62vw, 250px);
}
.mobile-scroll-cue {
margin-top: -6px;
}
.solution-card {
min-height: auto;
padding: 22px 20px;
padding: 18px 18px;
}
.solution-points {
line-height: 1.78;
@ -1221,7 +1277,7 @@ button {
}
.section-title {
gap: 12px;
margin-bottom: 24px;
margin-bottom: 18px;
}
.title-dots {
display: none;
@ -1231,9 +1287,9 @@ button {
}
.case-card {
height: auto;
min-height: 112px;
min-height: 100px;
gap: 15px;
padding: 18px;
padding: 14px 16px;
animation: case-card-in 0.32s ease both;
}
.case-logo-slot {
@ -1245,7 +1301,6 @@ button {
font-size: 16px;
}
.manager-card {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
@ -1296,9 +1351,33 @@ button {
border-radius: 11px;
}
.hero-copy h1 {
font-size: 26px;
font-size: 24px;
line-height: 1.25;
}
.hero-badge {
font-size: 15px;
padding: 8px 14px;
}
.intro-card {
padding: 12px 14px;
}
.intro-card p {
font-size: 14px;
line-height: 1.58;
}
.hero-visual img {
width: min(58vw, 220px);
}
}
@keyframes scroll-cue-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
}
}
@keyframes case-card-in {
@ -1314,7 +1393,8 @@ button {
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll,
.case-card {
.case-card,
.mobile-scroll-cue {
animation: none;
opacity: 1;
transform: none;