feat: 20250617 「生态合作、关于我们」等页面布局

src/views/Ecosystem/sections/CoreAdvantages.vue

@@ -4,7 +4,9 @@
     <p class="section-subtitle">完整的服务生态闭环</p>
     <div class="advantages-grid">
       <div v-for="(item, i) in advantages" :key="i" class="advantage-item">
-        <img :src="item.icon" alt="优势图标" class="item-icon" />
+        <div class="section-icon">
+          <img :src="item.icon" alt="优势图标" class="item-icon" />
+        </div>
         <p class="item-title">{{ item.title }}</p>
       </div>
     </div>
@@ -14,27 +16,27 @@
 <script setup lang="ts">
 const advantages = [
   {
-    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-1.png',
+    icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
     title: 'AI+生命科学创新系统'
   },
   {
-    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-2.png',
+    icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
-    title: '丰富的市场验证与成功案例'
+    title: '市场验证与成功案例'
   },
   {
-    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-3.png',
+    icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
     title: '独有技术护城河'
   },
   {
-    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-4.png',
+    icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
     title: '完整的服务生态闭环'
   },
   {
-    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-5.png',
+    icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
     title: '低风险的合作保障'
   },
   {
-    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-6.png',
+    icon: 'https://images.health.ufutx.com/202506/19/cde9fb5a9b0174733c1bd9ae19bb5a51.png',
     title: '百亿赛道先行者'
   }
 ]
@@ -43,24 +45,25 @@ const advantages = [
 <style scoped lang="less">
 .core-advantages {
   text-align: center;
-  padding: 80px 20px;
+  padding: 100px 192px;
-
+  border-top: 30px solid #f5f7fe;
+  border-bottom: 30px solid #f5f7fe;
   .section-title {
     font-size: @font-size-xxl;
     font-weight: bold;
-    color: @text-color-primary;
+    //background: red;
-    margin-bottom: 10px;
+    color: @text-color;
+    margin-bottom: 20px;
   }
   .section-subtitle {
-    font-size: @font-size-md;
+    font-size: 20px;
     color: @text-color-secondary;
-    margin-bottom: 40px;
+    margin-bottom: 60px;
   }
   .advantages-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
-    gap: 40px;
+    gap: 80px;
-    max-width: 1200px;
     margin: 0 auto;
 
     @media (max-width: @tablet-breakpoint) {
@@ -71,14 +74,29 @@ const advantages = [
     }
   }
   .advantage-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    flex: 1 0 0;
+    .section-icon {
+      display: flex;
+      width: 190px;
+      padding: 2px 25.666px 0px 26.334px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 20px 20px 20px 0px;
+      background: linear-gradient(180deg, rgba(236, 243, 255, 0) 0%, #ecf3ff 100%);
+    }
     .item-icon {
-      width: 60px;
+      width: 138px;
-      height: 60px;
+      height: 138px;
       margin-bottom: 10px;
     }
     .item-title {
-      font-size: @font-size-sm;
+      font-size: @font-size-lg;
-      color: @text-color-primary;
+      color: @text-color;
     }
   }
 }

src/views/Ecosystem/sections/EnterpriseCooperation.vue

@@ -3,14 +3,18 @@
     <h2 class="section-title">企业/产业链合作</h2>
     <p class="section-subtitle">从单点受益到生态共赢，重构健康产业价值</p>
     <div class="cooperation-pyramid">
-      <img src="https://images.health.ufutx.com/202506/18/eco-pyramid.png" alt="金字塔模型" class="pyramid-img" />
+      <img
+        src="https://images.health.ufutx.com/202506/19/31b93a2590b7410aa30de25c430e990c.png"
+        alt="金字塔模型"
+        class="pyramid-img"
+      />
       <!-- 标签可动态配置，此处简化 -->
-      <div class="pyramid-labels">
+      <!--      <div class="pyramid-labels">-->
-        <span>终端用户</span>
+      <!--        <span>终端用户</span>-->
-        <span>健康设备商/保险/金融</span>
+      <!--        <span>健康设备商/保险/金融</span>-->
-        <span>友福AI生态中枢平台</span>
+      <!--        <span>友福AI生态中枢平台</span>-->
-        <span>政府/医疗机构</span>
+      <!--        <span>政府/医疗机构</span>-->
-      </div>
+      <!--      </div>-->
     </div>
   </section>
 </template>
@@ -22,24 +26,24 @@
 <style scoped lang="less">
 .enterprise-cooperation {
   text-align: center;
-  padding: 80px 20px;
+  padding: 100px 0px;
   background: #f5f7fe;
 
   .section-title {
     font-size: @font-size-xxl;
     font-weight: bold;
-    color: @text-color-primary;
+    color: @text-color;
     margin-bottom: 10px;
   }
   .section-subtitle {
-    font-size: @font-size-md;
+    font-size: @font-size-lg;
     color: @text-color-secondary;
-    margin-bottom: 40px;
+    margin-bottom: 50px;
   }
   .cooperation-pyramid {
     position: relative;
     .pyramid-img {
-      width: 40%;
+      width: 100%;
       height: auto;
     }
     .pyramid-labels {

src/views/Ecosystem/sections/HealthManagement.vue

@@ -1,66 +1,174 @@
 <template>
   <section class="health-management">
-    <div class="management-grid">
+    <!-- 2x2卡片布局 -->
-      <div v-for="(item, i) in managements" :key="i" class="management-item">
+    <div class="health-grid">
+      <div
+        v-for="(item, index) in sections"
+        :key="index"
+        class="health-item"
+        @mouseenter="highlightSector(index)"
+        @mouseleave="resetHighlight"
+      >
         <h3 class="item-title">{{ item.title }}</h3>
         <p class="item-desc">{{ item.desc }}</p>
       </div>
     </div>
+
+    <!-- 中间扇形（SVG实现） -->
+    <div class="sector-svg-container">
+      <svg class="sector-svg" viewBox="0 0 400 400">
+        <defs>
+          <linearGradient id="sectorGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#1E6DD8" />
+            <stop offset="100%" stop-color="#4B89DC" />
+          </linearGradient>
+        </defs>
+        <!-- 圆心平移到(200,200) -->
+        <g transform="translate(200, 200)">
+          <!-- 左上扇形：精准个性化AI健康管理 -->
+          <path d="M0,0 L0,-100 A100,100 0 0,0 -100,0 Z" class="sector" :class="{ active: highlightedSector === 0 }" />
+          <!-- 右上扇形：智能健康监测 -->
+          <path d="M0,0 L100,0 A100,100 0 0,0 0,-100 Z" class="sector" :class="{ active: highlightedSector === 1 }" />
+          <!-- 左下扇形：医疗资源整合 -->
+          <path d="M0,0 L-100,0 A100,100 0 0,0 0,100 Z" class="sector" :class="{ active: highlightedSector === 2 }" />
+          <!-- 右下扇形：健康教育与促进 -->
+          <path d="M0,0 L0,100 A100,100 0 0,0 100,0 Z" class="sector" :class="{ active: highlightedSector === 3 }" />
+        </g>
+      </svg>
+    </div>
   </section>
 </template>
 
 <script setup lang="ts">
-const managements = [
+import { ref } from 'vue'
+
+const sections = [
   {
     title: '精准个性化AI健康管理',
-    desc: '根据居民健康数据，提供个性化健康干预方案'
+    desc: '根据居民的健康数据和风险评估结果，提供个性化的健康建议和干预措施。制定针对性的全方位健康改善计划，包括精准营养、饮食、运动、心理等方面的辅导。'
   },
   {
     title: '智能健康监测',
-    desc: '利用可穿戴设备实时监测健康风险'
+    desc: '利用可穿戴设备实时收集居民的健康数据，如心率、血压、血糖等。通过大数据分析，对居民的健康状况进行动态监测和风险评估。'
   },
   {
     title: '医疗资源整合',
-    desc: '连接基层医疗机构，提升服务可及性'
+    desc: '连接社区卫生服务中心、乡镇卫生院、诊所等基层医疗机构，为居民提供便捷的医疗服务。实现远程健康管理的执行，提高医疗服务的可达性和效率。'
   },
   {
     title: '健康教育与促进',
-    desc: '普及健康知识，培育AI+大健康人才'
+    desc: '通过社区活动、线上平台等方式，普及健康知识，提高居民的健康意识。健康人才培育场景，协同培训AI+大健康领域新型人才，解决地区人才就业问题'
   }
 ]
+
+const highlightedSector = ref(3)
+
+const highlightSector = (index: number) => {
+  highlightedSector.value = index
+}
+
+const resetHighlight = () => {
+  highlightedSector.value = -1
+}
 </script>
 
 <style scoped lang="less">
 .health-management {
-  padding: 80px 20px;
+  position: relative;
-  max-width: 1200px;
+  padding: 0px 192px;
+  //max-width: 1200px;
   margin: 0 auto;
 
-  .management-grid {
+  .health-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 40px;
+    gap: 10px;
+    position: relative;
+    z-index: 1;
 
-    @media (max-width: @tablet-breakpoint) {
+    .health-item {
-      grid-template-columns: 1fr;
+      //width: 762px;
+      padding: 100px 50px;
+      background: #f6f8fe;
+      text-align: left;
+      transition: all 0.3s ease;
+      position: relative;
+      z-index: 2;
+
+      &:nth-child(1) {
+        border-top-left-radius: 8px;
+      }
+      &:nth-child(2) {
+        border-top-right-radius: 8px;
+      }
+      &:nth-child(3) {
+        border-bottom-left-radius: 8px;
+      }
+      &:nth-child(4) {
+        border-bottom-right-radius: 8px;
+      }
+
+      &:hover {
+        background: #e6ebf8;
+        transform: translateY(-5px);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
+      }
+
+      .item-title {
+        font-size: 50px;
+        margin-bottom: 16px;
+        font-weight: 400;
+        color: @text-color;
+      }
+
+      .item-desc {
+        font-size: 20px;
+        color: @text-color-secondary;
+        line-height: 34px;
+      }
     }
   }
-  .management-item {
-    background: #fff;
-    padding: 30px;
-    border-radius: @border-radius-lg;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
 
-    .item-title {
+  .sector-svg-container {
-      font-size: @font-size-lg;
+    position: absolute;
-      font-weight: bold;
+    top: 50%;
-      color: @text-color-primary;
+    left: 50%;
-      margin-bottom: 10px;
+    transform: translate(-50%, -50%);
+    width: 468px;
+    height: 468px;
+    z-index: 9;
+  }
+
+  .sector-svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .sector {
+    fill: #cde2ff;
+    stroke: none;
+    //stroke-width: 10;
+    transition: all 0.3s ease;
+  }
+
+  .sector.active {
+    fill: url(#sectorGradient);
+    transform: scale(1.05);
+    filter: drop-shadow(0 0 10px rgba(30, 109, 216, 0.5));
+  }
+
+  @media (max-width: 768px) {
+    .health-grid {
+      grid-template-columns: 1fr;
+      gap: 20px;
+
+      .health-item {
+        border-radius: 8px !important;
+      }
     }
-    .item-desc {
+
-      font-size: @font-size-sm;
+    .sector-svg-container {
-      color: @text-color-light;
+      display: none;
-      line-height: 1.6;
     }
   }
 }

src/views/Ecosystem/sections/MedicalCooperation.vue

@@ -3,15 +3,19 @@
     <h2 class="section-title">医疗健康合作</h2>
     <p class="section-subtitle">赋能医疗健康产业升级，重新定义数字健康服务标准</p>
     <div class="cooperation-funnel">
-      <img src="https://images.health.ufutx.com/202506/18/eco-funnel.png" alt="漏斗模型" class="funnel-img" />
+      <img
+        src="https://images.health.ufutx.com/202506/19/61d397f0f9529af1d1c583bb9ff1cc41.png"
+        alt="漏斗模型"
+        class="funnel-img"
+      />
       <!-- 标签可动态配置，此处简化 -->
-      <div class="funnel-labels">
+      <!--      <div class="funnel-labels">-->
-        <span>健康管理中心</span>
+      <!--        <span>健康管理中心</span>-->
-        <span>专科指导</span>
+      <!--        <span>专科指导</span>-->
-        <span>轻量化AI赋能</span>
+      <!--        <span>轻量化AI赋能</span>-->
-        <span>数据反哺价值提升</span>
+      <!--        <span>数据反哺价值提升</span>-->
-        <span>全链提效</span>
+      <!--        <span>全链提效</span>-->
-      </div>
+      <!--      </div>-->
     </div>
   </section>
 </template>
@@ -23,18 +27,18 @@
 <style scoped lang="less">
 .medical-cooperation {
   text-align: center;
-  padding: 80px 20px;
+  padding: 100px 192px;
 
   .section-title {
     font-size: @font-size-xxl;
     font-weight: bold;
-    color: @text-color-primary;
+    color: @text-color;
     margin-bottom: 10px;
   }
   .section-subtitle {
-    font-size: @font-size-md;
+    font-size: @font-size-lg;
     color: @text-color-secondary;
-    margin-bottom: 40px;
+    margin-bottom: 50px;
   }
   .cooperation-funnel {
     position: relative;

src/views/Ecosystem/sections/RegionCooperation.vue

@@ -4,8 +4,10 @@
     <p class="section-subtitle">助力健康中国战略落地，完善健康城市建设</p>
     <div class="cooperation-grid">
       <div v-for="(item, i) in cooperations" :key="i" class="cooperation-item">
-        <img :src="item.icon" alt="合作图标" class="item-icon" />
+        <div class="section-icon">
-        <p class="item-title">{{ item.title }}</p>
+          <img :src="item.icon" alt="合作图标" class="item-icon" />
+          <p class="item-title">{{ item.title }}</p>
+        </div>
         <p class="item-desc">{{ item.desc }}</p>
       </div>
     </div>
@@ -15,19 +17,19 @@
 <script setup lang="ts">
 const cooperations = [
   {
-    icon: 'https://images.health.ufutx.com/202506/18/eco-region-1.png',
+    icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
     title: 'AI+生命科学创新系统',
-    desc: '国际顶尖AI+健康管理系统，30+项专利技术护航'
+    desc: '创新的友福七维AI健康修复系统，30+独家专利及知识产权支撑，实现真正的生命健康'
   },
   {
-    icon: 'https://images.health.ufutx.com/202506/18/eco-region-2.png',
+    icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
     title: '丰富的市场验证与成功案例',
-    desc: '已服务50+城市，数千万用户验证，效果显著'
+    desc: '已服务16+国家、70+地区客户，数千例客户成功案例'
   },
   {
-    icon: 'https://images.health.ufutx.com/202506/18/eco-region-3.png',
+    icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
     title: '独有技术护城河',
-    desc: '核心算法准确率超95%，领先行业30%'
+    desc: '创新AI算法×双模型评估体系，精准度超传统300%'
   }
 ]
 </script>
@@ -35,25 +37,25 @@ const cooperations = [
 <style scoped lang="less">
 .region-cooperation {
   text-align: center;
-  padding: 80px 20px;
+  padding: 100px 192px;
-  background: #f5f7fe;
+  background: #ffffff;
 
   .section-title {
     font-size: @font-size-xxl;
     font-weight: bold;
-    color: @text-color-primary;
+    color: @text-color;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
   }
   .section-subtitle {
-    font-size: @font-size-md;
+    font-size: @font-size-lg;
     color: @text-color-secondary;
-    margin-bottom: 40px;
+    margin-bottom: 60px;
   }
   .cooperation-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 40px;
-    max-width: 1200px;
+    //max-width: 1200px;
     margin: 0 auto;
 
     @media (max-width: @tablet-breakpoint) {
@@ -64,25 +66,27 @@ const cooperations = [
     }
   }
   .cooperation-item {
-    background: #fff;
+    background: #f5f7fe;
     padding: 30px;
-    border-radius: @border-radius-lg;
+    text-align: left;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+    .section-icon {
-
+      display: flex;
-    .item-icon {
+      align-items: center;
-      width: 80px;
+      //gap:;
-      height: 80px;
+      .item-icon {
-      margin-bottom: 20px;
+        width: 60px;
+        height: 60px;
+        padding: 10px;
+      }
     }
     .item-title {
       font-size: @font-size-lg;
-      font-weight: medium;
+      font-weight: 600;
-      color: @text-color-primary;
+      color: @text-color;
-      margin-bottom: 10px;
     }
     .item-desc {
       font-size: @font-size-sm;
-      color: @text-color-light;
+      color: @text-color-secondary;
     }
   }
 }

vite.config.ts

@@ -9,6 +9,7 @@ import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 import legacy from '@vitejs/plugin-legacy'
+
 export default defineConfig({
   plugins: [
     vue(),
@@ -48,7 +49,27 @@ export default defineConfig({
       svgo: { plugins: [{ name: 'removeViewBox' }] }
     })
   ],
+  server: {
+    host: '0.0.0.0', // 允许外部访问
+    port: 3000, // 指定端口
+    open: true, // 自动打开浏览器
+    fs: {
+      strict: false // 允许访问项目根目录外的文件
+    },
+    // 代理配置（如有跨域问题）
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: path => path.replace(/^\/api/, '')
+      }
+    }
+  },
+  optimizeDeps: {
+    include: ['element-plus'] // 预构建依赖
+  },
   build: {
+    chunkSizeWarningLimit: 1000, // 增大分块警告阈值
     rollupOptions: {
       // external: ['element-plus', 'element-plus/dist/index.css'], // 排除 Element Plus
       // external: ['element-plus'], // 排除 Element Plus 从打包中