forked from dengzhifeng/ufutx-pc-website
363 lines
9.5 KiB
Vue
363 lines
9.5 KiB
Vue
<template>
|
||
<section class="core-value">
|
||
<div class="container">
|
||
<h3 class="section-title">核心价值</h3>
|
||
<p class="section-desc">友福同享AI健康解决方案应用场景</p>
|
||
|
||
<div class="diagram-wrapper" :style="{ backgroundImage: `url(${diagramBg})` }">
|
||
<!-- 循环渲染所有模块 -->
|
||
<div v-for="item in modules" :key="item.id" :class="['module', `module-${item.id}`]">
|
||
<div
|
||
class="center-module"
|
||
:class="{
|
||
'hover-delay': isHover === item.id
|
||
}"
|
||
@mouseenter="handleMouseEnter(item.id)"
|
||
@mouseleave="handleMouseLeave(item.id)"
|
||
>
|
||
<div class="center-icon">
|
||
<img :src="item.icon" alt="center icon" />
|
||
</div>
|
||
<div class="center-title">{{ item.title }}</div>
|
||
<div class="center-desc">
|
||
{{ item.description }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="isHover !== item.id"
|
||
class="module-content"
|
||
:class="{
|
||
hover: isHover === item.id,
|
||
'hover-delay': isHover === item.id && isDelay[item.id]
|
||
}"
|
||
@mouseenter="handleMouseEnter(item.id)"
|
||
@mouseleave="handleMouseLeave(item.id)"
|
||
>
|
||
<div class="icon">
|
||
<img :src="item.icon" :alt="item.title" />
|
||
</div>
|
||
<div class="text">{{ item.title }}</div>
|
||
<div v-if="isHover === item.id && isDelay[item.id]" class="desc">
|
||
{{ item.description }}
|
||
</div>
|
||
</div>
|
||
<!-- <!– 中心模块 –>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
|
||
// 底图地址
|
||
const diagramBg = 'https://images.health.ufutx.com/202507/04/3b6a1b49d79c1cd13a59187e58c614a7.png'
|
||
|
||
// 模块数据（统一管理）
|
||
const modules = [
|
||
{
|
||
id: 1,
|
||
title: 'AI赋能精准决策',
|
||
description: '基于海量数据分析，提供精准的健康风险评估与干预建议。',
|
||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '创新七大核心要素更新人体全局系统',
|
||
description: '自愈力、免疫力、抵抗力、平衡力、代谢力、情绪力及认知力。',
|
||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '全方位的AI健康管理系统',
|
||
description: '精准营养方案+心理疏导陪伴+饮食方案+关键要素指导。',
|
||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '双重认证教练团队全程支持',
|
||
description: '国家卫健委《营养指导员》+营养师协会《身心健康管理师》双证教练服务指导。',
|
||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '构建健康产业生态',
|
||
description: '整合产业链协同，链接多方资源，打造开放共赢的智慧健康生态系统。',
|
||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||
},
|
||
{
|
||
id: 6,
|
||
title: '创新模式-身心双指标评估，生成精准个性化方案',
|
||
description:
|
||
'整合个人身理+心理健康数据、健康行为、个人及家族疾病史及生活方式等多维度数据，全方面分析精准个性化方案。',
|
||
icon: 'https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png'
|
||
}
|
||
]
|
||
// const date = new Date()
|
||
|
||
// 控制当前悬浮的模块（0为无悬浮）
|
||
const isHover = ref<number>(0)
|
||
// 控制每个模块的延迟状态
|
||
const isDelay = ref<Record<number, boolean>>({})
|
||
// 存储定时器ID，用于清除延迟
|
||
const delayTimer = ref<Record<number, NodeJS.Timeout>>({})
|
||
|
||
// 鼠标进入：触发hover状态+延迟布局
|
||
const handleMouseEnter = (moduleId: number) => {
|
||
isHover.value = moduleId
|
||
// 延迟0.4s触发布局变化（等尺寸动画结束）
|
||
delayTimer.value[moduleId] = setTimeout(() => {
|
||
isDelay.value[moduleId] = true
|
||
}, 400)
|
||
}
|
||
|
||
// 鼠标离开：清除状态+定时器
|
||
const handleMouseLeave = (moduleId: number) => {
|
||
isHover.value = 0
|
||
clearTimeout(delayTimer.value[moduleId])
|
||
isDelay.value[moduleId] = false
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.core-value {
|
||
padding: 100px 0;
|
||
background-color: #fff;
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: 1920px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
text-align: center;
|
||
|
||
.section-title {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 16px;
|
||
color: #666;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.diagram-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 840px;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
|
||
// 通用模块样式
|
||
.module {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
|
||
.module-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 50px;
|
||
padding: 10px 16px;
|
||
width: 190px;
|
||
height: 70px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||
transform-origin: center center;
|
||
transition:
|
||
opacity 0.1s ease,
|
||
width 0.3s ease,
|
||
transform 1s ease;
|
||
|
||
/* 统一过渡时间和缓动函数 */
|
||
//transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
// 图标样式
|
||
.icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
flex-shrink: 0;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
// 文字样式（单行省略）
|
||
.text {
|
||
width: 130px;
|
||
font-size: 18px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 描述文本
|
||
.desc {
|
||
width: 90%;
|
||
opacity: 1;
|
||
visibility: hidden;
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 25px;
|
||
text-align: center;
|
||
|
||
&.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
// hover基础动画
|
||
&.hover {
|
||
opacity: 0;
|
||
}
|
||
|
||
// 延迟布局样式
|
||
//&.hover-delay {
|
||
// display: grid;
|
||
// grid-template-rows: auto 1fr auto;
|
||
// align-items: start;
|
||
// justify-items: center;
|
||
// border-radius: 16px;
|
||
// background: #fff;
|
||
// padding: 20px;
|
||
//}
|
||
}
|
||
}
|
||
|
||
// 各模块定位（与数据ID对应）
|
||
.module-1 {
|
||
bottom: 482px;
|
||
left: 521px;
|
||
}
|
||
.module-2 {
|
||
bottom: 482px;
|
||
left: 1185px;
|
||
}
|
||
.module-3 {
|
||
bottom: 240px;
|
||
left: 376px;
|
||
}
|
||
.module-4 {
|
||
bottom: 240px;
|
||
left: 1328px;
|
||
}
|
||
.module-5 {
|
||
bottom: 83px;
|
||
left: 852px;
|
||
}
|
||
.module-6 {
|
||
bottom: 381px;
|
||
left: 842px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.center-module {
|
||
transform: translateX(-20%) !important;
|
||
text-align: center;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
width: 300px;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||
transform-origin: center center;
|
||
overflow: hidden;
|
||
position: relative;
|
||
z-index: 99;
|
||
|
||
transition:
|
||
max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
align-content: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// 关键修改：将 .hover 类选择器改为 :hover 伪类
|
||
&.hover-delay {
|
||
max-height: 500px; /* 设一个足够大的值（大于内容实际高度） */
|
||
height: auto !important;
|
||
opacity: 1;
|
||
}
|
||
.center-icon {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: 0 auto 10px auto;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.center-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: @text-color;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.center-desc {
|
||
color: @text-color-secondary;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 25px; /* 178.571% */
|
||
}
|
||
}
|
||
// 响应式适配
|
||
//@media (max-width: 768px) {
|
||
// .core-value {
|
||
// padding: 60px 0;
|
||
//
|
||
// .container {
|
||
// .section-title {
|
||
// font-size: 28px;
|
||
// }
|
||
//
|
||
// .diagram-wrapper {
|
||
// height: auto;
|
||
// padding-bottom: 150%;
|
||
//
|
||
// .module {
|
||
// .module-content {
|
||
// width: 150px;
|
||
// height: 60px;
|
||
//
|
||
// .icon {
|
||
// width: 40px;
|
||
// height: 40px;
|
||
// }
|
||
// .text {
|
||
// font-size: 16px;
|
||
// }
|
||
//
|
||
// &.hover {
|
||
// width: 250px;
|
||
// height: auto;
|
||
// transform: scale(1.05);
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
//}
|
||
</style>
|