feat: 20250617 「Ai健康、Ai婚恋」页面布局

src/router/routes.ts

@@ -9,11 +9,11 @@ import type { RouteRecordRaw } from 'vue-router' // 添加type关键字
 // import About from '@/views/About/About.vue'
 // import About from '@/views/About.vue'
 // import I18nDemo from '../views/I18nDemo.vue'
-import Layout from '@/layout/Layout.vue'
+// import Layout from '@/layout/Layout.vue'
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    component: Layout,
+    component: () => import('@/layout/Layout.vue'), // 动态导入
     children: [
       { path: '', name: 'Home', component: () => import('@/views/Home/Home.vue') },
       { path: 'news', name: 'News', component: () => import('@/views/News/News.vue') },

src/views/Network/Network.vue

@@ -3,9 +3,12 @@
     <!--    Banner 模块-->
     <Banner />
     <!--    &lt;!&ndash;    核心价值模块&ndash;&gt;-->
-    <!--    <CoreValue />-->
+    <SevenDimensions />
     <!--    &lt;!&ndash;    应用场景模块&ndash;&gt;-->
-    <!--    <UseCases />-->
+    <UseCases />
+    <OneStopSolution />
+    <AiHealthProcess />
+    <CustomerCases />
     <!--    &lt;!&ndash;    全球服务模块&ndash;&gt;-->
     <!--    <GlobalService />-->
     <!--    &lt;!&ndash;    客户反馈模块&ndash;&gt;-->
@@ -17,8 +20,11 @@
 
 <script setup lang="ts">
 import Banner from './sections/Banner.vue'
-// import CoreValue from './sections/CoreValue.vue'
+import SevenDimensions from './sections/SevenDimensions.vue'
-// import UseCases from './sections/UseCases.vue'
+import UseCases from './sections/UseCases.vue'
+import OneStopSolution from '@/views/Network/sections/OneStopSolution.vue'
+import AiHealthProcess from '@/views/Network/sections/AiHealthProcess.vue'
+import CustomerCases from '@/views/Network/sections/CustomerCases.vue'
 // import GlobalService from './sections/GlobalService.vue'
 // import CustomerFeedback from './sections/CustomerFeedback.vue'
 // import Partners from './sections/Partners.vue'

src/views/Network/sections/AiHealthProcess.vue

@@ -0,0 +1,86 @@
+<template>
+  <section class="ai-health-process">
+    <h2 class="section-title">友福AI健康方案流程</h2>
+    <div class="process-steps">
+      <img
+        clas="section-icon"
+        src="https://images.health.ufutx.com/202506/17/4a36942f896903dbd195e31026483b4a.png"
+        alt=""
+      />
+      <!--      <div class="step">-->
+      <!--        <div class="step-number">01</div>-->
+      <!--        <h3 class="step-title">体检报告</h3>-->
+      <!--        <p>全方位解析身体的健康数据</p>-->
+      <!--      </div>-->
+      <!--      <div class="step">-->
+      <!--        <div class="step-number">02</div>-->
+      <!--        <h3 class="step-title">健康信息采集</h3>-->
+      <!--        <p>个性化健康信息录入</p>-->
+      <!--      </div>-->
+      <!--      <div class="step">-->
+      <!--        <div class="step-number">03</div>-->
+      <!--        <h3 class="step-title">人工智能分析</h3>-->
+      <!--        <p>多维度数据智能解读</p>-->
+      <!--      </div>-->
+      <!--      <div class="step">-->
+      <!--        <div class="step-number">04</div>-->
+      <!--        <h3 class="step-title">定制健康方案</h3>-->
+      <!--        <p>生成专属健康管理方案</p>-->
+      <!--      </div>-->
+      <!--      <div class="step">-->
+      <!--        <div class="step-number">05</div>-->
+      <!--        <h3 class="step-title">APP跟踪服务</h3>-->
+      <!--        <p>实时跟踪健康状态</p>-->
+      <!--      </div>-->
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// 无额外逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.ai-health-process {
+  padding: 50px 190px;
+  text-align: center;
+  background: #f6f8fe;
+  .mt(20px);
+}
+.section-title {
+  font-size: @font-size-xxl;
+  color: @text-color;
+  font-weight: bold;
+}
+.process-steps {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin-top: 40px;
+}
+.step {
+  width: 160px;
+  margin: 20px;
+}
+.step-number {
+  width: 60px;
+  height: 60px;
+  border: 2px solid #409eff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  color: #409eff;
+  margin: 0 auto 16px;
+}
+.step-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.step p {
+  font-size: 14px;
+  color: #666;
+}
+</style>

src/views/Network/sections/CustomerCases.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="feedback-section">
-    <div class="feedback-title">客户反馈</div>
+    <div class="feedback-title">真实客户案例</div>
     <div class="feedback-list">
       <div v-for="(item, index) in feedbackList" :key="index" class="feedback-card">
         <div class="avatar-container">

src/views/Network/sections/OneStopSolution.vue

@@ -0,0 +1,92 @@
+<template>
+  <section class="one-stop-solution">
+    <h2 class="section-title">一站式解决身心健康问题</h2>
+    <p class="section-subtitle">以数据驱动，从根源改善，助力实现可持续的健康提升</p>
+    <div class="solution-graph">
+      <img
+        clas="section-icon"
+        src="https://images.health.ufutx.com/202506/17/9f4bcbe591f96658e08151466cd5b932.png"
+        alt=""
+      />
+    </div>
+    <div class="stats">
+      <p>超90%以上客户实现长期的健康状态优化</p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// 无额外逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.one-stop-solution {
+  padding: 50px 20px;
+  text-align: center;
+  background: radial-gradient(83.44% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
+}
+.section-title {
+  font-size: @font-size-xxl;
+  color: @text-color;
+  font-weight: bold;
+}
+.section-subtitle {
+  font-size: 20px;
+  color: @text-color-secondary;
+  .mt(20px);
+}
+.solution-graph {
+  .mt(50px);
+  //position: relative;
+  //width: 300px;
+  //height: 300px;
+  //margin: 0 auto;
+}
+.core {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80px;
+  height: 80px;
+  background: #409eff;
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ring {
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  border: 2px dashed #409eff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #409eff;
+}
+/* 调整环形位置 */
+.ring:nth-child(2) {
+  top: 20px;
+  left: 90px;
+}
+.ring:nth-child(3) {
+  top: 180px;
+  left: 90px;
+}
+.ring:nth-child(4) {
+  top: 90px;
+  left: 20px;
+}
+.ring:nth-child(5) {
+  top: 90px;
+  right: 20px;
+}
+.stats {
+  margin-top: 40px;
+  font-size: 14px;
+  color: #666;
+}
+</style>

src/views/Network/sections/Partners.vue

@@ -1,123 +0,0 @@
-<template>
-  <section class="partner-section">
-    <div class="partner-header">
-      <h2 class="partner-title">合作伙伴</h2>
-      <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>
-    </div>
-  </section>
-</template>
-
-<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: '新浪健康'
-//   }
-// ]
-</script>
-
-<style scoped lang="less">
-@import '@/styles/global.less';
-
-.partner-section {
-  width: 100%;
-  text-align: center;
-
-  .partner-header {
-    .my(50px);
-    .partner-title {
-      font-size: @font-size-xxl;
-      font-weight: @font-weight-bold;
-      color: @text-color;
-      margin-bottom: @space-sm;
-    }
-
-    .partner-subtitle {
-      font-size: 20px;
-      color: @text-color-secondary;
-      .mt(20px);
-    }
-  }
-
-  .partner-logos {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: @space-xl;
-    justify-items: center;
-    .px(160px);
-    .pb(50px);
-    .partner-logo-item {
-      width: 100%;
-      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;
-
-        &:hover {
-          transform: scale(1.1);
-        }
-      }
-    }
-  }
-}
-
-// 响应式适配
-@media (max-width: @tablet-breakpoint) {
-  .partner-logos {
-    gap: @space-md;
-
-    .partner-logo-item {
-      height: 60px;
-    }
-
-    .partner-logo {
-      max-height: 40px;
-    }
-  }
-}
-</style>

src/views/Network/sections/SevenDimensions.vue

@@ -1,12 +1,12 @@
 <template>
   <section class="core-value">
     <div class="container">
-      <h3 class="section-title">核心价值</h3>
+      <!--      <h3 class="section-title">核心价值</h3>-->
-      <p class="section-desc">友福同享AI健康解决方案应用场景</p>
+      <!--      <p class="section-desc">友福同享AI健康解决方案应用场景</p>-->
       <!-- 替换为实际图示路径 -->
       <img
-        src="https://images.health.ufutx.com/202506/12/5bbcb1bc1347f58df6a38aecc41dbe30.png"
+        src="https://images.health.ufutx.com/202506/17/28710422aa9cf68a38cfbd19abd7ebf0.png"
-        alt="核心价值图示"
+        alt="七大核心维度"
         class="diagram"
       />
     </div>
@@ -20,7 +20,7 @@
 <style scoped lang="less">
 .core-value {
   //padding: 80px 0;
-  .pt(100px);
+  //.pt(100px);
   //background-color: red;
   .container {
     //max-width: 1200px;

src/views/Network/sections/UseCases.vue

@@ -1,11 +1,12 @@
 <template>
   <section class="scene-section">
-    <h2 class="scene-title">友福同享AI健康解决方案应用场景</h2>
+    <!--    <h2 class="scene-title">一站式解决身心健康问题</h2>-->
+    <!--    <p class="scene-subtitle">以数据驱动，从根源改善，助力实现可持续的健康提升</p>-->
     <div class="scene-list">
       <div v-for="(item, index) in sceneList" :key="index" class="scene-item">
         <div class="scene-inner">
           <img :src="item.icon" alt="场景图标" class="scene-icon" />
-          <p class="scene-name">{{ item.name }}</p>
+          <p class="scene-name" v-html="item.name"></p>
           <p class="scene-desc">{{ item.desc }}</p>
         </div>
       </div>
@@ -16,29 +17,29 @@
 <script setup lang="ts">
 const sceneList = [
   {
-    name: '地区政府/社区健康服务',
+    name: '健康评估<br/>多维度健康评估',
     desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
-    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png' // 替换为实际图标
   },
   {
-    name: '医院体检中心/健康管理机构',
+    name: '健康方案<br/>全方位的精准健康方案',
     desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
-    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
   },
   {
-    name: '企业员工健康管理',
+    name: '健康数据<br/>AI健康数据洞察',
-    desc: '降低企业医疗成本，提升员工健康与生产力。',
+    desc: '基于生理+心理双指标模型，结合AI多维度模型分析，为组织和个人提供科学精准的健康解决方案。',
-    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
   },
   {
-    name: '健康产业链供应商',
+    name: '健康服务团队<br/>双重认证教练团队',
     desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
-    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
   },
   {
-    name: '健康管理专业培训',
+    name: '健康监测<br/>实时动态健康监测',
     desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
-    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
   }
 ]
 </script>
@@ -48,97 +49,118 @@ const sceneList = [
 
 .scene-section {
   text-align: center;
-  background-color: @bg-color;
+  background-color: #f5f7fe;
+  .py(130px);
 
   .scene-title {
     font-size: @font-size-xxl;
     font-weight: @font-weight-bold;
     color: @text-color;
-    .pb(60px);
+    .pb(20px);
-    .pt(100px);
+    .pt(40px);
+  }
+
+  .scene-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    max-width: 600px;
+    margin: 0 auto 80px;
   }
 
   .scene-list {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    justify-content: center;
+    gap: 20px;
-    gap: @space-lg;
+    justify-items: center;
+    .px(192px);
+    margin: 0 auto;
   }
 
   .scene-item {
-    width: 284px;
+    perspective: 1000px;
-    height: 336px;
-    perspective: 1000px; // 3D透视效果
     cursor: pointer;
-
+    width: 100%;
     .scene-inner {
       position: relative;
       width: 100%;
       height: 100%;
-      padding: 0px 16px;
+      .pt(20px);
+      .pb(30px);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      gap: 16px;
+      background: #ffffff;
-      background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
+      border-radius: @border-radius-lg;
-      border-radius: @border-radius-md;
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
-      transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); // 平滑过渡
+      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 
-      // 初始状态
       .scene-icon {
-        width: 150px;
+        width: 291px;
-        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+        height: 219px;
+        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
       }
 
       .scene-name {
-        font-size: @font-size-md;
+        font-size: @font-size-lg;
-        font-weight: @font-weight-medium;
+        font-weight: bold;
-        color: @text-color;
+        color: @text-color-secondary;
-        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+        text-align: center;
+        //background: pink;
+        .mt(10px);
+        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
       }
 
       .scene-desc {
         font-size: @font-size-sm;
         color: @text-color-light;
-        line-height: 1.4;
+        line-height: 25px;
+        text-align: center;
         max-height: 0;
         opacity: 0;
+        .px(20px);
+        margin-top: 10px;
         overflow: hidden;
-        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-        margin-top: -10px; // 初始位置向上偏移
       }
     }
 
-    // 悬停状态
     &:hover .scene-inner {
-      transform: translateY(-10px) scale(1.05);
+      transform: translateY(-15px) scale(1.05);
-      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 15px 35px rgba(50, 120, 255, 0.15);
-      background: linear-gradient(180deg, #fff 0%, #e6f0ff 100%);
+      //background: linear-gradient(180deg, #ffffff 0%, #e6f0ff 100%);
     }
 
     &:hover .scene-icon {
-      transform: scale(1.1);
+      //transform: scale(1.15);
-      margin-bottom: 8px;
+      //margin-bottom: 10px;
     }
 
     &:hover .scene-name {
       color: @primary-color;
-      transform: translateY(5px);
     }
 
     &:hover .scene-desc {
-      max-height: 100px;
+      max-height: 120px;
       opacity: 1;
-      transform: translateY(10px);
     }
   }
 }
 
 @media (max-width: @tablet-breakpoint) {
+  .scene-list {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: @space-lg;
+  }
+
   .scene-item {
-    width: 100%;
+    height: 280px;
-    max-width: 280px;
+  }
+}
+
+@media (max-width: @mobile-breakpoint) {
+  .scene-list {
+    grid-template-columns: 1fr;
   }
 }
 </style>

vite.config.ts

@@ -59,24 +59,24 @@ export default defineConfig({
           //   const componentName = id.split('element-plus/es/components/')[1].split('/')[0]
           //   return `element-${componentName}`
           // }
-          // if (id.includes('node_modules')) {
+          if (id.includes('node_modules')) {
-          //   // 将第三方库单独分包（如 axios、vue 等）
+            // 将第三方库单独分包（如 axios、vue 等）
-          //   return id.split('node_modules/')[1].split('/')[0]
+            return id.split('node_modules/')[1].split('/')[0]
-          // }
+          }
           // 1. 将 Element Plus 整体打包为一个 chunk
           // 只分割实际使用的库
-          if (id.includes('vue') || id.includes('vue-router') || id.includes('pinia')) {
+          // if (id.includes('vue') || id.includes('vue-router') || id.includes('pinia')) {
-            return 'vue-vendor'
+          //   return 'vue-vendor'
-          }
+          // }
-
+          //
-          if (id.includes('axios') || id.includes('nprogress')) {
+          // if (id.includes('axios') || id.includes('nprogress')) {
-            return 'utils'
+          //   return 'utils'
-          }
+          // }
-
+          //
-          // 不强制分割第三方依赖，让 Vite 自动处理
+          // // 不强制分割第三方依赖，让 Vite 自动处理
-          if (id.includes('node_modules') && !id.includes('@babel') && !id.includes('@types')) {
+          // if (id.includes('node_modules') && !id.includes('@babel') && !id.includes('@types')) {
-            return undefined // 取消手动分割
+          //   return undefined // 取消手动分割
-          }
+          // }
         }
       }
     }