feat: 20250617 页面布局已完成
This commit is contained in:
parent
025ea5e832
commit
24d3e5015b
5
components.d.ts
vendored
5
components.d.ts
vendored
@ -9,7 +9,12 @@ export {}
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
Footer: typeof import('./src/components/Footer.vue')['default']
|
||||
|
||||
12
src/main.ts
12
src/main.ts
@ -9,13 +9,13 @@ import '@/styles/global.less' // 引入全局样式
|
||||
// 修正：明确 meta.title 的类型为 string
|
||||
|
||||
// 引入 element-plus 核心库
|
||||
import ElementPlus from 'element-plus'
|
||||
// import ElementPlus from 'element-plus'
|
||||
// 引入 element-plus 全局样式（可根据需求选择是否自定义主题，这里先引入默认样式）
|
||||
// import 'element-plus/dist/index.css'
|
||||
import 'element-plus/dist/index.css'
|
||||
// 如果你需要使用 Element Plus 提供的国际化（i18n）功能，还需引入对应的语言包，比如中文
|
||||
|
||||
// 修正：使用正确的语言包路径（从 es/locale/lang 导入）
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
// import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
// 使用 ElementPlus 插件，并配置国际化等选项（这里以配置中文为例）
|
||||
declare module 'vue-router' {
|
||||
interface RouteMeta {
|
||||
@ -33,9 +33,9 @@ export const createApp = ViteSSG(
|
||||
ctx => {
|
||||
// 安装 i18n 插件
|
||||
ctx.app.use(i18n)
|
||||
ctx.app.use(ElementPlus, {
|
||||
locale: zhCn
|
||||
})
|
||||
// ctx.app.use(ElementPlus, {
|
||||
// locale: zhCn
|
||||
// })
|
||||
|
||||
// 路由守卫：设置页面标题
|
||||
ctx.router.beforeEach((to, _from, next) => {
|
||||
|
||||
@ -17,6 +17,7 @@ const routes: RouteRecordRaw[] = [
|
||||
children: [
|
||||
{ path: '', name: 'Home', component: () => import('@/views/Home/Home.vue') },
|
||||
{ path: 'news', name: 'News', component: () => import('@/views/News/News.vue') },
|
||||
{ path: 'news/:id', name: 'ArticleDetail', component: () => import('@/views/News/ArticleDetail.vue') },
|
||||
{ path: 'network', name: 'Network', component: () => import('@/views/Network/Network.vue') },
|
||||
{ path: 'dating', name: 'Dating', component: () => import('@/views/Dating/Dating.vue') },
|
||||
{ path: 'app', name: 'App', component: () => import('@/views/App/App.vue') },
|
||||
|
||||
@ -2,10 +2,17 @@
|
||||
<div class="about-page">
|
||||
<BannerCarousel />
|
||||
<CompanyIntro />
|
||||
<!-- 友福同享简介-->
|
||||
<CompanyTimeline />
|
||||
<!-- 我们重新定义健康未来-->
|
||||
<RedefineHealth />
|
||||
<!-- 企业价值观-->
|
||||
<CompanyValues />
|
||||
<!-- 资质认证-->
|
||||
<QualificationCarousel />
|
||||
<!-- 使命与愿景-->
|
||||
<MissionVision />
|
||||
<!-- 合作伙伴-->
|
||||
<Partners />
|
||||
<!-- <FooterContact />-->
|
||||
</div>
|
||||
@ -19,6 +26,7 @@ import CompanyValues from './sections/CompanyValues.vue'
|
||||
import QualificationCarousel from './sections/QualificationCarousel.vue'
|
||||
import MissionVision from './sections/MissionVision.vue'
|
||||
import Partners from './sections/Partners.vue'
|
||||
import CompanyTimeline from '@/views/About/sections/CompanyTimeline.vue'
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
233
src/views/About/sections/CompanyTimeline.vue
Normal file
233
src/views/About/sections/CompanyTimeline.vue
Normal file
@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<section class="company-timeline">
|
||||
<!-- 标题区 -->
|
||||
<div class="timeline-header">
|
||||
<h2 class="main-title">公司发展历程</h2>
|
||||
<p class="sub-title">凝聚着汗水与智慧，铸就今日辉煌</p>
|
||||
</div>
|
||||
|
||||
<!-- 时间轴容器（控制曲线、飞机、阶段定位） -->
|
||||
<section class="timeline-section">
|
||||
<div class="timeline-container">
|
||||
<!-- 发展阶段 -->
|
||||
<div v-for="(item, index) in timelineData" :key="index" class="timeline-stage" :class="`stage-${index}`">
|
||||
<div class="stage-period">{{ item.period }}</div>
|
||||
<div class="stage-line"></div>
|
||||
<h3 class="stage-title">{{ item.title }}</h3>
|
||||
<ul class="stage-content">
|
||||
<li v-for="(line, i) in item.content" :key="i">{{ line }}</li>
|
||||
</ul>
|
||||
<!-- <div class="_line"></div>-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 公司发展历程数据结构
|
||||
const timelineData = [
|
||||
{
|
||||
period: '2003-2009',
|
||||
title: '创新奠基期',
|
||||
content: [
|
||||
'·核心技术突破：创始人融合中医世家传承、西医临床医学及营养学理论，独创「人体驾照」非医非药康复体系。',
|
||||
'·技术预研储备：同步开展技术底层研究，构建身心健康精准数据分析模型。'
|
||||
]
|
||||
},
|
||||
{
|
||||
period: '2019-2022',
|
||||
title: '体系升级期',
|
||||
content: [
|
||||
'·资本助力：获磐石资本连续加注，投入技术研发与服务体系。',
|
||||
'·建设智能系统开发：启动七维AI康复系统研发，完成核心算法验证。',
|
||||
'·服务标准化：构建三位一体教练体系(客服/教练/副教练)，实现服务可复制。'
|
||||
]
|
||||
},
|
||||
{
|
||||
period: '2022-2024',
|
||||
title: '智能深化期',
|
||||
content: [
|
||||
'·技术认证突破：七维AI康复系统通过ISO9001:2015认证',
|
||||
'·知识产权布局：累计获得15项发明专利(持续申报中)',
|
||||
'·权威资质认证：AAA级企业信用认证(GB/T23794-2023) 五星级服务认证(GB/T 27922-2011)'
|
||||
]
|
||||
},
|
||||
{
|
||||
period: '2024-2025',
|
||||
title: '生态拓展期',
|
||||
content: [
|
||||
'·智能升级：推出身心健康AI全息图谱系统(基于多年算法迭代)',
|
||||
'·标准建设：主导制定AI健康国家标准(T/UNP280-2024)',
|
||||
'·政企协同：与多家政府单位达成战略合作，开展智能健康管理试点'
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.company-timeline {
|
||||
padding: 80px 20px;
|
||||
border-top: 50px solid #f5f7fe;
|
||||
text-align: center;
|
||||
|
||||
// 标题区样式
|
||||
.timeline-header {
|
||||
margin-bottom: 50px;
|
||||
.main-title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeline-section {
|
||||
padding: 50px 192px;
|
||||
background-image: url('https://images.health.ufutx.com/202506/20/26691a92ed7a9b632cd635c08e35fb17.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
// 核心容器：提供定位参考
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 955px; // 固定高度承载绝对定位
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
// 阶段通用样式
|
||||
.timeline-stage {
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
display: grid;
|
||||
.stage-period {
|
||||
font-size: 36px;
|
||||
color: #313fa8;
|
||||
font-weight: bold;
|
||||
}
|
||||
.stage-line {
|
||||
width: 64px;
|
||||
height: 4px;
|
||||
background: #b2b7df;
|
||||
}
|
||||
.stage-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #313fa8;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stage-content {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
li {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 34px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
&::before {
|
||||
// 还原设计图的·符号
|
||||
//content: '·';
|
||||
//position: absolute;
|
||||
//left: 0;
|
||||
//color: #4b89dc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 阶段精准定位（匹配设计图）
|
||||
.stage-0 {
|
||||
/* 左上：2003-2009 */
|
||||
left: 0;
|
||||
top: 0;
|
||||
justify-items: end;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -16px;
|
||||
width: 2px;
|
||||
height: 336px;
|
||||
align-self: stretch;
|
||||
background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
|
||||
}
|
||||
}
|
||||
.stage-1 {
|
||||
/* 中下：2019-2022 */
|
||||
left: 400px;
|
||||
bottom: 0;
|
||||
justify-items: start;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -16px;
|
||||
width: 2px;
|
||||
height: 336px;
|
||||
align-self: stretch;
|
||||
background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
|
||||
}
|
||||
}
|
||||
.stage-2 {
|
||||
/* 右上：2022-2024 */
|
||||
left: 698px;
|
||||
top: 0;
|
||||
justify-items: end;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -16px;
|
||||
width: 2px;
|
||||
height: 336px;
|
||||
align-self: stretch;
|
||||
background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
|
||||
}
|
||||
}
|
||||
.stage-3 {
|
||||
/* 右中：2024-2025 */
|
||||
left: 1164px;
|
||||
top: 309px;
|
||||
justify-items: start;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -16px;
|
||||
width: 2px;
|
||||
height: 336px;
|
||||
align-self: stretch;
|
||||
background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配（移动端垂直排列）
|
||||
@media (max-width: 768px) {
|
||||
.timeline-container {
|
||||
height: auto; // 取消固定高度
|
||||
padding: 40px 0;
|
||||
|
||||
//.timeline-stage {
|
||||
// position: relative; // 重置定位
|
||||
// margin: 40px auto; // 垂直分布
|
||||
// width: 80%; // 适配小屏宽度
|
||||
// left: auto;
|
||||
// right: auto;
|
||||
// top: auto;
|
||||
// bottom: auto;
|
||||
// transform: none; // 清除变换
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,129 +1,169 @@
|
||||
<template>
|
||||
<section class="company-values">
|
||||
<h2 class="section-title">企业价值观</h2>
|
||||
<div class="values-tabs">
|
||||
<span
|
||||
v-for="(tab, index) in valueTabs"
|
||||
:key="index"
|
||||
:class="{ active: currentTab === index }"
|
||||
@click="currentTab = index"
|
||||
>{{ tab }}</span
|
||||
>
|
||||
</div>
|
||||
<!-- 健康优先 -->
|
||||
<div v-show="currentTab === 0" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>健康优先</h3>
|
||||
<p>• 优先关注、保障员工的身心健康</p>
|
||||
<p>• 持续输出健康理念与服务，帮助用户预防疾病</p>
|
||||
<p>• 积极推动行业进步，促进全民健康意识提升</p>
|
||||
<section class="app-scenes">
|
||||
<h3 class="app-title">应用场景</h3>
|
||||
<!-- <div class="scenes-tabs">-->
|
||||
<!-- <span v-for="(tab, i) in tabs" :key="i" :class="{ active: currentTab === i }" @click="currentTab = i">{{-->
|
||||
<!-- tab-->
|
||||
<!-- }}</span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 标签切换（友福动态 / 媒体报道） -->
|
||||
<el-tabs v-model="activeTab" class="news-tabs" @tab-click="handleTabClick">
|
||||
<el-tab-pane v-for="(tab, index) in valueTabs" :key="index" :label="tab.title" :name="tab.name">
|
||||
<div v-show="currentTabIndex === index" class="scenes-content">
|
||||
<div class="scene-desc">
|
||||
<div class="speech-title">
|
||||
<img class="icon" src="https://images.health.ufutx.com/202506/18/2874b7295fd3fd2490838369b17affd3.png" />
|
||||
<p>{{ tab.title }}</p>
|
||||
</div>
|
||||
<div class="speech-subtitle">
|
||||
<p v-for="(line, i) in tab.content" :key="i" class="_text">• {{ line }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scene-img">
|
||||
<img :src="tab.image" alt="健康生态" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-1.png" alt="健康优先" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 使命驱动 -->
|
||||
<div v-show="currentTab === 1" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>使命驱动</h3>
|
||||
<p>• 以提升人类生命质量为核心使命</p>
|
||||
<p>• 持续投入研发，推动AI健康技术突破</p>
|
||||
<p>• 让健康管理触达每一个人</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-2.png" alt="使命驱动" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 鼓励创新 -->
|
||||
<div v-show="currentTab === 2" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>鼓励创新</h3>
|
||||
<p>• 建立创新奖励机制，支持员工突破</p>
|
||||
<p>• 与全球科研机构合作，探索前沿技术</p>
|
||||
<p>• 持续优化产品，引领行业创新方向</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-3.png" alt="鼓励创新" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 注重成长 -->
|
||||
<div v-show="currentTab === 3" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>注重成长</h3>
|
||||
<p>• 为员工提供丰富的培训与晋升机会</p>
|
||||
<p>• 助力合作伙伴成长，实现生态共赢</p>
|
||||
<p>• 推动行业人才培养，输出专业标准</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-4.png" alt="注重成长" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 团队精神 -->
|
||||
<div v-show="currentTab === 4" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>团队精神</h3>
|
||||
<p>• 倡导开放协作，打破部门壁垒</p>
|
||||
<p>• 以结果为导向，高效执行</p>
|
||||
<p>• 相互支持，共同攻克行业难题</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-5.png" alt="团队精神" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 创始人精神 -->
|
||||
<div v-show="currentTab === 5" class="values-content">
|
||||
<div class="content-row">
|
||||
<div class="content-text">
|
||||
<h3>创始人精神</h3>
|
||||
<p>• 坚持长期主义，深耕健康领域</p>
|
||||
<p>• 以用户价值为核心，拒绝短视行为</p>
|
||||
<p>• 永葆创业激情，持续突破自我</p>
|
||||
</div>
|
||||
<div class="content-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-values-6.png" alt="创始人精神" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const valueTabs = ['健康优先', '使命驱动', '鼓励创新', '注重成长', '团队精神', '创始人精神']
|
||||
const currentTab = ref(0)
|
||||
const valueTabs = [
|
||||
{
|
||||
title: '健康优先',
|
||||
name: 'HealthFirst',
|
||||
content: [
|
||||
'营造支持、尊重、信任的工作环境',
|
||||
'提供健康咨询、心理咨询等全方位资源',
|
||||
'鼓励健康饮食及运动、良好作息，身心健康是成功基础'
|
||||
],
|
||||
image: 'https://images.health.ufutx.com/202506/20/d65c0b2f59c2b835d14d93c5c2bbb44a.png'
|
||||
},
|
||||
{
|
||||
title: '使命驱动',
|
||||
name: 'MissionDriven',
|
||||
content: ['以创新和品质，帮助人们实现真正的生命健康', '透过科技创新，揭示健康洞见'],
|
||||
image: 'https://images.health.ufutx.com/202506/20/69d87c30d50abe864e32b86c6598d2d1.png'
|
||||
},
|
||||
{
|
||||
title: '鼓励创新',
|
||||
name: 'InnovationEncouraged',
|
||||
content: ['我们鼓励创新的思维及解决办法', '「想」都是问题，「做」才有答案', '拥抱失败，让每次尝试都是学习机会'],
|
||||
image: 'https://images.health.ufutx.com/202506/20/46077ed178489468665dd9c6c3d39104.png'
|
||||
},
|
||||
{
|
||||
title: '注重成长',
|
||||
name: 'GrowthOriented',
|
||||
content: ['鼓励友福伙伴培养成长型思维，成为意见领袖', '发展潜在领导力', '期待具备持续解决问题的能力和强大执行力'],
|
||||
image: 'https://images.health.ufutx.com/202506/20/136362c2dff3844304dd1e96bd36ee03.png'
|
||||
},
|
||||
{
|
||||
title: '团队精神',
|
||||
name: 'TeamSpirit',
|
||||
content: ['开放沟通、互相尊重，人人都是关键角色', '注重跨部门协作，共同承担责任', '团队一起面对挑战、共享成功'],
|
||||
image: 'https://images.health.ufutx.com/202506/20/136362c2dff3844304dd1e96bd36ee03.png'
|
||||
},
|
||||
{
|
||||
title: '创始人精神',
|
||||
name: 'FoundersSpirit',
|
||||
content: ['我们始终坚持创始人精神 —— 主动担当、灵活应变、追求卓越。', '拥有主人翁意识，主动解决问题'],
|
||||
image: 'https://images.health.ufutx.com/202506/20/ba5d18e65df7d1fef4d9be2fdb185c23.png'
|
||||
}
|
||||
]
|
||||
const activeTab = ref(valueTabs[0].name) // 默认选中第一个标签
|
||||
const currentTabIndex = ref(0) // 当前选中标签的下标
|
||||
// 计算属性：当前选中的标签数据
|
||||
const currentTab = computed(() => {
|
||||
return valueTabs[currentTabIndex.value] || valueTabs[0]
|
||||
})
|
||||
const handleTabClick = (tab: any, event: Event) => {
|
||||
console.log(tab.props.name, event)
|
||||
currentTabIndex.value = valueTabs.findIndex(item => item.name === tab.props.name)
|
||||
|
||||
console.log(currentTabIndex.value)
|
||||
// currentPage.value = 1 // 切换标签时重置页码
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.company-values {
|
||||
padding: 80px 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
/* 标签切换样式（还原设计的蓝色下划线） */
|
||||
.news-tabs {
|
||||
.pt(50px);
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
//margin-bottom: 1.04167vw;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 0.5px;
|
||||
background-color: #b5b5b5;
|
||||
z-index: var(--el-index-normal);
|
||||
}
|
||||
}
|
||||
.values-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
background-color: @primary-dark; // 下划线颜色
|
||||
height: 3px;
|
||||
bottom: -10px !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin: 0;
|
||||
|
||||
.el-tabs__nav {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
gap: 100px;
|
||||
|
||||
.el-tabs__item {
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
|
||||
&.is-active {
|
||||
color: @primary-dark; // 激活态文字颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-tabs {
|
||||
// 关键：让选项卡居中
|
||||
:deep(.el-tabs__header) {
|
||||
width: 100%; // 占满容器宽度，为居中提供基础
|
||||
.el-tabs__nav {
|
||||
justify-content: center; // 水平居中对齐
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-scenes {
|
||||
text-align: center;
|
||||
padding: 50px 0;
|
||||
|
||||
.app-title {
|
||||
color: @text-color;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 32px; /* 100% */
|
||||
letter-spacing: 0.32px;
|
||||
//.mb(50px);
|
||||
}
|
||||
|
||||
.scenes-tabs {
|
||||
margin-bottom: 40px;
|
||||
|
||||
span {
|
||||
margin: 0 20px;
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
@ -136,43 +176,75 @@ const currentTab = ref(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
.values-content {
|
||||
.content-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
|
||||
.content-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
.scenes-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 192px;
|
||||
padding: 80px 30px 30px 30px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
|
||||
//background: #00acc1;
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
bottom: 7px;
|
||||
content: ' ';
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
background-image: url('https://images.health.ufutx.com/202506/20/fc55ef830c38d03501fb37bc9f111b71.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
margin: 10px 0;
|
||||
.scene-desc {
|
||||
width: 600px;
|
||||
text-align: left;
|
||||
//padding: 0 40px;
|
||||
.speech-title {
|
||||
color: @text-color;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
display: flex; // 启用 Flex 布局
|
||||
align-items: center; // 子元素垂直居中
|
||||
gap: 10px;
|
||||
.mb(20px);
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.content-img {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.speech-subtitle {
|
||||
color: @text-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
._text {
|
||||
margin-bottom: 10px;
|
||||
color: @text-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.scene-img {
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.content-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.content-text {
|
||||
flex-direction: column;
|
||||
.scene-desc {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
<div class="mv-text">
|
||||
<h2 class="mv-title">使命与愿景</h2>
|
||||
<p class="mv-desc">使命-提升人类生命质量 —— 愿景-成为健康生活方式的引领者</p>
|
||||
<p class="mv-text-detail">
|
||||
友福同享致力于通过AI技术与生命科学的融合，为每个人提供精准、主动的健康管理方案。<br /><br />
|
||||
我们相信，健康是生命的基石，而科技是推动健康进步的核心力量。未来，我们将持续突破创新，构建更完善的健康生态，让“主动健康”成为全民生活方式。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mv-img">
|
||||
<img src="https://images.health.ufutx.com/202506/18/about-mv.png" alt="使命愿景" class="mv-bg-img" />
|
||||
</div>
|
||||
<!-- <div class="mv-img">-->
|
||||
<!-- <img-->
|
||||
<!-- src="https://images.health.ufutx.com/202506/20/d069ddda89077fad7431a6738d97a087.png"-->
|
||||
<!-- alt="使命愿景"-->
|
||||
<!-- class="mv-bg-img"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -22,36 +22,37 @@
|
||||
|
||||
<style scoped lang="less">
|
||||
.mission-vision {
|
||||
padding: 80px 20px;
|
||||
padding: 116px 192px;
|
||||
height: 340px;
|
||||
background: #f5f7fe;
|
||||
|
||||
background-image: url('https://images.health.ufutx.com/202506/20/d069ddda89077fad7431a6738d97a087.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
.mv-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.mv-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
|
||||
.mv-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 20px;
|
||||
color: #313fa8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mv-desc {
|
||||
font-size: @font-size-lg;
|
||||
font-size: 28px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mv-text-detail {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,75 +1,123 @@
|
||||
<template>
|
||||
<section class="partners">
|
||||
<h2 class="section-title">合作伙伴</h2>
|
||||
<p class="section-subtitle">正与众多客户一起创造更多价值</p>
|
||||
<div class="partners-grid">
|
||||
<div v-for="(item, i) in partnerList" :key="i" class="partner-item">
|
||||
<img :src="item.logo" alt="合作伙伴logo" class="partner-logo" />
|
||||
<section class="partner-section">
|
||||
<div class="partner-header">
|
||||
<h2 class="partner-title">合作伙伴</h2>
|
||||
<p class="partner-subtitle">正与众多客户一起创造更多价值</p>
|
||||
</div>
|
||||
<div class="partner-logos">
|
||||
<div v-for="index in 21" :key="index" class="partner-logo-item">
|
||||
<!-- <img :src="logo.src" :alt="logo.alt" class="partner-logo" />-->
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png"
|
||||
alt="新浪健康"
|
||||
class="partner-logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const partnerList = [
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-tencent.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sino.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-alibaba.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-junyi.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sina.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sina.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-acfun.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-acfun.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-sina.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
|
||||
{ logo: 'https://images.health.ufutx.com/202506/18/partner-askdoc.png' }
|
||||
]
|
||||
// 使用提供的图片链接作为所有合作伙伴Logo
|
||||
// const partnerLogos = [
|
||||
// {
|
||||
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
||||
// alt: '新浪健康'
|
||||
// },
|
||||
// {
|
||||
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
||||
// alt: '新浪健康'
|
||||
// },
|
||||
// {
|
||||
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
||||
// alt: '新浪健康'
|
||||
// },
|
||||
// {
|
||||
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
||||
// alt: '新浪健康'
|
||||
// },
|
||||
// {
|
||||
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
||||
// alt: '新浪健康'
|
||||
// },
|
||||
// {
|
||||
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
||||
// alt: '新浪健康'
|
||||
// },
|
||||
// {
|
||||
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
||||
// alt: '新浪健康'
|
||||
// },
|
||||
// {
|
||||
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
||||
// alt: '新浪健康'
|
||||
// }
|
||||
// ]
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.partners {
|
||||
@import '@/styles/global.less';
|
||||
|
||||
.partner-section {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
.partner-header {
|
||||
.my(50px);
|
||||
.partner-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @text-color;
|
||||
margin-bottom: @space-sm;
|
||||
}
|
||||
|
||||
.partner-subtitle {
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
.mt(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.partners-grid {
|
||||
.partner-logos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: @space-xl;
|
||||
justify-items: center;
|
||||
.px(160px);
|
||||
.pb(50px);
|
||||
.partner-logo-item {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.partner-item {
|
||||
.partner-logo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
filter: grayscale(100%);
|
||||
transition: filter 0.3s;
|
||||
width: 230px;
|
||||
//max-height: 60px;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.partner-logos {
|
||||
gap: @space-md;
|
||||
|
||||
.partner-logo-item {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.partner-logo {
|
||||
max-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,13 +3,21 @@
|
||||
<h2 class="section-title">资质认证</h2>
|
||||
<p class="section-subtitle">成立至今获得多项荣誉</p>
|
||||
<div class="carousel-container">
|
||||
<button class="carousel-btn prev" @click="slide(-1)">‹</button>
|
||||
<div class="carousel-track" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
||||
<div v-for="(item, i) in qualifications" :key="i" class="carousel-slide">
|
||||
<img :src="item.img" alt="资质证书" class="slide-img" />
|
||||
<!-- <button class="carousel-btn prev" @click="slide(-1)">‹</button>-->
|
||||
<div class="certificate-section">
|
||||
<div class="certificate-list">
|
||||
<div
|
||||
v-for="(src, index) in certificateImgs"
|
||||
:key="index"
|
||||
class="certificate-item"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mouseleave="activeIndex = -1"
|
||||
>
|
||||
<img :src="src" alt="certificate" :class="{ 'scale-up': activeIndex === index }" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-btn next" @click="slide(1)">›</button>
|
||||
<!-- <button class="carousel-btn next" @click="slide(1)">›</button>-->
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -17,39 +25,39 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const qualifications = ref([
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-1.png' },
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-2.png' },
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-3.png' },
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-4.png' },
|
||||
{ img: 'https://images.health.ufutx.com/202506/18/about-cert-5.png' }
|
||||
])
|
||||
const currentIndex = ref(0)
|
||||
const certificateImgs = [
|
||||
'https://images.health.ufutx.com/202506/20/6972bf0f5da9af6ec4f2b8fba404d59e.png',
|
||||
'https://images.health.ufutx.com/202506/20/6972bf0f5da9af6ec4f2b8fba404d59e.png',
|
||||
'https://images.health.ufutx.com/202506/20/6972bf0f5da9af6ec4f2b8fba404d59e.png', // 中间证书
|
||||
'https://images.health.ufutx.com/202506/20/6972bf0f5da9af6ec4f2b8fba404d59e.png',
|
||||
'https://images.health.ufutx.com/202506/20/6972bf0f5da9af6ec4f2b8fba404d59e.png'
|
||||
]
|
||||
|
||||
const slide = (direction: number) => {
|
||||
currentIndex.value = (currentIndex.value + direction + qualifications.value.length) % qualifications.value.length
|
||||
}
|
||||
const activeIndex = ref(-1)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.qualification {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
//padding: 80px 0px;
|
||||
background-image: url('https://images.health.ufutx.com/202506/20/589c73acbee99940e6e7620096ae0b01.png');
|
||||
background-size: cover;
|
||||
height: 802px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
color: @text-color;
|
||||
padding-top: 55px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
@ -82,5 +90,62 @@ const slide = (direction: number) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
//position: relative;
|
||||
//background: red;
|
||||
}
|
||||
.certificate-section {
|
||||
padding: 172px 0px;
|
||||
//position: absolute;
|
||||
//top: 0;
|
||||
.certificate-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.certificate-item {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 288px;
|
||||
height: auto;
|
||||
border: 4px solid transparent;
|
||||
transform-origin: bottom center; /* 核心：设置缩放原点为底部中心 */
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// 放大样式（中间默认 + hover触发）
|
||||
.scale-up {
|
||||
transform: scale(1.1);
|
||||
//z-index: 10;
|
||||
transform-origin: bottom center; /* 新增，设置缩放原点为底部中心 */
|
||||
z-index: 10;
|
||||
border-color: #4b89dc;
|
||||
box-shadow: 0 8px 24px rgba(75, 137, 220, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.certificate-list {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.certificate-item {
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.scale-up img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,17 +15,17 @@
|
||||
<script setup lang="ts">
|
||||
const healthItems = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/about-redefine-1.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/20/10c734494721ea0a60c3b9c3ebd82a60.png',
|
||||
title: '生命科学+AI的深度融合',
|
||||
desc: '让人体健康管理像科研一样自然'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/about-redefine-2.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/20/10c734494721ea0a60c3b9c3ebd82a60.png',
|
||||
title: '万亿级产业新基建',
|
||||
desc: '从个人健康到城市级智慧医疗的完整生态'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/about-redefine-3.png',
|
||||
icon: 'https://images.health.ufutx.com/202506/20/10c734494721ea0a60c3b9c3ebd82a60.png',
|
||||
title: '人人都拥有的数字健康管家',
|
||||
desc: '让真实有效的健康管理普惠全民'
|
||||
}
|
||||
@ -35,17 +35,18 @@ const healthItems = [
|
||||
<style scoped lang="less">
|
||||
.redefine-health {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
padding: 100px 192px;
|
||||
background: #f5f7fe;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
color: @text-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@ -53,8 +54,7 @@ const healthItems = [
|
||||
.health-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
gap: 30px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
@ -68,25 +68,24 @@ const healthItems = [
|
||||
.health-item {
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
border-radius: @border-radius-lg;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
//border-radius: @border-radius-lg;
|
||||
//box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.item-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: medium;
|
||||
color: @text-color-primary;
|
||||
font-weight: 600;
|
||||
color: @text-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<div class="app-page">
|
||||
<Banner />
|
||||
|
||||
<div class="section-divider">全方位健康生活方式的引领者</div>
|
||||
<FeatureNav />
|
||||
<!-- // 健康设备-->
|
||||
<HealthDevice :device="healthBand" />
|
||||
<!-- //一分钟演讲-->
|
||||
<SpeechModule />
|
||||
<!-- 应用场景-->
|
||||
<HealthDevice :device="bodyScale" />
|
||||
<ApplicationScenes />
|
||||
<!-- 下载-->
|
||||
<DownloadSection />
|
||||
<!-- <FooterContact />-->
|
||||
</div>
|
||||
|
||||
@ -153,10 +153,24 @@ const resetPage = () => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
|
||||
//background: #00acc1;
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
bottom: 7px;
|
||||
content: ' ';
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
background-image: url('https://images.health.ufutx.com/202506/20/fc55ef830c38d03501fb37bc9f111b71.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.scene-desc {
|
||||
width: 600px;
|
||||
text-align: left;
|
||||
padding: 0 40px;
|
||||
//padding: 0 40px;
|
||||
.speech-title {
|
||||
color: @text-color;
|
||||
font-size: 18px;
|
||||
@ -181,7 +195,7 @@ const resetPage = () => {
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
img {
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<h3 class="device-title">{{ device.title }}</h3>
|
||||
<h3 class="device-subtitle">AI精准个性化健康方案服务</h3>
|
||||
<p class="device-desc" v-html="device.desc"></p>
|
||||
<el-button type="success" class="download-btn">立即下载</el-button>
|
||||
<div class="download-btn">立即下载</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus'
|
||||
import FeatureNav from '@/views/App/sections/FeatureNav.vue'
|
||||
// import FeatureNav from '@/views/App/sections/FeatureNav.vue'
|
||||
|
||||
const props = defineProps({
|
||||
device: {
|
||||
@ -92,7 +92,7 @@ const props = defineProps({
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: flex;
|
||||
display: inline-block;
|
||||
padding: 16px 30px;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
跨出社交圈，“一分钟演讲”<br />
|
||||
立即让未来的灵魂伴侣更了解你，轻松打开话题
|
||||
</p>
|
||||
<el-button type="success" class="download-btn">立即下载</el-button>
|
||||
<div class="download-btn">立即下载</div>
|
||||
</div>
|
||||
<div class="speech-img">
|
||||
<!-- <img src="@/assets/speech-app.png" alt="演讲界面" />-->
|
||||
@ -62,7 +62,7 @@ import { ElButton } from 'element-plus'
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: flex;
|
||||
display: inline-block;
|
||||
padding: 16px 30px;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
<div class="tags-header">
|
||||
<h2 class="tags-title">友福AI婚恋-专属单身标签</h2>
|
||||
<p class="tags-subtitle">Right Beside You, They Love Each Other!</p>
|
||||
<el-button type="primary" class="download-btn">立即下载</el-button>
|
||||
<!-- <el-button type="primary" class="download-btn">立即下载</el-button>-->
|
||||
<div class="download-btn">立即下载</div>
|
||||
<div class="tags-icon">
|
||||
<img src="https://images.health.ufutx.com/202506/18/3b16ca61dc63eb22c102aed934301c0a.png" alt="" />
|
||||
</div>
|
||||
@ -58,6 +59,7 @@ import { ElButton } from 'element-plus'
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.download-btn {
|
||||
display: inline-block;
|
||||
padding: 16px 30px;
|
||||
border-radius: 100px;
|
||||
background: var(--Style, #1060ff);
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="success-stories">
|
||||
<h2 class="section-title">就在你身边，他们相爱啦！</h2>
|
||||
<p class="section-subtitle">Right Beside You, They Love Each Other!</p>
|
||||
<el-button type="primary" class="download-btn">立即下载</el-button>
|
||||
<div class="download-btn">立即下载</div>
|
||||
<div class="stories-icon">
|
||||
<img src="https://images.health.ufutx.com/202506/18/1a837037ce7fb8502a211a01e19fbf55.png" alt="" />
|
||||
</div>
|
||||
@ -15,7 +15,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus'
|
||||
// import { ElButton } from 'element-plus'
|
||||
|
||||
// const stories = [
|
||||
// { img: '@/assets/story-1.jpg' },
|
||||
@ -48,6 +48,7 @@ import { ElButton } from 'element-plus'
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: inline-block;
|
||||
padding: 16px 30px;
|
||||
border-radius: 100px;
|
||||
background: var(--Style, #1060ff);
|
||||
|
||||
@ -6,8 +6,10 @@
|
||||
<HealthManagement />
|
||||
<MedicalCooperation />
|
||||
<EnterpriseCooperation />
|
||||
<CooperationConsult />
|
||||
<CooperationConsult :device="cooperateData" />
|
||||
<TalentTraining />
|
||||
<CooperationConsult :device="cooperateDataV2" />
|
||||
|
||||
<CityPartner />
|
||||
</div>
|
||||
</template>
|
||||
@ -22,6 +24,17 @@ import EnterpriseCooperation from './sections/EnterpriseCooperation.vue'
|
||||
import CooperationConsult from './sections/CooperationConsult.vue'
|
||||
import TalentTraining from './sections/TalentTraining.vue'
|
||||
import CityPartner from './sections/CityPartner.vue'
|
||||
const cooperateData = {
|
||||
title: '合作咨询',
|
||||
desc: '欢迎健康产业链上下游企业，以及希望利用AI技术 升级健康产品与服务的企业与我们洽谈合作，共创产业新价值',
|
||||
img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
|
||||
}
|
||||
|
||||
const cooperateDataV2 = {
|
||||
title: '合作咨询',
|
||||
desc: '提供专属健康服务和解决方案',
|
||||
img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
@ -4,90 +4,127 @@
|
||||
<p class="section-subtitle">“拓展城市合伙人，共赢亿级AI健康市场”</p>
|
||||
<div class="partner-banner">
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/18/eco-partner-banner.png"
|
||||
src="https://images.health.ufutx.com/202506/20/6cc0725186ea51776a14c71965f4c64e.png"
|
||||
alt="合伙人Banner"
|
||||
class="banner-img"
|
||||
/>
|
||||
<p class="partner-desc">
|
||||
友福同享作为AI智能健康的领航者，正积极构建覆盖健康生活全场景的智慧解决方案，致力于打造万亿级的AI健康生态共同体。我们现面向全国333个地级行政区，诚挚招募富有远见和实力的城市合伙人，共同开拓AI智能健康管理的蓝海市场。
|
||||
</p>
|
||||
</div>
|
||||
<p class="partner-desc">友福同享诚募城市合伙人，共同开拓AI健康管理蓝海市场。</p>
|
||||
|
||||
<h3 class="support-title">加入友福同享，您将获得 4 大支持</h3>
|
||||
<div class="support-grid">
|
||||
<div v-for="(item, i) in supports" :key="i" class="support-item">
|
||||
<img :src="item.icon" alt="支持图标" class="item-icon" />
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
<p class="item-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
<section class="support-section">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<div
|
||||
v-for="(item, idx) in navItems"
|
||||
:key="idx"
|
||||
class="nav-item"
|
||||
:class="{ active: currentIdx === idx }"
|
||||
@click="currentIdx = idx"
|
||||
@mouseenter="currentIdx = idx"
|
||||
>
|
||||
<div class="icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
|
||||
<span class="title">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容区 -->
|
||||
<div class="content">
|
||||
<div class="text">
|
||||
<h2 class="main-title">{{ navItems[currentIdx].title }}</h2>
|
||||
<p class="desc">{{ navItems[currentIdx].desc }}</p>
|
||||
</div>
|
||||
<!-- <div class="illustration" :style="{ backgroundImage: `url(${navItems[currentIdx].illustration})` }"></div>-->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const supports = [
|
||||
const navItems = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-support-1.png',
|
||||
title: '总部全方位支持',
|
||||
desc: '市场、运营、技术全流程支持'
|
||||
desc: '派遣专业的团队进驻城市，提供从市场拓展、运营管理到技术支持的全方位指导。',
|
||||
icon: 'https://images.health.ufutx.com/202506/20/c1797642f22ab1187e7bf506a6b9507c.png', // 替换为实际图标路径
|
||||
illustration: 'https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png' // 替换为实际插画路径
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-support-2.png',
|
||||
title: '总部直营培训',
|
||||
desc: '专属培训，快速掌握要点'
|
||||
title: '总部直营培训体系',
|
||||
desc: '构建完善的直营培训体系，涵盖产品、运营、营销等多维度专业培训。',
|
||||
icon: 'https://images.health.ufutx.com/202506/20/0e6cc1c38e5e5256860cb2cb6761c085.png',
|
||||
illustration: 'https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-support-3.png',
|
||||
title: '独家方案输出',
|
||||
desc: '定制化AI健康方案'
|
||||
title: '独家解决方案输出',
|
||||
desc: '依托核心技术，定制独家AI健康管理解决方案，满足差异化需求。',
|
||||
icon: 'https://images.health.ufutx.com/202506/20/662d5203d956719006cd477a63e6476b.png',
|
||||
illustration: 'https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-support-4.png',
|
||||
title: '共享万亿机遇',
|
||||
desc: '抢占千亿AI健康市场'
|
||||
title: '共享万亿市场机遇',
|
||||
desc: '携手合作伙伴，共享AI大健康万亿级市场红利，实现互利共赢。',
|
||||
icon: 'https://images.health.ufutx.com/202506/20/d780da8996bc4a771e70300456e4eb5d.png',
|
||||
illustration: 'https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png'
|
||||
}
|
||||
]
|
||||
|
||||
const currentIdx = ref(0)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.city-partner {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
padding: 100px 192px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
color: @text-color;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: 0.32px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.partner-banner {
|
||||
position: relative;
|
||||
|
||||
.banner-img {
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.partner-desc {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
text-align: left;
|
||||
/* 底部导航 0.8透模糊 */
|
||||
backdrop-filter: blur(25px);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 20px;
|
||||
color: @text-color;
|
||||
line-height: 1.8;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
.partner-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
line-height: 1.8;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.support-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: medium;
|
||||
color: @text-color-primary;
|
||||
margin: 60px 0 40px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: @text-color;
|
||||
margin: 100px 0 50px;
|
||||
}
|
||||
.support-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 60px;
|
||||
//display: grid;
|
||||
//grid-template-columns: repeat(4, 1fr);
|
||||
//gap: 40px;
|
||||
//max-width: 1200px;
|
||||
//margin: 0 auto 60px;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -110,7 +147,7 @@ const supports = [
|
||||
.item-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: medium;
|
||||
color: @text-color-primary;
|
||||
color: @text-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-desc {
|
||||
@ -119,4 +156,88 @@ const supports = [
|
||||
}
|
||||
}
|
||||
}
|
||||
.support-section {
|
||||
background: #f9fbff;
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nav-item {
|
||||
background: #eceef8;
|
||||
width: 384px;
|
||||
padding: 20px 30px;
|
||||
.icon {
|
||||
width: 58px;
|
||||
height: 68px;
|
||||
background-size: cover;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: @text-color-secondary;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #f1f3fb;
|
||||
.title {
|
||||
color: #313fa8;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
//align-items: center;
|
||||
//justify-content: space-between;
|
||||
//gap: 80px;
|
||||
height: 558px;
|
||||
background-image: url('https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png');
|
||||
background-size: contain;
|
||||
.text {
|
||||
margin-top: 221px;
|
||||
margin-left: 136px;
|
||||
width: 500px;
|
||||
text-align: left;
|
||||
.main-title {
|
||||
font-size: 50px;
|
||||
color: @text-color;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.desc {
|
||||
font-size: 16px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.illustration {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
padding: 60px 40px;
|
||||
|
||||
.nav-bar {
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.illustration {
|
||||
order: -1;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,35 +1,54 @@
|
||||
<template>
|
||||
<section class="cooperation-consult">
|
||||
<div class="consult-content">
|
||||
<p class="consult-text">欢迎健康产业链企业与我们洽谈合作，共创产业新价值</p>
|
||||
<el-button type="primary" class="consult-btn">合作咨询</el-button>
|
||||
<p class="consult-text">
|
||||
{{ props.device.desc }}
|
||||
</p>
|
||||
<div class="consult-btn">{{ props.device.title }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus'
|
||||
const props = defineProps({
|
||||
device: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
title: '合作咨询',
|
||||
desc: '欢迎健康产业链上下游企业，以及希望利用AI技术 升级健康产品与服务的企业与我们洽谈合作，共创产业新价值',
|
||||
img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
|
||||
})
|
||||
}
|
||||
})
|
||||
// import { ElButton } from 'element-plus'
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.cooperation-consult {
|
||||
background: #2c3e50;
|
||||
color: #fff;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
padding: 60px 192px;
|
||||
text-align: left;
|
||||
background-image: url('https://images.health.ufutx.com/202506/20/c60d98038ab065c2e92dc67b938d45e2.png');
|
||||
background-size: cover;
|
||||
|
||||
.consult-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
max-width: 1066px;
|
||||
//background: red;
|
||||
.consult-text {
|
||||
font-size: @font-size-md;
|
||||
line-height: 1.8;
|
||||
font-size: 36px;
|
||||
line-height: 56px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.consult-btn {
|
||||
padding: 12px 40px;
|
||||
font-size: @font-size-md;
|
||||
width: 152px;
|
||||
color: #313fa8;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
padding: 6px 36px;
|
||||
border-radius: 100px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
.enterprise-cooperation {
|
||||
text-align: center;
|
||||
padding: 100px 0px;
|
||||
background: #f5f7fe;
|
||||
//background: #f5f7fe;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="talent-training">
|
||||
<h2 class="section-title">身心健康管理人才培训</h2>
|
||||
<p class="section-subtitle">创新服务模式，双证加持兼具晋升转接口</p>
|
||||
<p class="section-subtitle">创新健康服务模式，双证加持精准弥补市场缺口</p>
|
||||
<div class="training-grid">
|
||||
<div v-for="(item, i) in trainings" :key="i" class="training-item">
|
||||
<img :src="item.icon" alt="培训图标" class="item-icon" />
|
||||
@ -10,12 +10,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="training-ring">
|
||||
<img src="https://images.health.ufutx.com/202506/18/eco-ring.png" alt="环形图" class="ring-img" />
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/20/ed48d12a7bc1972552d18b90273abc36.png"
|
||||
alt="环形图"
|
||||
class="ring-img"
|
||||
/>
|
||||
<!-- 标签可动态配置，此处简化 -->
|
||||
<div class="ring-labels">
|
||||
<span>你将获得</span>
|
||||
<span>谁适合来参加？</span>
|
||||
</div>
|
||||
<!-- <div class="ring-labels">-->
|
||||
<!-- <span>你将获得</span>-->
|
||||
<!-- <span>谁适合来参加？</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -23,24 +27,24 @@
|
||||
<script setup lang="ts">
|
||||
const trainings = [
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-train-1.png',
|
||||
title: '立足行业前沿',
|
||||
desc: '掌握AI健康管理核心技能'
|
||||
icon: 'https://images.health.ufutx.com/202506/20/65a4a4486473beaf55f754e46dbedc2b.png',
|
||||
title: '立足行业前沿，掌握核心技能',
|
||||
desc: '我们的培训紧密结合在AI健康管理领域的最新应用，让您掌握最前沿的理论知识和实操技能。'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-train-2.png',
|
||||
title: '权威双证加持',
|
||||
desc: '提升职业竞争力'
|
||||
icon: 'https://images.health.ufutx.com/202506/20/4d0176e3676bf19d42af86758faa27ca.png',
|
||||
title: '权威双证加持，提升职业竞争力',
|
||||
desc: '完成培训并通过考核，您将有机会获得国家卫健委《营养指导员》和营养师协会《身心健康管理师》双重权威认证，为您的职业发展增添有力筹码。'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-train-3.png',
|
||||
title: '专业团队赋能',
|
||||
desc: '加速职业成长'
|
||||
icon: 'https://images.health.ufutx.com/202506/20/65a4a4486473beaf55f754e46dbedc2b.png',
|
||||
title: '专业团队赋能，助力职业成长',
|
||||
desc: '我们的培训团队由资深健康管理专家、AI技术专家和行业领军人物组成，为您提供全方位的专业指导和支持。您还将有机会获得企业内部专业人士的协同支持，加速您的职业成长。'
|
||||
},
|
||||
{
|
||||
icon: 'https://images.health.ufutx.com/202506/18/eco-train-4.png',
|
||||
title: '融入万亿生态',
|
||||
desc: '共享发展机遇'
|
||||
icon: 'https://images.health.ufutx.com/202506/20/79041e18678990eea7f343002473a670.png',
|
||||
title: '融入万亿生态，共享发展机遇',
|
||||
desc: '友福同享正积极构建庞大的AI健康生态共同体，完成培训的优秀人才将有机会参与到我们的城市合伙人计划或其他合作项目中，共享行业发展的红利。'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
@ -48,25 +52,24 @@ const trainings = [
|
||||
<style scoped lang="less">
|
||||
.talent-training {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
padding: 100px 192px;
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
color: @text-color;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: @font-size-md;
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.training-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 60px;
|
||||
margin: 0 auto 80px;
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -76,31 +79,33 @@ const trainings = [
|
||||
}
|
||||
}
|
||||
.training-item {
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
border-radius: @border-radius-lg;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
background: #f5f7fe;
|
||||
padding: 100px 30px;
|
||||
position: relative;
|
||||
margin-top: 168px;
|
||||
.item-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -168px;
|
||||
width: 362px;
|
||||
}
|
||||
.item-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: medium;
|
||||
color: @text-color-primary;
|
||||
margin-bottom: 10px;
|
||||
color: @text-color;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.item-desc {
|
||||
text-align: left;
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
.training-ring {
|
||||
position: relative;
|
||||
.ring-img {
|
||||
width: 60%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.ring-labels {
|
||||
@ -116,7 +121,7 @@ const trainings = [
|
||||
gap: 20px;
|
||||
span {
|
||||
font-size: @font-size-xs;
|
||||
color: @text-color-primary;
|
||||
color: @text-color;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 5px 10px;
|
||||
border-radius: @border-radius-md;
|
||||
|
||||
@ -109,7 +109,6 @@ const feedbackList = [
|
||||
@padding: 16px;
|
||||
@gap: 50px;
|
||||
@avatar-size: 60px;
|
||||
@text-color: #333;
|
||||
@subtext-color: #999;
|
||||
@transition: all 0.3s ease;
|
||||
|
||||
|
||||
@ -109,7 +109,6 @@ const feedbackList = [
|
||||
@padding: 16px;
|
||||
@gap: 50px;
|
||||
@avatar-size: 60px;
|
||||
@text-color: #333;
|
||||
@subtext-color: #999;
|
||||
@transition: all 0.3s ease;
|
||||
|
||||
|
||||
@ -9,9 +9,6 @@
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<p>超90%以上客户实现长期的健康状态优化</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -21,7 +18,7 @@
|
||||
|
||||
<style scoped lang="less">
|
||||
.one-stop-solution {
|
||||
padding: 50px 20px;
|
||||
padding: 50px 20px 0 20px;
|
||||
text-align: center;
|
||||
background: radial-gradient(83.44% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
|
||||
.mt(20px);
|
||||
|
||||
112
src/views/News/ArticleDetail.vue
Normal file
112
src/views/News/ArticleDetail.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<section class="article-content">
|
||||
<!-- 文章头部信息 -->
|
||||
<div class="article-header">
|
||||
<h1 class="article-title">数字健康领域的长期主义者：未来医疗100强友福同享持续领跑</h1>
|
||||
<div class="meta-info">
|
||||
<span>发布时间：2025-06-20</span>
|
||||
<span>浏览次数：8604</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 封面图 -->
|
||||
<div class="article-banner">
|
||||
<img src="https://images.health.ufutx.com/202506/20/9fd62f318b50764c02c58356dc426d44.png" alt="AI健康领域" />
|
||||
</div>
|
||||
|
||||
<!-- 正文内容 -->
|
||||
<div class="article-body">
|
||||
<p>
|
||||
《1分钟演讲》是一款创新的智能辅助应用，专注于强化公众演讲技能，助力用户高效构思并精准传达思想。它集演讲与实战练习于一体，为用户提供全方位、一站式的自我提升平台。1分钟演讲，这个看似简短却充满力量的表达方式，是真实自我与世界快速沟通的桥梁，也是能快速缩短社交距离、增进信任的神奇钥匙。无论是事业发展、社交拓展、寻找灵魂伴侣，还是个人品牌建设，这一功能都能成为你强而有力的社交工具，帮助你快速脱颖而出，让更多人认识并记住你。友福同享凭借多年在全病程管理、“AI＋医疗”领域的卓越成就，稳列未来医疗100强榜单第一梯队！同时，微脉自主研发的CareAI荣膺最佳数字技术产品，获2025未来医疗100强创新奖。
|
||||
</p>
|
||||
|
||||
<p>
|
||||
「未来医疗100强」榜单以前瞻性、专业性和国际视野为核心，被誉为“医疗创新领域的风向标”，代表未来5-10年全球医疗产业的新势力与变革方向。
|
||||
</p>
|
||||
|
||||
<p>
|
||||
“让医疗服务不再难”
|
||||
是微脉始终如一的使命。微脉从全人群、全方位、全周期出发，专攻医疗服务的现有之短板和就医者的健康服务需求缺口，补足诊后、检后、术后、院后管理空白。
|
||||
</p>
|
||||
<p>
|
||||
在突破医疗健康行业各阶段难点，拓展数字健康领域可能性上，微脉做了许多从0到1的创造和尝试✨，致力于打造中国特色的管理式医疗健康组织（C-CMO）。
|
||||
</p>
|
||||
<p>
|
||||
未来，友福同享将持续深化"AI+全病程管理"创新模式，助力公立医院高质量发展，加快构建"预防-诊疗-康复"全周期健康服务生态，让优质医疗服务惠及更多百姓。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 若需动态加载，可在此处通过接口请求数据
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.article-content {
|
||||
padding: 200px 192px 100px 192px;
|
||||
//max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
// 标题区域
|
||||
.article-header {
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 0.3px solid #b5b5b5;
|
||||
.article-title {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: @text-color;
|
||||
margin-bottom: 10px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.meta-info {
|
||||
font-size: 18px;
|
||||
color: @text-color-secondary;
|
||||
span {
|
||||
margin-right: 20px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 封面图
|
||||
.article-banner {
|
||||
margin: 30px 0;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// 正文排版
|
||||
.article-body {
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 24px;
|
||||
text-indent: 2em; // 首行缩进（可选）
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
padding: 40px 20px;
|
||||
.article-header {
|
||||
.article-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.article-body {
|
||||
p {
|
||||
text-indent: 0; // 移动端取消缩进
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -19,8 +19,8 @@
|
||||
<div class="news-info">
|
||||
<h3 class="news-title">{{ item.title }}</h3>
|
||||
<h3 class="news-label">友福新闻</h3>
|
||||
<div class="news-wrap">
|
||||
<el-button type="primary" class="view-btn" plain color="#1060FF"> 查看详情</el-button>
|
||||
<div class="news-wrap" @click="goToArticle">
|
||||
<div class="view-btn">查看详情</div>
|
||||
<div class="news-date">
|
||||
<img
|
||||
class="icon"
|
||||
@ -104,7 +104,17 @@ const filteredNews = computed(() => {
|
||||
const start = (currentPage.value - 1) * pageSize.value
|
||||
return list.slice(start, start + pageSize.value)
|
||||
})
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
// 1. 初始化路由实例
|
||||
const router = useRouter()
|
||||
|
||||
// 2. 跳转方法（命名路由方式，需提前配置路由）
|
||||
const goToArticle = () => {
|
||||
router.push({
|
||||
path: '/news/12' // 也可直接写路径
|
||||
})
|
||||
}
|
||||
// 分页事件
|
||||
const handleSizeChange = (val: number) => {
|
||||
pageSize.value = val
|
||||
@ -243,13 +253,14 @@ const resetPage = () => {
|
||||
}
|
||||
}
|
||||
.view-btn {
|
||||
width: 100px;
|
||||
align-self: flex-start;
|
||||
padding: @space-xs @space-md;
|
||||
font-size: @font-size-sm;
|
||||
background-color: @bg-color;
|
||||
display: flex;
|
||||
padding: 6px 16px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: @primary-dark;
|
||||
//padding: 6px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--1060-ff, #1060ff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,19 +14,23 @@ export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
|
||||
legacy({
|
||||
targets: ['ie >= 11'],
|
||||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
|
||||
modernPolyfills: true // 启用现代浏览器的 polyfill
|
||||
}),
|
||||
// 仅在生产环境启用 legacy 插件
|
||||
...(process.env.NODE_ENV === 'production'
|
||||
? [
|
||||
legacy({
|
||||
targets: ['ie >= 11'],
|
||||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
|
||||
modernPolyfills: true
|
||||
})
|
||||
]
|
||||
: []),
|
||||
AutoImport({
|
||||
imports: ['vue', 'vue-router'], // 自动导入 Vue、Vue Router API
|
||||
// 自动导入 Vue 相关函数，以及 ElementPlus 的相关函数等
|
||||
resolvers: [
|
||||
ElementPlusResolver({
|
||||
importStyle: 'sass', // 可选：按需导入样式
|
||||
directives: true, // 导入指令
|
||||
version: '2.3.6' // 版本号
|
||||
importStyle: 'sass',
|
||||
directives: true // 导入指令
|
||||
})
|
||||
]
|
||||
}),
|
||||
@ -40,14 +44,18 @@ export default defineConfig({
|
||||
],
|
||||
dirs: ['src/components'] // 自动扫描组件目录
|
||||
}),
|
||||
viteImagemin({
|
||||
// 基础压缩配置（可根据需求扩展）
|
||||
gifsicle: { optimizationLevel: 7 },
|
||||
optipng: { optimizationLevel: 7 },
|
||||
mozjpeg: { quality: 80 },
|
||||
pngquant: { quality: [0.8, 0.9] },
|
||||
svgo: { plugins: [{ name: 'removeViewBox' }] }
|
||||
})
|
||||
// 开发环境暂时禁用图片压缩插件
|
||||
...(process.env.NODE_ENV !== 'development'
|
||||
? [
|
||||
viteImagemin({
|
||||
gifsicle: { optimizationLevel: 7 },
|
||||
optipng: { optimizationLevel: 7 },
|
||||
mozjpeg: { quality: 80 },
|
||||
pngquant: { quality: [0.8, 0.9] },
|
||||
svgo: { plugins: [{ name: 'removeViewBox' }] }
|
||||
})
|
||||
]
|
||||
: [])
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0', // 允许外部访问
|
||||
@ -66,7 +74,7 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['element-plus'] // 预构建依赖
|
||||
// include: ['element-plus'] // 预构建依赖
|
||||
},
|
||||
build: {
|
||||
chunkSizeWarningLimit: 1000, // 增大分块警告阈值
|
||||
@ -74,31 +82,13 @@ export default defineConfig({
|
||||
// external: ['element-plus', 'element-plus/dist/index.css'], // 排除 Element Plus
|
||||
// external: ['element-plus'], // 排除 Element Plus 从打包中
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
// 只打包实际使用的 Element Plus 组件
|
||||
// if (id.includes('element-plus/es/components')) {
|
||||
// const componentName = id.split('element-plus/es/components/')[1].split('/')[0]
|
||||
// return `element-${componentName}`
|
||||
// }
|
||||
if (id.includes('node_modules')) {
|
||||
// 将第三方库单独分包（如 axios、vue 等）
|
||||
return id.split('node_modules/')[1].split('/')[0]
|
||||
}
|
||||
// 1. 将 Element Plus 整体打包为一个 chunk
|
||||
// 只分割实际使用的库
|
||||
// if (id.includes('vue') || id.includes('vue-router') || id.includes('pinia')) {
|
||||
// return 'vue-vendor'
|
||||
// }
|
||||
//
|
||||
// if (id.includes('axios') || id.includes('nprogress')) {
|
||||
// return 'utils'
|
||||
// }
|
||||
//
|
||||
// // 不强制分割第三方依赖，让 Vite 自动处理
|
||||
// if (id.includes('node_modules') && !id.includes('@babel') && !id.includes('@types')) {
|
||||
// return undefined // 取消手动分割
|
||||
// }
|
||||
}
|
||||
manualChunks: undefined // 取消手动分割，使用 Vite 自动策略
|
||||
// manualChunks(id) {
|
||||
// if (id.includes('node_modules')) {
|
||||
// 将第三方库单独分包（如 axios、vue 等）
|
||||
// return id.split('node_modules/')[1].split('/')[0]
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -107,6 +97,7 @@ export default defineConfig({
|
||||
scss: {
|
||||
// 关键配置：强制 Sass 使用现代 API（二选一，推荐 modern-compiler）
|
||||
api: 'modern-compiler'
|
||||
// additionalData: `@import "@/styles/element-variables.scss";`
|
||||
// api: 'modern' // 轻量版，适合简单场景
|
||||
},
|
||||
less: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user