ufutx-pc-website/src/views/Home/sections/CoreValueV2.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>

        <!--        &lt;!&ndash; 中心模块 &ndash;&gt;-->
        <!--        <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>