diff --git a/src/styles/global.less b/src/styles/global.less
index e93b269..4bbb1b2 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -243,7 +243,16 @@ html, body {
   /* 防止长英文单词溢出 */
   word-wrap: break-word;
 }
+.text-1-line-ellipsis {
+  /* 核心属性：单行省略 */
+  display: block; /* 或者 inline-block，根据布局需求调整 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; /* 强制文本在一行显示 */
 
+  /* 兼容性补充（可选，现代浏览器一般已支持基础单行省略） */
+  word-break: break-word;
+}
 // 响应式工具类
 @media (max-width: @mobile-breakpoint) {
   .mobile-hide { display: none !important; }
diff --git a/src/views/Home/sections/CoreValue.vue b/src/views/Home/sections/CoreValue.vue
index fe5d8ae..9b64805 100644
--- a/src/views/Home/sections/CoreValue.vue
+++ b/src/views/Home/sections/CoreValue.vue
@@ -3,47 +3,298 @@
     <div class="container">
       <h3 class="section-title">核心价值</h3>
       <p class="section-desc">友福同享AI健康解决方案应用场景</p>
-      <!-- 替换为实际图示路径 -->
-      <img
-        src="https://images.health.ufutx.com/202506/12/5bbcb1bc1347f58df6a38aecc41dbe30.png"
-        alt="核心价值图示"
-        class="diagram"
-      />
+
+      <div class="diagram-wrapper" :style="{ backgroundImage: `url(${diagramBg})` }">
+        <!-- 循环渲染所有模块 -->
+        <div v-for="item in modules" :key="item.id" :class="['module', `module-${item.id}`]">
+          <div
+            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"
+              :class="{ show: isHover === item.id && isDelay[item.id] }"
+            >
+              {{ 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'
+  }
+]
+
+// 控制当前悬浮的模块（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: 80px 0;
-  .pt(100px);
-  //background-color: red;
+  padding: 100px 0;
+  background-color: #fff;
+
   .container {
-    //max-width: 1200px;
+    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;
-      color: @text-color;
     }
 
     .section-desc {
-      font-size: 20px;
-      color: @text-color-secondary;
+      font-size: 16px;
+      color: #666;
       margin-bottom: 60px;
     }
 
-    .diagram {
-      //max-width: 800px;
-      width: 1920px;
-      height: auto;
+    .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:
+            height 0.2s 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 {
+            width: 300px;
+            height: auto;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+            transform: translateX(-20%);
+            .text {
+              overflow: auto;
+              text-overflow: ellipsis;
+              white-space: pre-wrap;
+              width: 100%;
+            }
+          }
+
+          // 延迟布局样式
+          &.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;
+      }
+    }
+  }
+}
+
+// 响应式适配
+@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);
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/views/Home/sections/CoreValueV2.vue b/src/views/Home/sections/CoreValueV2.vue
new file mode 100644
index 0000000..4712cf4
--- /dev/null
+++ b/src/views/Home/sections/CoreValueV2.vue
@@ -0,0 +1,402 @@
+<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>