feat: 20250623 添加完整数据,动画相关

This commit is contained in:
mac·ufutx 2025-06-23 19:26:58 +08:00
parent aed3a0b724
commit a4268e6f05
13 changed files with 460 additions and 186 deletions

3
components.d.ts vendored
View File

@ -9,11 +9,14 @@ export {}
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs'] ElTabs: typeof import('element-plus/es')['ElTabs']

59
src/utils/navigation.ts Normal file
View File

@ -0,0 +1,59 @@
// src/utils/navigation.ts
import { useRouter } from 'vue-router'
/**
*
* @param to -
* @param replace -
*/
export const navigateTo = (to: string | { name: string }, replace = false) => {
const router = useRouter()
replace ? router.replace(to) : router.push(to)
}
/**
*
* @param url - URL
* @param target -
*/
export const openExternalLink = (url: string, target: '_blank' | '_self' = '_blank') => {
if (target === '_blank') {
window.open(url, '_blank', 'noopener,noreferrer')
} else {
window.location.href = url
}
}
/**
*
*/
// export const goBack = () => {
// useRouter().back()
// }
//
// <template>
// <div>
// <button @click="goToProduct(123)">查看产品</button>
// <button @click="openWebsite">访问官网</button>
// <button @click="back">返回</button>
// </div>
// </template>
//
// <script setup lang="ts">
// import { navigateTo, openExternalLink, goBack } from '@/utils/navigation';
//
// // 跳转到命名路由
// const goToProduct = (id: number) => {
// navigateTo({ name: 'product', params: { id } });
// };
//
// // 打开外部链接
// const openWebsite = () => {
// openExternalLink('https://ufutx.com');
// };
//
// // 返回上一页
// const back = () => {
// goBack();
// };
// </script>

View File

@ -6,7 +6,7 @@
<CompanyTimeline /> <CompanyTimeline />
<!-- 我们重新定义健康未来--> <!-- 我们重新定义健康未来-->
<RedefineHealth /> <RedefineHealth />
<!-- 企业价值观--> <!-- 应用场景-->
<CompanyValues /> <CompanyValues />
<!-- 资质认证--> <!-- 资质认证-->
<QualificationCarousel /> <QualificationCarousel />

View File

@ -5,13 +5,8 @@
<p class="partner-subtitle">正与众多客户一起创造更多价值</p> <p class="partner-subtitle">正与众多客户一起创造更多价值</p>
</div> </div>
<div class="partner-logos"> <div class="partner-logos">
<div v-for="index in 21" :key="index" class="partner-logo-item"> <div v-for="(item, index) in partnerLogos" :key="index" class="partner-logo-item">
<!-- <img :src="logo.src" :alt="logo.alt" class="partner-logo" />--> <img :src="item.src" :alt="item.alt" class="partner-logo" />
<img
src="https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png"
alt="新浪健康"
class="partner-logo"
/>
</div> </div>
</div> </div>
</section> </section>
@ -19,40 +14,48 @@
<script setup lang="ts"> <script setup lang="ts">
// 使Logo // 使Logo
// const partnerLogos = [ const partnerLogos = [
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/9e8adafbca3355fb37a63ddc2ce5573b.png',
// alt: '' alt: '安源玻璃'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/1aa6d57409ae8557e0fae47d20f2eefd.png',
// alt: '' alt: '蟹尊享'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/56649b69b738d04d9a99cf386b88d61b.png',
// alt: '' alt: '大连海洋大学'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/6be17a225cf2539354cbb396f314b86c.png',
// alt: '' alt: '青柠檬教育'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/ffd7b2db7143e2d8796fd5ac145a95a6.png',
// alt: '' alt: '骏德酒业'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/6c83747d195f69fcfc56aa1d2c20b16c.png',
// alt: '' alt: '磐石投资集团'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/28c9c8eefbeb1968950539a2ad98ae28.png',
// alt: '' alt: '华进ACIP'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/b12ce669ae4f2d1ff6ca839234723fda.png',
// alt: '' alt: '纽斯葆广赛NPGS'
// } },
// ] {
src: 'https://images.health.ufutx.com/202506/23/abc344decb1d3208dbce771f05e7cf19.png',
alt: '格林汇能GLHN'
},
{
src: 'https://images.health.ufutx.com/202506/23/12b7a6e0a42da15a7e82532d03cb9e8a.png',
alt: '友宏科技'
}
]
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@ -61,9 +64,10 @@
.partner-section { .partner-section {
width: 100%; width: 100%;
text-align: center; text-align: center;
background: #f5f7fe;
.pt(50px);
.partner-header { .partner-header {
.my(50px); .mb(50px);
.partner-title { .partner-title {
font-size: @font-size-xxl; font-size: @font-size-xxl;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
@ -80,24 +84,27 @@
.partner-logos { .partner-logos {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
gap: @space-xl; gap: 27.5px;
justify-items: center; justify-items: center;
.px(160px); .px(190px);
.pb(50px); .pb(50px);
.partner-logo-item { .partner-logo-item {
width: 100%; width: 100%;
height: 80px; //height: 80px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.partner-logo { .partner-logo {
width: 230px;
//max-height: 60px;
object-fit: contain; object-fit: contain;
transition: transform 0.3s ease; transition: transform 0.3s ease;
display: flex;
width: 286px;
justify-content: center;
align-items: center;
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
} }

View File

@ -4,7 +4,7 @@
<div class="section-divider">全方位健康生活方式的引领者</div> <div class="section-divider">全方位健康生活方式的引领者</div>
<FeatureNav /> <FeatureNav />
<!-- // --> <!-- // -->
<HealthDevice :device="healthBand" /> <!-- <HealthDevice :device="healthBand" />-->
<!-- //--> <!-- //-->
<SpeechModule /> <SpeechModule />
<!-- 应用场景--> <!-- 应用场景-->

View File

@ -8,48 +8,27 @@
<!-- </div>--> <!-- </div>-->
<!-- 标签切换友福动态 / 媒体报道 --> <!-- 标签切换友福动态 / 媒体报道 -->
<el-tabs v-model="activeTab" class="news-tabs" @tab-click="resetPage"> <el-tabs v-model="activeTab" class="news-tabs">
<el-tab-pane label="友福健康生态" name="dynamic"></el-tab-pane> <el-tab-pane v-for="scene in scenes" :key="scene.name" :label="scene.title" :name="scene.name">
<el-tab-pane label="幸福婚恋" name="report"></el-tab-pane> <div class="scenes-content">
<el-tab-pane label="个人成长" name="growth"></el-tab-pane> <!-- 文字描述区 -->
</el-tabs> <div class="scene-desc">
<div class="speech-title">
<div v-show="currentTab === 0" class="scenes-content"> <img class="icon" src="https://images.health.ufutx.com/202506/18/2874b7295fd3fd2490838369b17affd3.png" />
<div class="scene-desc"> <p>{{ scene.title }}</p>
<div class="speech-title"> </div>
<img class="icon" src="https://images.health.ufutx.com/202506/18/2874b7295fd3fd2490838369b17affd3.png" /> <ul class="speech-content">
<p>友福健康生态</p> <li v-for="(line, i) in scene.content" :key="i">{{ line }}</li>
</ul>
<!-- <p class="speech-subtitle" v-html="scene.desc"></p>-->
</div>
<!-- 图片展示区 -->
<div class="scene-img">
<img :src="scene.image" :alt="scene.title" />
</div>
</div> </div>
<p class="speech-subtitle"> </el-tab-pane>
AI精准个性化健康方案服务透过友福七维AI健康修复系统分析多维度身心健康数据量身打造专属的精准健康管理方案<br /> </el-tabs>
智能穿戴设备数据监测搭载AI模型算法的智能穿戴设备医用级精度实时监测您的体温睡眠心率血氧血压等多项生理参数时刻守护您的身心健康<br />
友福商城精选高品质值得信赖的健康生活好物为您的健康生活严格把关
</p>
</div>
<div class="scene-img">
<img src="https://images.health.ufutx.com/202506/18/d2b5ca33bd970f64a6301fa75ae2eb22.png" alt="健康生态" />
</div>
</div>
<div v-show="currentTab === 1" class="scenes-content">
<div class="scene-desc">
<p class="speech-title">
幸福婚恋板块专注为单身用户打造高效真实的交友环境通过AI精准匹配身份验证体系以及个性化社交标签
</p>
<p>帮助用户快速找到契合的伴侣同时提供恋爱指导关系维护等延伸服务让爱情更长久</p>
</div>
<div class="scene-img">
<!-- <img src="@/assets/scene-dating.png" alt="幸福婚恋" />-->
</div>
</div>
<div v-show="currentTab === 2" class="scenes-content">
<div class="scene-desc">
<p>个人成长模块聚焦用户的职业与个人能力提升提供AI驱动的演讲训练知识学习以及社交技巧课程</p>
<p>帮助用户突破社交瓶颈提升自信在职业与生活中实现全面成长</p>
</div>
<div class="scene-img">
<!-- <img src="@/assets/scene-growth.png" alt="个人成长" />-->
</div>
</div>
</section> </section>
</template> </template>
@ -58,9 +37,49 @@ import { ref } from 'vue'
const tabs = ['友福健康生态', '幸福婚恋', '个人成长'] const tabs = ['友福健康生态', '幸福婚恋', '个人成长']
const activeTab = ref('dynamic') // //
const currentTab = ref(0) const currentTab = ref(0)
//
const scenes = ref([
{
name: 'dynamic',
title: '友福健康生态',
content: [
'AI精准个性化健康方案服务透过友福七维AI健康修复系统分析多维度身心健康数据量身打造专属的精准健康管理方案。',
'智能穿戴设备数据监测搭载AI模型算法的智能穿戴设备医用级精度实时监测您的体温、睡眠、心率、血氧、血压等多项生理参数时刻守护您的身心健康。'
],
desc:
'AI精准个性化健康方案服务透过友福七维AI健康修复系统分析多维度身心健康数据量身打造专属的精准健康管理方案。\n' +
'智能穿戴设备数据监测搭载AI模型算法的智能穿戴设备医用级精度实时监测您的体温、睡眠、心率、血氧、血压等多项生理参数时刻守护您的身心健康。',
image: 'https://images.health.ufutx.com/202506/18/d2b5ca33bd970f64a6301fa75ae2eb22.png'
},
{
name: 'report',
title: '幸福婚恋',
content: [
'婚恋单身标签:透过清晰的“单身标签”功能,帮助您快速找到与您有共同话题和兴趣的潜在伴侣。',
'AI婚恋算法配对服务AI精准匹配个性与偏好为您推荐最合适的灵魂伴侣提供高效且真诚的交友体验。'
],
desc:
'婚恋单身标签:透过清晰的“单身标签”功能,帮助您快速找到与您有共同话题和兴趣的潜在伴侣。\n' +
'AI婚恋算法配对服务AI精准匹配个性与偏好为您推荐最合适的灵魂伴侣提供高效且真诚的交友体验。',
image: 'https://images.health.ufutx.com/202506/23/b01c2ce25e34f80d499f0488d034b00b.png'
},
{
name: 'growth',
title: '个人成长',
content: [
'一分钟演讲成长记录:提供展现真实自我的平台,记录您每一次的表达与成长,分享您的精彩故事。\n' +
'每个模块对应相关的APP画面UI设计'
],
desc:
'一分钟演讲成长记录:提供展现真实自我的平台,记录您每一次的表达与成长,分享您的精彩故事。\n' +
'每个模块对应相关的APP画面UI设计',
image: 'https://images.health.ufutx.com/202506/23/b07f55c7fd136392763729b9782f7776.png'
}
])
const activeTab = ref(scenes.value[0].name)
const resetPage = () => { const resetPage = () => {
// currentPage.value = 1 // // currentPage.value = 1 //
} }
@ -188,6 +207,7 @@ const resetPage = () => {
.speech-subtitle { .speech-subtitle {
color: @text-color; color: @text-color;
font-size: 14px; font-size: 14px;
white-space: pre-wrap;
} }
} }
@ -209,4 +229,24 @@ const resetPage = () => {
} }
} }
} }
.speech-content {
list-style: none;
padding: 0;
font-size: 18px;
li {
font-size: 14px;
color: @text-color-secondary;
line-height: 25px;
position: relative;
padding-left: 12px;
white-space: pre-wrap;
&::before {
// ·
content: '·';
font-size: 18px;
position: absolute;
left: 0;
}
}
}
</style> </style>

View File

@ -1,50 +1,103 @@
<template> <template>
<div class="feature-nav"> <section>
<div <div class="feature-nav">
v-for="(item, index) in navList" <div
:key="index" v-for="(item, index) in navList"
class="nav-item" :key="index"
:class="{ active: item.active }" class="nav-item"
@click="handleSelect(index)" :class="{ active: item.active }"
> @click="handleSelect(index)"
<div class="nav-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div> @mouseenter="handleSelect(index)"
<span class="nav-text">{{ item.text }}</span> >
<div class="nav-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
<span class="nav-text">{{ item.text }}</span>
</div>
</div> </div>
</div> <div class="health-device">
<div class="device-content">
<div class="device-img">
<img :src="navList[activeIndex].center.deviceImg" alt="设备界面" />
</div>
<div class="device-info">
<h3 class="device-title">{{ navList[activeIndex].center.title }}</h3>
<h3 class="device-subtitle">{{ navList[activeIndex].center.subtitle }}</h3>
<p class="device-desc" v-html="navList[activeIndex].center.description"></p>
<div class="download-btn" @click="openReport">立即下载</div>
</div>
</div>
</div>
</section>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { openExternalLink } from '@/utils/navigation.ts'
const activeIndex = ref(0)
const navList = ref([ const navList = ref([
{ {
text: '健康手环', text: '健康手环',
active: true, active: true,
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png' icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png',
center: {
navLabel: '健康手环', //
title: '健康手环', //
subtitle: 'AI精准个性化健康方案服务', //
description: '智能穿戴设备数据监测<br>健康手环 你的专属健康管家,智能体脂秤、精准计算身体状态', // <br>
deviceImg: 'https://images.health.ufutx.com/202506/23/c14a55da8a21ec3712d768cd052b7220.png' //
}
}, },
{ {
text: '智能体脂秤', text: '智能体脂秤',
active: false, active: false,
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png' icon: 'https://images.health.ufutx.com/202506/23/0ed7ffaa2eb0116dd46b6f1597795766.png',
center: {
title: '智能体脂秤', //
subtitle: 'AI精准计算身体状态', //
description: '智能穿戴设备数据监测<br>健康手环 你的专属健康管家,智能体脂秤、精准计算身体状态', // <br>
deviceImg: 'https://images.health.ufutx.com/202506/23/13d992813c70c5674658581144a4c17f.png' //
}
}, },
{ {
text: '商城', text: '商城',
active: false, active: false,
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png' icon: 'https://images.health.ufutx.com/202506/23/0fcdeadda0440375eab9c27e67de79f7.png',
center: {
title: '自用商城', //
subtitle: '品质生活 触手可得', //
description: '拒绝虚假营销|确保抄底入手<br>质量管控|商家严选|实物鉴别|售后无忧', // <br>
deviceImg: 'https://images.health.ufutx.com/202506/23/4b87bf45e69411e4377929d38deb2d3f.png' //
}
}, },
{ {
text: '个人成长', text: '个人成长',
active: false, active: false,
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png' icon: 'https://images.health.ufutx.com/202506/23/3c527e6e644a46edc4164616d0b4dc3e.png',
center: {
title: '个人成长1分钟演讲', //
subtitle: '提升自我 开口就是100分', //
description: '模拟真实演讲场景<br>每日数据同步更行,你的努力时间都看得见!', // <br>
deviceImg: 'https://images.health.ufutx.com/202506/23/79605e4b83e27dfa3c701df8d1f3baa0.png' //
}
}, },
{ {
text: '单身标签', text: '单身标签',
active: false, active: false,
icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png' icon: 'https://images.health.ufutx.com/202506/23/b42d943c5454dc8abfcbd098a7a07e92.png',
center: {
title: '单身标签', //
subtitle: '爱的序幕由此拉开', //
description: '单身徽章,单身身份之耀,社交吸睛磁石,引同频邂逅。', // <br>
deviceImg: 'https://images.health.ufutx.com/202506/23/1ac061f59d86088b7233b7b7d03de3a0.png' //
}
} }
]) ])
//
const openReport = () => {
openExternalLink('https://sj.qq.com/appdetail/com.ufutx.lovehealth', '_blank')
}
const handleSelect = (index: number) => { const handleSelect = (index: number) => {
activeIndex.value = index
navList.value.forEach((item, i) => { navList.value.forEach((item, i) => {
item.active = i === index item.active = i === index
}) })
@ -80,8 +133,8 @@ const handleSelect = (index: number) => {
} }
.nav-icon { .nav-icon {
width: 12px; width: 22px;
height: 20px; height: 22px;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -116,6 +169,94 @@ const handleSelect = (index: number) => {
} }
} }
.health-device {
padding: 50px 192px 80px 192px;
background: #fff;
.section-divider {
text-align: center;
font-size: 50px;
color: @text-color;
font-weight: bold;
}
.device-content {
display: flex;
align-items: center;
//justify-content: space-between;
gap: 132px;
.device-img {
//flex: 1;
//text-align: center;
width: 900px;
height: 716px;
overflow: hidden;
border-radius: 10px;
img {
width: 100%;
background: #f6fffa;
}
}
.device-info {
flex: 1;
text-align: left;
.device-title {
color: #18ca6e;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.device-subtitle {
color: #0e0e0e;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.device-desc {
color: var(--66676-c, #66676c);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 36px; /* 180% */
text-transform: capitalize;
.my(30px);
}
.download-btn {
display: inline-block;
padding: 16px 30px;
align-items: center;
gap: 20px;
border-radius: 100px;
border: 1px solid var(--18-ca-6-e, #18ca6e);
background: #18ca6e;
color: #fff;
font-size: 20px;
font-weight: bold;
}
}
}
@media (max-width: @tablet-breakpoint) {
flex-direction: column;
padding: 40px 20px;
.device-content {
flex-direction: column;
text-align: center;
.device-info {
.device-desc {
max-width: 100%;
}
}
}
}
}
/* 响应式适配 */ /* 响应式适配 */
@media (max-width: @tablet-breakpoint) { @media (max-width: @tablet-breakpoint) {
.feature-nav { .feature-nav {

View File

@ -8,7 +8,7 @@
<h3 class="device-title">{{ device.title }}</h3> <h3 class="device-title">{{ device.title }}</h3>
<h3 class="device-subtitle">AI精准个性化健康方案服务</h3> <h3 class="device-subtitle">AI精准个性化健康方案服务</h3>
<p class="device-desc" v-html="device.desc"></p> <p class="device-desc" v-html="device.desc"></p>
<div class="download-btn">立即下载</div> <div class="download-btn" @click="openReport">立即下载</div>
</div> </div>
</div> </div>
</section> </section>
@ -16,6 +16,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ElButton } from 'element-plus' import { ElButton } from 'element-plus'
import { openExternalLink } from '@/utils/navigation.ts'
// import FeatureNav from '@/views/App/sections/FeatureNav.vue' // import FeatureNav from '@/views/App/sections/FeatureNav.vue'
const props = defineProps({ const props = defineProps({
@ -28,7 +29,10 @@ const props = defineProps({
img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png' img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
}) })
} }
}) }) //
const openReport = () => {
openExternalLink('https://sj.qq.com/appdetail/com.ufutx.lovehealth', '_blank')
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">

View File

@ -8,7 +8,7 @@
跨出社交圈一分钟演讲<br /> 跨出社交圈一分钟演讲<br />
立即让未来的灵魂伴侣更了解你轻松打开话题 立即让未来的灵魂伴侣更了解你轻松打开话题
</p> </p>
<div class="download-btn">立即下载</div> <div class="download-btn" @click="openReport">立即下载</div>
</div> </div>
<div class="speech-img"> <div class="speech-img">
<!-- <img src="@/assets/speech-app.png" alt="演讲界面" />--> <!-- <img src="@/assets/speech-app.png" alt="演讲界面" />-->
@ -18,7 +18,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ElButton } from 'element-plus' import { openExternalLink } from '@/utils/navigation.ts'
//
const openReport = () => {
openExternalLink('https://sj.qq.com/appdetail/com.ufutx.lovehealth', '_blank')
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">

View File

@ -1,15 +1,24 @@
<template> <template>
<div class="ecosystem-page"> <div class="ecosystem-page">
<!-- // -->
<Banner /> <Banner />
<!-- // -->
<CoreAdvantages /> <CoreAdvantages />
<!-- // -->
<RegionCooperation /> <RegionCooperation />
<!-- // -->
<HealthManagement /> <HealthManagement />
<!-- // -->
<MedicalCooperation /> <MedicalCooperation />
<!-- // -->
<EnterpriseCooperation /> <EnterpriseCooperation />
<!-- // -->
<CooperationConsult :device="cooperateData" /> <CooperationConsult :device="cooperateData" />
<!-- // -->
<TalentTraining /> <TalentTraining />
<!-- // -->
<CooperationConsult :device="cooperateDataV2" /> <CooperationConsult :device="cooperateDataV2" />
<!-- // -->
<CityPartner /> <CityPartner />
</div> </div>
</template> </template>

View File

@ -32,12 +32,11 @@
</div> </div>
<!-- 主体内容区 --> <!-- 主体内容区 -->
<div class="content"> <div class="content" :style="{ backgroundImage: `url(${navItems[currentIdx].illustration})` }">
<div class="text"> <div class="text">
<h2 class="main-title">{{ navItems[currentIdx].title }}</h2> <h2 class="main-title">{{ navItems[currentIdx].title }}</h2>
<p class="desc">{{ navItems[currentIdx].desc }}</p> <p class="desc">{{ navItems[currentIdx].desc }}</p>
</div> </div>
<!-- <div class="illustration" :style="{ backgroundImage: `url(${navItems[currentIdx].illustration})` }"></div>-->
</div> </div>
</section> </section>
</div> </div>
@ -54,21 +53,23 @@ const navItems = [
}, },
{ {
title: '总部直营培训体系', title: '总部直营培训体系',
desc: '构建完善的直营培训体系,涵盖产品、运营、营销等多维度专业培训。', desc: '我们提供完善的总部直营培训服务,确保您的团队能够熟练掌握我们的产品和服务,为用户提供高品质的体验。',
icon: 'https://images.health.ufutx.com/202506/20/0e6cc1c38e5e5256860cb2cb6761c085.png', icon: 'https://images.health.ufutx.com/202506/20/0e6cc1c38e5e5256860cb2cb6761c085.png',
illustration: 'https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png' illustration: 'https://images.health.ufutx.com/202506/23/1d755208e31271f84983d1d8f46f70a9.png'
}, },
{ {
title: '独家解决方案输出', title: '独家解决方案输出',
desc: '依托核心技术定制独家AI健康管理解决方案满足差异化需求。', desc: '获得领先的友福七维AI健康修复系统的完整输出包括服务培训和运营模式。',
icon: 'https://images.health.ufutx.com/202506/20/662d5203d956719006cd477a63e6476b.png', icon: 'https://images.health.ufutx.com/202506/20/662d5203d956719006cd477a63e6476b.png',
illustration: 'https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png' illustration: 'https://images.health.ufutx.com/202506/23/e8819411e2fdd656216e3fb30e64db8a.png'
}, },
{ {
title: '共享万亿市场机遇', title: '共享万亿市场机遇',
desc: '携手合作伙伴共享AI大健康万亿级市场红利实现互利共赢。', desc:
'携手友福同享共同分享AI智能健康产业的巨大红利实现区域市场的快速增长。\n' +
'我们期待与您携手将AI智能健康理念带到更多城市共同提升人类生命质量成为健康生活方式的引领者。',
icon: 'https://images.health.ufutx.com/202506/20/d780da8996bc4a771e70300456e4eb5d.png', icon: 'https://images.health.ufutx.com/202506/20/d780da8996bc4a771e70300456e4eb5d.png',
illustration: 'https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png' illustration: 'https://images.health.ufutx.com/202506/23/152ab9d119dbab87bbfc8bc496cc3e98.png'
} }
] ]
@ -153,6 +154,7 @@ const currentIdx = ref(0)
.item-desc { .item-desc {
font-size: @font-size-sm; font-size: @font-size-sm;
color: @text-color-light; color: @text-color-light;
white-space: pre-wrap;
} }
} }
} }
@ -194,7 +196,7 @@ const currentIdx = ref(0)
//justify-content: space-between; //justify-content: space-between;
//gap: 80px; //gap: 80px;
height: 558px; height: 558px;
background-image: url('https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png'); //background-image: url('https://images.health.ufutx.com/202506/20/84b3dbef5488efa0b793acb28d2a732f.png');
background-size: contain; background-size: contain;
.text { .text {
margin-top: 221px; margin-top: 221px;
@ -210,6 +212,7 @@ const currentIdx = ref(0)
font-size: 16px; font-size: 16px;
color: @text-color-secondary; color: @text-color-secondary;
line-height: 34px; line-height: 34px;
white-space: pre-wrap;
} }
} }

View File

@ -5,13 +5,8 @@
<p class="partner-subtitle">正与众多客户一起创造更多价值</p> <p class="partner-subtitle">正与众多客户一起创造更多价值</p>
</div> </div>
<div class="partner-logos"> <div class="partner-logos">
<div v-for="index in 21" :key="index" class="partner-logo-item"> <div v-for="(item, index) in partnerLogos" :key="index" class="partner-logo-item">
<!-- <img :src="logo.src" :alt="logo.alt" class="partner-logo" />--> <img :src="item.src" :alt="item.alt" class="partner-logo" />
<img
src="https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png"
alt="新浪健康"
class="partner-logo"
/>
</div> </div>
</div> </div>
</section> </section>
@ -19,40 +14,48 @@
<script setup lang="ts"> <script setup lang="ts">
// 使Logo // 使Logo
// const partnerLogos = [ const partnerLogos = [
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/9e8adafbca3355fb37a63ddc2ce5573b.png',
// alt: '' alt: '安源玻璃'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/1aa6d57409ae8557e0fae47d20f2eefd.png',
// alt: '' alt: '蟹尊享'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/56649b69b738d04d9a99cf386b88d61b.png',
// alt: '' alt: '大连海洋大学'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/6be17a225cf2539354cbb396f314b86c.png',
// alt: '' alt: '青柠檬教育'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/ffd7b2db7143e2d8796fd5ac145a95a6.png',
// alt: '' alt: '骏德酒业'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/6c83747d195f69fcfc56aa1d2c20b16c.png',
// alt: '' alt: '磐石投资集团'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/28c9c8eefbeb1968950539a2ad98ae28.png',
// alt: '' alt: '华进ACIP'
// }, },
// { {
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png', src: 'https://images.health.ufutx.com/202506/23/b12ce669ae4f2d1ff6ca839234723fda.png',
// alt: '' alt: '纽斯葆广赛NPGS'
// } },
// ] {
src: 'https://images.health.ufutx.com/202506/23/abc344decb1d3208dbce771f05e7cf19.png',
alt: '格林汇能GLHN'
},
{
src: 'https://images.health.ufutx.com/202506/23/12b7a6e0a42da15a7e82532d03cb9e8a.png',
alt: '友宏科技'
}
]
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@ -61,9 +64,10 @@
.partner-section { .partner-section {
width: 100%; width: 100%;
text-align: center; text-align: center;
background: #ffffff;
.pt(50px);
.partner-header { .partner-header {
.my(50px); .mb(50px);
.partner-title { .partner-title {
font-size: @font-size-xxl; font-size: @font-size-xxl;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
@ -80,24 +84,27 @@
.partner-logos { .partner-logos {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
gap: @space-xl; gap: 27.5px;
justify-items: center; justify-items: center;
.px(160px); .px(190px);
.pb(50px); .pb(50px);
.partner-logo-item { .partner-logo-item {
width: 100%; width: 100%;
height: 80px; //height: 80px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.partner-logo { .partner-logo {
width: 230px;
//max-height: 60px;
object-fit: contain; object-fit: contain;
transition: transform 0.3s ease; transition: transform 0.3s ease;
display: flex;
width: 286px;
justify-content: center;
align-items: center;
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
} }

View File

@ -2,7 +2,7 @@
<section class="app-promotion"> <section class="app-promotion">
<div class="section-bg"> <div class="section-bg">
<h2 class="section-title">提供专属健康服务和服务方案</h2> <h2 class="section-title">提供专属健康服务和服务方案</h2>
<el-button type="primary" class="consult-btn"> 领取您的AI健康解决方案 </el-button> <el-button type="primary" class="consult-btn" @click="openReport"> 领取您的AI健康解决方案 </el-button>
</div> </div>
<div class="app-download"> <div class="app-download">
<div class="app-item"> <div class="app-item">
@ -20,20 +20,17 @@
<span>版本号1.1.1</span> <span>版本号1.1.1</span>
</div> </div>
</div> </div>
<!-- <div class="contact-info">-->
<!-- <p>联系我们181-4852-2763</p>-->
<!-- <p>合作邮箱tfhux2023.com</p>-->
<!-- <div class="qrcode-group">-->
<!-- <img src="@/assets/qr-code-1.png" alt="公众号" />-->
<!-- <img src="@/assets/qr-code-2.png" alt="小程序" />-->
<!-- <img src="@/assets/qr-code-3.png" alt="官网" />-->
<!-- </div>-->
<!-- </div>-->
</section> </section>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ElButton } from 'element-plus' // import { ElButton } from 'element-plus'
import { openExternalLink } from '@/utils/navigation.ts' //
//
const openReport = () => {
openExternalLink('https://sj.qq.com/appdetail/com.ufutx.lovehealth', '_blank')
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">