403 lines
12 KiB
Vue
403 lines
12 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})` }">
|
||
<!-- 模块1：AI赋能精准决策 -->
|
||
<div class="module module-1">
|
||
<div
|
||
class="module-content"
|
||
:class="{ hover: isHover === 1, 'hover-delay': isHover === 1 && isDelay[1] }"
|
||
@mouseenter="handleMouseEnter(1)"
|
||
@mouseleave="handleMouseLeave(1)"
|
||
>
|
||
<div class="icon">
|
||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||
</div>
|
||
<div class="text">AI赋能精准决策</div>
|
||
<div v-if="isHover === 1 && isDelay[1]" class="desc" :class="{ show: isHover === 1 && isDelay[1] }">
|
||
基于海量数据分析，提供精准的健康风险评估与干预建议。
|
||
</div>
|
||
<!-- <div class="desc" :class="{ show: isHover === 1 && isDelay[1] }" v-show="isHover === 1">-->
|
||
<!-- 基于海量数据分析，提供精准的健康风险评估与干预建议。-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块2：创新七大核心 -->
|
||
<div class="module module-2">
|
||
<div
|
||
class="module-content"
|
||
:class="{ hover: isHover === 2, 'hover-delay': isHover === 2 && isDelay[2] }"
|
||
@mouseenter="handleMouseEnter(2)"
|
||
@mouseleave="handleMouseLeave(2)"
|
||
>
|
||
<div class="icon">
|
||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||
</div>
|
||
<div class="text">创新七大核心...</div>
|
||
<div class="desc" :class="{ show: isHover === 2 && isDelay[2] }">
|
||
七大核心技术支撑，构建全场景健康服务体系。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块3：全方位的AI健... -->
|
||
<div class="module module-3">
|
||
<div
|
||
class="module-content"
|
||
:class="{ hover: isHover === 3, 'hover-delay': isHover === 3 && isDelay[3] }"
|
||
@mouseenter="handleMouseEnter(3)"
|
||
@mouseleave="handleMouseLeave(3)"
|
||
>
|
||
<div class="icon">
|
||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||
</div>
|
||
<div class="text">全方位的AI健...</div>
|
||
<div class="desc" :class="{ show: isHover === 3 && isDelay[3] }">
|
||
覆盖全生命周期，提供一站式AI健康管理服务。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块4：双重认证教练... -->
|
||
<div class="module module-4">
|
||
<div
|
||
class="module-content"
|
||
:class="{ hover: isHover === 4, 'hover-delay': isHover === 4 && isDelay[4] }"
|
||
@mouseenter="handleMouseEnter(4)"
|
||
@mouseleave="handleMouseLeave(4)"
|
||
>
|
||
<div class="icon">
|
||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||
</div>
|
||
<div class="text">双重认证教练...</div>
|
||
<div class="desc" :class="{ show: isHover === 4 && isDelay[4] }">
|
||
专业认证教练团队，提供个性化健康指导方案。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块5：构建健康产业... -->
|
||
<div class="module module-5">
|
||
<div
|
||
class="module-content"
|
||
:class="{ hover: isHover === 5, 'hover-delay': isHover === 5 && isDelay[5] }"
|
||
@mouseenter="handleMouseEnter(5)"
|
||
@mouseleave="handleMouseLeave(5)"
|
||
>
|
||
<div class="icon">
|
||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||
</div>
|
||
<div class="text">构建健康产业...</div>
|
||
<div class="desc" :class="{ show: isHover === 5 && isDelay[5] }">
|
||
整合产业资源，打造闭环健康服务生态系统。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块6：中间模块 -->
|
||
<div class="module module-6">
|
||
<div
|
||
class="module-content"
|
||
:class="{ hover: isHover === 6, 'hover-delay': isHover === 6 && isDelay[6] }"
|
||
@mouseenter="handleMouseEnter(6)"
|
||
@mouseleave="handleMouseLeave(6)"
|
||
>
|
||
<div class="icon">
|
||
<img src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png" alt="icon" />
|
||
</div>
|
||
<div class="text">创新模式-身心双指标评估</div>
|
||
<div class="desc" :class="{ show: isHover === 6 && isDelay[6] }">
|
||
结合生理与心理健康数据，生成个性化评估方案。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <!– 中心模块 –>-->
|
||
<!-- <div class="center-module">-->
|
||
<!-- <div class="center-icon">-->
|
||
<!-- <img-->
|
||
<!-- src="https://images.health.ufutx.com/202507/04/4a47a0db6e60853dedfcfdf08a5ca249.png"-->
|
||
<!-- alt="center icon"-->
|
||
<!-- />-->
|
||
<!-- </div>-->
|
||
<!-- <div class="center-title">创新模式-身心双指标评估，生成精准个性化方案</div>-->
|
||
<!-- <div class="center-desc">-->
|
||
<!-- 整合个人身理+心理健康数据、健康行为、个人及家族疾病史及生活方式等，多维度数据，全方面分析精准个性化方案-->
|
||
<!-- </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'
|
||
|
||
// 控制当前悬浮的模块（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: all 0.8s ease;
|
||
// hover基础动画（尺寸和缩放）
|
||
&.hover {
|
||
width: 300px;
|
||
height: auto;
|
||
transform: translateX(-20%); /* 基于中心放大1.1倍，无偏移 */
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
// 延迟布局样式（hover后0.4s生效，切换为网格布局）
|
||
&.hover-delay {
|
||
display: grid;
|
||
grid-template-rows: auto 1fr auto; /* 图标区 | 空白区 | 描述区 */
|
||
align-items: start;
|
||
justify-items: center;
|
||
border-radius: 16px;
|
||
background: #fff;
|
||
padding: 20px; /* 增加内边距，避免内容贴边 */
|
||
}
|
||
// 图标样式
|
||
.icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
flex-shrink: 0; /* 防止图标缩小 */
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
// 文字样式（单行省略）
|
||
.text {
|
||
width: 130px;
|
||
font-size: 18px;
|
||
color: @text-color;
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 描述文本（默认隐藏，hover后显示在底部）
|
||
.desc {
|
||
width: 90%; /* 限制宽度，避免超出容器 */
|
||
opacity: 1;
|
||
visibility: hidden;
|
||
font-size: 14px;
|
||
color: @text-color-secondary;
|
||
line-height: 25px;
|
||
text-align: center;
|
||
//transition:
|
||
//opacity 0.3s ease 0.2s,
|
||
//visibility 0.3s ease 0.2s;
|
||
&.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 各模块定位（根据设计图微调，确保初始位置正确）
|
||
.module-1 {
|
||
bottom: 482px;
|
||
left: 521px;
|
||
}
|
||
.module-2 {
|
||
top: 288px;
|
||
right: 521px;
|
||
}
|
||
.module-3 {
|
||
top: 530px;
|
||
left: 376px;
|
||
}
|
||
.module-4 {
|
||
top: 530px;
|
||
right: 376px;
|
||
}
|
||
.module-5 {
|
||
top: 687px;
|
||
left: 50%;
|
||
transform: translateX(-50%); /* 水平居中 */
|
||
}
|
||
.module-6 {
|
||
bottom: 381px;
|
||
left: 50%;
|
||
transform: translateX(-50%); /* 水平居中 */
|
||
&.hover {
|
||
width: 300px;
|
||
height: auto;
|
||
transform: translateX(-50%) !important; /* 基于中心放大1.1倍，无偏移 */
|
||
}
|
||
}
|
||
|
||
// 中心模块
|
||
.center-module {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
background-color: rgba(255, 255, 255, 0.95);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
width: 300px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||
|
||
.center-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin: 0 auto 16px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.center-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.center-desc {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式适配
|
||
@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: 220px;
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
}
|
||
|
||
.center-module {
|
||
width: 80%;
|
||
padding: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|