style: 优化案例、联系和解决方案部分的布局与样式，更新二维码提示文本
This commit is contained in:
parent
e63b67ea7b
commit
87b03b0679
@ -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 }}
|
||||
</button>
|
||||
<span class="case-tab-indicator" :style="{ transform: `translateX(${activeIndex * 100}%)` }"></span>
|
||||
</aside>
|
||||
<div id="case-panel" class="case-grid" role="tabpanel" :aria-label="active">
|
||||
<article v-for="item in filteredCases" :key="`${active}-${item.name}`" class="case-card">
|
||||
|
||||
@ -24,16 +24,10 @@ import SectionTitle from './SectionTitle.vue'
|
||||
</a>
|
||||
<div class="contact-manager-grid">
|
||||
<article class="manager-card">
|
||||
<div class="manager-copy">
|
||||
<p><strong>客户成功经理：王经理</strong><br /></p>
|
||||
</div>
|
||||
<QrPlaceholder image="/assets/王经理二维码.jpg" label="扫码联系王经理" />
|
||||
<QrPlaceholder image="/assets/王经理二维码.jpg" label="微信长按扫码联系王经理" />
|
||||
</article>
|
||||
<article class="manager-card">
|
||||
<div class="manager-copy">
|
||||
<p><strong>客户成功经理：罗经理</strong><br /></p>
|
||||
</div>
|
||||
<QrPlaceholder image="/assets/罗经理二维码.png" label="扫码联系罗经理" />
|
||||
<QrPlaceholder image="/assets/罗经理二维码.png" label="微信长按扫码联系罗经理" />
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -86,7 +86,6 @@ onBeforeUnmount(() => {
|
||||
class="solution-card"
|
||||
>
|
||||
<div class="solution-card-top">
|
||||
<span class="solution-kicker">{{ solution.tab }}</span>
|
||||
<h3>{{ solution.title }}</h3>
|
||||
</div>
|
||||
<ol v-if="solution.key !== 'personal'" class="solution-points">
|
||||
@ -94,7 +93,7 @@ onBeforeUnmount(() => {
|
||||
</ol>
|
||||
<p v-else class="solution-personal-text">{{ solution.points[0] }}</p>
|
||||
<div class="solution-qr-row">
|
||||
<span v-if="solution.key !== 'personal'">具体咨询：</span>
|
||||
<span v-if="solution.key !== 'personal'">微信长按扫码咨询</span>
|
||||
<QrPlaceholder :image="solution.qrImage" :label="solution.qrLabel" :title="`${solution.tab}咨询二维码`" />
|
||||
</div>
|
||||
</article>
|
||||
@ -110,7 +109,6 @@ onBeforeUnmount(() => {
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="solution-card-top">
|
||||
<span class="solution-kicker">{{ activeSolution.tab }}</span>
|
||||
<h3>{{ activeSolution.title }}</h3>
|
||||
</div>
|
||||
<ol v-if="activeSolution.key !== 'personal'" class="solution-points">
|
||||
@ -118,7 +116,7 @@ onBeforeUnmount(() => {
|
||||
</ol>
|
||||
<p v-else class="solution-personal-text">{{ activeSolution.points[0] }}</p>
|
||||
<div class="solution-qr-row">
|
||||
<span v-if="activeSolution.key !== 'personal'">具体咨询：</span>
|
||||
<span v-if="activeSolution.key !== 'personal'">微信长按扫码咨询</span>
|
||||
<QrPlaceholder :image="activeSolution.qrImage" :label="activeSolution.qrLabel" :title="`${activeSolution.tab}咨询二维码`" />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -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: '柚康企业微信客服二维码',
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user