From cdd632ea2508027cbf8da624053b5120bdec152a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?mac=C2=B7ufutx?= <dengzhifeng_63@163.com>
Date: Wed, 18 Jun 2025 18:59:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=2020250617=20=E3=80=8C=E5=8F=8B=E7=A6=8F?=
 =?UTF-8?q?=E5=90=8C=E4=BA=ABapp=E3=80=81=E7=94=9F=E6=80=81=E5=90=88?=
 =?UTF-8?q?=E4=BD=9C=E3=80=8D=E7=AD=89=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/android.png                  | Bin 0 -> 830 bytes
 src/assets/icons/ios.png                      | Bin 0 -> 798 bytes
 src/styles/global.less                        |  22 ++
 src/views/About/About.vue                     |  40 ++--
 .../{Banner.vue => BannerCarousel.vue}        |   3 +-
 src/views/About/sections/CompanyIntro.vue     | 111 ++++++++++
 src/views/About/sections/CompanyValues.vue    | 180 ++++++++++++++++
 src/views/About/sections/MissionVision.vue    |  84 ++++++++
 src/views/About/sections/Partners.vue         |  75 +++++++
 .../About/sections/QualificationCarousel.vue  |  86 ++++++++
 src/views/About/sections/RedefineHealth.vue   |  93 ++++++++
 src/views/App/App.vue                         |  57 +++--
 src/views/App/sections/ApplicationScenes.vue  | 198 ++++++++++++++++++
 src/views/App/sections/Banner.vue             |  89 ++++----
 src/views/App/sections/DownloadSection.vue    | 120 +++++++++++
 src/views/App/sections/FeatureNav.vue         | 134 ++++++++++++
 src/views/App/sections/HealthDevice.vue       | 125 +++++++++++
 src/views/App/sections/SpeechModule.vue       | 104 +++++++++
 src/views/Dating/Dating.vue                   |  29 +--
 src/views/Dating/sections/AiTags.vue          | 127 +++++++++++
 src/views/Dating/sections/Banner.vue          |   3 +-
 src/views/Dating/sections/PainPoints.vue      | 127 +++++++++++
 src/views/Dating/sections/SuccessStories.vue  |  94 +++++++++
 src/views/Ecosystem/Ecosystem.vue             |  39 ++--
 src/views/Ecosystem/sections/Banner.vue       |   3 +-
 src/views/Ecosystem/sections/CityPartner.vue  | 122 +++++++++++
 .../Ecosystem/sections/CooperationConsult.vue |  36 ++++
 .../Ecosystem/sections/CoreAdvantages.vue     |  85 ++++++++
 .../sections/EnterpriseCooperation.vue        |  63 ++++++
 .../Ecosystem/sections/HealthManagement.vue   |  67 ++++++
 .../Ecosystem/sections/MedicalCooperation.vue |  62 ++++++
 .../Ecosystem/sections/RegionCooperation.vue  |  89 ++++++++
 .../Ecosystem/sections/TalentTraining.vue     | 127 +++++++++++
 src/views/Home/sections/Banner.vue            |   3 +-
 src/views/Network/Network.vue                 |  16 +-
 src/views/Network/sections/AppPromotion.vue   | 129 ++++++++++++
 src/views/Network/sections/Banner.vue         |   3 +-
 src/views/Network/sections/CustomerCases.vue  |  51 ++---
 src/views/Network/sections/GlobalService.vue  |  51 -----
 .../Network/sections/OneStopSolution.vue      |   1 +
 src/views/News/sections/Banner.vue            |   3 +-
 41 files changed, 2639 insertions(+), 212 deletions(-)
 create mode 100644 src/assets/icons/android.png
 create mode 100644 src/assets/icons/ios.png
 rename src/views/About/sections/{Banner.vue => BannerCarousel.vue} (99%)
 create mode 100644 src/views/About/sections/CompanyIntro.vue
 create mode 100644 src/views/About/sections/CompanyValues.vue
 create mode 100644 src/views/About/sections/MissionVision.vue
 create mode 100644 src/views/About/sections/Partners.vue
 create mode 100644 src/views/About/sections/QualificationCarousel.vue
 create mode 100644 src/views/About/sections/RedefineHealth.vue
 create mode 100644 src/views/App/sections/ApplicationScenes.vue
 create mode 100644 src/views/App/sections/DownloadSection.vue
 create mode 100644 src/views/App/sections/FeatureNav.vue
 create mode 100644 src/views/App/sections/HealthDevice.vue
 create mode 100644 src/views/App/sections/SpeechModule.vue
 create mode 100644 src/views/Dating/sections/AiTags.vue
 create mode 100644 src/views/Dating/sections/PainPoints.vue
 create mode 100644 src/views/Dating/sections/SuccessStories.vue
 create mode 100644 src/views/Ecosystem/sections/CityPartner.vue
 create mode 100644 src/views/Ecosystem/sections/CooperationConsult.vue
 create mode 100644 src/views/Ecosystem/sections/CoreAdvantages.vue
 create mode 100644 src/views/Ecosystem/sections/EnterpriseCooperation.vue
 create mode 100644 src/views/Ecosystem/sections/HealthManagement.vue
 create mode 100644 src/views/Ecosystem/sections/MedicalCooperation.vue
 create mode 100644 src/views/Ecosystem/sections/RegionCooperation.vue
 create mode 100644 src/views/Ecosystem/sections/TalentTraining.vue
 create mode 100644 src/views/Network/sections/AppPromotion.vue
 delete mode 100644 src/views/Network/sections/GlobalService.vue

diff --git a/src/assets/icons/android.png b/src/assets/icons/android.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6ff2fa3209b8e9a991963e855fd0afbf50e607b
GIT binary patch
literal 830
zcmV-E1Ht@>P)<h;3K|Lk000e1NJLTq001Wd001Zm1^@s6ef8tu00009a7bBm000o2
z000o20Vd5lGynhq0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0@F!EK~#7F?U=uB
z(?Ar*-<{oH!4lL4RVqkkNg{Qi3<SjF{s-YNp!@|iBU6)&E$UxD`xlUIY?uWa80b<d
z2?Is~sY5HwP-JLwk7u_AJ8r`HYAQhfNJ;Kpo=;!jk9YSDAm<#ZR_~Z;{1+GRE`b6Z
z6hIVh)3k~*zW$4hj)rwmKnDdF;|-(mb(M-u-}Z$XhUbelHI2K6hXu!RY&UQgxCWfJ
zKmi7dRLixdpiX3rS=5zQvSns-7;TMEyD=DaAAkZ%;wqKf4*^A!9+w$fhat9l@7`=c
zN;F7Gxm;VLH+oFM49Q1|)Qk1m*#$T_`1Ar&kV@Q%u%=%|U^`UaqvHG||G<Ya&lgC(
z*4*6HFC=gqB#|Cgf7PK7??aoG`Mn|P4rjx+6C3AzIS?tt^RP~z(QoeVzT5!`<X5Y|
z>Y^q<o3o?hwD%)XPv|@5GaQcE^s@{SNcEg)E)_2n3ZEe(zJ0%V`Ddt^f>aPT3_~fx
zPj1hXYENodg%CwfaSP6wQ-?K(V}PrO6i7KciS8o{GQ#sNb^IL#5!>`Jsj4#=yl(wg
z9EFQIRX+XY!E6c#t>}t7E5Rxjcpm{*qIJFAwjK3L%sHxv&xhkT%N{ni<q2UyQp?{<
zE>4wPoGQ6ERdR8vB*k%VM@>4-+VCep*o>OmjNTb{NgUJn_dhzN(zOo^!KFQRi_Tsx
zT_4WVHnsv8L3{OPuixFcLdSNp_7JpIulLGM_{lUzM|3OejemTTKMmPA=RmeNGEP$2
z7Y(&rnqBaF*@Cm-(wIK#_q)$zoKq*&eilYaa$V3tG1d_0*TZr&OFRCPHE5o7JkM}t
za)*%AcO^7eoND!!OBWG|`mkIn*JA%MAzaG%9Y{$YgjM+;#c595W@9$QC%rcAFNc!2
zAb=vShe8;#SXxIbw?Qk^2@GWGG66Sp{2R?_*RQfyv;QPN0KQN9p^FT-eE<Le07*qo
IM6N<$f*%KM+W-In

literal 0
HcmV?d00001

diff --git a/src/assets/icons/ios.png b/src/assets/icons/ios.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8b9e2a54bc7a2a5538c31fc9d6ae570d9fe61dd
GIT binary patch
literal 798
zcmV+(1L6FMP)<h;3K|Lk000e1NJLTq001Wd001Zm1^@s6ef8tu00009a7bBm000o2
z000o20Vd5lGynhq0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0<%d(K~#7F?U=o8
z6G0HiXZC{aAVo67E<iy#3d`<r6A@849UbrlBu^0DAoddkm+6v{3co>Ip~Tgth-5p>
zB2j>p;tB*8o7^zxU~zHoWAA*6km6rs-|l$#f3rKYvj(`!)M^_hqy#||wc7d?k$4M4
z4HV*Ozke(tA(@La%|<bw|M}4qHEkOVd#UDGf{e-KejEWoefo@uT}X+54DptdT~xo(
z=;9%yBvWxjxO=k&W&iy608)~fxJu<kotM-6+kz4WZo(X7CJynJ>3f<8OB11flmo(x
z!a~8}{d8qsw-}Nq?@s%L5H?*=8x7ZTockRqySDe6<@|Rqr4$ien{dhU|0WKl5U*CB
z?*O??HZRU}Ndh=vVTXP%O%kt5y9BfqFdTbTY^#Wj701Gk{5dOpB<v7@&0$f$6|n*E
zOErhXUMq6QsLpC-eUB%72by3HZbo@9G$6d3rBxU}D{g5+#gU6UpbNrwf7olrnFWgb
zQ%S_`n{=SO94|LjECa<M(QD8I61KcFqhcE<&UIZAG-2d~rD_|z=Y)6$nm9ZAG^e=#
zgnuqBN!cD25T8L4lpxr`JSRaPuT%|#qZL4T(<X+`X+E!&PM$z<qtU1fIw9Iq5oiQ8
z+V)qcR9b8BR}=K{a&>jhESI00UR-<$Ov<6r%D1M}7ZX*G>pjB|#jyTRagO73_(SQK
znFA{-DTj)a(z3a%X@f?PMCAC9N!S^U-t+oO(1R6sZHyE*@gCwfXn?EWH*q#boB>CY
zEIoYufIYYY88NAX2Pd64JEgPray)KAR*6}$3igQgoQIe9R#wU%?it1-xLqOJJmEeX
zw2x@C`E5_R?HgR@$il3!!TE{uy(IBpQ(RRvxEgIt9)##RPQePRY^S!oZ}~!vi7wO&
c7A%<IH(~4eM@2*7ZvX%Q07*qoM6N<$f^;5V-2eap

literal 0
HcmV?d00001

diff --git a/src/styles/global.less b/src/styles/global.less
index cef9d7c..26ff50a 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -30,6 +30,7 @@
 
 @text-color: #0E0E0E;            // 主文本色
 @text-color-secondary: #66676C;  // 次要文本色
+@text-color-primary: #18CA6E;    // 主色调文本
 @text-color-light: #748EA6;      // 浅色文本
 @bg-color: #fff;              // 背景色
 @bg-color-light: #f5f7fa;     // 浅背景色
@@ -221,6 +222,27 @@ html, body {
 // 文本工具类
 .text-bold { font-weight: @font-weight-bold; }
 .text-muted { color: @text-color-light; }
+/* 两行文本省略样式 */
+.text-2-line-ellipsis {
+  /* 核心属性 */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  /* 兼容性补充 */
+  text-overflow: ellipsis;
+  word-break: break-word;
+  white-space: normal;
+
+  /* 可选：自定义省略号样式 */
+  /* 注意：部分浏览器不支持自定义省略号，这是一个实验性属性 */
+  text-overflow: ellipsis;
+  -webkit-text-overflow: ellipsis;
+
+  /* 防止长英文单词溢出 */
+  word-wrap: break-word;
+}
 
 // 响应式工具类
 @media (max-width: @mobile-breakpoint) {
diff --git a/src/views/About/About.vue b/src/views/About/About.vue
index d2b119d..c27af0e 100644
--- a/src/views/About/About.vue
+++ b/src/views/About/About.vue
@@ -1,31 +1,29 @@
 <template>
-  <div class="home-page">
-    <!--    Banner 模块-->
-    <Banner />
-    <!--    &lt;!&ndash;    核心价值模块&ndash;&gt;-->
-    <!--    <CoreValue />-->
-    <!--    &lt;!&ndash;    应用场景模块&ndash;&gt;-->
-    <!--    <UseCases />-->
-    <!--    &lt;!&ndash;    全球服务模块&ndash;&gt;-->
-    <!--    <GlobalService />-->
-    <!--    &lt;!&ndash;    客户反馈模块&ndash;&gt;-->
-    <!--    <CustomerFeedback />-->
-    <!--    &lt;!&ndash;    合作伙伴模块&ndash;&gt;-->
-    <!--    <Partners />-->
+  <div class="about-page">
+    <BannerCarousel />
+    <CompanyIntro />
+    <RedefineHealth />
+    <CompanyValues />
+    <QualificationCarousel />
+    <MissionVision />
+    <Partners />
+    <!--    <FooterContact />-->
   </div>
 </template>
 
 <script setup lang="ts">
-import Banner from './sections/Banner.vue'
-// import CoreValue from './sections/CoreValue.vue'
-// import UseCases from './sections/UseCases.vue'
-// import GlobalService from './sections/GlobalService.vue'
-// import CustomerFeedback from './sections/CustomerFeedback.vue'
-// import Partners from './sections/Partners.vue'
+import BannerCarousel from './sections/BannerCarousel.vue'
+import CompanyIntro from './sections/CompanyIntro.vue'
+import RedefineHealth from './sections/RedefineHealth.vue'
+import CompanyValues from './sections/CompanyValues.vue'
+import QualificationCarousel from './sections/QualificationCarousel.vue'
+import MissionVision from './sections/MissionVision.vue'
+import Partners from './sections/Partners.vue'
 </script>
 
 <style scoped lang="less">
-.home-page {
-  // 可设置全局背景或间距，按需扩展
+.about-page {
+  width: 100%;
+  overflow-x: hidden;
 }
 </style>
diff --git a/src/views/About/sections/Banner.vue b/src/views/About/sections/BannerCarousel.vue
similarity index 99%
rename from src/views/About/sections/Banner.vue
rename to src/views/About/sections/BannerCarousel.vue
index c3f2352..232d1a1 100644
--- a/src/views/About/sections/Banner.vue
+++ b/src/views/About/sections/BannerCarousel.vue
@@ -80,7 +80,8 @@
     top: 230px;
     right: 169px;
     padding: 20px 20px 0 20px;
-    width: 320px;
+    width: 330px;
+    height: 384px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     background: rgba(51, 51, 51, 0.3);
diff --git a/src/views/About/sections/CompanyIntro.vue b/src/views/About/sections/CompanyIntro.vue
new file mode 100644
index 0000000..6238f7c
--- /dev/null
+++ b/src/views/About/sections/CompanyIntro.vue
@@ -0,0 +1,111 @@
+<template>
+  <section class="company-intro">
+    <div class="intro-content">
+      <div class="intro-card">
+        <h2 class="card-title">简介<br />友福同享</h2>
+        <p class="card-desc">友福同享—<br />AI精准健康的领航者</p>
+        <p class="card-text">
+          友福同享（深圳）智能科技有限公司以人工智能为核心驱动力，专注于生命科学与AI技术融合，打造主动式精准健康管理平台。<br />
+          公司依托先进的算法模型与多维度数据体系，为个人提供精准预测与个性化健康方案，业务覆盖全球20+国家和地区，同时深度赋能企业、政府及医疗健康机构，提供标准化、场景化的AI健康解决方案，构建健康产业新生态。
+        </p>
+      </div>
+      <div class="team-info">
+        <h3 class="team-title">专业团队，引领AI健康未来</h3>
+        <ul class="team-list">
+          <li>汇聚华为/腾讯/IBM技术领袖 + 清华/康奈尔/中科院学术权威，团队具备：</li>
+          <br />
+          <li>✔️ 20年以上跨领域行业经验</li>
+          <li>✔️ 半导体芯片异构、生物医学工程、数字安全等复合技术背景</li>
+          <li>✔️ 联合国组技术标准制定参与经验</li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+/* 无业务逻辑 */
+</script>
+
+<style scoped lang="less">
+.company-intro {
+  padding: 0px 192px 100px 192px;
+  .intro-content {
+    display: flex;
+    align-items: center;
+    gap: 198px;
+
+    .intro-card {
+      //position: absolute;
+      //top: -430px;
+      //left: 192px;
+      margin-top: -430px;
+      z-index: 9;
+      width: 622px;
+      background: #313fa8;
+      color: #fff;
+      padding: 160px 40px;
+      text-align: left;
+      .card-title {
+        font-size: 80px;
+        .mb(82px);
+        border-bottom: 1px solid #fff;
+      }
+
+      .card-desc {
+        font-size: 40px;
+        margin-top: 40px;
+      }
+
+      .card-text {
+        font-size: @font-size-lg;
+        line-height: 36px;
+        .mt(20px);
+      }
+    }
+
+    .team-info {
+      flex: 1;
+      text-align: left;
+      .team-title {
+        font-size: 50px;
+        font-weight: bold;
+        color: @text-color;
+        margin-bottom: 20px;
+      }
+
+      .team-list {
+        font-size: @font-size-lg;
+        color: @text-color-secondary;
+        list-style: none;
+
+        line-height: 34px;
+        li {
+          margin: 10px 0;
+
+          &::before {
+            content: ' ';
+            color: @primary-color;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: @tablet-breakpoint) {
+    padding: 40px 20px;
+    .intro-content {
+      flex-direction: column;
+
+      .intro-card {
+        order: 2;
+      }
+
+      .team-info {
+        order: 1;
+        margin-bottom: 40px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/About/sections/CompanyValues.vue b/src/views/About/sections/CompanyValues.vue
new file mode 100644
index 0000000..029314c
--- /dev/null
+++ b/src/views/About/sections/CompanyValues.vue
@@ -0,0 +1,180 @@
+<template>
+  <section class="company-values">
+    <h2 class="section-title">企业价值观</h2>
+    <div class="values-tabs">
+      <span
+        v-for="(tab, index) in valueTabs"
+        :key="index"
+        :class="{ active: currentTab === index }"
+        @click="currentTab = index"
+        >{{ tab }}</span
+      >
+    </div>
+    <!-- 健康优先 -->
+    <div v-show="currentTab === 0" class="values-content">
+      <div class="content-row">
+        <div class="content-text">
+          <h3>健康优先</h3>
+          <p>• 优先关注、保障员工的身心健康</p>
+          <p>• 持续输出健康理念与服务，帮助用户预防疾病</p>
+          <p>• 积极推动行业进步，促进全民健康意识提升</p>
+        </div>
+        <div class="content-img">
+          <img src="https://images.health.ufutx.com/202506/18/about-values-1.png" alt="健康优先" />
+        </div>
+      </div>
+    </div>
+    <!-- 使命驱动 -->
+    <div v-show="currentTab === 1" class="values-content">
+      <div class="content-row">
+        <div class="content-text">
+          <h3>使命驱动</h3>
+          <p>• 以提升人类生命质量为核心使命</p>
+          <p>• 持续投入研发，推动AI健康技术突破</p>
+          <p>• 让健康管理触达每一个人</p>
+        </div>
+        <div class="content-img">
+          <img src="https://images.health.ufutx.com/202506/18/about-values-2.png" alt="使命驱动" />
+        </div>
+      </div>
+    </div>
+    <!-- 鼓励创新 -->
+    <div v-show="currentTab === 2" class="values-content">
+      <div class="content-row">
+        <div class="content-text">
+          <h3>鼓励创新</h3>
+          <p>• 建立创新奖励机制，支持员工突破</p>
+          <p>• 与全球科研机构合作，探索前沿技术</p>
+          <p>• 持续优化产品，引领行业创新方向</p>
+        </div>
+        <div class="content-img">
+          <img src="https://images.health.ufutx.com/202506/18/about-values-3.png" alt="鼓励创新" />
+        </div>
+      </div>
+    </div>
+    <!-- 注重成长 -->
+    <div v-show="currentTab === 3" class="values-content">
+      <div class="content-row">
+        <div class="content-text">
+          <h3>注重成长</h3>
+          <p>• 为员工提供丰富的培训与晋升机会</p>
+          <p>• 助力合作伙伴成长，实现生态共赢</p>
+          <p>• 推动行业人才培养，输出专业标准</p>
+        </div>
+        <div class="content-img">
+          <img src="https://images.health.ufutx.com/202506/18/about-values-4.png" alt="注重成长" />
+        </div>
+      </div>
+    </div>
+    <!-- 团队精神 -->
+    <div v-show="currentTab === 4" class="values-content">
+      <div class="content-row">
+        <div class="content-text">
+          <h3>团队精神</h3>
+          <p>• 倡导开放协作，打破部门壁垒</p>
+          <p>• 以结果为导向，高效执行</p>
+          <p>• 相互支持，共同攻克行业难题</p>
+        </div>
+        <div class="content-img">
+          <img src="https://images.health.ufutx.com/202506/18/about-values-5.png" alt="团队精神" />
+        </div>
+      </div>
+    </div>
+    <!-- 创始人精神 -->
+    <div v-show="currentTab === 5" class="values-content">
+      <div class="content-row">
+        <div class="content-text">
+          <h3>创始人精神</h3>
+          <p>• 坚持长期主义，深耕健康领域</p>
+          <p>• 以用户价值为核心，拒绝短视行为</p>
+          <p>• 永葆创业激情，持续突破自我</p>
+        </div>
+        <div class="content-img">
+          <img src="https://images.health.ufutx.com/202506/18/about-values-6.png" alt="创始人精神" />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const valueTabs = ['健康优先', '使命驱动', '鼓励创新', '注重成长', '团队精神', '创始人精神']
+const currentTab = ref(0)
+</script>
+
+<style scoped lang="less">
+.company-values {
+  padding: 80px 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    text-align: center;
+    margin-bottom: 40px;
+  }
+  .values-tabs {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    margin-bottom: 40px;
+
+    span {
+      font-size: @font-size-md;
+      color: @text-color-secondary;
+      cursor: pointer;
+      padding-bottom: 5px;
+      border-bottom: 2px solid transparent;
+
+      &.active {
+        color: @primary-color;
+        border-bottom: 2px solid @primary-color;
+      }
+    }
+  }
+  .values-content {
+    .content-row {
+      display: flex;
+      align-items: center;
+      gap: 60px;
+
+      .content-text {
+        flex: 1;
+        text-align: left;
+
+        h3 {
+          font-size: @font-size-lg;
+          font-weight: bold;
+          color: @text-color-primary;
+          margin-bottom: 20px;
+        }
+        p {
+          font-size: @font-size-sm;
+          color: @text-color-light;
+          margin: 10px 0;
+        }
+      }
+      .content-img {
+        flex: 1;
+        text-align: center;
+        img {
+          width: 80%;
+        }
+      }
+    }
+
+    @media (max-width: @tablet-breakpoint) {
+      .content-row {
+        flex-direction: column;
+      }
+      .content-text {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/About/sections/MissionVision.vue b/src/views/About/sections/MissionVision.vue
new file mode 100644
index 0000000..1b6cb15
--- /dev/null
+++ b/src/views/About/sections/MissionVision.vue
@@ -0,0 +1,84 @@
+<template>
+  <section class="mission-vision">
+    <div class="mv-content">
+      <div class="mv-text">
+        <h2 class="mv-title">使命与愿景</h2>
+        <p class="mv-desc">使命-提升人类生命质量 —— 愿景-成为健康生活方式的引领者</p>
+        <p class="mv-text-detail">
+          友福同享致力于通过AI技术与生命科学的融合，为每个人提供精准、主动的健康管理方案。<br /><br />
+          我们相信，健康是生命的基石，而科技是推动健康进步的核心力量。未来，我们将持续突破创新，构建更完善的健康生态，让“主动健康”成为全民生活方式。
+        </p>
+      </div>
+      <div class="mv-img">
+        <img src="https://images.health.ufutx.com/202506/18/about-mv.png" alt="使命愿景" class="mv-bg-img" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+/* 无业务逻辑 */
+</script>
+
+<style scoped lang="less">
+.mission-vision {
+  padding: 80px 20px;
+  background: #f5f7fe;
+
+  .mv-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    .mv-text {
+      flex: 1;
+      text-align: left;
+
+      .mv-title {
+        font-size: @font-size-xxl;
+        font-weight: bold;
+        color: @text-color-primary;
+        margin-bottom: 20px;
+      }
+
+      .mv-desc {
+        font-size: @font-size-lg;
+        color: @text-color-secondary;
+        margin-bottom: 30px;
+      }
+
+      .mv-text-detail {
+        font-size: @font-size-sm;
+        color: @text-color-light;
+        line-height: 1.6;
+      }
+    }
+
+    .mv-img {
+      flex: 1;
+      text-align: right;
+
+      .mv-bg-img {
+        width: 80%;
+      }
+    }
+  }
+
+  @media (max-width: @tablet-breakpoint) {
+    .mv-content {
+      flex-direction: column;
+
+      .mv-text {
+        text-align: center;
+        margin-bottom: 40px;
+      }
+
+      .mv-img {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/About/sections/Partners.vue b/src/views/About/sections/Partners.vue
new file mode 100644
index 0000000..9a0e0df
--- /dev/null
+++ b/src/views/About/sections/Partners.vue
@@ -0,0 +1,75 @@
+<template>
+  <section class="partners">
+    <h2 class="section-title">合作伙伴</h2>
+    <p class="section-subtitle">正与众多客户一起创造更多价值</p>
+    <div class="partners-grid">
+      <div v-for="(item, i) in partnerList" :key="i" class="partner-item">
+        <img :src="item.logo" alt="合作伙伴logo" class="partner-logo" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const partnerList = [
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-tencent.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-sino.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-alibaba.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-junyi.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-sina.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-sina.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-acfun.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-acfun.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-sogou.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-sina.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-toutiao.png' },
+  { logo: 'https://images.health.ufutx.com/202506/18/partner-askdoc.png' }
+]
+</script>
+
+<style scoped lang="less">
+.partners {
+  text-align: center;
+  padding: 80px 20px;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    margin-bottom: 10px;
+  }
+
+  .section-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    margin-bottom: 40px;
+  }
+
+  .partners-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    .partner-item {
+      .partner-logo {
+        width: 100%;
+        height: auto;
+        filter: grayscale(100%);
+        transition: filter 0.3s;
+
+        &:hover {
+          filter: none;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/About/sections/QualificationCarousel.vue b/src/views/About/sections/QualificationCarousel.vue
new file mode 100644
index 0000000..be9e139
--- /dev/null
+++ b/src/views/About/sections/QualificationCarousel.vue
@@ -0,0 +1,86 @@
+<template>
+  <section class="qualification">
+    <h2 class="section-title">资质认证</h2>
+    <p class="section-subtitle">成立至今获得多项荣誉</p>
+    <div class="carousel-container">
+      <button class="carousel-btn prev" @click="slide(-1)">‹</button>
+      <div class="carousel-track" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
+        <div v-for="(item, i) in qualifications" :key="i" class="carousel-slide">
+          <img :src="item.img" alt="资质证书" class="slide-img" />
+        </div>
+      </div>
+      <button class="carousel-btn next" @click="slide(1)">›</button>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const qualifications = ref([
+  { img: 'https://images.health.ufutx.com/202506/18/about-cert-1.png' },
+  { img: 'https://images.health.ufutx.com/202506/18/about-cert-2.png' },
+  { img: 'https://images.health.ufutx.com/202506/18/about-cert-3.png' },
+  { img: 'https://images.health.ufutx.com/202506/18/about-cert-4.png' },
+  { img: 'https://images.health.ufutx.com/202506/18/about-cert-5.png' }
+])
+const currentIndex = ref(0)
+
+const slide = (direction: number) => {
+  currentIndex.value = (currentIndex.value + direction + qualifications.value.length) % qualifications.value.length
+}
+</script>
+
+<style scoped lang="less">
+.qualification {
+  text-align: center;
+  padding: 80px 20px;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    margin-bottom: 10px;
+  }
+  .section-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    margin-bottom: 40px;
+  }
+  .carousel-container {
+    position: relative;
+    max-width: 800px;
+    margin: 0 auto;
+    overflow: hidden;
+
+    .carousel-track {
+      display: flex;
+      transition: transform 0.5s ease;
+      .carousel-slide {
+        flex: 0 0 100%;
+        .slide-img {
+          width: 100%;
+        }
+      }
+    }
+    .carousel-btn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      border: none;
+      padding: 10px 15px;
+      cursor: pointer;
+      font-size: @font-size-lg;
+
+      &.prev {
+        left: 20px;
+      }
+      &.next {
+        right: 20px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/About/sections/RedefineHealth.vue b/src/views/About/sections/RedefineHealth.vue
new file mode 100644
index 0000000..67da984
--- /dev/null
+++ b/src/views/About/sections/RedefineHealth.vue
@@ -0,0 +1,93 @@
+<template>
+  <section class="redefine-health">
+    <h2 class="section-title">我们重新定义健康未来</h2>
+    <p class="section-subtitle">未来的健康趋势与持久的生活改变</p>
+    <div class="health-grid">
+      <div v-for="(item, i) in healthItems" :key="i" class="health-item">
+        <img :src="item.icon" alt="健康图标" class="item-icon" />
+        <p class="item-title">{{ item.title }}</p>
+        <p class="item-desc">{{ item.desc }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const healthItems = [
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/about-redefine-1.png',
+    title: '生命科学+AI的深度融合',
+    desc: '让人体健康管理像科研一样自然'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/about-redefine-2.png',
+    title: '万亿级产业新基建',
+    desc: '从个人健康到城市级智慧医疗的完整生态'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/about-redefine-3.png',
+    title: '人人都拥有的数字健康管家',
+    desc: '让真实有效的健康管理普惠全民'
+  }
+]
+</script>
+
+<style scoped lang="less">
+.redefine-health {
+  text-align: center;
+  padding: 80px 20px;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    margin-bottom: 10px;
+  }
+
+  .section-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    margin-bottom: 40px;
+  }
+
+  .health-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    @media (max-width: @tablet-breakpoint) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @media (max-width: @mobile-breakpoint) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .health-item {
+    background: #fff;
+    padding: 30px;
+    border-radius: @border-radius-lg;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+
+    .item-icon {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 20px;
+    }
+
+    .item-title {
+      font-size: @font-size-lg;
+      font-weight: medium;
+      color: @text-color-primary;
+      margin-bottom: 10px;
+    }
+
+    .item-desc {
+      font-size: @font-size-sm;
+      color: @text-color-light;
+    }
+  }
+}
+</style>
diff --git a/src/views/App/App.vue b/src/views/App/App.vue
index d2b119d..eb86ded 100644
--- a/src/views/App/App.vue
+++ b/src/views/App/App.vue
@@ -1,31 +1,50 @@
 <template>
-  <div class="home-page">
-    <!--    Banner 模块-->
+  <div class="app-page">
     <Banner />
-    <!--    &lt;!&ndash;    核心价值模块&ndash;&gt;-->
-    <!--    <CoreValue />-->
-    <!--    &lt;!&ndash;    应用场景模块&ndash;&gt;-->
-    <!--    <UseCases />-->
-    <!--    &lt;!&ndash;    全球服务模块&ndash;&gt;-->
-    <!--    <GlobalService />-->
-    <!--    &lt;!&ndash;    客户反馈模块&ndash;&gt;-->
-    <!--    <CustomerFeedback />-->
-    <!--    &lt;!&ndash;    合作伙伴模块&ndash;&gt;-->
-    <!--    <Partners />-->
+
+    <div class="section-divider">全方位健康生活方式的引领者</div>
+    <FeatureNav />
+    <HealthDevice :device="healthBand" />
+    <SpeechModule />
+    <HealthDevice :device="bodyScale" />
+    <ApplicationScenes />
+    <DownloadSection />
+    <!--    <FooterContact />-->
   </div>
 </template>
 
 <script setup lang="ts">
 import Banner from './sections/Banner.vue'
-// import CoreValue from './sections/CoreValue.vue'
-// import UseCases from './sections/UseCases.vue'
-// import GlobalService from './sections/GlobalService.vue'
-// import CustomerFeedback from './sections/CustomerFeedback.vue'
-// import Partners from './sections/Partners.vue'
+import HealthDevice from './sections/HealthDevice.vue'
+import SpeechModule from './sections/SpeechModule.vue'
+import ApplicationScenes from './sections/ApplicationScenes.vue'
+import DownloadSection from './sections/DownloadSection.vue'
+import FeatureNav from '@/views/App/sections/FeatureNav.vue'
+
+const healthBand = {
+  title: '健康手环',
+  desc: 'AI精准个性化健康方案服务<br/>智能穿戴设备数据监测，健康手环/你的专属健康管家，智能体脂秤、精准计算身体状态',
+  img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
+}
+
+const bodyScale = {
+  title: '智能体脂秤',
+  desc: 'AI精准个性化健康方案服务<br/>智能穿戴设备数据监测，健康手环/你的专属健康管家，智能体脂秤、精准计算身体状态',
+  img: 'https://images.health.ufutx.com/202506/18/8bac1effee823f0f85b164e20b7ab08e.png'
+}
 </script>
 
 <style scoped lang="less">
-.home-page {
-  // 可设置全局背景或间距，按需扩展
+.app-page {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.section-divider {
+  text-align: center;
+  font-size: 50px;
+  color: @text-color;
+  font-weight: bold;
+  .mt(100px);
 }
 </style>
diff --git a/src/views/App/sections/ApplicationScenes.vue b/src/views/App/sections/ApplicationScenes.vue
new file mode 100644
index 0000000..306e955
--- /dev/null
+++ b/src/views/App/sections/ApplicationScenes.vue
@@ -0,0 +1,198 @@
+<template>
+  <section class="app-scenes">
+    <h3 class="app-title">应用场景</h3>
+    <!--    <div class="scenes-tabs">-->
+    <!--      <span v-for="(tab, i) in tabs" :key="i" :class="{ active: currentTab === i }" @click="currentTab = i">{{-->
+    <!--        tab-->
+    <!--      }}</span>-->
+    <!--    </div>-->
+
+    <!-- 标签切换（友福动态 / 媒体报道） -->
+    <el-tabs v-model="activeTab" class="news-tabs" @tab-click="resetPage">
+      <el-tab-pane label="友福健康生态" name="dynamic"></el-tab-pane>
+      <el-tab-pane label="幸福婚恋" name="report"></el-tab-pane>
+      <el-tab-pane label="个人成长" name="growth"></el-tab-pane>
+    </el-tabs>
+
+    <div v-show="currentTab === 0" class="scenes-content">
+      <div class="scene-desc">
+        <div class="speech-title">
+          <img class="icon" src="https://images.health.ufutx.com/202506/18/2874b7295fd3fd2490838369b17affd3.png" />
+          <p>友福健康生态</p>
+        </div>
+        <p class="speech-subtitle">
+          AI精准个性化健康方案服务：透过友福七维AI健康修复系统分析多维度身心健康数据，量身打造专属的精准健康管理方案。<br />
+          智能穿戴设备数据监测：搭载AI模型算法的智能穿戴设备，医用级精度实时监测您的体温、睡眠、心率、血氧、血压等多项生理参数，时刻守护您的身心健康。<br />
+          友福商城：精选高品质、值得信赖的健康生活好物，为您的健康生活严格把关。
+        </p>
+      </div>
+      <div class="scene-img">
+        <img src="https://images.health.ufutx.com/202506/18/d2b5ca33bd970f64a6301fa75ae2eb22.png" alt="健康生态" />
+      </div>
+    </div>
+    <div v-show="currentTab === 1" class="scenes-content">
+      <div class="scene-desc">
+        <p class="speech-title">
+          幸福婚恋板块专注为单身用户打造高效、真实的交友环境，通过AI精准匹配、身份验证体系、以及个性化社交标签，
+        </p>
+        <p>帮助用户快速找到契合的伴侣，同时提供恋爱指导、关系维护等延伸服务，让爱情更长久。</p>
+      </div>
+      <div class="scene-img">
+        <!--        <img src="@/assets/scene-dating.png" alt="幸福婚恋" />-->
+      </div>
+    </div>
+    <div v-show="currentTab === 2" class="scenes-content">
+      <div class="scene-desc">
+        <p>个人成长模块聚焦用户的职业与个人能力提升，提供AI驱动的演讲训练、知识学习、以及社交技巧课程，</p>
+        <p>帮助用户突破社交瓶颈，提升自信，在职业与生活中实现全面成长。</p>
+      </div>
+      <div class="scene-img">
+        <!--        <img src="@/assets/scene-growth.png" alt="个人成长" />-->
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tabs = ['友福健康生态', '幸福婚恋', '个人成长']
+
+const activeTab = ref('dynamic') // 默认显示“友福动态”
+const currentTab = ref(0)
+
+const resetPage = () => {
+  // currentPage.value = 1 // 切换标签时重置页码
+}
+</script>
+
+<style scoped lang="less">
+/* 标签切换样式（还原设计的蓝色下划线） */
+.news-tabs {
+  .py(50px);
+  :deep(.el-tabs__nav-wrap) {
+    //margin-bottom: 1.04167vw;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100vw;
+      height: 0.5px;
+      background-color: #b5b5b5;
+      z-index: var(--el-index-normal);
+    }
+  }
+
+  :deep(.el-tabs__active-bar) {
+    background-color: @primary-dark; // 下划线颜色
+    height: 3px;
+    bottom: -10px !important;
+    margin-top: 10px;
+  }
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+    .el-tabs__nav {
+      width: 100%;
+      margin-bottom: 10px;
+      display: flex;
+      gap: 100px;
+      .el-tabs__item {
+        font-size: @font-size-lg;
+        color: @text-color-secondary;
+
+        &.is-active {
+          color: @primary-dark; // 激活态文字颜色
+        }
+      }
+    }
+  }
+}
+.news-tabs {
+  // 关键：让选项卡居中
+  :deep(.el-tabs__header) {
+    width: 100%; // 占满容器宽度，为居中提供基础
+    .el-tabs__nav {
+      justify-content: center; // 水平居中对齐
+    }
+  }
+}
+
+.app-scenes {
+  text-align: center;
+  padding: 0 192px;
+  .app-title {
+    color: @text-color;
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 32px; /* 100% */
+    letter-spacing: 0.32px;
+    //.mb(50px);
+  }
+  .scenes-tabs {
+    margin-bottom: 40px;
+
+    span {
+      margin: 0 20px;
+      font-size: @font-size-md;
+      color: @text-color-secondary;
+      cursor: pointer;
+      padding-bottom: 5px;
+      border-bottom: 2px solid transparent;
+
+      &.active {
+        color: @primary-color;
+        border-bottom: 2px solid @primary-color;
+      }
+    }
+  }
+
+  .scenes-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px;
+    .scene-desc {
+      width: 600px;
+      text-align: left;
+      padding: 0 40px;
+      .speech-title {
+        color: @text-color;
+        font-size: 18px;
+        font-weight: 600;
+        display: flex; // 启用 Flex 布局
+        align-items: center; // 子元素垂直居中
+        gap: 10px;
+        .mb(20px);
+        .icon {
+          width: 18px;
+          height: 18px;
+          object-fit: contain;
+        }
+      }
+      .speech-subtitle {
+        color: @text-color;
+        font-size: 14px;
+      }
+    }
+
+    .scene-img {
+      text-align: center;
+      width: 600px;
+      img {
+        width: 80%;
+      }
+    }
+
+    @media (max-width: @tablet-breakpoint) {
+      flex-direction: column;
+      .scene-desc {
+        text-align: center;
+        padding: 0;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/App/sections/Banner.vue b/src/views/App/sections/Banner.vue
index 7b89e72..02bfda8 100644
--- a/src/views/App/sections/Banner.vue
+++ b/src/views/App/sections/Banner.vue
@@ -4,56 +4,56 @@
       <!-- 替换为实际背景图路径 -->
       <img src="https://images.health.ufutx.com/202506/13/19ee6e89c397511fef5ba05d9798cc76.png" alt="Banner背景" />
     </div>
-    <!--    <div class="news-panel">-->
-    <!--      <div-->
-    <!--        v-for="(item, index) in newsList"-->
-    <!--        :key="index"-->
-    <!--        class="news-item"-->
-    <!--        :class="{ active: activeIndex === index }"-->
-    <!--        @mouseenter="activeIndex = index"-->
-    <!--        @mouseleave="activeIndex = null"-->
-    <!--      >-->
-    <!--        <div class="icon">-->
-    <!--          <img :src="activeIndex === index ? item.hoverIcon : item.icon" />-->
-    <!--        </div>-->
-    <!--        <span class="text">{{ item.title }}</span>-->
-    <!--      </div>-->
-    <!--    </div>-->
+    <div class="news-panel">
+      <div
+        v-for="(item, index) in newsList"
+        :key="index"
+        class="news-item"
+        :class="{ active: activeIndex === index }"
+        @mouseenter="activeIndex = index"
+        @mouseleave="activeIndex = null"
+      >
+        <div class="icon">
+          <img :src="activeIndex === index ? item.hoverIcon : item.icon" />
+        </div>
+        <span class="text">{{ item.title }}</span>
+      </div>
+    </div>
   </section>
 </template>
 
 <script setup lang="ts">
 // import { ref } from 'vue'
 
-// const activeIndex = ref<number | null>(null)
+const activeIndex = ref<number | null>(null)
 //
-// const newsList = [
-//   {
-//     title: '新闻！热门健康方案服务',
-//     icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
-//     hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
-//   },
-//   {
-//     title: '新闻专访！健康方案',
-//     icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
-//     hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
-//   },
-//   {
-//     title: '新闻！健康方案专访频道',
-//     icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
-//     hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
-//   },
-//   {
-//     title: '专访新闻！健康方案',
-//     icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
-//     hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
-//   },
-//   {
-//     title: '新闻！健康方案专访频道',
-//     icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
-//     hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
-//   }
-// ]
+const newsList = [
+  {
+    title: '新闻！热门健康方案服务',
+    icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
+    hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
+  },
+  {
+    title: '新闻专访！健康方案',
+    icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
+    hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
+  },
+  {
+    title: '新闻！健康方案专访频道',
+    icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
+    hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
+  },
+  {
+    title: '专访新闻！健康方案',
+    icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
+    hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
+  },
+  {
+    title: '新闻！健康方案专访频道',
+    icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
+    hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
+  }
+]
 // 暂无逻辑，纯展示
 </script>
 
@@ -80,7 +80,8 @@
     top: 230px;
     right: 169px;
     padding: 20px 20px 0 20px;
-    width: 320px;
+    width: 330px;
+    height: 384px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     background: rgba(51, 51, 51, 0.3);
diff --git a/src/views/App/sections/DownloadSection.vue b/src/views/App/sections/DownloadSection.vue
new file mode 100644
index 0000000..d6a0515
--- /dev/null
+++ b/src/views/App/sections/DownloadSection.vue
@@ -0,0 +1,120 @@
+<template>
+  <section class="app-promotion">
+    <!--    <div class="section-bg">-->
+    <!--      <h2 class="section-title">提供专属健康服务和服务方案</h2>-->
+    <!--      <el-button type="primary" class="consult-btn"> 领取您的AI健康解决方案 </el-button>-->
+    <!--    </div>-->
+    <div class="app-download">
+      <div class="app-item">
+        <div class="app-section">
+          <img src="@/assets/icons/ios.png" alt="iOS" />
+          <p><span class="_text">iOS</span>客户端</p>
+        </div>
+        <span>版本号：1.1.1</span>
+      </div>
+      <div class="app-item">
+        <div class="app-section">
+          <img src="@/assets/icons/android.png" alt="Android" />
+          <p><span class="_text">Android</span>客户端</p>
+        </div>
+        <span>版本号：1.1.1</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="less">
+.app-promotion {
+  text-align: center;
+  .pt(50px);
+  background: #ffffff;
+}
+.section-bg {
+  .pt(36px);
+  .pb(36px);
+  background-image: url('https://images.health.ufutx.com/202506/18/e403f857ad7385ea660987cbcbdcf198.png');
+}
+.section-title {
+  font-weight: bold;
+  font-size: 30px;
+  padding: 10px;
+  .mb(10px);
+}
+.consult-btn {
+  //display: flex;
+  height: 57px;
+  padding: 16px 30px;
+  border-radius: 10px;
+  background: var(--Style, #1060ff);
+  font-size: 18px;
+  color: #fff;
+  font-weight: bold;
+  .mt(10px);
+}
+.app-download {
+  height: 620px;
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  width: 100%;
+  background-image: url('https://images.health.ufutx.com/202506/18/f27ffc4b59df0dc6f53133bb1115b44a.png');
+  background-size: cover;
+}
+.app-item {
+  text-align: left;
+  display: flex;
+  width: 408px;
+  height: 150px;
+  padding: 50px 50px 30px 50px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 30px;
+  background: var(--ffffff, #fff);
+  .mt(428px);
+  .app-section {
+    .flex-center();
+  }
+  ._text {
+    font-weight: bold;
+    font-size: 20px;
+  }
+}
+.app-item img {
+  width: 26px;
+  height: 26px;
+  margin-right: 5px;
+}
+.app-item p {
+  font-size: 18px;
+  font-weight: 400;
+  .ml(3px);
+}
+.app-item span {
+  font-size: 15px;
+  color: #666;
+  letter-spacing: 0.9px;
+}
+.contact-info {
+  margin-top: 40px;
+}
+.contact-info p {
+  font-size: 14px;
+  color: #666;
+  margin: 8px 0;
+}
+.qrcode-group {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 16px;
+}
+.qrcode-group img {
+  width: 60px;
+  height: 60px;
+}
+</style>
diff --git a/src/views/App/sections/FeatureNav.vue b/src/views/App/sections/FeatureNav.vue
new file mode 100644
index 0000000..80e3e23
--- /dev/null
+++ b/src/views/App/sections/FeatureNav.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="feature-nav">
+    <div
+      v-for="(item, index) in navList"
+      :key="index"
+      class="nav-item"
+      :class="{ active: item.active }"
+      @click="handleSelect(index)"
+    >
+      <div class="nav-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
+      <span class="nav-text">{{ item.text }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const navList = ref([
+  {
+    text: '健康手环',
+    active: true,
+    icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
+  },
+  {
+    text: '智能体脂秤',
+    active: false,
+    icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
+  },
+  {
+    text: '商城',
+    active: false,
+    icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
+  },
+  {
+    text: '个人成长',
+    active: false,
+    icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
+  },
+  {
+    text: '单身标签',
+    active: false,
+    icon: 'https://images.health.ufutx.com/202506/18/4aae244f94bbf8bf352e8ab8e2270a81.png'
+  }
+])
+
+const handleSelect = (index: number) => {
+  navList.value.forEach((item, i) => {
+    item.active = i === index
+  })
+}
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.feature-nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 50px;
+  padding-top: 50px;
+
+  .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    position: relative;
+
+    &:not(:first-child)::before {
+      content: '';
+      position: absolute;
+      left: -30px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 1px;
+      height: 12px;
+      background-color: #cccccc;
+    }
+
+    .nav-icon {
+      width: 12px;
+      height: 20px;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      opacity: 0.6;
+      transition: opacity 0.3s;
+    }
+
+    .nav-text {
+      font-size: 26px;
+      color: @text-color-secondary;
+      transition: color 0.3s;
+    }
+
+    &.active {
+      .nav-icon {
+        opacity: 1;
+      }
+      .nav-text {
+        color: #18ca6e;
+        font-weight: bold;
+      }
+    }
+
+    &:hover:not(.active) {
+      .nav-icon {
+        opacity: 0.8;
+      }
+      .nav-text {
+        color: #666;
+      }
+    }
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: @tablet-breakpoint) {
+  .feature-nav {
+    gap: 40px;
+    .nav-item {
+      &:not(:first-child)::before {
+        left: -20px;
+        height: 8px;
+      }
+      .nav-text {
+        font-size: @font-size-sm;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/App/sections/HealthDevice.vue b/src/views/App/sections/HealthDevice.vue
new file mode 100644
index 0000000..727740a
--- /dev/null
+++ b/src/views/App/sections/HealthDevice.vue
@@ -0,0 +1,125 @@
+<template>
+  <section class="health-device">
+    <div class="device-content">
+      <div class="device-img">
+        <img :src="device.img" alt="设备界面" />
+      </div>
+      <div class="device-info">
+        <h3 class="device-title">{{ device.title }}</h3>
+        <h3 class="device-subtitle">AI精准个性化健康方案服务</h3>
+        <p class="device-desc" v-html="device.desc"></p>
+        <el-button type="success" class="download-btn">立即下载</el-button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from 'element-plus'
+import FeatureNav from '@/views/App/sections/FeatureNav.vue'
+
+const props = defineProps({
+  device: {
+    type: Object,
+    required: true,
+    default: () => ({
+      title: '健康手环',
+      desc: 'AI精准个性化健康方案服务',
+      img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
+    })
+  }
+})
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.health-device {
+  padding: 50px 192px 80px 192px;
+  background: #fff;
+
+  .section-divider {
+    text-align: center;
+    font-size: 50px;
+    color: @text-color;
+    font-weight: bold;
+  }
+  .device-content {
+    display: flex;
+    align-items: center;
+    //justify-content: space-between;
+    gap: 132px;
+
+    .device-img {
+      //flex: 1;
+      //text-align: center;
+      width: 900px;
+      height: 716px;
+      overflow: hidden;
+      border-radius: 10px;
+      img {
+        width: 100%;
+        background: #f6fffa;
+      }
+    }
+
+    .device-info {
+      flex: 1;
+      text-align: left;
+
+      .device-title {
+        color: #18ca6e;
+        font-size: 36px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+      }
+      .device-subtitle {
+        color: #0e0e0e;
+        font-size: 36px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+      }
+      .device-desc {
+        color: var(--66676-c, #66676c);
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 36px; /* 180% */
+        text-transform: capitalize;
+        .my(30px);
+      }
+
+      .download-btn {
+        display: flex;
+        padding: 16px 30px;
+        align-items: center;
+        gap: 20px;
+        border-radius: 100px;
+        border: 1px solid var(--18-ca-6-e, #18ca6e);
+        background: #18ca6e;
+        color: #fff;
+        font-size: 20px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  @media (max-width: @tablet-breakpoint) {
+    flex-direction: column;
+    padding: 40px 20px;
+
+    .device-content {
+      flex-direction: column;
+      text-align: center;
+
+      .device-info {
+        .device-desc {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/App/sections/SpeechModule.vue b/src/views/App/sections/SpeechModule.vue
new file mode 100644
index 0000000..007b09f
--- /dev/null
+++ b/src/views/App/sections/SpeechModule.vue
@@ -0,0 +1,104 @@
+<template>
+  <section class="speech-module">
+    <div class="speech-content">
+      <div class="speech-info">
+        <h3 class="speech-title">1分钟演讲</h3>
+        <p class="speech-subtitle">每日演讲练习 开场不再词穷</p>
+        <p class="speech-desc">
+          跨出社交圈，“一分钟演讲”<br />
+          立即让未来的灵魂伴侣更了解你，轻松打开话题
+        </p>
+        <el-button type="success" class="download-btn">立即下载</el-button>
+      </div>
+      <div class="speech-img">
+        <!--        <img src="@/assets/speech-app.png" alt="演讲界面" />-->
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from 'element-plus'
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.speech-module {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0px 192px;
+  height: 1003px;
+  background-image: url('https://images.health.ufutx.com/202506/18/84b3dbef5488efa0b793acb28d2a732f.png');
+  background-repeat: no-repeat;
+  background-size: contain;
+
+  .speech-content {
+    display: flex;
+    align-items: center;
+    width: 444px;
+    //background: red;
+    .speech-info {
+      //flex: 1;
+      text-align: left;
+      .speech-title {
+        font-size: 36px;
+        font-weight: bold;
+        color: @text-color-primary;
+      }
+
+      .speech-subtitle {
+        font-size: 36px;
+        color: @text-color;
+        .mt(10px);
+      }
+
+      .speech-desc {
+        font-size: 20px;
+        color: @text-color-secondary;
+        line-height: 36px;
+        .my(30px);
+      }
+
+      .download-btn {
+        display: flex;
+        padding: 16px 30px;
+        align-items: center;
+        gap: 20px;
+        border-radius: 100px;
+        border: 1px solid var(--18-ca-6-e, #18ca6e);
+        background: #18ca6e;
+        color: #fff;
+        font-size: 20px;
+        font-weight: bold;
+      }
+    }
+
+    .speech-img {
+      flex: 1;
+      text-align: center;
+
+      img {
+        width: 80%;
+      }
+    }
+  }
+
+  @media (max-width: @tablet-breakpoint) {
+    flex-direction: column;
+    padding: 40px 20px;
+
+    .speech-content {
+      flex-direction: column;
+      text-align: center;
+
+      .speech-info {
+        .speech-desc {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Dating/Dating.vue b/src/views/Dating/Dating.vue
index d2b119d..2c2fc39 100644
--- a/src/views/Dating/Dating.vue
+++ b/src/views/Dating/Dating.vue
@@ -1,31 +1,22 @@
 <template>
-  <div class="home-page">
-    <!--    Banner 模块-->
+  <div class="dating-page">
     <Banner />
-    <!--    &lt;!&ndash;    核心价值模块&ndash;&gt;-->
-    <!--    <CoreValue />-->
-    <!--    &lt;!&ndash;    应用场景模块&ndash;&gt;-->
-    <!--    <UseCases />-->
-    <!--    &lt;!&ndash;    全球服务模块&ndash;&gt;-->
-    <!--    <GlobalService />-->
-    <!--    &lt;!&ndash;    客户反馈模块&ndash;&gt;-->
-    <!--    <CustomerFeedback />-->
-    <!--    &lt;!&ndash;    合作伙伴模块&ndash;&gt;-->
-    <!--    <Partners />-->
+    <PainPoints />
+    <AiTags />
+    <SuccessStories />
   </div>
 </template>
 
 <script setup lang="ts">
 import Banner from './sections/Banner.vue'
-// import CoreValue from './sections/CoreValue.vue'
-// import UseCases from './sections/UseCases.vue'
-// import GlobalService from './sections/GlobalService.vue'
-// import CustomerFeedback from './sections/CustomerFeedback.vue'
-// import Partners from './sections/Partners.vue'
+import PainPoints from './sections/PainPoints.vue'
+import AiTags from './sections/AiTags.vue'
+import SuccessStories from './sections/SuccessStories.vue'
 </script>
 
 <style scoped lang="less">
-.home-page {
-  // 可设置全局背景或间距，按需扩展
+.dating-page {
+  width: 100%;
+  overflow-x: hidden;
 }
 </style>
diff --git a/src/views/Dating/sections/AiTags.vue b/src/views/Dating/sections/AiTags.vue
new file mode 100644
index 0000000..d6ee11c
--- /dev/null
+++ b/src/views/Dating/sections/AiTags.vue
@@ -0,0 +1,127 @@
+<template>
+  <section class="ai-tags">
+    <div class="tags-header">
+      <h2 class="tags-title">友福AI婚恋-专属单身标签</h2>
+      <p class="tags-subtitle">Right Beside You, They Love Each Other!</p>
+      <el-button type="primary" class="download-btn">立即下载</el-button>
+      <div class="tags-icon">
+        <img src="https://images.health.ufutx.com/202506/18/3b16ca61dc63eb22c102aed934301c0a.png" alt="" />
+      </div>
+    </div>
+    <!--    <div class="tags-carousel">-->
+    <!--      <div class="tag-item" v-for="(item, i) in tags" :key="i">-->
+    <!--        <img :src="item.img" alt="单身标签" class="tag-img" />-->
+    <!--        <p class="tag-desc">{{ item.desc }}</p>-->
+    <!--      </div>-->
+    <!--    </div>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from 'element-plus'
+
+// const tags = [
+//   {
+//     img: '@/assets/tag-1.png',
+//     desc: '霍小楠 • 27岁硕士 • 生活博主'
+//   },
+//   {
+//     img: '@/assets/tag-2.png',
+//     desc: '李浩然 • 30岁医生 • 运动达人'
+//   },
+//   {
+//     img: '@/assets/tag-3.png',
+//     desc: '苏晓萱 • 25岁设计师 • 文艺青年'
+//   }
+// ]
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.ai-tags {
+  padding: 100px 192px;
+  text-align: center;
+  background: #ffffff;
+
+  .tags-header {
+    .tags-title {
+      font-size: 50px;
+      font-weight: bold;
+      color: @text-color;
+      margin-bottom: 17px;
+    }
+
+    .tags-subtitle {
+      font-size: 60px;
+      color: #b5b5b5;
+      margin-bottom: 17px;
+    }
+    .download-btn {
+      padding: 16px 30px;
+      border-radius: 100px;
+      background: var(--Style, #1060ff);
+      color: var(--ffffff, #fff);
+      font-size: 18px;
+      font-weight: 500;
+      margin-bottom: 50px;
+    }
+  }
+
+  //.tags-carousel {
+  //  display: flex;
+  //  justify-content: center;
+  //  gap: 60px;
+  //  margin-top: 60px;
+  //  animation: rotate 10s infinite linear;
+  //  transform-origin: center;
+  //
+  //  @keyframes rotate {
+  //    0% {
+  //      transform: rotate(0deg);
+  //    }
+  //    100% {
+  //      transform: rotate(360deg);
+  //    }
+  //  }
+  //
+  //  .tag-item {
+  //    width: 180px;
+  //    height: 240px;
+  //    background: #fff;
+  //    border-radius: 12px;
+  //    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+  //    padding: 20px;
+  //    display: flex;
+  //    flex-direction: column;
+  //    align-items: center;
+  //    justify-content: center;
+  //
+  //    .tag-img {
+  //      width: 120px;
+  //      height: 120px;
+  //      border-radius: 50%;
+  //      object-fit: cover;
+  //      margin-bottom: 20px;
+  //    }
+  //
+  //    .tag-desc {
+  //      font-size: @font-size-sm;
+  //      color: @text-color-secondary;
+  //    }
+  //  }
+  //}
+
+  @media (max-width: @tablet-breakpoint) {
+    .tags-carousel {
+      flex-direction: column;
+      animation: none;
+      gap: 30px;
+
+      .tag-item {
+        margin: 0 auto;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Dating/sections/Banner.vue b/src/views/Dating/sections/Banner.vue
index 41f0f4b..14d3889 100644
--- a/src/views/Dating/sections/Banner.vue
+++ b/src/views/Dating/sections/Banner.vue
@@ -80,7 +80,8 @@
     top: 230px;
     right: 169px;
     padding: 20px 20px 0 20px;
-    width: 320px;
+    width: 330px;
+    height: 384px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     background: rgba(51, 51, 51, 0.3);
diff --git a/src/views/Dating/sections/PainPoints.vue b/src/views/Dating/sections/PainPoints.vue
new file mode 100644
index 0000000..9a5b1c0
--- /dev/null
+++ b/src/views/Dating/sections/PainPoints.vue
@@ -0,0 +1,127 @@
+<template>
+  <section class="pain-points">
+    <div class="pain-points-group">
+      <h2 class="section-title">婚恋市场痛点重构</h2>
+      <div class="points-grid">
+        <div v-for="(item, i) in points" :key="i" class="point-card">
+          <div class="hero-section">
+            <div class="point-icon">
+              <img :src="item.icon" alt="痛点图标" />
+            </div>
+          </div>
+          <div class="text-section">
+            <p class="point-title">{{ item.title }}</p>
+            <p class="point-desc">{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const points = [
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/2bf6cfbc4fef2c4d8e276e95398405a0.png',
+    title: '传统婚介困境',
+    desc: '效率低/规则混乱'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/2bf6cfbc4fef2c4d8e276e95398405a0.png',
+    title: '资料真假难辨',
+    desc: '生物特征+社交轨迹验证'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/2bf6cfbc4fef2c4d8e276e95398405a0.png',
+    title: '匹配维度单一',
+    desc: '多维度开放模型'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/2bf6cfbc4fef2c4d8e276e95398405a0.png',
+    title: '售后服务缺失',
+    desc: '关系认证及延伸服务'
+  }
+]
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.pain-points {
+  padding: 30px 192px;
+  text-align: center;
+  background: #f6f8fe;
+  .pain-points-group {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.6);
+
+    /* 底部导航 0.8透模糊 */
+    backdrop-filter: blur(25px);
+  }
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color;
+    margin-bottom: 50px;
+    .mt(50px);
+  }
+
+  .points-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    margin: 0 auto;
+    .pb(20px);
+    @media (max-width: @tablet-breakpoint) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @media (max-width: @mobile-breakpoint) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .point-card {
+    background: #fff;
+    border-radius: @border-radius-lg;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
+    .hero-section {
+      padding: 50px 80px;
+      background-color: #cedff8;
+    }
+    .point-icon {
+      width: 200px;
+      height: 200px;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .text-section {
+      padding: 16px 30px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 10px;
+      background-color: #e4eefb;
+      align-items: start;
+      .point-title {
+        font-size: @font-size-lg;
+        font-weight: bold;
+        color: @text-color;
+      }
+
+      .point-desc {
+        font-size: @font-size-lg;
+        color: @text-color-secondary;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Dating/sections/SuccessStories.vue b/src/views/Dating/sections/SuccessStories.vue
new file mode 100644
index 0000000..008e638
--- /dev/null
+++ b/src/views/Dating/sections/SuccessStories.vue
@@ -0,0 +1,94 @@
+<template>
+  <section class="success-stories">
+    <h2 class="section-title">就在你身边，他们相爱啦！</h2>
+    <p class="section-subtitle">Right Beside You, They Love Each Other!</p>
+    <el-button type="primary" class="download-btn">立即下载</el-button>
+    <div class="stories-icon">
+      <img src="https://images.health.ufutx.com/202506/18/1a837037ce7fb8502a211a01e19fbf55.png" alt="" />
+    </div>
+    <!--    <div class="stories-grid">-->
+    <!--      <div class="story-item" v-for="(item, i) in stories" :key="i">-->
+    <!--        <img :src="item.img" alt="成功故事" class="story-img" />-->
+    <!--      </div>-->
+    <!--    </div>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from 'element-plus'
+
+// const stories = [
+//   { img: '@/assets/story-1.jpg' },
+//   { img: '@/assets/story-2.jpg' },
+//   { img: '@/assets/story-3.jpg' },
+//   { img: '@/assets/story-4.jpg' },
+//   { img: '@/assets/story-5.jpg' },
+//   { img: '@/assets/story-6.jpg' }
+// ]
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.success-stories {
+  padding: 100px 192px;
+  text-align: center;
+
+  .section-title {
+    font-size: 50px;
+    font-weight: bold;
+    color: @text-color;
+    margin-bottom: 17px;
+  }
+
+  .section-subtitle {
+    font-size: 60px;
+    color: #b5b5b5;
+    margin-bottom: 17px;
+  }
+
+  .download-btn {
+    padding: 16px 30px;
+    border-radius: 100px;
+    background: var(--Style, #1060ff);
+    color: var(--ffffff, #fff);
+    font-size: 18px;
+    font-weight: 500;
+    margin-bottom: 50px;
+  }
+
+  .stories-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    max-width: 1000px;
+    margin: 0 auto;
+
+    .story-item {
+      width: 160px;
+      height: 160px;
+      border-radius: 50%;
+      overflow: hidden;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+
+      .story-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  @media (max-width: @tablet-breakpoint) {
+    .stories-grid {
+      gap: 10px;
+
+      .story-item {
+        width: 120px;
+        height: 120px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Ecosystem/Ecosystem.vue b/src/views/Ecosystem/Ecosystem.vue
index d2b119d..4b9adca 100644
--- a/src/views/Ecosystem/Ecosystem.vue
+++ b/src/views/Ecosystem/Ecosystem.vue
@@ -1,31 +1,32 @@
 <template>
-  <div class="home-page">
-    <!--    Banner 模块-->
+  <div class="ecosystem-page">
     <Banner />
-    <!--    &lt;!&ndash;    核心价值模块&ndash;&gt;-->
-    <!--    <CoreValue />-->
-    <!--    &lt;!&ndash;    应用场景模块&ndash;&gt;-->
-    <!--    <UseCases />-->
-    <!--    &lt;!&ndash;    全球服务模块&ndash;&gt;-->
-    <!--    <GlobalService />-->
-    <!--    &lt;!&ndash;    客户反馈模块&ndash;&gt;-->
-    <!--    <CustomerFeedback />-->
-    <!--    &lt;!&ndash;    合作伙伴模块&ndash;&gt;-->
-    <!--    <Partners />-->
+    <CoreAdvantages />
+    <RegionCooperation />
+    <HealthManagement />
+    <MedicalCooperation />
+    <EnterpriseCooperation />
+    <CooperationConsult />
+    <TalentTraining />
+    <CityPartner />
   </div>
 </template>
 
 <script setup lang="ts">
 import Banner from './sections/Banner.vue'
-// import CoreValue from './sections/CoreValue.vue'
-// import UseCases from './sections/UseCases.vue'
-// import GlobalService from './sections/GlobalService.vue'
-// import CustomerFeedback from './sections/CustomerFeedback.vue'
-// import Partners from './sections/Partners.vue'
+import CoreAdvantages from './sections/CoreAdvantages.vue'
+import RegionCooperation from './sections/RegionCooperation.vue'
+import HealthManagement from './sections/HealthManagement.vue'
+import MedicalCooperation from './sections/MedicalCooperation.vue'
+import EnterpriseCooperation from './sections/EnterpriseCooperation.vue'
+import CooperationConsult from './sections/CooperationConsult.vue'
+import TalentTraining from './sections/TalentTraining.vue'
+import CityPartner from './sections/CityPartner.vue'
 </script>
 
 <style scoped lang="less">
-.home-page {
-  // 可设置全局背景或间距，按需扩展
+.ecosystem-page {
+  width: 100%;
+  overflow-x: hidden;
 }
 </style>
diff --git a/src/views/Ecosystem/sections/Banner.vue b/src/views/Ecosystem/sections/Banner.vue
index 59d732d..6542a60 100644
--- a/src/views/Ecosystem/sections/Banner.vue
+++ b/src/views/Ecosystem/sections/Banner.vue
@@ -80,7 +80,8 @@
     top: 230px;
     right: 169px;
     padding: 20px 20px 0 20px;
-    width: 320px;
+    width: 330px;
+    height: 384px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     background: rgba(51, 51, 51, 0.3);
diff --git a/src/views/Ecosystem/sections/CityPartner.vue b/src/views/Ecosystem/sections/CityPartner.vue
new file mode 100644
index 0000000..422f47f
--- /dev/null
+++ b/src/views/Ecosystem/sections/CityPartner.vue
@@ -0,0 +1,122 @@
+<template>
+  <section class="city-partner">
+    <h2 class="section-title">城市合伙人</h2>
+    <p class="section-subtitle">“拓展城市合伙人，共赢亿级AI健康市场”</p>
+    <div class="partner-banner">
+      <img
+        src="https://images.health.ufutx.com/202506/18/eco-partner-banner.png"
+        alt="合伙人Banner"
+        class="banner-img"
+      />
+    </div>
+    <p class="partner-desc">友福同享诚募城市合伙人，共同开拓AI健康管理蓝海市场。</p>
+    <h3 class="support-title">加入友福同享，您将获得 4 大支持</h3>
+    <div class="support-grid">
+      <div v-for="(item, i) in supports" :key="i" class="support-item">
+        <img :src="item.icon" alt="支持图标" class="item-icon" />
+        <p class="item-title">{{ item.title }}</p>
+        <p class="item-desc">{{ item.desc }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const supports = [
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-support-1.png',
+    title: '总部全方位支持',
+    desc: '市场、运营、技术全流程支持'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-support-2.png',
+    title: '总部直营培训',
+    desc: '专属培训，快速掌握要点'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-support-3.png',
+    title: '独家方案输出',
+    desc: '定制化AI健康方案'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-support-4.png',
+    title: '共享万亿机遇',
+    desc: '抢占千亿AI健康市场'
+  }
+]
+</script>
+
+<style scoped lang="less">
+.city-partner {
+  text-align: center;
+  padding: 80px 20px;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    margin-bottom: 10px;
+  }
+  .section-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    margin-bottom: 40px;
+  }
+  .partner-banner {
+    .banner-img {
+      width: 80%;
+      height: auto;
+      margin-bottom: 40px;
+    }
+  }
+  .partner-desc {
+    font-size: @font-size-sm;
+    color: @text-color-light;
+    line-height: 1.8;
+    max-width: 800px;
+    margin: 0 auto 40px;
+  }
+  .support-title {
+    font-size: @font-size-lg;
+    font-weight: medium;
+    color: @text-color-primary;
+    margin: 60px 0 40px;
+  }
+  .support-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto 60px;
+
+    @media (max-width: @tablet-breakpoint) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @media (max-width: @mobile-breakpoint) {
+      grid-template-columns: 1fr;
+    }
+  }
+  .support-item {
+    background: #fff;
+    padding: 30px;
+    border-radius: @border-radius-lg;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+
+    .item-icon {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 20px;
+    }
+    .item-title {
+      font-size: @font-size-lg;
+      font-weight: medium;
+      color: @text-color-primary;
+      margin-bottom: 10px;
+    }
+    .item-desc {
+      font-size: @font-size-sm;
+      color: @text-color-light;
+    }
+  }
+}
+</style>
diff --git a/src/views/Ecosystem/sections/CooperationConsult.vue b/src/views/Ecosystem/sections/CooperationConsult.vue
new file mode 100644
index 0000000..7fe8e0b
--- /dev/null
+++ b/src/views/Ecosystem/sections/CooperationConsult.vue
@@ -0,0 +1,36 @@
+<template>
+  <section class="cooperation-consult">
+    <div class="consult-content">
+      <p class="consult-text">欢迎健康产业链企业与我们洽谈合作，共创产业新价值</p>
+      <el-button type="primary" class="consult-btn">合作咨询</el-button>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from 'element-plus'
+</script>
+
+<style scoped lang="less">
+.cooperation-consult {
+  background: #2c3e50;
+  color: #fff;
+  padding: 60px 20px;
+  text-align: center;
+
+  .consult-content {
+    max-width: 800px;
+    margin: 0 auto;
+
+    .consult-text {
+      font-size: @font-size-md;
+      line-height: 1.8;
+      margin-bottom: 30px;
+    }
+    .consult-btn {
+      padding: 12px 40px;
+      font-size: @font-size-md;
+    }
+  }
+}
+</style>
diff --git a/src/views/Ecosystem/sections/CoreAdvantages.vue b/src/views/Ecosystem/sections/CoreAdvantages.vue
new file mode 100644
index 0000000..449b562
--- /dev/null
+++ b/src/views/Ecosystem/sections/CoreAdvantages.vue
@@ -0,0 +1,85 @@
+<template>
+  <section class="core-advantages">
+    <h2 class="section-title">核心优势</h2>
+    <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" />
+        <p class="item-title">{{ item.title }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const advantages = [
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-1.png',
+    title: 'AI+生命科学创新系统'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-2.png',
+    title: '丰富的市场验证与成功案例'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-3.png',
+    title: '独有技术护城河'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-4.png',
+    title: '完整的服务生态闭环'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-5.png',
+    title: '低风险的合作保障'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-adv-6.png',
+    title: '百亿赛道先行者'
+  }
+]
+</script>
+
+<style scoped lang="less">
+.core-advantages {
+  text-align: center;
+  padding: 80px 20px;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    margin-bottom: 10px;
+  }
+  .section-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    margin-bottom: 40px;
+  }
+  .advantages-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    @media (max-width: @tablet-breakpoint) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    @media (max-width: @mobile-breakpoint) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  .advantage-item {
+    .item-icon {
+      width: 60px;
+      height: 60px;
+      margin-bottom: 10px;
+    }
+    .item-title {
+      font-size: @font-size-sm;
+      color: @text-color-primary;
+    }
+  }
+}
+</style>
diff --git a/src/views/Ecosystem/sections/EnterpriseCooperation.vue b/src/views/Ecosystem/sections/EnterpriseCooperation.vue
new file mode 100644
index 0000000..ebf3db9
--- /dev/null
+++ b/src/views/Ecosystem/sections/EnterpriseCooperation.vue
@@ -0,0 +1,63 @@
+<template>
+  <section class="enterprise-cooperation">
+    <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" />
+      <!-- 标签可动态配置，此处简化 -->
+      <div class="pyramid-labels">
+        <span>终端用户</span>
+        <span>健康设备商/保险/金融</span>
+        <span>友福AI生态中枢平台</span>
+        <span>政府/医疗机构</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+/* 无业务逻辑 */
+</script>
+
+<style scoped lang="less">
+.enterprise-cooperation {
+  text-align: center;
+  padding: 80px 20px;
+  background: #f5f7fe;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    margin-bottom: 10px;
+  }
+  .section-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    margin-bottom: 40px;
+  }
+  .cooperation-pyramid {
+    position: relative;
+    .pyramid-img {
+      width: 40%;
+      height: auto;
+    }
+    .pyramid-labels {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+      span {
+        font-size: @font-size-sm;
+        color: @text-color-primary;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Ecosystem/sections/HealthManagement.vue b/src/views/Ecosystem/sections/HealthManagement.vue
new file mode 100644
index 0000000..14d1838
--- /dev/null
+++ b/src/views/Ecosystem/sections/HealthManagement.vue
@@ -0,0 +1,67 @@
+<template>
+  <section class="health-management">
+    <div class="management-grid">
+      <div v-for="(item, i) in managements" :key="i" class="management-item">
+        <h3 class="item-title">{{ item.title }}</h3>
+        <p class="item-desc">{{ item.desc }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const managements = [
+  {
+    title: '精准个性化AI健康管理',
+    desc: '根据居民健康数据，提供个性化健康干预方案'
+  },
+  {
+    title: '智能健康监测',
+    desc: '利用可穿戴设备实时监测健康风险'
+  },
+  {
+    title: '医疗资源整合',
+    desc: '连接基层医疗机构，提升服务可及性'
+  },
+  {
+    title: '健康教育与促进',
+    desc: '普及健康知识，培育AI+大健康人才'
+  }
+]
+</script>
+
+<style scoped lang="less">
+.health-management {
+  padding: 80px 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  .management-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 40px;
+
+    @media (max-width: @tablet-breakpoint) {
+      grid-template-columns: 1fr;
+    }
+  }
+  .management-item {
+    background: #fff;
+    padding: 30px;
+    border-radius: @border-radius-lg;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+
+    .item-title {
+      font-size: @font-size-lg;
+      font-weight: bold;
+      color: @text-color-primary;
+      margin-bottom: 10px;
+    }
+    .item-desc {
+      font-size: @font-size-sm;
+      color: @text-color-light;
+      line-height: 1.6;
+    }
+  }
+}
+</style>
diff --git a/src/views/Ecosystem/sections/MedicalCooperation.vue b/src/views/Ecosystem/sections/MedicalCooperation.vue
new file mode 100644
index 0000000..7148259
--- /dev/null
+++ b/src/views/Ecosystem/sections/MedicalCooperation.vue
@@ -0,0 +1,62 @@
+<template>
+  <section class="medical-cooperation">
+    <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" />
+      <!-- 标签可动态配置，此处简化 -->
+      <div class="funnel-labels">
+        <span>健康管理中心</span>
+        <span>专科指导</span>
+        <span>轻量化AI赋能</span>
+        <span>数据反哺价值提升</span>
+        <span>全链提效</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+/* 无业务逻辑 */
+</script>
+
+<style scoped lang="less">
+.medical-cooperation {
+  text-align: center;
+  padding: 80px 20px;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    margin-bottom: 10px;
+  }
+  .section-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    margin-bottom: 40px;
+  }
+  .cooperation-funnel {
+    position: relative;
+    .funnel-img {
+      width: 60%;
+      height: auto;
+    }
+    .funnel-labels {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      span {
+        font-size: @font-size-sm;
+        color: @text-color-primary;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Ecosystem/sections/RegionCooperation.vue b/src/views/Ecosystem/sections/RegionCooperation.vue
new file mode 100644
index 0000000..2815840
--- /dev/null
+++ b/src/views/Ecosystem/sections/RegionCooperation.vue
@@ -0,0 +1,89 @@
+<template>
+  <section class="region-cooperation">
+    <h2 class="section-title">地区单位合作</h2>
+    <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" />
+        <p class="item-title">{{ item.title }}</p>
+        <p class="item-desc">{{ item.desc }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const cooperations = [
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-region-1.png',
+    title: 'AI+生命科学创新系统',
+    desc: '国际顶尖AI+健康管理系统，30+项专利技术护航'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-region-2.png',
+    title: '丰富的市场验证与成功案例',
+    desc: '已服务50+城市，数千万用户验证，效果显著'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-region-3.png',
+    title: '独有技术护城河',
+    desc: '核心算法准确率超95%，领先行业30%'
+  }
+]
+</script>
+
+<style scoped lang="less">
+.region-cooperation {
+  text-align: center;
+  padding: 80px 20px;
+  background: #f5f7fe;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    margin-bottom: 10px;
+  }
+  .section-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    margin-bottom: 40px;
+  }
+  .cooperation-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    @media (max-width: @tablet-breakpoint) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @media (max-width: @mobile-breakpoint) {
+      grid-template-columns: 1fr;
+    }
+  }
+  .cooperation-item {
+    background: #fff;
+    padding: 30px;
+    border-radius: @border-radius-lg;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+
+    .item-icon {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 20px;
+    }
+    .item-title {
+      font-size: @font-size-lg;
+      font-weight: medium;
+      color: @text-color-primary;
+      margin-bottom: 10px;
+    }
+    .item-desc {
+      font-size: @font-size-sm;
+      color: @text-color-light;
+    }
+  }
+}
+</style>
diff --git a/src/views/Ecosystem/sections/TalentTraining.vue b/src/views/Ecosystem/sections/TalentTraining.vue
new file mode 100644
index 0000000..1f17a18
--- /dev/null
+++ b/src/views/Ecosystem/sections/TalentTraining.vue
@@ -0,0 +1,127 @@
+<template>
+  <section class="talent-training">
+    <h2 class="section-title">身心健康管理人才培训</h2>
+    <p class="section-subtitle">创新服务模式，双证加持兼具晋升转接口</p>
+    <div class="training-grid">
+      <div v-for="(item, i) in trainings" :key="i" class="training-item">
+        <img :src="item.icon" alt="培训图标" class="item-icon" />
+        <p class="item-title">{{ item.title }}</p>
+        <p class="item-desc">{{ item.desc }}</p>
+      </div>
+    </div>
+    <div class="training-ring">
+      <img src="https://images.health.ufutx.com/202506/18/eco-ring.png" alt="环形图" class="ring-img" />
+      <!-- 标签可动态配置，此处简化 -->
+      <div class="ring-labels">
+        <span>你将获得</span>
+        <span>谁适合来参加？</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const trainings = [
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-train-1.png',
+    title: '立足行业前沿',
+    desc: '掌握AI健康管理核心技能'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-train-2.png',
+    title: '权威双证加持',
+    desc: '提升职业竞争力'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-train-3.png',
+    title: '专业团队赋能',
+    desc: '加速职业成长'
+  },
+  {
+    icon: 'https://images.health.ufutx.com/202506/18/eco-train-4.png',
+    title: '融入万亿生态',
+    desc: '共享发展机遇'
+  }
+]
+</script>
+
+<style scoped lang="less">
+.talent-training {
+  text-align: center;
+  padding: 80px 20px;
+
+  .section-title {
+    font-size: @font-size-xxl;
+    font-weight: bold;
+    color: @text-color-primary;
+    margin-bottom: 10px;
+  }
+  .section-subtitle {
+    font-size: @font-size-md;
+    color: @text-color-secondary;
+    margin-bottom: 40px;
+  }
+  .training-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto 60px;
+
+    @media (max-width: @tablet-breakpoint) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @media (max-width: @mobile-breakpoint) {
+      grid-template-columns: 1fr;
+    }
+  }
+  .training-item {
+    background: #fff;
+    padding: 30px;
+    border-radius: @border-radius-lg;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+
+    .item-icon {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 20px;
+    }
+    .item-title {
+      font-size: @font-size-lg;
+      font-weight: medium;
+      color: @text-color-primary;
+      margin-bottom: 10px;
+    }
+    .item-desc {
+      font-size: @font-size-sm;
+      color: @text-color-light;
+    }
+  }
+  .training-ring {
+    position: relative;
+    .ring-img {
+      width: 60%;
+      height: auto;
+    }
+    .ring-labels {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+      span {
+        font-size: @font-size-xs;
+        color: @text-color-primary;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 5px 10px;
+        border-radius: @border-radius-md;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Home/sections/Banner.vue b/src/views/Home/sections/Banner.vue
index b60b5a1..1cd7778 100644
--- a/src/views/Home/sections/Banner.vue
+++ b/src/views/Home/sections/Banner.vue
@@ -86,7 +86,8 @@ const newsList = [
     top: 230px;
     right: 169px;
     padding: 20px 20px 0 20px;
-    width: 320px;
+    width: 330px;
+    height: 384px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     background: rgba(51, 51, 51, 0.3);
diff --git a/src/views/Network/Network.vue b/src/views/Network/Network.vue
index a50442b..7cd3831 100644
--- a/src/views/Network/Network.vue
+++ b/src/views/Network/Network.vue
@@ -2,19 +2,18 @@
   <div class="home-page">
     <!--    Banner 模块-->
     <Banner />
-    <!--    &lt;!&ndash;    核心价值模块&ndash;&gt;-->
+    <!--    七维度模块-->
     <SevenDimensions />
-    <!--    &lt;!&ndash;    应用场景模块&ndash;&gt;-->
+    <!--    应用场景模块-->
     <UseCases />
+    <!--    一站式解决方案-->
     <OneStopSolution />
+    <!--    AI健康流程-->
     <AiHealthProcess />
+    <!--    客户案例-->
     <CustomerCases />
-    <!--    &lt;!&ndash;    全球服务模块&ndash;&gt;-->
-    <!--    <GlobalService />-->
-    <!--    &lt;!&ndash;    客户反馈模块&ndash;&gt;-->
-    <!--    <CustomerFeedback />-->
-    <!--    &lt;!&ndash;    合作伙伴模块&ndash;&gt;-->
-    <!--    <Partners />-->
+    <!--    APP 推广与合作咨询-->
+    <AppPromotion />
   </div>
 </template>
 
@@ -25,6 +24,7 @@ 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 AppPromotion from '@/views/Network/sections/AppPromotion.vue'
 // import GlobalService from './sections/GlobalService.vue'
 // import CustomerFeedback from './sections/CustomerFeedback.vue'
 // import Partners from './sections/Partners.vue'
diff --git a/src/views/Network/sections/AppPromotion.vue b/src/views/Network/sections/AppPromotion.vue
new file mode 100644
index 0000000..fd7f3e5
--- /dev/null
+++ b/src/views/Network/sections/AppPromotion.vue
@@ -0,0 +1,129 @@
+<template>
+  <section class="app-promotion">
+    <div class="section-bg">
+      <h2 class="section-title">提供专属健康服务和服务方案</h2>
+      <el-button type="primary" class="consult-btn"> 领取您的AI健康解决方案 </el-button>
+    </div>
+    <div class="app-download">
+      <div class="app-item">
+        <div class="app-section">
+          <img src="@/assets/icons/ios.png" alt="iOS" />
+          <p><span class="_text">iOS</span>客户端</p>
+        </div>
+        <span>版本号：1.1.1</span>
+      </div>
+      <div class="app-item">
+        <div class="app-section">
+          <img src="@/assets/icons/android.png" alt="Android" />
+          <p><span class="_text">Android</span>客户端</p>
+        </div>
+        <span>版本号：1.1.1</span>
+      </div>
+    </div>
+    <!--    <div class="contact-info">-->
+    <!--      <p>联系我们：181-4852-2763</p>-->
+    <!--      <p>合作邮箱：tfhux2023.com</p>-->
+    <!--      <div class="qrcode-group">-->
+    <!--        <img src="@/assets/qr-code-1.png" alt="公众号" />-->
+    <!--        <img src="@/assets/qr-code-2.png" alt="小程序" />-->
+    <!--        <img src="@/assets/qr-code-3.png" alt="官网" />-->
+    <!--      </div>-->
+    <!--    </div>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from 'element-plus' // 确保按需导入
+</script>
+
+<style scoped lang="less">
+.app-promotion {
+  text-align: center;
+}
+.section-bg {
+  .pt(36px);
+  .pb(36px);
+  background-image: url('https://images.health.ufutx.com/202506/18/e403f857ad7385ea660987cbcbdcf198.png');
+}
+.section-title {
+  font-weight: bold;
+  font-size: 30px;
+  padding: 10px;
+  .mb(10px);
+}
+.consult-btn {
+  //display: flex;
+  height: 57px;
+  padding: 16px 30px;
+  border-radius: 10px;
+  background: var(--Style, #1060ff);
+  font-size: 18px;
+  color: #fff;
+  font-weight: bold;
+  .mt(10px);
+}
+.app-download {
+  height: 620px;
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  width: 100%;
+  background-image: url('https://images.health.ufutx.com/202506/18/f27ffc4b59df0dc6f53133bb1115b44a.png');
+  background-size: cover;
+}
+.app-item {
+  text-align: left;
+  display: flex;
+  width: 408px;
+  height: 150px;
+  padding: 50px 50px 30px 50px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 30px;
+  background: var(--ffffff, #fff);
+  .mt(428px);
+  .app-section {
+    .flex-center();
+  }
+  ._text {
+    font-weight: bold;
+    font-size: 20px;
+  }
+}
+.app-item img {
+  width: 26px;
+  height: 26px;
+  margin-right: 5px;
+}
+.app-item p {
+  font-size: 18px;
+  font-weight: 400;
+  .ml(3px);
+}
+.app-item span {
+  font-size: 15px;
+  color: #666;
+  letter-spacing: 0.9px;
+}
+.contact-info {
+  margin-top: 40px;
+}
+.contact-info p {
+  font-size: 14px;
+  color: #666;
+  margin: 8px 0;
+}
+.qrcode-group {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 16px;
+}
+.qrcode-group img {
+  width: 60px;
+  height: 60px;
+}
+</style>
diff --git a/src/views/Network/sections/Banner.vue b/src/views/Network/sections/Banner.vue
index 41db2e4..7bbb204 100644
--- a/src/views/Network/sections/Banner.vue
+++ b/src/views/Network/sections/Banner.vue
@@ -86,7 +86,8 @@ const newsList = [
     top: 230px;
     right: 169px;
     padding: 20px 20px 0 20px;
-    width: 320px;
+    width: 330px;
+    height: 384px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     background: rgba(51, 51, 51, 0.3);
diff --git a/src/views/Network/sections/CustomerCases.vue b/src/views/Network/sections/CustomerCases.vue
index 09c826a..15ccf5e 100644
--- a/src/views/Network/sections/CustomerCases.vue
+++ b/src/views/Network/sections/CustomerCases.vue
@@ -7,8 +7,8 @@
           <img :src="item.avatar" alt="avatar" class="avatar" />
         </div>
         <div class="feedback-info">
-          <p class="username">{{ item.username }}</p>
-          <p class="comment">{{ item.comment }}</p>
+          <!--          <p class="username">{{ item.username }}</p>-->
+          <p class="comment text-2-line-ellipsis">{{ item.comment }}</p>
         </div>
       </div>
     </div>
@@ -20,17 +20,17 @@
 const feedbackList = [
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '章小样',
-    comment: '界面简约清晰，功能强大',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
@@ -40,62 +40,62 @@ const feedbackList = [
   },
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '派小喵萌宠',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '派小喵萌宠',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '派小喵萌宠',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '章小样',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   },
   {
     username: '派小喵萌宠',
-    comment: '操作简单，容易上手',
+    comment: '交付与实施阶段很专业，坚持每天汇报进度和风险，并提出很多合理建议~',
     avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
   }
 ]
@@ -134,13 +134,13 @@ const feedbackList = [
   }
 
   .feedback-card {
-    display: flex;
-    align-items: center;
-    padding: @padding;
-    border-radius: 16px;
-    background: var(--ffffff, #fff);
     transition: @transition;
-
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    gap: 20px;
+    border-radius: 100px;
+    background: #f3f5f7;
     &:hover {
       transform: translateY(-4px);
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
@@ -148,7 +148,7 @@ const feedbackList = [
 
     .avatar-container {
       flex-shrink: 0;
-      margin-right: 12px;
+      //margin-right: 12px;
 
       .avatar {
         width: @avatar-size;
@@ -169,8 +169,9 @@ const feedbackList = [
       }
 
       .comment {
+        width: 250px;
         font-size: 14px;
-        color: @subtext-color;
+        color: @text-color;
         line-height: 1.4;
       }
     }
diff --git a/src/views/Network/sections/GlobalService.vue b/src/views/Network/sections/GlobalService.vue
deleted file mode 100644
index e9432f7..0000000
--- a/src/views/Network/sections/GlobalService.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <section class="global-service">
-    <div class="container">
-      <h3 class="section-title">我们全球服务覆盖范围</h3>
-      <p class="section-desc">覆盖国家/地区：65+ · 客户产业覆盖范围：18+</p>
-      <!-- 替换为实际地图路径 -->
-      <img
-        src="https://images.health.ufutx.com/202506/12/2acedc9535b108d6cd079b34bb01e78e.jpeg"
-        alt="世界地图"
-        class="world-map"
-      />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-// 暂无逻辑，纯展示
-</script>
-
-<style scoped lang="less">
-.global-service {
-  //padding: 80px 0;
-  background-color: #fff;
-
-  .container {
-    margin: 0 auto;
-    text-align: center;
-    .px(192px);
-    .section-title {
-      //background: red;
-      font-size: 32px;
-      font-weight: bold;
-      margin-bottom: 20px;
-      .mt(100px);
-      color: @text-color;
-    }
-
-    .section-desc {
-      font-size: 20px;
-      color: @text-color-secondary;
-      margin-bottom: 40px;
-    }
-
-    .world-map {
-      width: 100%;
-      height: auto;
-      .mb(70px);
-    }
-  }
-}
-</style>
diff --git a/src/views/Network/sections/OneStopSolution.vue b/src/views/Network/sections/OneStopSolution.vue
index 7a1b6ac..093f3e1 100644
--- a/src/views/Network/sections/OneStopSolution.vue
+++ b/src/views/Network/sections/OneStopSolution.vue
@@ -24,6 +24,7 @@
   padding: 50px 20px;
   text-align: center;
   background: radial-gradient(83.44% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
+  .mt(20px);
 }
 .section-title {
   font-size: @font-size-xxl;
diff --git a/src/views/News/sections/Banner.vue b/src/views/News/sections/Banner.vue
index 9a9c446..14ac113 100644
--- a/src/views/News/sections/Banner.vue
+++ b/src/views/News/sections/Banner.vue
@@ -80,7 +80,8 @@ const newsList = [
     top: 230px;
     right: 169px;
     padding: 20px 20px 0 20px;
-    width: 320px;
+    width: 330px;
+    height: 384px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     background: rgba(51, 51, 51, 0.3);