feat: 20250623 添加完整数据，动画相关
This commit is contained in:
parent
aed3a0b724
commit
a4268e6f05
3
components.d.ts
vendored
3
components.d.ts
vendored
@ -9,11 +9,14 @@ export {}
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
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']
|
||||
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']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
|
||||
59
src/utils/navigation.ts
Normal file
59
src/utils/navigation.ts
Normal 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>
|
||||
@ -6,7 +6,7 @@
|
||||
<CompanyTimeline />
|
||||
<!-- 我们重新定义健康未来-->
|
||||
<RedefineHealth />
|
||||
<!-- 企业价值观-->
|
||||
<!-- 应用场景-->
|
||||
<CompanyValues />
|
||||
<!-- 资质认证-->
|
||||
<QualificationCarousel />
|
||||
|
||||
@ -5,13 +5,8 @@
|
||||
<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 v-for="(item, index) in partnerLogos" :key="index" class="partner-logo-item">
|
||||
<img :src="item.src" :alt="item.alt" class="partner-logo" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -19,40 +14,48 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
// 使用提供的图片链接作为所有合作伙伴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: '新浪健康'
|
||||
// }
|
||||
// ]
|
||||
const partnerLogos = [
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/9e8adafbca3355fb37a63ddc2ce5573b.png',
|
||||
alt: '安源玻璃'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/1aa6d57409ae8557e0fae47d20f2eefd.png',
|
||||
alt: '蟹尊享'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/56649b69b738d04d9a99cf386b88d61b.png',
|
||||
alt: '大连海洋大学'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/6be17a225cf2539354cbb396f314b86c.png',
|
||||
alt: '青柠檬教育'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/ffd7b2db7143e2d8796fd5ac145a95a6.png',
|
||||
alt: '骏德酒业'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/6c83747d195f69fcfc56aa1d2c20b16c.png',
|
||||
alt: '磐石投资集团'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/28c9c8eefbeb1968950539a2ad98ae28.png',
|
||||
alt: '华进（ACIP）'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/b12ce669ae4f2d1ff6ca839234723fda.png',
|
||||
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>
|
||||
|
||||
<style scoped lang="less">
|
||||
@ -61,9 +64,10 @@
|
||||
.partner-section {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
background: #f5f7fe;
|
||||
.pt(50px);
|
||||
.partner-header {
|
||||
.my(50px);
|
||||
.mb(50px);
|
||||
.partner-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: @font-weight-bold;
|
||||
@ -80,24 +84,27 @@
|
||||
|
||||
.partner-logos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: @space-xl;
|
||||
grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
|
||||
gap: 27.5px;
|
||||
justify-items: center;
|
||||
.px(160px);
|
||||
.px(190px);
|
||||
.pb(50px);
|
||||
.partner-logo-item {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
//height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.partner-logo {
|
||||
width: 230px;
|
||||
//max-height: 60px;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
display: flex;
|
||||
width: 286px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="section-divider">全方位健康生活方式的引领者</div>
|
||||
<FeatureNav />
|
||||
<!-- // 健康设备-->
|
||||
<HealthDevice :device="healthBand" />
|
||||
<!-- <HealthDevice :device="healthBand" />-->
|
||||
<!-- //一分钟演讲-->
|
||||
<SpeechModule />
|
||||
<!-- 应用场景-->
|
||||
|
||||
@ -8,48 +8,27 @@
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 标签切换（友福动态 / 媒体报道） -->
|
||||
<el-tabs v-model="activeTab" class="news-tabs" @tab-click="resetPage">
|
||||
<el-tab-pane label="友福健康生态" name="dynamic"></el-tab-pane>
|
||||
<el-tab-pane label="幸福婚恋" name="report"></el-tab-pane>
|
||||
<el-tab-pane label="个人成长" name="growth"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div v-show="currentTab === 0" 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>友福健康生态</p>
|
||||
<el-tabs v-model="activeTab" class="news-tabs">
|
||||
<el-tab-pane v-for="scene in scenes" :key="scene.name" :label="scene.title" :name="scene.name">
|
||||
<div 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>{{ scene.title }}</p>
|
||||
</div>
|
||||
<ul class="speech-content">
|
||||
<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>
|
||||
<p class="speech-subtitle">
|
||||
AI精准个性化健康方案服务：透过友福七维AI健康修复系统分析多维度身心健康数据，量身打造专属的精准健康管理方案。<br />
|
||||
智能穿戴设备数据监测：搭载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>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -58,9 +37,49 @@ import { ref } from 'vue'
|
||||
|
||||
const tabs = ['友福健康生态', '幸福婚恋', '个人成长']
|
||||
|
||||
const activeTab = ref('dynamic') // 默认显示“友福动态”
|
||||
// 默认选中第一个场景
|
||||
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 = () => {
|
||||
// currentPage.value = 1 // 切换标签时重置页码
|
||||
}
|
||||
@ -188,6 +207,7 @@ const resetPage = () => {
|
||||
.speech-subtitle {
|
||||
color: @text-color;
|
||||
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>
|
||||
|
||||
@ -1,50 +1,103 @@
|
||||
<template>
|
||||
<div class="feature-nav">
|
||||
<div
|
||||
v-for="(item, index) in navList"
|
||||
:key="index"
|
||||
class="nav-item"
|
||||
:class="{ active: item.active }"
|
||||
@click="handleSelect(index)"
|
||||
>
|
||||
<div class="nav-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
|
||||
<span class="nav-text">{{ item.text }}</span>
|
||||
<section>
|
||||
<div class="feature-nav">
|
||||
<div
|
||||
v-for="(item, index) in navList"
|
||||
:key="index"
|
||||
class="nav-item"
|
||||
:class="{ active: item.active }"
|
||||
@click="handleSelect(index)"
|
||||
@mouseenter="handleSelect(index)"
|
||||
>
|
||||
<div class="nav-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
|
||||
<span class="nav-text">{{ item.text }}</span>
|
||||
</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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { openExternalLink } from '@/utils/navigation.ts'
|
||||
|
||||
const activeIndex = ref(0)
|
||||
const navList = ref([
|
||||
{
|
||||
text: '健康手环',
|
||||
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: '智能体脂秤',
|
||||
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: '商城',
|
||||
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: '个人成长',
|
||||
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: '单身标签',
|
||||
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) => {
|
||||
activeIndex.value = index
|
||||
navList.value.forEach((item, i) => {
|
||||
item.active = i === index
|
||||
})
|
||||
@ -80,8 +133,8 @@ const handleSelect = (index: number) => {
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
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) {
|
||||
.feature-nav {
|
||||
|
||||
@ -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>
|
||||
<div class="download-btn">立即下载</div>
|
||||
<div class="download-btn" @click="openReport">立即下载</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -16,6 +16,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus'
|
||||
import { openExternalLink } from '@/utils/navigation.ts'
|
||||
// import FeatureNav from '@/views/App/sections/FeatureNav.vue'
|
||||
|
||||
const props = defineProps({
|
||||
@ -28,7 +29,10 @@ const props = defineProps({
|
||||
img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
|
||||
})
|
||||
}
|
||||
})
|
||||
}) // 外部链接跳转（新标签）
|
||||
const openReport = () => {
|
||||
openExternalLink('https://sj.qq.com/appdetail/com.ufutx.lovehealth', '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
跨出社交圈，“一分钟演讲”<br />
|
||||
立即让未来的灵魂伴侣更了解你，轻松打开话题
|
||||
</p>
|
||||
<div class="download-btn">立即下载</div>
|
||||
<div class="download-btn" @click="openReport">立即下载</div>
|
||||
</div>
|
||||
<div class="speech-img">
|
||||
<!-- <img src="@/assets/speech-app.png" alt="演讲界面" />-->
|
||||
@ -18,7 +18,11 @@
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
@ -1,15 +1,24 @@
|
||||
<template>
|
||||
<div class="ecosystem-page">
|
||||
<!-- // 轮播图-->
|
||||
<Banner />
|
||||
<!-- // 核心优势-->
|
||||
<CoreAdvantages />
|
||||
<!-- // 区域合作-->
|
||||
<RegionCooperation />
|
||||
<!-- // 健康管理-->
|
||||
<HealthManagement />
|
||||
<!-- // 医疗合作-->
|
||||
<MedicalCooperation />
|
||||
<!-- // 企业合作-->
|
||||
<EnterpriseCooperation />
|
||||
<!-- // 合作咨询-->
|
||||
<CooperationConsult :device="cooperateData" />
|
||||
<!-- // 人才培训-->
|
||||
<TalentTraining />
|
||||
<!-- // 城市合伙人-->
|
||||
<CooperationConsult :device="cooperateDataV2" />
|
||||
|
||||
<!-- // 城市合伙人-->
|
||||
<CityPartner />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,12 +32,11 @@
|
||||
</div>
|
||||
|
||||
<!-- 主体内容区 -->
|
||||
<div class="content">
|
||||
<div class="content" :style="{ backgroundImage: `url(${navItems[currentIdx].illustration})` }">
|
||||
<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>
|
||||
@ -54,21 +53,23 @@ const navItems = [
|
||||
},
|
||||
{
|
||||
title: '总部直营培训体系',
|
||||
desc: '构建完善的直营培训体系，涵盖产品、运营、营销等多维度专业培训。',
|
||||
desc: '我们提供完善的总部直营培训服务，确保您的团队能够熟练掌握我们的产品和服务，为用户提供高品质的体验。',
|
||||
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: '独家解决方案输出',
|
||||
desc: '依托核心技术，定制独家AI健康管理解决方案，满足差异化需求。',
|
||||
desc: '获得领先的友福七维AI健康修复系统的完整输出，包括服务培训和运营模式。',
|
||||
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: '共享万亿市场机遇',
|
||||
desc: '携手合作伙伴，共享AI大健康万亿级市场红利，实现互利共赢。',
|
||||
desc:
|
||||
'携手友福同享，共同分享AI智能健康产业的巨大红利，实现区域市场的快速增长。\n' +
|
||||
'我们期待与您携手，将AI智能健康理念带到更多城市，共同提升人类生命质量，成为健康生活方式的引领者。',
|
||||
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 {
|
||||
font-size: @font-size-sm;
|
||||
color: @text-color-light;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -194,7 +196,7 @@ const currentIdx = ref(0)
|
||||
//justify-content: space-between;
|
||||
//gap: 80px;
|
||||
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;
|
||||
.text {
|
||||
margin-top: 221px;
|
||||
@ -210,6 +212,7 @@ const currentIdx = ref(0)
|
||||
font-size: 16px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 34px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,13 +5,8 @@
|
||||
<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 v-for="(item, index) in partnerLogos" :key="index" class="partner-logo-item">
|
||||
<img :src="item.src" :alt="item.alt" class="partner-logo" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -19,40 +14,48 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
// 使用提供的图片链接作为所有合作伙伴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: '新浪健康'
|
||||
// }
|
||||
// ]
|
||||
const partnerLogos = [
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/9e8adafbca3355fb37a63ddc2ce5573b.png',
|
||||
alt: '安源玻璃'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/1aa6d57409ae8557e0fae47d20f2eefd.png',
|
||||
alt: '蟹尊享'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/56649b69b738d04d9a99cf386b88d61b.png',
|
||||
alt: '大连海洋大学'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/6be17a225cf2539354cbb396f314b86c.png',
|
||||
alt: '青柠檬教育'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/ffd7b2db7143e2d8796fd5ac145a95a6.png',
|
||||
alt: '骏德酒业'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/6c83747d195f69fcfc56aa1d2c20b16c.png',
|
||||
alt: '磐石投资集团'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/28c9c8eefbeb1968950539a2ad98ae28.png',
|
||||
alt: '华进（ACIP）'
|
||||
},
|
||||
{
|
||||
src: 'https://images.health.ufutx.com/202506/23/b12ce669ae4f2d1ff6ca839234723fda.png',
|
||||
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>
|
||||
|
||||
<style scoped lang="less">
|
||||
@ -61,9 +64,10 @@
|
||||
.partner-section {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
background: #ffffff;
|
||||
.pt(50px);
|
||||
.partner-header {
|
||||
.my(50px);
|
||||
.mb(50px);
|
||||
.partner-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: @font-weight-bold;
|
||||
@ -80,24 +84,27 @@
|
||||
|
||||
.partner-logos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: @space-xl;
|
||||
grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
|
||||
gap: 27.5px;
|
||||
justify-items: center;
|
||||
.px(160px);
|
||||
.px(190px);
|
||||
.pb(50px);
|
||||
.partner-logo-item {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
//height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.partner-logo {
|
||||
width: 230px;
|
||||
//max-height: 60px;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
display: flex;
|
||||
width: 286px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="app-promotion">
|
||||
<div class="section-bg">
|
||||
<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 class="app-download">
|
||||
<div class="app-item">
|
||||
@ -20,20 +20,17 @@
|
||||
<span>版本号：1.1.1</span>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user