From 87b03b067977dea2941683d927d08ef70a146670 Mon Sep 17 00:00:00 2001
From: Jafeng <2998840497@qq.com>
Date: Wed, 6 May 2026 16:09:19 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=A1=88=E4=BE=8B?=
=?UTF-8?q?=E3=80=81=E8=81=94=E7=B3=BB=E5=92=8C=E8=A7=A3=E5=86=B3=E6=96=B9?=
=?UTF-8?q?=E6=A1=88=E9=83=A8=E5=88=86=E7=9A=84=E5=B8=83=E5=B1=80=E4=B8=8E?=
=?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=9B=B4=E6=96=B0=E4=BA=8C=E7=BB=B4?=
=?UTF-8?q?=E7=A0=81=E6=8F=90=E7=A4=BA=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/CaseSection.vue | 2 +
src/components/ContactSection.vue | 10 +-
src/components/SolutionSection.vue | 6 +-
src/data/homepage.js | 18 +--
src/styles/theme.css | 211 +++++++++++++++++++++++++----
5 files changed, 199 insertions(+), 48 deletions(-)
diff --git a/src/components/CaseSection.vue b/src/components/CaseSection.vue
index c41172c..18a83c1 100644
--- a/src/components/CaseSection.vue
+++ b/src/components/CaseSection.vue
@@ -5,6 +5,7 @@ import SectionTitle from './SectionTitle.vue'
const active = ref(caseCategories[0])
const filteredCases = computed(() => cases.filter(item => item.category === active.value))
+const activeIndex = computed(() => caseCategories.findIndex(category => category === active.value))
const selectCategory = (category) => {
active.value = category
@@ -57,6 +58,7 @@ const handleCategoryKeydown = (event, index) => {
>
{{ category }}
+
diff --git a/src/components/ContactSection.vue b/src/components/ContactSection.vue
index bcae686..d2f5705 100644
--- a/src/components/ContactSection.vue
+++ b/src/components/ContactSection.vue
@@ -24,16 +24,10 @@ import SectionTitle from './SectionTitle.vue'
diff --git a/src/components/SolutionSection.vue b/src/components/SolutionSection.vue
index 26c2d50..ee892cd 100644
--- a/src/components/SolutionSection.vue
+++ b/src/components/SolutionSection.vue
@@ -86,7 +86,6 @@ onBeforeUnmount(() => {
class="solution-card"
>
- {{ solution.tab }}
{{ solution.title }}
@@ -94,7 +93,7 @@ onBeforeUnmount(() => {
{{ solution.points[0] }}
- 具体咨询：
+ 微信长按扫码咨询
@@ -110,7 +109,6 @@ onBeforeUnmount(() => {
tabindex="0"
>
- {{ activeSolution.tab }}
{{ activeSolution.title }}
@@ -118,7 +116,7 @@ onBeforeUnmount(() => {
{{ activeSolution.points[0] }}
- 具体咨询：
+ 微信长按扫码咨询
diff --git a/src/data/homepage.js b/src/data/homepage.js
index 65a7be0..3e79f0d 100644
--- a/src/data/homepage.js
+++ b/src/data/homepage.js
@@ -9,23 +9,23 @@ export const navItems = [
export const features = [
{
icon: 'user-flow',
- title: '前端运营获客',
- items: ['公众号/视频三方引流', '个人号添加', '团队码添加', '活动码添加', '企业微信能力融合']
+ title: '流量+数据获客',
+ items: ['公众号/短视频引流', '个人码/活动码/团队码/台签', '快速认证建档&关联病历', '历史门诊住院数据挖掘', '科室靶点患者发现']
},
{
icon: 'clipboard',
- title: '中端服务承接',
- items: ['健康档案、健康画像', '管理服务团队', '回访计划管理', '回访跟进执行', '宣教、满意度、随访','复诊提醒、治疗预约']
+ title: '需求双向精准对接',
+ items: ['医护服务团队配置', '医患双向服务授权', '患者档案画像提取', '患者入组及管理路径', '患者档案共享/转移']
},
{
icon: 'chart',
- title: '后端跟进管理',
- items: ['患者团队分配及分组', 'SOP任务引擎', '管理路径模板库', '任务分配下达', '运营管理驾驶舱', '员工服务积分' ]
+ title: '协同规范专业管理',
+ items: ['专科管理服务知识库', '管理路径模版/SOP引擎', '任务交办/执行/监管', '平台驾驶舱/主题分析', '员工服务积分/客户满意度']
},
{
icon: 'ai',
- title: '全端数智赋能',
- items: ['标签画像体系及引擎', '话术宣教量表知识库', 'Youcan AI大模型', 'AI客服助手-小柚', '柚康全程服务经理']
+ title: 'AI+人工专业服务',
+ items: ['患者全息档案', '平台知识库/知识图谱', 'Youcan Health模型', 'AI服务助手(八大场景)', '柚康服务经理']
}
]
@@ -40,7 +40,7 @@ export const solutions = [
},
{
key: 'local',
- tab: '机构本地部署版',
+ tab: '机构部署版',
title: '版本优势',
points: ['支持本地服务器部署及内部业务系统对接', '数据本地化管理', '大规模长期使用，性价比高'],
qrLabel: '柚康企业微信客服二维码',
diff --git a/src/styles/theme.css b/src/styles/theme.css
index cfa64d3..f697273 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -350,12 +350,12 @@ button {
}
.page-section {
- padding: 70px 0;
+ padding: 58px 0;
background: #fff;
}
.page-section--compact {
- padding-top: 44px;
+ padding-top: 34px;
}
.section-title {
@@ -364,7 +364,7 @@ button {
justify-content: center;
gap: 20px;
flex-wrap: wrap;
- margin-bottom: 42px;
+ margin-bottom: 34px;
text-align: center;
}
@@ -500,7 +500,7 @@ button {
grid-template-columns: repeat(3, 1fr);
width: 100%;
min-height: 58px;
- margin: 0 auto 28px;
+ margin: 0 auto 22px;
padding: 6px;
border-radius: 15px;
background: #fff;
@@ -550,8 +550,8 @@ button {
}
.solution-card {
- min-height: 330px;
- padding: 27px 24px 22px;
+ min-height: 306px;
+ padding: 24px 24px 20px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 138, 0, 0.11);
@@ -591,7 +591,7 @@ button {
}
.solution-qr-row {
- margin-top: 22px;
+ margin-top: 18px;
display: grid;
justify-items: center;
gap: 10px;
@@ -600,6 +600,10 @@ button {
text-align: center;
}
+.solution-qr-row .qr-label {
+ display: none;
+}
+
.qr-wrap {
display: grid;
justify-items: center;
@@ -685,11 +689,14 @@ button {
}
.case-filter {
+ position: relative;
display: grid;
gap: 15px;
}
.case-filter-btn {
+ position: relative;
+ z-index: 2;
min-height: 54px;
padding: 0 18px;
border-radius: 12px;
@@ -717,6 +724,10 @@ button {
gap: 18px;
}
+.case-tab-indicator {
+ display: none;
+}
+
.case-card {
height: 116px;
display: flex;
@@ -809,7 +820,7 @@ button {
.contact-card {
width: 100%;
margin: 0 auto;
- padding: 34px 40px;
+ padding: 30px 40px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(255, 138, 0, 0.15);
@@ -823,7 +834,7 @@ button {
flex-wrap: wrap;
gap: 8px;
font-size: 20px;
- margin-bottom: 28px;
+ margin-bottom: 22px;
}
.address-icon {
@@ -844,13 +855,12 @@ button {
.manager-card {
display: grid;
- grid-template-columns: 1fr auto;
- align-items: center;
- gap: 24px;
- padding: 22px 26px;
+ place-items: center;
+ padding: 24px 26px;
border-radius: 18px;
background: #fff;
box-shadow: var(--shadow-sm);
+ text-align: center;
}
.manager-copy {
@@ -983,17 +993,29 @@ button {
transform: none;
}
.hero-section {
- padding: 44px 0 60px;
+ padding: 32px 0 42px;
+ }
+ .hero-copy {
+ max-width: 100%;
+ }
+ .hero-copy h1 {
+ max-width: 100%;
+ overflow-wrap: break-word;
+ }
+ .hero-title-nowrap {
+ white-space: normal;
}
.hero-badge {
font-size: 18px;
padding: 11px 22px;
}
.intro-card {
- padding: 20px;
+ margin-top: 24px;
+ padding: 18px;
}
.intro-card p {
font-size: 15px;
+ line-height: 1.9;
}
.hero-visual {
min-height: auto;
@@ -1041,22 +1063,65 @@ button {
}
.case-layout {
grid-template-columns: 1fr;
- gap: 22px;
+ gap: 18px;
}
.case-filter {
- display: flex;
- overflow-x: auto;
- padding-bottom: 4px;
+ position: relative;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 0;
+ padding: 5px;
+ border-radius: 15px;
+ background: #fff;
+ border: 1px solid rgba(255, 138, 0, 0.12);
+ box-shadow: var(--shadow-sm);
+ overflow: hidden;
}
.case-filter-btn {
- white-space: nowrap;
- min-width: 136px;
+ position: relative;
+ z-index: 2;
+ min-width: 0;
+ min-height: 40px;
+ padding: 0 6px;
+ border-color: transparent;
+ border-radius: 12px;
+ background: transparent;
+ font-size: 13px;
+ line-height: 1.25;
+ white-space: normal;
+ box-shadow: none;
+ }
+ .case-filter-btn.active {
+ background: transparent;
+ color: #fff;
+ box-shadow: none;
+ }
+ .case-filter-btn:hover {
+ background: transparent;
+ color: #313843;
+ box-shadow: none;
+ }
+ .case-filter-btn.active:hover {
+ color: #fff;
+ }
+ .case-tab-indicator {
+ position: absolute;
+ z-index: 1;
+ left: 5px;
+ top: 5px;
+ display: block;
+ width: calc((100% - 10px) / 4);
+ height: calc(100% - 10px);
+ border-radius: 12px;
+ background: linear-gradient(90deg, var(--brand), #ff9d22);
+ box-shadow: 0 12px 24px rgba(255, 138, 0, 0.24);
+ transition: transform 0.26s ease;
}
.contact-card {
padding: 24px 18px;
}
.manager-card {
- align-items: flex-start;
+ align-items: center;
}
.footer-inner {
flex-direction: column;
@@ -1066,20 +1131,66 @@ button {
}
@media (max-width: 540px) {
+ .container {
+ width: min(100% - 24px, var(--container));
+ }
+ .header-inner {
+ padding: 14px 0;
+ }
+ .brand {
+ gap: 9px;
+ }
+ .brand-copy,
+ .footer-brand span {
+ gap: 7px;
+ }
.brand-copy strong {
- font-size: 22px;
+ font-size: 21px;
}
.brand-logo {
- width: 46px;
- height: 46px;
+ width: 44px;
+ height: 44px;
+ }
+ .brand-service {
+ height: 21px;
+ }
+ .brand-separator {
+ height: 22px;
+ }
+ .nav-toggle {
+ width: 42px;
+ height: 42px;
+ }
+ .page-section {
+ padding: 44px 0;
+ }
+ .page-section--compact {
+ padding-top: 28px;
}
.hero-copy h1 {
- font-size: 31px;
+ font-size: 28px;
letter-spacing: -0.05em;
}
+ .hero-badge {
+ width: fit-content;
+ max-width: 100%;
+ font-size: 17px;
+ white-space: normal;
+ }
+ .solution-card {
+ min-height: auto;
+ padding: 22px 20px;
+ }
+ .solution-points {
+ line-height: 1.78;
+ }
+ .solution-personal-text {
+ margin-bottom: 22px;
+ line-height: 1.78;
+ }
.section-title {
gap: 12px;
- margin-bottom: 28px;
+ margin-bottom: 24px;
}
.title-dots {
display: none;
@@ -1111,3 +1222,49 @@ button {
font-size: 17px;
}
}
+
+@media (max-width: 360px) {
+ .container {
+ width: min(100% - 16px, var(--container));
+ }
+ .header-inner {
+ flex-wrap: nowrap;
+ gap: 8px;
+ }
+ .brand {
+ flex: 1 1 auto;
+ min-width: 0;
+ gap: 6px;
+ }
+ .brand-logo {
+ width: 38px;
+ height: 38px;
+ border-radius: 11px;
+ }
+ .brand-copy {
+ min-width: 0;
+ gap: 5px;
+ }
+ .brand-copy strong {
+ flex: 0 0 auto;
+ min-height: 24px;
+ font-size: 18px;
+ }
+ .brand-separator {
+ height: 18px;
+ }
+ .brand-service {
+ height: 17px;
+ max-width: 116px;
+ }
+ .nav-toggle {
+ flex: 0 0 38px;
+ width: 38px;
+ height: 38px;
+ border-radius: 11px;
+ }
+ .hero-copy h1 {
+ font-size: 26px;
+ line-height: 1.25;
+ }
+}