feat: 20250614 友福动态等页面与组件

2025-06-13 21:00:13 +08:00 · 2025-06-13 21:00:13 +08:00 · 92f39550e1
commit 92f39550e1
parent 4f5a36621f
33 changed files with 2942 additions and 158 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -28,7 +28,19 @@ module.exports = {
    'vue/no-undef-components': [
      'error',
      {
-        ignorePatterns: ['router-link', 'router-view']
+        ignorePatterns: [
+          'router-link',
+          'router-view',
+          'ElTabs',
+          'ElTabPane',
+          'ElButton',
+          'ElPagination',
+          // 添加其他使用的 Element Plus 组件
+          'RouterLink',
+          'RouterView'
+        ]
+        // 允许的组件前缀（Element Plus 组件以 El 开头）
+        // allowComponentPrefixes: ['El']
      }
    ],
    // 针对非 Vue 文件禁用 Vue 规则
--- a/components.d.ts
+++ b/components.d.ts
@ -8,6 +8,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElTabPane: typeof import('element-plus/es')['ElTabPane']
    ElTabs: typeof import('element-plus/es')['ElTabs']
    Footer: typeof import('./src/components/Footer.vue')['default']
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -0,0 +1,175 @@
+<template>
+  <footer class="footer">
+    <div class="footer-container">
+      <!-- 左侧联系信息 -->
+      <div class="footer-contact">
+        <p class="contact-title">联系我们</p>
+        <p class="contact-phone">181-4852-2763</p>
+        <p class="contact-email">合作邮箱：yftxtx@uftx2023.com</p>
+      </div>
+
+      <!-- 右侧二维码 -->
+      <div class="footer-qr">
+        <div v-for="(item, index) in qrItems" :key="index" class="qr-item">
+          <div class="qr-container">
+            <img :src="item.src" :alt="item.alt" class="qr-image" />
+          </div>
+          <p class="qr-title">{{ item.title }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部信息 -->
+    <div class="footer-bottom">
+      <p>公司地址：深圳市南山区南山街道阳光科创中心B座33楼</p>
+      <p>版权所有©友福同享(深圳)智能科技有限公司 粤ICP备12008876号</p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+// 二维码数据
+const qrItems = [
+  {
+    src: 'https://images.health.ufutx.com/202506/12/cc651222ac2e5f63185dec1f31d176ae.png',
+    alt: '友福同享二维码',
+    title: '友福同享'
+  },
+  {
+    src: 'https://images.health.ufutx.com/202506/12/cc651222ac2e5f63185dec1f31d176ae.png', // 示例地址，需替换为实际二维码
+    alt: '福恋二维码',
+    title: '福恋'
+  },
+  {
+    src: 'https://images.health.ufutx.com/202506/12/cc651222ac2e5f63185dec1f31d176ae.png', // 示例地址，需替换为实际二维码
+    alt: '友福公众号二维码',
+    title: '友福公众号'
+  }
+]
+</script>
+
+<style scoped lang="less">
+.footer {
+  width: 100vw;
+  background-color: #0b101b;
+  color: #fff;
+  //padding: @space-xl @container-padding;
+}
+
+.footer-container {
+  //width: @container-width;
+  margin: 0 auto;
+  display: flex;
+  .mx(192px);
+  .py(50px);
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  //padding-bottom: @space-lg;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-contact {
+  text-align: left;
+  .contact-title {
+    font-size: @font-size-lg;
+    font-weight: 500;
+    margin-bottom: @space-sm;
+    color: @text-color-light;
+  }
+  .contact-phone {
+    font-size: 50px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .contact-email {
+    font-size: @font-size-lg;
+    color: @text-color-light;
+  }
+}
+
+.footer-qr {
+  display: flex;
+  gap: @space-lg;
+}
+
+.qr-item {
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+  // 给父元素也加上过渡，让整体变化更连贯，避免子元素和父元素过渡不同步
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  .qr-container {
+    display: inline-block;
+    width: 108px;
+    height: 108px;
+    overflow: hidden;
+    background: #ffffff;
+    padding: 4px;
+    border-radius: 10px;
+    // 更换更丝滑的曲线，cubic-bezier(0.4, 0, 0.2, 1) 是 Material Design 推荐的曲线，过渡更自然
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform-origin: bottom; // 底部固定
+
+    &:hover {
+      padding: 12px;
+      transform: scale(1.3);
+    }
+
+    .qr-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      // 同样更换更适配的过渡曲线，让图片缩放和容器变化节奏一致
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      &:hover {
+        transform: scale(1.3);
+      }
+    }
+  }
+
+  .qr-title {
+    margin-top: @space-sm;
+    font-size: 14px;
+    color: @text-color-light;
+    // 给标题也加上淡入淡出的透明度过渡，让整体交互更统一（可选，看需求）
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    &:hover {
+      // hover 时稍微提升标题透明度，突出交互反馈（可选）
+      opacity: 1;
+    }
+  }
+}
+
+.footer-bottom {
+  width: @container-width;
+  margin: auto;
+  text-align: center;
+  color: @primary-light;
+  .px(192px);
+  .py(50px);
+  p {
+    font-size: @font-size-sm;
+  }
+  :last-child {
+    .mt(20px);
+  }
+}
+
+// 响应式适配
+@media (max-width: @tablet-breakpoint) {
+  .footer-container {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  .footer-contact {
+    margin-bottom: @space-lg;
+  }
+  .footer-qr {
+    justify-content: center;
+  }
+}
+</style>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@ -0,0 +1,149 @@
+<template>
+  <header class="navbar">
+    <div class="navbar-container">
+      <!-- Logo -->
+      <div class="navbar-logo">
+        <img src="@/assets/images/logo.png" alt="友福同享Logo" />
+        <!--        <span>友福同享</span>-->
+      </div>
+
+      <!-- 导航菜单 -->
+      <nav class="navbar-menu">
+        <div
+          v-for="(item, index) in navItems"
+          :key="index"
+          class="menu-item"
+          :class="{ active: isActive(item.path) }"
+          @click="handleNavigate(item.path)"
+        >
+          {{ item.label }}
+        </div>
+      </nav>
+
+      <!-- 语言切换 -->
+      <div class="language-switch"><span>English</span> | <span>中文</span> | <span>繁體</span></div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+// import { computed } from 'vue'
+
+const router = useRouter()
+
+// 导航数据
+const navItems = [
+  { path: '/', label: '首页' },
+  { path: '/news', label: '友福动态' },
+  { path: '/network', label: 'AI健康' },
+  { path: '/dating', label: 'AI婚恋' },
+  { path: '/app', label: '友福同享APP' },
+  { path: '/ecosystem', label: '生态合作' },
+  { path: '/about', label: '关于我们' }
+]
+
+// 跳转方法
+const handleNavigate = (path: string) => {
+  console.log(path)
+  router.push(path)
+}
+
+// 判断是否为激活状态
+const isActive = (path: string) => {
+  return router.currentRoute.value.path === path
+}
+</script>
+
+<style scoped lang="less">
+// 导航栏容器
+.navbar {
+  display: flex;
+  width: 1920px;
+  padding: 28px 100px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(25px);
+  z-index: 999;
+  overflow: hidden;
+}
+.navbar-logo {
+  width: 160px;
+  height: 29px;
+  //position: absolute;
+  //top: 0;
+  //left: 0;
+}
+// 导航容器（居中）
+.navbar-container {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+
+// 导航菜单
+.navbar-menu {
+  margin-left: 260px;
+  display: flex;
+  gap: 60px;
+
+  // 单个菜单项（关键动画容器）
+  .menu-item {
+    position: relative;
+    color: #333;
+    font-size: 16px;
+    padding: 10px 0;
+    cursor: pointer;
+    transition: color 0.3s ease;
+
+    // 下划线动画（核心）
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 0;
+      height: 4px;
+      border-radius: 10px;
+      background: @primary-color;
+      transition: width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+    }
+
+    // 激活态/ hover 态
+    &.active,
+    &:hover {
+      font-weight: bold;
+      color: @primary-color;
+      &::after {
+        width: 100%; // 下划线展开
+      }
+    }
+  }
+}
+
+// 语言切换（可选动画）
+.language-switch {
+  color: #666;
+  transition: color 0.3s ease;
+
+  &:hover {
+    color: #007bff;
+  }
+}
+
+// 响应式适配
+@media (max-width: 1200px) {
+  .navbar-container {
+    width: 90%;
+  }
+}
+</style>
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@ -0,0 +1,33 @@
+<template>
+  <div class="layout">
+    <!-- 导航栏 -->
+    <Navbar />
+
+    <!-- 页面内容插槽（子页面会填充这里） -->
+    <!--    <main class="layout-main">-->
+    <!--      <slot></slot>-->
+    <!--    </main>-->
+
+    <router-view></router-view>
+    <!-- 页脚 -->
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Navbar from '@/components/Navbar.vue'
+import Footer from '@/components/Footer.vue'
+</script>
+
+<style scoped lang="less">
+.layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.layout-main {
+  padding: 100px 0 60px; /* 导航栏80px + 20px间距，页脚60px */
+  //width: 1200px;
+  margin: 0 auto;
+}
+</style>
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@ -1,6 +1,12 @@
 // src/router/routes.ts
 import type { RouteRecordRaw } from 'vue-router' // 添加type关键字
 import Home from '@/views/Home/Home.vue'
+import News from '@/views/News/News.vue'
+import Network from '@/views/Network/Network.vue'
+import Dating from '@/views/Dating/Dating.vue'
+import App from '@/views/App/App.vue'
+import Ecosystem from '@/views/Ecosystem/Ecosystem.vue'
+import About from '@/views/About/About.vue'
 // import About from '@/views/About.vue'
 // import I18nDemo from '../views/I18nDemo.vue'
 import Layout from '@/layout/Layout.vue'
@ -10,12 +16,12 @@ const routes: RouteRecordRaw[] = [
    component: Layout,
    children: [
      { path: '', name: 'Home', component: Home },
-      { path: 'news', name: 'News', component: () => import('@/views/News.vue') },
-      { path: 'network', name: 'Network', component: () => import('@/views/Network.vue') },
-      { path: 'dating', name: 'Dating', component: () => import('@/views/Dating.vue') },
-      { path: 'app', name: 'App', component: () => import('@/views/App.vue') },
-      { path: 'ecosystem', name: 'Ecosystem', component: () => import('@/views/Ecosystem.vue') },
-      { path: 'about', name: 'About', component: () => import('@/views/About.vue') }
+      { path: 'news', name: 'News', component: News },
+      { path: 'network', name: 'Network', component: Network },
+      { path: 'dating', name: 'Dating', component: Dating },
+      { path: 'app', name: 'App', component: App },
+      { path: 'ecosystem', name: 'Ecosystem', component: Ecosystem },
+      { path: 'about', name: 'About', component: About }
    ]
  }
  // {
--- a/src/styles/global.less
+++ b/src/styles/global.less
@ -0,0 +1,263 @@
+// ==================== 1. 颜色变量 ====================
+@primary-color: #313fa8;       // 主色调（蓝色）
+@primary-light: #748EA6;      // 主色浅色调
+@success-color: #67c23a;      // 成功色（绿色）
+@warning-color: #e6a23c;      // 警告色（橙色）
+@danger-color: #f56c6c;       // 危险色（红色）
+@info-color: #909399;         // 信息色（灰色）
+
+@primary-dark: #1060FF;        // 主色深色调（用于按钮激活态、边框）
+@primary-light-2: #a3b3c6;     // 主色超浅色调（用于背景渐变）
+
+// 辅助色（扩展功能模块色彩）
+@secondary-purple: #7e57c2;    // 紫色（用于功能标签、辅助按钮）
+@secondary-cyan: #00acc1;      // 青色（用于数据可视化、进度条）
+@secondary-yellow: #ffb300;    // 黄色（用于提示、警告轻量化场景）
+@secondary-pink: #ec407a;      // 粉红色（用于情感化功能、互动元素）
+
+// 中性色阶（扩展文本/背景层次）
+@neutral-100: #f5f7fa;         // 超浅灰（背景色）
+@neutral-200: #e4e7ed;         // 浅灰（边框、分隔线）
+@neutral-300: #c0c4cc;         // 中灰（次要文本、禁用状态）
+@neutral-400: #909399;         // 深灰（主要文本、非激活状态）
+@neutral-900: #1e2328;         // 近黑色（标题、强调文本）
+
+// 状态色（扩展交互状态）
+@status-loading: #909399;      // 加载中（骨架屏、加载指示器）
+@status-disabled: #c0c4cc;     // 禁用态（按钮、输入框）
+@status-pending: #e6a23c;      // 待处理（流程状态、任务标签）
+@status-urgent: #ff4d4f;       // 紧急（通知、告警标签）
+
+@text-color: #0E0E0E;            // 主文本色
+@text-color-secondary: #66676C;  // 次要文本色
+@text-color-light: #748EA6;      // 浅色文本
+@bg-color: #fff;              // 背景色
+@bg-color-light: #f5f7fa;     // 浅背景色
+@border-color: #dcdfe6;       // 边框色
+
+
+// ==================== 2. 字体定义 ====================
+@font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
+@font-size-xs: 12px;          // 超小字体
+@font-size-sm: 14px;          // 小字体
+@font-size-md: 16px;          // 中等字体
+@font-size-lg: 18px;          // 大字体
+@font-size-xl: 24px;          // 超大字体
+@font-size-xxl: 32px;         // 特大字体
+
+@font-weight-normal: 400;
+@font-weight-medium: 500;
+@font-weight-bold: 700;
+
+
+// ==================== 3. 间距变量 ====================
+@space-xs: 4px;               // 超小间距
+@space-sm: 8px;               // 小间距
+@space-md: 16px;              // 中等间距
+@space-lg: 24px;              // 大间距
+@space-xl: 32px;              // 超大间距
+@space-xxl: 48px;             // 特大间距
+
+@border-radius-sm: 4px;       // 小圆角
+@border-radius-md: 8px;       // 中等圆角
+@border-radius-lg: 12px;      // 大圆角
+@border-radius-full: 50%;     // 圆形
+
+
+// ==================== 4. 容器宽度 ====================
+@container-width: 1200px;     // 页面最大宽度
+@container-padding: 20px;     // 容器内边距
+
+
+// ==================== 5. 重置样式 ====================
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: @font-family;
+  font-size: @font-size-md;
+  line-height: 1.5;
+  color: @text-color;
+  background-color: @bg-color;
+}
+
+a {
+  color: @primary-color;
+  text-decoration: none;
+  &:hover {
+    color: @primary-light;
+    //text-decoration: underline;
+  }
+}
+
+ul, ol {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  border: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: @font-weight-medium;
+  margin-bottom: @space-md;
+}
+
+
+// ==================== 6. 工具类 ====================
+// 清除浮动
+.clearfix() {
+  &::before,
+  &::after {
+    content: "";
+    display: table;
+  }
+  &::after {
+    clear: both;
+  }
+}
+// global.less 或 App.vue 全局样式
+html, body {
+  margin: 0;
+  padding: 0;
+  // 明确设置基础字体大小，建议用相对单位（如 rem 适配）
+  //font-size: 14px;
+  font-family: "Microsoft YaHei", sans-serif; // 统一字体
+}
+// Flex 布局
+.flex() {
+  display: flex;
+}
+
+.flex-column() {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row() {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between() {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// 文本工具类
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// 间距工具类
+.mt(@value) { margin-top: @value; }
+.mb(@value) { margin-bottom: @value; }
+.ml(@value) { margin-left: @value; }
+.mr(@value) { margin-right: @value; }
+.mx(@value) { margin-left: @value; margin-right: @value; }
+.my(@value) { margin-top: @value; margin-bottom: @value; }
+.pa(@value) { padding: @value; }
+.pt(@value) { padding-top: @value; }
+.pb(@value) { padding-bottom: @value; }
+.pl(@value) { padding-left: @value; }
+.pr(@value) { padding-right: @value; }
+.px(@value) { padding-left: @value; padding-right: @value; }
+.py(@value) { padding-top: @value; padding-bottom: @value; }
+
+// 响应式工具类（示例，可根据需求扩展）
+@mobile-breakpoint: 768px;
+@tablet-breakpoint: 1024px;
+
+@media (max-width: @mobile-breakpoint) {
+  .mobile-hide {
+    display: none;
+  }
+}
+
+@media (min-width: @tablet-breakpoint) {
+  .tablet-show {
+    display: block;
+  }
+}
+// ==================== 6. 工具类 扩展 ====================
+// Flex 布局补充
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+.justify-around { justify-content: space-around; }
+
+// 垂直对齐
+.align-top { align-items: flex-start; }
+.align-middle { align-items: center; }
+.align-bottom { align-items: flex-end; }
+
+// 文本工具类
+.text-bold { font-weight: @font-weight-bold; }
+.text-muted { color: @text-color-light; }
+
+// 响应式工具类
+@media (max-width: @mobile-breakpoint) {
+  .mobile-hide { display: none !important; }
+  .mobile-show { display: block !important; }
+}
+@media (min-width: @tablet-breakpoint) {
+  .desktop-only { display: block !important; }
+}
+
+// ==================== 7. 阴影系统 ====================
+@shadow-base: 0 2px 8px rgba(0,0,0,0.03);
+@shadow-hover: 0 4px 16px rgba(0,0,0,0.08);
+
+// 工具类
+.shadow { box-shadow: @shadow-base; }
+.shadow-hover {
+  transition: all 0.3s ease;
+  &:hover {
+    box-shadow: @shadow-hover;
+    transform: translateY(-2px);
+  }
+}
+
+// ==================== 8. 交互动效 ====================
+// 交互动效变量
+@transition: all 0.3s ease; // 基础过渡动画
+// 基础过渡
+.transition-base() {
+  transition: all 0.3s ease;
+}
+
+// 卡片悬停效果
+.card-hover() {
+  .transition-base();
+  &:hover {
+    box-shadow: @shadow-hover;
+    transform: translateY(-2px);
+  }
+}
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -1,18 +0,0 @@
-<template>
-  <div class="about-page">
-    <h1>关于我们</h1>
-    <p>我们是一家专注于极简设计的科技公司。</p>
-    <router-link to="/">返回首页</router-link>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 关于页逻辑
-</script>
-
-<style scoped>
-.about-page {
-  padding: 2rem;
-  text-align: center;
-}
-</style>
--- a/src/views/About/About.vue
+++ b/src/views/About/About.vue
@ -0,0 +1,31 @@
+<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>
+</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'
+</script>
+
+<style scoped lang="less">
+.home-page {
+  // 可设置全局背景或间距，按需扩展
+}
+</style>
--- a/src/views/About/sections/Banner.vue
+++ b/src/views/About/sections/Banner.vue
@ -0,0 +1,153 @@
+<template>
+  <section class="banner">
+    <div class="banner-bg">
+      <!-- 替换为实际背景图路径 -->
+      <img src="https://images.health.ufutx.com/202506/13/f976d275bb04340765102ae4873e41c1.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>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+// import { ref } from 'vue'
+//
+// 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'
+//   }
+// ]
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.banner {
+  //width: 100%;
+  position: relative;
+  text-align: center;
+  color: #fff;
+
+  .banner-bg {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  .news-panel {
+    position: absolute;
+    top: 230px;
+    right: 169px;
+    padding: 20px 20px 0 20px;
+    width: 320px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    background: rgba(51, 51, 51, 0.3);
+    backdrop-filter: blur(10px);
+    .news-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      border-radius: @border-radius-md;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      margin-bottom: 12px;
+      &:hover,
+      &.active {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateX(6px);
+      }
+
+      .icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 15px;
+        transition: transform 0.3s ease;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: all 0.3s ease;
+        }
+      }
+
+      .text {
+        font-size: @font-size-md;
+        color: #ffffff;
+        transition: color 0.3s ease;
+      }
+
+      &:hover .text,
+      &.active .text {
+        color: @text-color;
+      }
+
+      &:hover .icon,
+      &.active .icon {
+        background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
+        transform: scale(1.15); // 图标轻微放大
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .banner-content {
+    .main-title {
+      font-size: 32px;
+    }
+    .sub-title {
+      font-size: 18px;
+    }
+    .action-btn {
+      font-size: 16px;
+      padding: 10px 24px;
+    }
+  }
+}
+</style>
--- a/src/views/App/App.vue
+++ b/src/views/App/App.vue
@ -0,0 +1,31 @@
+<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>
+</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'
+</script>
+
+<style scoped lang="less">
+.home-page {
+  // 可设置全局背景或间距，按需扩展
+}
+</style>
--- a/src/views/App/sections/Banner.vue
+++ b/src/views/App/sections/Banner.vue
@ -0,0 +1,153 @@
+<template>
+  <section class="banner">
+    <div class="banner-bg">
+      <!-- 替换为实际背景图路径 -->
+      <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>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+// import { ref } from 'vue'
+
+// 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'
+//   }
+// ]
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.banner {
+  //width: 100%;
+  position: relative;
+  text-align: center;
+  color: #fff;
+
+  .banner-bg {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  .news-panel {
+    position: absolute;
+    top: 230px;
+    right: 169px;
+    padding: 20px 20px 0 20px;
+    width: 320px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    background: rgba(51, 51, 51, 0.3);
+    backdrop-filter: blur(10px);
+    .news-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      border-radius: @border-radius-md;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      margin-bottom: 12px;
+      &:hover,
+      &.active {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateX(6px);
+      }
+
+      .icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 15px;
+        transition: transform 0.3s ease;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: all 0.3s ease;
+        }
+      }
+
+      .text {
+        font-size: @font-size-md;
+        color: #ffffff;
+        transition: color 0.3s ease;
+      }
+
+      &:hover .text,
+      &.active .text {
+        color: @text-color;
+      }
+
+      &:hover .icon,
+      &.active .icon {
+        background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
+        transform: scale(1.15); // 图标轻微放大
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .banner-content {
+    .main-title {
+      font-size: 32px;
+    }
+    .sub-title {
+      font-size: 18px;
+    }
+    .action-btn {
+      font-size: 16px;
+      padding: 10px 24px;
+    }
+  }
+}
+</style>
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@ -1,7 +0,0 @@
-<template>
-  <div class="contact-page">
-    <h1>联系我们</h1>
-    <p>联系方式...</p>
-  </div>
-</template>
-<script lang="ts" setup></script>
--- a/src/views/Dating/Dating.vue
+++ b/src/views/Dating/Dating.vue
@ -0,0 +1,31 @@
+<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>
+</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'
+</script>
+
+<style scoped lang="less">
+.home-page {
+  // 可设置全局背景或间距，按需扩展
+}
+</style>
--- a/src/views/Dating/sections/Banner.vue
+++ b/src/views/Dating/sections/Banner.vue
@ -0,0 +1,153 @@
+<template>
+  <section class="banner">
+    <div class="banner-bg">
+      <!-- 替换为实际背景图路径 -->
+      <img src="https://images.health.ufutx.com/202506/13/100bcb7820a3cac2f8de6f50d0404460.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>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+// import { ref } from 'vue'
+
+// 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'
+//   }
+// ]
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.banner {
+  //width: 100%;
+  position: relative;
+  text-align: center;
+  color: #fff;
+
+  .banner-bg {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  .news-panel {
+    position: absolute;
+    top: 230px;
+    right: 169px;
+    padding: 20px 20px 0 20px;
+    width: 320px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    background: rgba(51, 51, 51, 0.3);
+    backdrop-filter: blur(10px);
+    .news-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      border-radius: @border-radius-md;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      margin-bottom: 12px;
+      &:hover,
+      &.active {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateX(6px);
+      }
+
+      .icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 15px;
+        transition: transform 0.3s ease;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: all 0.3s ease;
+        }
+      }
+
+      .text {
+        font-size: @font-size-md;
+        color: #ffffff;
+        transition: color 0.3s ease;
+      }
+
+      &:hover .text,
+      &.active .text {
+        color: @text-color;
+      }
+
+      &:hover .icon,
+      &.active .icon {
+        background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
+        transform: scale(1.15); // 图标轻微放大
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .banner-content {
+    .main-title {
+      font-size: 32px;
+    }
+    .sub-title {
+      font-size: 18px;
+    }
+    .action-btn {
+      font-size: 16px;
+      padding: 10px 24px;
+    }
+  }
+}
+</style>
--- a/src/views/Ecosystem/Ecosystem.vue
+++ b/src/views/Ecosystem/Ecosystem.vue
@ -0,0 +1,31 @@
+<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>
+</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'
+</script>
+
+<style scoped lang="less">
+.home-page {
+  // 可设置全局背景或间距，按需扩展
+}
+</style>
--- a/src/views/Ecosystem/sections/Banner.vue
+++ b/src/views/Ecosystem/sections/Banner.vue
@ -0,0 +1,153 @@
+<template>
+  <section class="banner">
+    <div class="banner-bg">
+      <!-- 替换为实际背景图路径 -->
+      <img src="https://images.health.ufutx.com/202506/13/7c87ebff15ce960d0e58473f401fa91b.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>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+// import { ref } from 'vue'
+//
+// 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'
+//   }
+// ]
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.banner {
+  //width: 100%;
+  position: relative;
+  text-align: center;
+  color: #fff;
+
+  .banner-bg {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  .news-panel {
+    position: absolute;
+    top: 230px;
+    right: 169px;
+    padding: 20px 20px 0 20px;
+    width: 320px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    background: rgba(51, 51, 51, 0.3);
+    backdrop-filter: blur(10px);
+    .news-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      border-radius: @border-radius-md;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      margin-bottom: 12px;
+      &:hover,
+      &.active {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateX(6px);
+      }
+
+      .icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 15px;
+        transition: transform 0.3s ease;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: all 0.3s ease;
+        }
+      }
+
+      .text {
+        font-size: @font-size-md;
+        color: #ffffff;
+        transition: color 0.3s ease;
+      }
+
+      &:hover .text,
+      &.active .text {
+        color: @text-color;
+      }
+
+      &:hover .icon,
+      &.active .icon {
+        background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
+        transform: scale(1.15); // 图标轻微放大
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .banner-content {
+    .main-title {
+      font-size: 32px;
+    }
+    .sub-title {
+      font-size: 18px;
+    }
+    .action-btn {
+      font-size: 16px;
+      padding: 10px 24px;
+    }
+  }
+}
+</style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,18 +0,0 @@
-<template>
-  <div class="home-page">
-    <h1>欢迎来到极简官网</h1>
-    <p>这是首页内容，展示公司核心信息。</p>
-    <router-link to="/about">了解更多关于我们</router-link>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 首页逻辑（可添加数据请求等）
-</script>
-
-<style scoped>
-.home-page {
-  padding: 2rem;
-  text-align: center;
-}
-</style>
--- a/src/views/Home/sections/Banner.vue
+++ b/src/views/Home/sections/Banner.vue
@ -4,6 +4,21 @@
      <!-- 替换为实际背景图路径 -->
      <img src="https://images.health.ufutx.com/202506/12/e6ea04327d2b5dbd9e4ae441431018df.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="banner-content">-->
    <!--      <h1 class="main-title">友福同享智能AI健康方案</h1>-->
    <!--      <h2 class="sub-title">智慧科技创造未来</h2>-->
@ -14,6 +29,37 @@
 </template>

 <script setup lang="ts">
+import { ref } from 'vue'
+
+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'
+  }
+]
 // 暂无逻辑，纯展示
 </script>

@ -35,44 +81,62 @@
    }
  }

-  .banner-content {
+  .news-panel {
    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    max-width: 1200px;
-    padding: 0 20px;
-
-    .main-title {
-      font-size: 48px;
-      font-weight: bold;
-      margin-bottom: 20px;
-    }
-
-    .sub-title {
-      font-size: 24px;
-      margin-bottom: 40px;
-    }
-
-    .action-btn {
-      padding: 12px 30px;
-      font-size: 18px;
-      background-color: #007bff;
-      color: #fff;
-      border: none;
-      border-radius: 25px;
+    top: 230px;
+    right: 169px;
+    padding: 20px 20px 0 20px;
+    width: 320px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    background: rgba(51, 51, 51, 0.3);
+    backdrop-filter: blur(10px);
+    .news-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      border-radius: @border-radius-md;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: #005eb8;
+      margin-bottom: 12px;
+      &:hover,
+      &.active {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateX(6px);
      }
-    }

-    .contact-phone {
-      margin-top: 20px;
-      font-size: 16px;
+      .icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 15px;
+        transition: transform 0.3s ease;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: all 0.3s ease;
+        }
+      }
+
+      .text {
+        font-size: @font-size-md;
+        color: #ffffff;
+        transition: color 0.3s ease;
+      }
+
+      &:hover .text,
+      &.active .text {
+        color: @text-color;
+      }
+
+      &:hover .icon,
+      &.active .icon {
+        background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
+        transform: scale(1.15); // 图标轻微放大
+      }
    }
  }
 }
--- a/src/views/Home/sections/CoreValue.vue
+++ b/src/views/Home/sections/CoreValue.vue
@ -19,25 +19,25 @@

 <style scoped lang="less">
 .core-value {
-  padding: 80px 0;
-  //background-color: #f9fcff;
-
+  //padding: 80px 0;
+  .pt(100px);
+  //background-color: red;
  .container {
    //max-width: 1200px;
    margin: 0 auto;
    text-align: center;

    .section-title {
-      font-size: 28px;
+      font-size: 32px;
      font-weight: bold;
-      margin-bottom: 10px;
-      color: #333;
+      margin-bottom: 20px;
+      color: @text-color;
    }

    .section-desc {
-      font-size: 16px;
-      color: #666;
-      margin-bottom: 40px;
+      font-size: 20px;
+      color: @text-color-secondary;
+      margin-bottom: 60px;
    }

    .diagram {
--- a/src/views/Home/sections/CustomerFeedback.vue
+++ b/src/views/Home/sections/CustomerFeedback.vue
@ -1,6 +1,6 @@
 <template>
  <section class="feedback-section">
-    <h2 class="feedback-title">客户反馈</h2>
+    <div class="feedback-title">客户反馈</div>
    <div class="feedback-list">
      <div v-for="(item, index) in feedbackList" :key="index" class="feedback-card">
        <div class="avatar-container">
@ -107,22 +107,23 @@ const feedbackList = [
@card-bg: #ffffff;
@radius: 12px;
@padding: 16px;
-@gap: 24px;
-@avatar-size: 40px;
+@gap: 50px;
+@avatar-size: 60px;
@text-color: #333;
@subtext-color: #999;
@transition: all 0.3s ease;

 .feedback-section {
  background-color: @bg-color;
-  padding: 48px @padding;
+  .px(100px);
  text-align: center;
-
+  .pb(100px);
  .feedback-title {
    font-size: 28px;
    font-weight: 600;
    color: @text-color;
-    margin-bottom: 32px;
+    .pb(60px);
+    .pt(100px);
  }

  .feedback-list {
@ -135,11 +136,9 @@ const feedbackList = [
  .feedback-card {
    display: flex;
    align-items: center;
-    background-color: @card-bg;
-    border-radius: @radius;
    padding: @padding;
-    width: 240px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    border-radius: 16px;
+    background: var(--ffffff, #fff);
    transition: @transition;

    &:hover {
@ -163,7 +162,7 @@ const feedbackList = [
      text-align: left;

      .username {
-        font-size: 16px;
+        font-size: 18px;
        font-weight: 500;
        color: @text-color;
        margin-bottom: 4px;
--- a/src/views/Home/sections/GlobalService.vue
+++ b/src/views/Home/sections/GlobalService.vue
@ -2,7 +2,7 @@
  <section class="global-service">
    <div class="container">
      <h3 class="section-title">我们全球服务覆盖范围</h3>
-      <p class="section-desc">覆盖国家/地区：6+ · 客户产业覆盖范围：15+</p>
+      <p class="section-desc">覆盖国家/地区：65+ · 客户产业覆盖范围：18+</p>
      <!-- 替换为实际地图路径 -->
      <img
        src="https://images.health.ufutx.com/202506/12/2acedc9535b108d6cd079b34bb01e78e.jpeg"
@ -19,31 +19,32 @@

 <style scoped lang="less">
 .global-service {
-  padding: 80px 0;
+  //padding: 80px 0;
  background-color: #fff;

  .container {
-    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
-
+    .px(192px);
    .section-title {
-      font-size: 28px;
+      //background: red;
+      font-size: 32px;
      font-weight: bold;
-      margin-bottom: 10px;
-      color: #333;
+      margin-bottom: 20px;
+      .mt(100px);
+      color: @text-color;
    }

    .section-desc {
-      font-size: 16px;
-      color: #666;
+      font-size: 20px;
+      color: @text-color-secondary;
      margin-bottom: 40px;
    }

    .world-map {
-      max-width: 1000px;
      width: 100%;
      height: auto;
+      .mb(70px);
    }
  }
 }
--- a/src/views/Home/sections/Partners.vue
+++ b/src/views/Home/sections/Partners.vue
@ -60,12 +60,10 @@

 .partner-section {
  width: 100%;
-  padding: @space-xl @container-padding;
  text-align: center;

  .partner-header {
-    .mb(50px);
-
+    .my(50px);
    .partner-title {
      font-size: @font-size-xxl;
      font-weight: @font-weight-bold;
@ -74,7 +72,7 @@
    }

    .partner-subtitle {
-      font-size: @font-size-md;
+      font-size: 20px;
      color: @text-color-secondary;
      .mt(20px);
    }
@ -86,6 +84,7 @@
    gap: @space-xl;
    justify-items: center;
    .px(160px);
+    .pb(50px);
    .partner-logo-item {
      width: 100%;
      height: 80px;
--- a/src/views/Home/sections/UseCases.vue
+++ b/src/views/Home/sections/UseCases.vue
@ -3,9 +3,11 @@
    <h2 class="scene-title">友福同享AI健康解决方案应用场景</h2>
    <div class="scene-list">
      <div v-for="(item, index) in sceneList" :key="index" class="scene-item">
-        <img :src="item.icon" alt="场景图标" class="scene-icon" />
-        <p class="scene-name">{{ item.name }}</p>
-        <p class="scene-desc">{{ item.desc }}</p>
+        <div class="scene-inner">
+          <img :src="item.icon" alt="场景图标" class="scene-icon" />
+          <p class="scene-name">{{ item.name }}</p>
+          <p class="scene-desc">{{ item.desc }}</p>
+        </div>
      </div>
    </div>
  </section>
@ -15,12 +17,12 @@
 const sceneList = [
  {
    name: '地区政府/社区健康服务',
-    desc: '',
+    desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  },
  {
    name: '医院体检中心/健康管理机构',
-    desc: '',
+    desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  },
  {
@ -30,12 +32,12 @@ const sceneList = [
  },
  {
    name: '健康产业链供应商',
-    desc: '',
+    desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  },
  {
    name: '健康管理专业培训',
-    desc: '',
+    desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  }
 ]
@ -45,15 +47,15 @@ const sceneList = [
@import '@/styles/global.less';

 .scene-section {
-  padding: @space-xl 0;
  text-align: center;
  background-color: @bg-color;

  .scene-title {
-    font-size: @font-size-lg;
+    font-size: @font-size-xxl;
    font-weight: @font-weight-bold;
    color: @text-color;
-    margin-bottom: @space-xl;
+    .pb(60px);
+    .pt(100px);
  }

  .scene-list {
@ -61,45 +63,74 @@ const sceneList = [
    flex-wrap: wrap;
    justify-content: center;
    gap: @space-lg;
-    max-width: @container-width;
-    margin: 0 auto;
  }

  .scene-item {
-    width: 220px;
-    text-align: center;
-    display: flex;
+    width: 284px;
    height: 336px;
-    padding: 0px 16px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    flex: 1 0 0;
-    background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
-    transition: all 0.3s ease; // 基础过渡动画
+    perspective: 1000px; // 3D透视效果
+    cursor: pointer;

-    // 悬停放大效果
-    &:hover {
-      transform: scale(1.1); // 放大5%
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); // 增强阴影
-    }
-    .scene-icon {
-      width: 150px;
-      margin-bottom: @space-md;
+    .scene-inner {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      padding: 0px 16px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 16px;
+      background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
+      border-radius: @border-radius-md;
+      transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); // 平滑过渡
+
+      // 初始状态
+      .scene-icon {
+        width: 150px;
+        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+      }
+
+      .scene-name {
+        font-size: @font-size-md;
+        font-weight: @font-weight-medium;
+        color: @text-color;
+        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+      }
+
+      .scene-desc {
+        font-size: @font-size-sm;
+        color: @text-color-light;
+        line-height: 1.4;
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+        margin-top: -10px; // 初始位置向上偏移
+      }
    }

-    .scene-name {
-      font-size: @font-size-md;
-      font-weight: @font-weight-medium;
-      color: @text-color;
-      margin-bottom: @space-xs;
+    // 悬停状态
+    &:hover .scene-inner {
+      transform: translateY(-10px) scale(1.05);
+      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+      background: linear-gradient(180deg, #fff 0%, #e6f0ff 100%);
    }

-    .scene-desc {
-      font-size: @font-size-sm;
-      color: @text-color-light;
-      line-height: 1.4;
+    &:hover .scene-icon {
+      transform: scale(1.1);
+      margin-bottom: 8px;
+    }
+
+    &:hover .scene-name {
+      color: @primary-color;
+      transform: translateY(5px);
+    }
+
+    &:hover .scene-desc {
+      max-height: 100px;
+      opacity: 1;
+      transform: translateY(10px);
    }
  }
 }
--- a/src/views/Network/Network.vue
+++ b/src/views/Network/Network.vue
@ -0,0 +1,31 @@
+<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>
+</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'
+</script>
+
+<style scoped lang="less">
+.home-page {
+  // 可设置全局背景或间距，按需扩展
+}
+</style>
--- a/src/views/Network/sections/Banner.vue
+++ b/src/views/Network/sections/Banner.vue
@ -0,0 +1,159 @@
+<template>
+  <section class="banner">
+    <div class="banner-bg">
+      <!-- 替换为实际背景图路径 -->
+      <img src="https://images.health.ufutx.com/202506/13/c963e7b0e605f16d139fb88789f3a452.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="banner-content">-->
+    <!--      <h1 class="main-title">友福同享智能AI健康方案</h1>-->
+    <!--      <h2 class="sub-title">智慧科技创造未来</h2>-->
+    <!--      <button class="action-btn">用AI智能创造未来</button>-->
+    <!--      <p class="contact-phone">181-4852-2763</p>-->
+    <!--    </div>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+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'
+  }
+]
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.banner {
+  //width: 100%;
+  position: relative;
+  text-align: center;
+  color: #fff;
+
+  .banner-bg {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  .news-panel {
+    position: absolute;
+    top: 230px;
+    right: 169px;
+    padding: 20px 20px 0 20px;
+    width: 320px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    background: rgba(51, 51, 51, 0.3);
+    backdrop-filter: blur(10px);
+    .news-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      border-radius: @border-radius-md;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      margin-bottom: 12px;
+      &:hover,
+      &.active {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateX(6px);
+      }
+
+      .icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 15px;
+        transition: transform 0.3s ease;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: all 0.3s ease;
+        }
+      }
+
+      .text {
+        font-size: @font-size-md;
+        color: #ffffff;
+        transition: color 0.3s ease;
+      }
+
+      &:hover .text,
+      &.active .text {
+        color: @text-color;
+      }
+
+      &:hover .icon,
+      &.active .icon {
+        background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
+        transform: scale(1.15); // 图标轻微放大
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .banner-content {
+    .main-title {
+      font-size: 32px;
+    }
+    .sub-title {
+      font-size: 18px;
+    }
+    .action-btn {
+      font-size: 16px;
+      padding: 10px 24px;
+    }
+  }
+}
+</style>
--- a/src/views/Network/sections/CoreValue.vue
+++ b/src/views/Network/sections/CoreValue.vue
@ -0,0 +1,50 @@
+<template>
+  <section class="core-value">
+    <div class="container">
+      <h3 class="section-title">核心价值</h3>
+      <p class="section-desc">友福同享AI健康解决方案应用场景</p>
+      <!-- 替换为实际图示路径 -->
+      <img
+        src="https://images.health.ufutx.com/202506/12/5bbcb1bc1347f58df6a38aecc41dbe30.png"
+        alt="核心价值图示"
+        class="diagram"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.core-value {
+  //padding: 80px 0;
+  .pt(100px);
+  //background-color: red;
+  .container {
+    //max-width: 1200px;
+    margin: 0 auto;
+    text-align: center;
+
+    .section-title {
+      font-size: 32px;
+      font-weight: bold;
+      margin-bottom: 20px;
+      color: @text-color;
+    }
+
+    .section-desc {
+      font-size: 20px;
+      color: @text-color-secondary;
+      margin-bottom: 60px;
+    }
+
+    .diagram {
+      //max-width: 800px;
+      width: 1920px;
+      height: auto;
+    }
+  }
+}
+</style>
--- a/src/views/Network/sections/CustomerFeedback.vue
+++ b/src/views/Network/sections/CustomerFeedback.vue
@ -0,0 +1,187 @@
+<template>
+  <section class="feedback-section">
+    <div class="feedback-title">客户反馈</div>
+    <div class="feedback-list">
+      <div v-for="(item, index) in feedbackList" :key="index" class="feedback-card">
+        <div class="avatar-container">
+          <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>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// 模拟假数据（头像统一使用你提供的链接）
+const feedbackList = [
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '界面简约清晰，功能强大',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '预约操作简单方便，客户体验好评',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '章小样',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  },
+  {
+    username: '派小喵萌宠',
+    comment: '操作简单，容易上手',
+    avatar: 'https://images.health.ufutx.com/202506/12/1c0c9dad7586e6fd00ab781064acc822.png'
+  }
+]
+</script>
+
+<style scoped lang="less">
+// 基础变量（可继承项目全局样式）
+@bg-color: #f9fbff;
+@card-bg: #ffffff;
+@radius: 12px;
+@padding: 16px;
+@gap: 50px;
+@avatar-size: 60px;
+@text-color: #333;
+@subtext-color: #999;
+@transition: all 0.3s ease;
+
+.feedback-section {
+  background-color: @bg-color;
+  .px(100px);
+  text-align: center;
+  .pb(100px);
+  .feedback-title {
+    font-size: 28px;
+    font-weight: 600;
+    color: @text-color;
+    .pb(60px);
+    .pt(100px);
+  }
+
+  .feedback-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: @gap;
+  }
+
+  .feedback-card {
+    display: flex;
+    align-items: center;
+    padding: @padding;
+    border-radius: 16px;
+    background: var(--ffffff, #fff);
+    transition: @transition;
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    }
+
+    .avatar-container {
+      flex-shrink: 0;
+      margin-right: 12px;
+
+      .avatar {
+        width: @avatar-size;
+        height: @avatar-size;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+    }
+
+    .feedback-info {
+      text-align: left;
+
+      .username {
+        font-size: 18px;
+        font-weight: 500;
+        color: @text-color;
+        margin-bottom: 4px;
+      }
+
+      .comment {
+        font-size: 14px;
+        color: @subtext-color;
+        line-height: 1.4;
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .feedback-card {
+    width: 100%;
+    max-width: 320px;
+  }
+}
+</style>
--- a/src/views/Network/sections/GlobalService.vue
+++ b/src/views/Network/sections/GlobalService.vue
@ -0,0 +1,51 @@
+<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>
--- a/src/views/Network/sections/Partners.vue
+++ b/src/views/Network/sections/Partners.vue
@ -0,0 +1,123 @@
+<template>
+  <section class="partner-section">
+    <div class="partner-header">
+      <h2 class="partner-title">合作伙伴</h2>
+      <p class="partner-subtitle">正与众多客户一起创造更多价值</p>
+    </div>
+    <div class="partner-logos">
+      <div v-for="index in 21" :key="index" class="partner-logo-item">
+        <!--        <img :src="logo.src" :alt="logo.alt" class="partner-logo" />-->
+        <img
+          src="https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png"
+          alt="新浪健康"
+          class="partner-logo"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// 使用提供的图片链接作为所有合作伙伴Logo
+// const partnerLogos = [
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   },
+//   {
+//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
+//     alt: '新浪健康'
+//   }
+// ]
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.partner-section {
+  width: 100%;
+  text-align: center;
+
+  .partner-header {
+    .my(50px);
+    .partner-title {
+      font-size: @font-size-xxl;
+      font-weight: @font-weight-bold;
+      color: @text-color;
+      margin-bottom: @space-sm;
+    }
+
+    .partner-subtitle {
+      font-size: 20px;
+      color: @text-color-secondary;
+      .mt(20px);
+    }
+  }
+
+  .partner-logos {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: @space-xl;
+    justify-items: center;
+    .px(160px);
+    .pb(50px);
+    .partner-logo-item {
+      width: 100%;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .partner-logo {
+        width: 230px;
+        //max-height: 60px;
+        object-fit: contain;
+        transition: transform 0.3s ease;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: @tablet-breakpoint) {
+  .partner-logos {
+    gap: @space-md;
+
+    .partner-logo-item {
+      height: 60px;
+    }
+
+    .partner-logo {
+      max-height: 40px;
+    }
+  }
+}
+</style>
--- a/src/views/Network/sections/UseCases.vue
+++ b/src/views/Network/sections/UseCases.vue
@ -0,0 +1,144 @@
+<template>
+  <section class="scene-section">
+    <h2 class="scene-title">友福同享AI健康解决方案应用场景</h2>
+    <div class="scene-list">
+      <div v-for="(item, index) in sceneList" :key="index" class="scene-item">
+        <div class="scene-inner">
+          <img :src="item.icon" alt="场景图标" class="scene-icon" />
+          <p class="scene-name">{{ item.name }}</p>
+          <p class="scene-desc">{{ item.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const sceneList = [
+  {
+    name: '地区政府/社区健康服务',
+    desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  },
+  {
+    name: '医院体检中心/健康管理机构',
+    desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  },
+  {
+    name: '企业员工健康管理',
+    desc: '降低企业医疗成本，提升员工健康与生产力。',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  },
+  {
+    name: '健康产业链供应商',
+    desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  },
+  {
+    name: '健康管理专业培训',
+    desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
+    icon: 'https://images.health.ufutx.com/202506/12/d2b5ca33bd970f64a6301fa75ae2eb22.png'
+  }
+]
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.scene-section {
+  text-align: center;
+  background-color: @bg-color;
+
+  .scene-title {
+    font-size: @font-size-xxl;
+    font-weight: @font-weight-bold;
+    color: @text-color;
+    .pb(60px);
+    .pt(100px);
+  }
+
+  .scene-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: @space-lg;
+  }
+
+  .scene-item {
+    width: 284px;
+    height: 336px;
+    perspective: 1000px; // 3D透视效果
+    cursor: pointer;
+
+    .scene-inner {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      padding: 0px 16px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 16px;
+      background: linear-gradient(180deg, #fff 0%, #ecf2ff 100%);
+      border-radius: @border-radius-md;
+      transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); // 平滑过渡
+
+      // 初始状态
+      .scene-icon {
+        width: 150px;
+        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+      }
+
+      .scene-name {
+        font-size: @font-size-md;
+        font-weight: @font-weight-medium;
+        color: @text-color;
+        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+      }
+
+      .scene-desc {
+        font-size: @font-size-sm;
+        color: @text-color-light;
+        line-height: 1.4;
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+        margin-top: -10px; // 初始位置向上偏移
+      }
+    }
+
+    // 悬停状态
+    &:hover .scene-inner {
+      transform: translateY(-10px) scale(1.05);
+      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+      background: linear-gradient(180deg, #fff 0%, #e6f0ff 100%);
+    }
+
+    &:hover .scene-icon {
+      transform: scale(1.1);
+      margin-bottom: 8px;
+    }
+
+    &:hover .scene-name {
+      color: @primary-color;
+      transform: translateY(5px);
+    }
+
+    &:hover .scene-desc {
+      max-height: 100px;
+      opacity: 1;
+      transform: translateY(10px);
+    }
+  }
+}
+
+@media (max-width: @tablet-breakpoint) {
+  .scene-item {
+    width: 100%;
+    max-width: 280px;
+  }
+}
+</style>
--- a/src/views/News/News.vue
+++ b/src/views/News/News.vue
@ -0,0 +1,459 @@
+<template>
+  <!-- 整体布局：导航 + Banner + 内容 + 页脚 -->
+  <div class="page-container">
+    <!-- 已有Banner组件（保持设计中的顶部视觉） -->
+    <Banner />
+
+    <!-- 核心内容区 -->
+    <div class="news-content">
+      <!-- 标签切换（友福动态 / 媒体报道） -->
+      <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-tabs>
+
+      <!-- 新闻列表 -->
+      <div class="news-list">
+        <div v-for="(item, idx) in filteredNews" :key="idx" class="news-item">
+          <img :src="item.cover" alt="新闻封面" class="news-cover" />
+          <div class="news-info">
+            <h3 class="news-title">{{ item.title }}</h3>
+            <h3 class="news-label">友福新闻</h3>
+            <div class="news-wrap">
+              <el-button type="primary" class="view-btn" plain color="#1060FF"> 查看详情</el-button>
+              <div class="news-date">
+                <img
+                  class="icon"
+                  src="https://images.health.ufutx.com/202506/13/c5e3552a870fd254610290bbabce5e30.png"
+                />
+                <p>{{ item.date }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页（Element Plus 分页组件） -->
+      <div class="pagination-wrap">
+        <el-pagination
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 50]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalCount"
+          @size-change="handleSizeChange"
+          @current-change="handlePageChange"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+// 引入已有组件（需确保路径正确）
+import Banner from '@/views/News/sections/Banner.vue'
+
+// 模拟新闻数据（根据设计图，友福动态和媒体报道的差异）
+const dynamicNews = [
+  {
+    cover: 'https://images.health.ufutx.com/202506/13/b604685780bdb4ea4906e751b14590ec.png', // 替换为实际封面图
+    title: '体管理年：政策驱动，AI+全利管理重塑健康服务体系...',
+    date: '2025-06-02',
+    type: 'dynamic'
+  },
+  {
+    cover: 'https://images.health.ufutx.com/202506/13/73e74b753e7fc7c8b00cecc0535a6a91.png',
+    title: '权威媒体专访：友福同享的创新健康生态',
+    date: '2025-05-30',
+    type: 'report'
+  }
+]
+const reportNews = [
+  {
+    cover: 'https://images.health.ufutx.com/202506/13/73e74b753e7fc7c8b00cecc0535a6a91.png',
+    title: '媒体报道：友福同享如何用AI颠覆健康管理？',
+    date: '2025-06-01',
+    type: 'report'
+  }
+]
+
+// 循环添加数据到两个数组
+for (let i = 0; i < 15; i++) {
+  const newsItem = {
+    cover: 'https://images.health.ufutx.com/202506/13/b604685780bdb4ea4906e751b14590ec.png',
+    title: `友福动态：健康管理服务升级发布会圆满成功 ${i + 1}`,
+    date: `2025-05-${28 - i}`,
+    type: 'dynamic'
+  }
+
+  // 同时添加到两个数组
+  dynamicNews.push(newsItem)
+  reportNews.push({ ...newsItem, type: 'report' }) // 复制对象并修改 type
+}
+// 响应式数据
+const activeTab = ref('dynamic') // 默认显示“友福动态”
+const currentPage = ref(1)
+const pageSize = ref(10)
+const totalCount = ref(502) // 设计图中的“共502条”
+
+// 计算当前显示的新闻（根据标签切换）
+const filteredNews = computed(() => {
+  const list = activeTab.value === 'dynamic' ? dynamicNews : reportNews
+  // 模拟分页截取（实际需结合后端接口）
+  const start = (currentPage.value - 1) * pageSize.value
+  return list.slice(start, start + pageSize.value)
+})
+
+// 分页事件
+const handleSizeChange = (val: number) => {
+  pageSize.value = val
+  currentPage.value = 1
+}
+const handlePageChange = (val: number) => {
+  currentPage.value = val
+}
+const resetPage = () => {
+  currentPage.value = 1 // 切换标签时重置页码
+}
+</script>
+
+<style scoped lang="less">
+@import '@/styles/global.less';
+
+.page-container {
+  min-height: 100vh;
+  background-color: @bg-color;
+}
+
+/* 内容区容器 */
+.news-content {
+  max-width: 1920px;
+}
+
+/* 标签切换样式（还原设计的蓝色下划线） */
+.news-tabs {
+  .pt(50px);
+  //align-items: center;
+
+  :deep(.el-tabs__nav-wrap) {
+    //margin-bottom: 1.04167vw;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100vw;
+      height: 0.3px;
+      background-color: #b5b5b5;
+      z-index: var(--el-index-normal);
+    }
+  }
+
+  :deep(.el-tabs__active-bar) {
+    background-color: @primary-dark; // 下划线颜色
+    height: 3px;
+    bottom: -20px !important;
+    margin-top: 20px;
+  }
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+    .el-tabs__nav {
+      width: 100%;
+      margin-bottom: 20px;
+
+      .el-tabs__item {
+        font-size: @font-size-xxl;
+        color: @text-color-secondary;
+        margin-right: 104px;
+
+        &.is-active {
+          color: @primary-dark; // 激活态文字颜色
+        }
+      }
+    }
+  }
+}
+.news-tabs {
+  // 关键：让选项卡居中
+  :deep(.el-tabs__header) {
+    width: 100%; // 占满容器宽度，为居中提供基础
+    .el-tabs__nav {
+      justify-content: center; // 水平居中对齐
+    }
+  }
+}
+/* 新闻列表 */
+.news-list {
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+  .px(192px);
+  .pt(100px);
+
+  .news-item {
+    display: flex;
+    align-items: center;
+    transition: @transition;
+    border-bottom: 0.3px solid #b5b5b5;
+    .pb(50px);
+    &:hover {
+      //box-shadow: @shadow-hover;
+      //transform: translateY(-2px);
+    }
+
+    .news-cover {
+      width: 500px;
+      height: 260px;
+      object-fit: cover;
+      border-radius: @border-radius-md;
+      margin-right: 30px;
+    }
+    .news-info {
+      .news-wrap {
+        .flex-between();
+      }
+      width: 100%;
+      .pt(20px);
+      text-align: left;
+      .news-label {
+        font-size: @font-size-sm;
+        color: @text-color-secondary;
+        .mt(13px);
+        .mb(76px);
+      }
+      .news-title {
+        font-size: @font-size-lg;
+        font-weight: @font-weight-medium;
+        color: @text-color;
+        margin-bottom: @space-sm;
+      }
+
+      .news-date {
+        font-size: @font-size-sm;
+        color: @text-color-light;
+        display: flex; // 启用 Flex 布局
+        align-items: center; // 子元素垂直居中
+        gap: 8px;
+        .icon {
+          width: 18px;
+          height: 18px;
+          object-fit: contain;
+        }
+      }
+      .view-btn {
+        width: 100px;
+        align-self: flex-start;
+        padding: @space-xs @space-md;
+        font-size: @font-size-sm;
+        background-color: @bg-color;
+        color: @primary-dark;
+        //padding: 6px 16px;
+      }
+    }
+  }
+}
+//// Less 样式
+//.vertical-center {
+//  display: flex;          // 启用 Flex 布局
+//  align-items: center;    // 子元素垂直居中
+//  gap: 8px;               // 图标与文字的间距（替代 margin，更优雅）
+//
+//  .center-icon {
+//    width: 20px;          // 图标尺寸
+//    height: 20px;
+//    object-fit: contain;  // 保持图标比例，避免拉伸
+//  }
+//
+//  .center-text {
+//    font-size: @font-size-sm; // 继承全局变量
+//    color: @text-color-light;
+//  }
+//}
+
+/* 分页样式 */
+.pagination-wrap {
+  margin-top: 50px;
+  .pb(170px);
+  display: flex;
+  justify-content: center;
+  :deep(.el-pager li.is-active) {
+    color: @primary-dark;
+  }
+  .el-pagination {
+    .el-pagination__total {
+      color: @text-color-light;
+    }
+
+    .el-pager li {
+      &.active {
+        background-color: @primary-color;
+        color: #fff;
+      }
+    }
+
+    .el-pagination__sizes {
+      margin: 0 @space-md;
+    }
+  }
+}
+
+/* 响应式适配（平板以下） */
+//@media (max-width: @tablet-breakpoint) {
+//  .news-item {
+//    flex-direction: column;
+//    align-items: flex-end;
+//    .news-cover {
+//      width: 100%;
+//      height: auto;
+//      margin: 0 0 @space-md 0;
+//    }
+//  }
+//}
+/* 响应式适配（细分平板和手机端） */
+@media (max-width: @tablet-breakpoint) {
+  /* 平板端（768px-1024px）适配 */
+  .news-content {
+    padding: @space-xl @space-md; // 减少两侧边距
+  }
+
+  .news-tabs {
+    :deep(.el-tabs__item) {
+      margin-right: @space-md; // 减少标签间距
+      font-size: @font-size-lg; // 缩小标签字体
+    }
+
+    :deep(.el-tabs__active-bar) {
+      bottom: -15px !important; // 调整下划线位置
+    }
+  }
+
+  .news-list {
+    .px(@space-lg); // 减少新闻列表左右边距
+    .pt(@space-xl); // 调整顶部间距
+
+    .news-item {
+      flex-direction: column;
+      align-items: flex-start; // 左对齐
+      gap: @space-lg; // 增加内容间距
+
+      .news-cover {
+        width: 100%;
+        height: auto;
+        margin-bottom: @space-lg; // 图片与文字间距
+      }
+
+      .news-info {
+        .news-title {
+          font-size: @font-size-md; // 缩小标题字体
+        }
+
+        .news-label {
+          .mb(@space-md); // 调整标签间距
+        }
+
+        .news-wrap {
+          flex-direction: column; // 日期和按钮垂直排列
+          gap: @space-sm; // 增加间距
+
+          .view-btn {
+            align-self: flex-start; // 按钮左对齐
+          }
+
+          .news-date {
+            order: -1; // 日期显示在按钮上方
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-wrap {
+    .el-pagination {
+      .el-pagination__sizes {
+        margin: 0 @space-sm; // 缩小尺寸选择器间距
+      }
+    }
+  }
+}
+
+@media (max-width: @mobile-breakpoint) {
+  /* 手机端（<768px）适配 */
+  .news-content {
+    padding: @space-lg; // 进一步减少边距
+  }
+
+  .news-tabs {
+    :deep(.el-tabs__item) {
+      margin-right: @space-sm; // 标签间距最小化
+      font-size: @font-size-md; // 手机端标签字体
+    }
+
+    :deep(.el-tabs__active-bar) {
+      bottom: -10px !important; // 调整下划线位置
+    }
+  }
+
+  .news-list {
+    .px(@space-md); // 最小化左右边距
+    gap: @space-xl; // 新闻项间距适中
+
+    .news-item {
+      .pb(@space-lg); // 减少底部边距
+
+      .news-cover {
+        height: 180px; // 固定图片高度
+      }
+
+      .news-info {
+        .news-title {
+          font-size: @font-size-md; // 标题字体
+        }
+
+        .news-label {
+          .mb(@space-md); // 标签间距
+        }
+
+        .news-wrap {
+          .view-btn {
+            width: 80px; // 缩小按钮宽度
+            padding: @space-xs @space-sm; // 按钮内边距
+          }
+
+          .news-date {
+            font-size: @font-size-xs; // 最小化日期字体
+            .icon {
+              width: 16px;
+              height: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* 分页组件适配 */
+  .pagination-wrap {
+    .el-pagination {
+      .el-pagination__total {
+        font-size: @font-size-xs; // 缩小总条数字体
+      }
+
+      .el-pager li {
+        width: 28px;
+        height: 28px;
+        line-height: 28px;
+        font-size: @font-size-xs; // 页码字体
+      }
+
+      .el-pagination__sizes {
+        margin: 0 @space-xs; // 尺寸选择器间距
+        .el-input {
+          font-size: @font-size-xs; // 下拉框字体
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/views/News/sections/Banner.vue
+++ b/src/views/News/sections/Banner.vue
@ -0,0 +1,153 @@
+<template>
+  <section class="banner">
+    <div class="banner-bg">
+      <!-- 替换为实际背景图路径 -->
+      <img src="https://images.health.ufutx.com/202506/13/25aeff6e015162aeb316983d8bd61558.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>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+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'
+  }
+]
+// 暂无逻辑，纯展示
+</script>
+
+<style scoped lang="less">
+.banner {
+  //width: 100%;
+  position: relative;
+  text-align: center;
+  color: #fff;
+
+  .banner-bg {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  .news-panel {
+    position: absolute;
+    top: 230px;
+    right: 169px;
+    padding: 20px 20px 0 20px;
+    width: 320px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    background: rgba(51, 51, 51, 0.3);
+    backdrop-filter: blur(10px);
+    .news-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      border-radius: @border-radius-md;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      margin-bottom: 12px;
+      &:hover,
+      &.active {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateX(6px);
+      }
+
+      .icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 15px;
+        transition: transform 0.3s ease;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: all 0.3s ease;
+        }
+      }
+
+      .text {
+        font-size: @font-size-md;
+        color: #ffffff;
+        transition: color 0.3s ease;
+      }
+
+      &:hover .text,
+      &.active .text {
+        color: @text-color;
+      }
+
+      &:hover .icon,
+      &.active .icon {
+        background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
+        transform: scale(1.15); // 图标轻微放大
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .banner-content {
+    .main-title {
+      font-size: 32px;
+    }
+    .sub-title {
+      font-size: 18px;
+    }
+    .action-btn {
+      font-size: 16px;
+      padding: 10px 24px;
+    }
+  }
+}
+</style>