Echarts

2025-06-10 12:47:00 +08:00
parent c8002eaed2
commit 343b6b3276
12 changed files with 577 additions and 201 deletions
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "ant-design-vue": "^4.1.1",
    "aos": "^2.3.4",
    "axios": "^1.6.2",
+    "echarts": "^5.6.0",
    "lucide-vue-next": "^0.507.0",
    "pinia": "^2.1.7",
    "swiper": "^11.2.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
      axios:
        specifier: ^1.6.2
        version: 1.9.0
+      echarts:
+        specifier: ^5.6.0
+        version: 5.6.0
      lucide-vue-next:
        specifier: ^0.507.0
        version: 0.507.0(vue@3.5.13)
@@ -308,42 +311,36 @@ packages:
    engines: {node: '>= 10.0.0'}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@parcel/watcher-linux-arm-musl@2.5.1':
    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
    engines: {node: '>= 10.0.0'}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@parcel/watcher-linux-arm64-glibc@2.5.1':
    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
    engines: {node: '>= 10.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@parcel/watcher-linux-arm64-musl@2.5.1':
    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
    engines: {node: '>= 10.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@parcel/watcher-linux-x64-glibc@2.5.1':
    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
    engines: {node: '>= 10.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@parcel/watcher-linux-x64-musl@2.5.1':
    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
    engines: {node: '>= 10.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@parcel/watcher-win32-arm64@2.5.1':
    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -401,67 +398,56 @@ packages:
    resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.40.0':
    resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.40.0':
    resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.40.0':
    resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-loongarch64-gnu@4.40.0':
    resolution: {integrity: sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==}
    cpu: [loong64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-powerpc64le-gnu@4.40.0':
    resolution: {integrity: sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==}
    cpu: [ppc64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-gnu@4.40.0':
    resolution: {integrity: sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==}
    cpu: [riscv64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.40.0':
    resolution: {integrity: sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==}
    cpu: [riscv64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.40.0':
    resolution: {integrity: sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.40.0':
    resolution: {integrity: sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.40.0':
    resolution: {integrity: sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-win32-arm64-msvc@4.40.0':
    resolution: {integrity: sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==}
@@ -519,28 +505,24 @@ packages:
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
    resolution: {integrity: sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
    resolution: {integrity: sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@tailwindcss/oxide-linux-x64-musl@4.1.4':
    resolution: {integrity: sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@tailwindcss/oxide-wasm32-wasi@4.1.4':
    resolution: {integrity: sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==}
@@ -714,6 +696,9 @@ packages:
    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
    engines: {node: '>= 0.4'}

+  echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+
  enhanced-resolve@5.18.1:
    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
    engines: {node: '>=10.13.0'}
@@ -864,28 +849,24 @@ packages:
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  lightningcss-linux-arm64-musl@1.29.2:
    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  lightningcss-linux-x64-gnu@1.29.2:
    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  lightningcss-linux-x64-musl@1.29.2:
    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  lightningcss-win32-arm64-msvc@1.29.2:
    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
@@ -1040,6 +1021,9 @@ packages:
    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
    engines: {node: '>=8.0'}

+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
  unhead@1.11.20:
    resolution: {integrity: sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==}

@@ -1119,6 +1103,9 @@ packages:
  zhead@2.2.4:
    resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==}

+  zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+
 snapshots:

  '@amap/amap-jsapi-loader@1.0.1': {}
@@ -1629,6 +1616,11 @@ snapshots:
      es-errors: 1.3.0
      gopd: 1.2.0

+  echarts@5.6.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.6.1
+
  enhanced-resolve@5.18.1:
    dependencies:
      graceful-fs: 4.2.11
@@ -1936,6 +1928,8 @@ snapshots:
      is-number: 7.0.0
    optional: true

+  tslib@2.3.0: {}
+
  unhead@1.11.20:
    dependencies:
      '@unhead/dom': 1.11.20
@@ -1984,3 +1978,7 @@ snapshots:
      loose-envify: 1.4.0

  zhead@2.2.4: {}
+
+  zrender@5.6.1:
+    dependencies:
+      tslib: 2.3.0
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,5 +19,8 @@ import Footer from '@/components/layout/Footer.vue'
  color: #1a202c;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 </style>
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -1,4 +1,5 @@
 body {
+    width: 100%;
    font-family: 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;
    color: #1a202c;
    -webkit-font-smoothing: antialiased;
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -2,77 +2,62 @@
  <header
      class="fixed top-0 w-full z-50 transition-all duration-300"
      :class="{
-      'bg-white/90 backdrop-blur-sm shadow-sm py-3': isScrolled || isMenuOpen,
+        'bg-white/90 backdrop-blur-md shadow-sm py-3': isScrolled || isMenuOpen,
        'bg-transparent py-5': !isScrolled && !isMenuOpen
      }"
  >
-    <div class="container mx-auto">
+    <!-- 关键修复：移动端布局优化 -->
+    <div class="px-3 sm:px-4">
      <div class="flex justify-between items-center">
-        <router-link to="/" class="flex items-center">
-          <img
-              src="@/assets/images/logo.png"
-              alt="酉佰"
-              class="h-8 md:h-10"
-          />
-          <span class="ml-2 text-xl md:text-2xl font-bold text-primary"
-          >酉佰</span
-          >
+        <router-link to="/" class="flex items-center shrink-0">
+          <img src="@/assets/images/logo.png" alt="Logo" class="w-8 h-8 md:w-10 md:h-10" />
+          <span class="ml-2 text-base sm:text-xl md:text-2xl font-bold text-primary whitespace-nowrap">
+            {{ currentLang === 'zh' ? '酉佰' : 'YouBaiBai' }}
+          </span>
        </router-link>

        <nav class="hidden md:flex space-x-8">
          <router-link
-              to="/"
+              v-for="item in menuItems"
+              :key="item.path"
+              :to="item.path"
              class="font-medium transition-colors hover:text-primary"
              active-class="text-primary"
-              exact
-          >首页</router-link
-          >
-          <router-link
-              to="/about"
-              class="font-medium transition-colors hover:text-primary"
-              active-class="text-primary"
-          >公司介绍</router-link
-          >
-          <router-link
-              to="/team"
-              class="font-medium transition-colors hover:text-primary"
-              active-class="text-primary"
-          >团队介绍</router-link
-          >
-          <router-link
-              to="/features"
-              class="font-medium transition-colors hover:text-primary"
-              active-class="text-primary"
-          >服务特色</router-link
-          >
-          <router-link
-              to="/careers"
-              class="font-medium transition-colors hover:text-primary"
-              active-class="text-primary"
-          >加入我们</router-link
+              :exact="item.exact"
          >
+            {{ item.name }}
+          </router-link>
        </nav>

        <div class="hidden md:flex items-center space-x-4">
-<!--          <a-->
-<!--              href="#"-->
-<!--              class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-colors"-->
-<!--          >-->
-<!--            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">-->
-<!--              <path-->
-<!--                  d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M17,19h-2v-2h2V19z M15,14h-2v5h2V14z M12,8.5c-1.1,0-2,0.9-2,2c0,0.5,0.2,1,0.5,1.4l-0.1,0.6c-0.1,0.3-0.1,0.6-0.1,1v1h4v-1c0-0.4,0-0.7-0.1-1l-0.1-0.6C13.8,11.5,14,11,14,10.5C14,9.4,13.1,8.5,12,8.5z"-->
-<!--              />-->
-<!--            </svg>-->
-<!--          </a>-->
+          <!-- 语言切换按钮 -->
          <button
-              class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl active:translate-y-0 active:shadow-md"
+              @click="toggleLanguage"
+              class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-colors"
+              :title="currentLang === 'zh' ? '切换为英文' : 'Switch to Chinese'"
+          >
+            {{ currentLang === 'zh' ? 'EN' : '中' }}
+          </button>
+
+          <button
+              class="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium py-2 px-4 md:py-3 md:px-6 rounded-lg flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl active:translate-y-0 active:shadow-md"
              @click="openModal"
          >
-            联系我们
+            {{ currentLang === 'zh' ? '联系我们' : 'Contact' }}
          </button>
        </div>

-        <button @click="toggleMenu" class="md:hidden text-gray-700">
+        <!-- 移动端菜单按钮 - 关键修复区域 -->
+        <div class="flex items-center space-x-2 md:hidden">
+          <!-- 移动端语言切换按钮 - 尺寸优化 -->
+          <button
+              @click="toggleLanguage"
+              class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-colors"
+          >
+            {{ currentLang === 'zh' ? 'EN' : '中' }}
+          </button>
+
+          <button @click="toggleMenu" class="shrink-0 text-gray-700">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
@@ -90,96 +75,74 @@
          </button>
        </div>
      </div>
+    </div>

-    <!-- 移动端菜单 -->
+    <!-- 移动端菜单 - 修复宽度问题 -->
    <div
        v-show="isMenuOpen"
-        class="md:hidden fixed inset-0 bg-white z-50 py-5"
-        style="margin-top: 76px"
+        class="w-full md:hidden fixed inset-x-0 z-50 bg-white/95 backdrop-blur-lg py-5 overflow-hidden"
+        :style="{ top: headerHeight + 'px', height: `calc(100vh - ${headerHeight}px)` }"
+        @click.self="closeMenu"
    >
-      <div class="container">
-        <nav class="flex flex-col space-y-4 py-4">
+      <div class="px-4 h-full flex flex-col">
+        <nav class="flex flex-col space-y-4 py-4 overflow-y-auto">
          <router-link
-              to="/"
+              v-for="item in menuItems"
+              :key="item.path"
+              :to="item.path"
              class="font-medium text-lg py-2 transition-colors hover:text-primary"
              active-class="text-primary"
              @click="closeMenu"
-          >首页</router-link
-          >
-          <router-link
-              to="/about"
-              class="font-medium text-lg py-2 transition-colors hover:text-primary"
-              active-class="text-primary"
-              @click="closeMenu"
-          >公司介绍</router-link
-          >
-          <router-link
-              to="/team"
-              class="font-medium text-lg py-2 transition-colors hover:text-primary"
-              active-class="text-primary"
-              @click="closeMenu"
-          >团队介绍</router-link
-          >
-          <router-link
-              to="/features"
-              class="font-medium text-lg py-2 transition-colors hover:text-primary"
-              active-class="text-primary"
-              @click="closeMenu"
-          >服务特色</router-link
-          >
-          <router-link
-              to="/careers"
-              class="font-medium text-lg py-2 transition-colors hover:text-primary"
-              active-class="text-primary"
-              @click="closeMenu"
-          >加入我们</router-link
          >
+            {{ item.name }}
+          </router-link>
        </nav>
-        <div class="pt-8">
+        <div class="pt-4 pb-8 mt-auto">
          <button
              class="w-full bg-primary hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors"
+              @click="openModal(); closeMenu();"
          >
-            联系我们
+            {{ currentLang === 'zh' ? '联系我们' : 'Contact' }}
          </button>
        </div>
      </div>
    </div>
-
-
-
-
  </header>
+
  <!-- 模态框组件 -->
+  <!-- 模态框组件 - 移动端优化 -->
  <transition name="modal-fade">
-    <div v-if="showModal" @click="closeModal" class="fixed inset-0 z-50 overflow-auto bg-black/50 bg-opacity-50 flex items-center justify-center p-4 backdrop-blur-lg ">
-      <div @click.stop class="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden transform transition-all ">
+    <div v-if="showModal" @click="closeModal" class="fixed inset-0 z-50 overflow-auto bg-black/50 flex items-start justify-center p-4 backdrop-blur-lg">
+      <div @click.stop class="bg-white rounded-2xl shadow-xl w-full max-w-md sm:max-w-2xl overflow-hidden transform transition-all sm:mt-20">
        <!-- 模态框头部 -->
-        <div class="bg-gradient-to-r from-indigo-600 to-blue-700 p-6 text-white">
+        <div class="bg-gradient-to-r from-indigo-600 to-blue-700 p-4 sm:p-6 text-white">
          <div class="flex justify-between items-center">
-            <h2 class="text-2xl font-bold">留下您的联系方式</h2>
+            <h2 class="text-xl sm:text-2xl font-bold">{{ currentLang === 'zh' ? '留下您的联系方式' : 'Leave Your Contact' }}</h2>
            <button @click="closeModal" class="text-white hover:text-gray-200">
-              <i class="fas fa-times text-xl"></i>
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
            </button>
          </div>
        </div>

-        <!-- 模态框内容 -->
-        <div class="p-6 max-h-[70vh] overflow-y-auto bg-gradient-to-r from-indigo-900 to-blue-900">
-           <ContactForm />
+        <!-- 模态框内容 - 移动端优化 -->
+        <div class="p-4 sm:p-6 max-h-[70vh] overflow-y-auto bg-gradient-to-r from-indigo-600 to-blue-700">
+          <ContactForm :lang="currentLang" />
        </div>

-        <!-- 模态框底部 -->
-        <div class="bg-gray-50 px-6 py-4 flex justify-end  bg-gradient-to-r from-indigo-900 to-blue-900">
+        <!-- 模态框底部 - 移动端优化 -->
+        <div class="bg-gray-50 px-4 sm:px-6 py-4 flex flex-col sm:flex-row sm:flex-wrap justify-end gap-3">
          <button
              @click="closeModal"
-              class="px-5 py-2 text-white rounded-lg font-medium border border-gray-300 mr-3 hover:bg-gray-100"
+              class="w-full sm:w-auto px-5 py-2 text-gray-700 rounded-lg font-medium border border-gray-300 hover:bg-gray-100"
          >
-            关闭
+            {{ currentLang === 'zh' ? '关闭' : 'Close' }}
          </button>
          <button
-              class="px-5 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
+              class="w-full sm:w-auto px-5 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
          >
-            立即申请
+            {{ currentLang === 'zh' ? '立即申请' : 'Submit' }}
          </button>
        </div>
      </div>
@@ -188,53 +151,109 @@
 </template>

 <script setup>
-// 模态框控制
-import {nextTick, onBeforeUnmount, onMounted, ref} from "vue";
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import ContactForm from "@/components/ui/ContactForm.vue";

-const isScrolled = ref(false)
-const isMenuOpen = ref(false)
-const showModal = ref(false)
-const currentJob = ref({})
+const isScrolled = ref(false);
+const isMenuOpen = ref(false);
+const showModal = ref(false);
+const headerHeight = ref(0);
+const currentLang = ref('zh'); // 默认中文

-// 打开模态框
-const openModal = (job) => {
-  currentJob.value = job
-  showModal.value = true
-  // 初始化地图
-  nextTick(() => {
-    // initMap()
-  })
-}
+// 新增：视口和导航宽度变量
+const viewportWidth = ref(0);
+const navWidth = ref(0);

-// 关闭模态框
-const closeModal = () => {
-  showModal.value = false
-  // 销毁地图实例
-  if (window.mapInstance) {
-    window.mapInstance.destroy()
-    window.mapInstance = null
+// 菜单项根据语言动态变化
+const menuItems = computed(() => {
+  return [
+    { path: '/', name: currentLang.value === 'zh' ? '首页' : 'Home', exact: true },
+    { path: '/about', name: currentLang.value === 'zh' ? '公司介绍' : 'About' },
+    { path: '/team', name: currentLang.value === 'zh' ? '团队介绍' : 'Team' },
+    { path: '/features', name: currentLang.value === 'zh' ? '服务特色' : 'Features' },
+    { path: '/careers', name: currentLang.value === 'zh' ? '加入我们' : 'Careers' }
+  ];
+});
+
+// 新增：输出视口和导航宽度
+const logDimensions = () => {
+  // 获取视口宽度
+  viewportWidth.value = window.innerWidth;
+
+
+  // 输出到控制台
+  console.log('视口宽度:', `${viewportWidth.value}px`);
+  console.log('----------------------');
+  // 获取导航元素宽度
+  const navElement = document.querySelector('header');
+  if (navElement) {
+    navWidth.value = navElement.offsetWidth;
  }
-}
-const handleScroll = () => {
-  isScrolled.value = window.scrollY > 20
-}
+  console.log('导航宽度:', `${navWidth.value}px`);
+  console.log('----------------------');
+  // 修改header标签的宽度
+  navElement.style.width = `${navWidth.value}px`;
+  // 修改body的宽度
+  document.body.style.width = `${viewportWidth.value}px`;
+};
+
+const toggleLanguage = () => {
+  currentLang.value = currentLang.value === 'zh' ? 'en' : 'zh';
+};
+
+const openModal = () => {
+  showModal.value = true;
+};
+
+const closeModal = () => {
+  showModal.value = false;
+};

 const toggleMenu = () => {
-  isMenuOpen.value = !isMenuOpen.value
-}
+  isMenuOpen.value = !isMenuOpen.value;
+  if (isMenuOpen.value) {
+    document.body.style.overflow = 'hidden';
+  } else {
+    document.body.style.overflow = '';
+  }
+};

 const closeMenu = () => {
-  isMenuOpen.value = false
-}
+  isMenuOpen.value = false;
+  document.body.style.overflow = '';
+};
+
+const handleScroll = () => {
+  isScrolled.value = window.scrollY > 20;
+};
+
+// 计算头部高度用于移动菜单定位
+const calculateHeaderHeight = () => {
+  const header = document.querySelector('header');
+  if (header) {
+    headerHeight.value = header.offsetHeight;
+  }
+};

 onMounted(() => {
-  window.addEventListener('scroll', handleScroll)
-})
+  window.addEventListener('scroll', handleScroll);
+  calculateHeaderHeight();
+  window.addEventListener('resize', calculateHeaderHeight);
+
+  // 新增：添加尺寸输出功能
+  logDimensions(); // 初始输出
+  window.addEventListener('resize', logDimensions); // 窗口大小变化时输出
+});

 onBeforeUnmount(() => {
-  window.removeEventListener('scroll', handleScroll)
-})
+  window.removeEventListener('scroll', handleScroll);
+  window.removeEventListener('resize', calculateHeaderHeight);
+
+  // 新增：移除尺寸输出监听器
+  window.removeEventListener('resize', logDimensions);
+
+  document.body.style.overflow = ''; // 确保卸载时恢复滚动
+});
 </script>

 <style scoped>
@@ -251,4 +270,38 @@ onBeforeUnmount(() => {
  height: 2px;
  background-color: #2563eb;
 }
+
+/* 模态框动画 */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+
+/* 移动端菜单宽度修复 */
+@media (max-width: 767px) {
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  /* 确保移动菜单不会超出视口 */
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  /* 防止路由链接换行 */
+  .router-link {
+    white-space: nowrap;
+  }
+}
+
+/* 增强模糊效果 */
+.backdrop-blur-lg {
+  backdrop-filter: blur(12px);
+}
 </style>
--- a/src/components/ui/LargeCycleChart.vue
+++ b/src/components/ui/LargeCycleChart.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref(null);
+let chartInstance = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+
+  chartInstance = echarts.init(chartRef.value);
+  const option = {
+    title: {
+      text: '大周期：750年',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['', '周朝\n1000BC', '', '汉朝\n200BC', '', '唐朝\n600', '', '明朝\n1400', '', '', '时间\n--'],
+      axisLabel: { fontSize: 14 }
+    },
+    yAxis: {
+      type: 'value',
+      name: '综合实力',
+      min: 0,
+      max: 100,
+      nameLocation: 'start',
+      nameGap: 40,
+      nameTextStyle: {
+        padding: [0, 0, 0, 40, 60],
+        fontSize: 14
+      },
+      // 轴标签样式
+      axisLabel: {
+        fontSize: 14,
+        show: false
+      }
+    },
+    grid: {
+      left: '15%',
+      right: '10%',
+      bottom: '15%',
+      top: '10%',
+      containLabel: true
+    },
+    series: [
+      {
+        name: '中华民族',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        itemStyle: { color: '#EF4444' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(239, 68, 68, 0.3)' },
+            { offset: 1, color: 'rgba(239, 68, 68, 0)' }
+          ])
+        },
+        data: [-10, 10, 5, 20, 15, 30, 25, 45, 30, 90, 100]
+      },
+      {
+        name: '西方国家：从文艺复兴到工业革命',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        itemStyle: { color: '#3B82F6' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
+            { offset: 1, color: 'rgba(59, 130, 246, 0)' }
+          ])
+        },
+        data: ['', '', '', '', '', '', 25, 50, 75, 90, 90]
+      },
+      {
+        name: '关键节点',
+        type: 'scatter',
+        data: [
+          { value: [4, 20], name: '中华民族' },
+          { value: [7, 70], name: '西方国家：\n从文艺复兴到工业革命' }
+        ],
+        symbolSize: 10,
+        itemStyle: {
+          color: '#10B981',
+          borderColor: '#FFFFFF',
+          borderWidth: 1
+        },
+        label: {
+          show: true,
+          position: 'top',
+          formatter: '{b}',
+          color: '#1F2937',
+          backgroundColor: '#FFFFFF',
+          padding: [4, 8],
+          borderRadius: 4,
+          fontSize: 12,
+          borderWidth: 1,
+          borderColor: '#ccc'
+        }
+      }
+    ],
+    markLine: {
+      data: [
+        { xAxis: '汉朝\n200BC', yAxis: 0, lineStyle: { type: 'dashed' } },
+        { xAxis: '唐朝\n600', yAxis: 0, lineStyle: { type: 'dashed' } },
+        { xAxis: '明朝\n1400', yAxis: 0, lineStyle: { type: 'dashed' } },
+        { xAxis: '时间\n--', yAxis: 0, lineStyle: { type: 'dashed' } }
+      ]
+    }
+  };
+  chartInstance.setOption(option);
+};
+
+const resizeChart = () => {
+  chartInstance?.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', resizeChart);
+});
+
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+  window.removeEventListener('resize', resizeChart);
+});
+</script>
+
+<style scoped>
+.chart-container {
+  width: 90%;
+  max-width: 1000px;
+  height: 450px;
+  margin: 0 auto 80px;
+}
+
+h2 {
+  width: 90%;
+  max-width: 1000px;
+  text-align: center;
+  margin: 0 auto 10px;
+}
+</style>
--- a/src/components/ui/MediumCycleChart.vue
+++ b/src/components/ui/MediumCycleChart.vue
@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+
+<script setup>
+import {ref, onMounted, onBeforeUnmount} from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref(null);
+let chartInstance = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+
+  chartInstance = echarts.init(chartRef.value);
+  const option = {
+    title: {
+      text: '中周期：50-60年',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['1921', '', '1976', '', '2008', '2020', '2030', '', '', '2060', '时间'],
+      axisLabel: {fontSize: 14}
+    },
+    // 定义纵轴配置项
+    yAxis: {
+      // 纵轴类型为数值轴
+      type: 'value',
+      // 纵轴名称
+      name: '中国综合实力',
+      // 最小值
+      min: 0,
+      // 最大值
+      max: 100,
+      // 名称位置在轴的起始处
+      nameLocation: 'start',
+      // 名称与轴的距离
+      nameGap: 40,
+      // 名称文本样式
+      nameTextStyle: {
+        // 填充左侧间距以对齐名称
+        padding: [0, 0, 0, 40],
+        // 字体大小
+        fontSize: 14
+      },
+      // 轴标签样式
+      axisLabel: {
+        fontSize: 14,
+        show: false
+      }
+    },
+
+    grid: {
+      left: '15%',
+      right: '10%',
+      bottom: '15%',
+      top: '10%',
+      containLabel: true
+    },
+    series: [
+      {
+        name: '发展曲线',
+        type: 'line',
+        data: [
+          [0, 10], [1, 30], [2, 20], [3, 35], [4, 45], [5, 55], [6, 45], [7, 70], [8, 80], [9, 90], [10, 90]
+        ],
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          width: 3,
+          color: '#EF4444'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {offset: 0, color: 'rgba(239, 68, 68, 0.3)'},
+            {offset: 1, color: 'rgba(239, 68, 68, 0)'}
+          ])
+        }
+      },
+      {
+        name: '关键阶段',
+        type: 'scatter',
+        data: [
+          {value: [1, 10], name: '生存'},
+          {value: [4, 30], name: '发展'},
+          {value: [8, 60], name: '壮大'}
+        ],
+        symbolSize: 10,
+        itemStyle: {
+          color: '#10B981',
+          borderColor: '#FFFFFF',
+          borderWidth: 1
+        },
+        label: {
+          show: true,
+          position: 'top',
+          formatter: '{b}',
+          color: '#1F2937',
+          backgroundColor: '#FFFFFF',
+          padding: [4, 8],
+          borderRadius: 4,
+          fontSize: 12,
+          borderWidth: 1,
+          borderColor: '#ccc'
+        }
+      }
+    ],
+    markLine: {
+      data: [
+        {xAxis: '1976', yAxis: 0, lineStyle: {type: 'dashed'}},
+        {xAxis: '2008', yAxis: 0, lineStyle: {type: 'dashed'}},
+        {xAxis: '2020', yAxis: 0, lineStyle: {type: 'dashed'}},
+        {xAxis: '2030', yAxis: 0, lineStyle: {type: 'dashed'}},
+        {xAxis: '2060', yAxis: 0, lineStyle: {type: 'dashed'}}
+      ]
+    }
+  };
+  chartInstance.setOption(option);
+};
+
+const resizeChart = () => {
+  chartInstance?.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', resizeChart);
+});
+
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+  window.removeEventListener('resize', resizeChart);
+});
+</script>
+
+<style scoped>
+.chart-container {
+  width: 90%;
+  max-width: 1000px;
+  height: 450px;
+  margin: 0 auto 80px;
+}
+
+h2 {
+  width: 90%;
+  max-width: 1000px;
+  text-align: center;
+  margin: 0 auto 10px;
+}
+</style>
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -21,12 +21,12 @@
          <div class="order-2 lg:order-1" data-aos="fade-right" data-aos-duration="800">
            <SectionTitle
                subtitle="关于我们"
-                title="我们是上海酉佰佰"
+                title="我们是上海酉佰"
            />

            <div class="prose max-w-none text-gray-600 mt-6">
              <p>
-                上海酉佰佰有限公司成立于2010年，总部位于上海浦东新区，
+                上海酉佰有限公司成立于2010年，总部位于上海浦东新区，
                是一家专注于提供企业级数字化解决方案的高新技术企业。
              </p>
              <p>
@@ -89,7 +89,8 @@
          </div>
          <div class="order-1 lg:order-2 relative" data-aos="fade-left" data-aos-duration="800">
            <div class="rounded-2xl overflow-hidden shadow-xl">
-              <img src="../assets/images/company0006.png" alt="公司成立背景" class="w-full h-auto">
+              <LargeCycleChart />
+<!--              <img src="../assets/images/company0006.png" alt="公司成立背景" class="w-full h-auto">-->
            </div>
          </div>
        </div>
@@ -122,7 +123,8 @@
          </div>
          <div class="order-1 lg:order-1 relative" data-aos="fade-right" data-aos-duration="800">
            <div class="rounded-2xl overflow-hidden shadow-xl">
-              <img src="../assets/images/zq0001.png" alt="公司成立背景" class="w-full h-auto">
+              <MediumCycleChart />
+<!--              <img src="../assets/images/zq0001.png" alt="公司成立背景" class="w-full h-auto">-->
            </div>
          </div>
        </div>
@@ -174,7 +176,7 @@
            title="发展历程"
            subtitle="一路成长"
            align="center"
-            description="回顾上海酉佰佰发展中的重要里程碑"
+            description="回顾上海酉佰发展中的重要里程碑"
            data-aos="fade-up"
        />

@@ -357,6 +359,8 @@ import Card from '@/components/ui/Card.vue'
 import Component from '@/components/ui/Company.vue'
 import TeamMemberCard from '@/components/ui/TeamMember.vue'
 import ContactForm from "@/components/ui/ContactForm.vue";
+import MediumCycleChart from "@/components/ui/MediumCycleChart.vue";
+import LargeCycleChart from "@/components/ui/LargeCycleChart.vue";

 const milestones = [
  {
--- a/src/views/Careers.vue
+++ b/src/views/Careers.vue
@@ -321,7 +321,7 @@
        <MapContainer
            :lng="121.424"
            :lat="31.197"
-            :title="'上海酉佰佰网络信息科技有限公司'"
+            :title="'上海酉佰网络信息科技有限公司'"
            :address="'上海市中山西路2020号华宜大厦2号楼1501室'"
        />
      </div>
@@ -447,7 +447,7 @@ import MapContainer from "@/components/ui/MapContainer.vue";
 const position = {
  lng: 121.424,
  lat: 31.197,
-  title: '上海酉佰佰网络信息科技有限公司',
+  title: '上海酉佰网络信息科技有限公司',
  address: '上海市中山西路2020号华宜大厦2号楼1501室'
 }

@@ -605,13 +605,13 @@ function initMap() {
  new AMap.Marker({
    position: [121.424, 31.197],
    map: window.mapInstance,
-    title: '上海酉佰佰网络信息科技有限公司'
+    title: '上海酉佰网络信息科技有限公司'
  })

  // 添加信息窗口
  const infoWindow = new AMap.InfoWindow({
    content: `<div class="p-2">
-      <h4 class="font-bold">上海酉佰佰</h4>
+      <h4 class="font-bold">上海酉佰</h4>
      <p class="text-sm">上海市中山西路2020号华宜大厦2号楼1501室</p>
    </div>`,
    offset: new AMap.Pixel(0, -30)
--- a/src/views/Features.vue
+++ b/src/views/Features.vue
@@ -134,7 +134,7 @@
        <SectionTitle
            title="团队理念"
            subtitle="大道不孤，众行致远"
-            description="在酉佰佰，我们坚信真正的成功来自团队协作与共同成长"
+            description="在酉佰，我们坚信真正的成功来自团队协作与共同成长"
            align="center"
            data-aos="fade-up"
        />
@@ -485,7 +485,7 @@
            data-aos="fade-up"
            data-aos-delay="200"
        >
-          <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">加入酉佰佰，共同成长</h2>
+          <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">加入酉佰，共同成长</h2>
          <p class="text-xl text-blue-200 mb-10">
            我们正在寻找认同学习文化和渐进理念的伙伴，一起创造长期价值
          </p>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -17,7 +17,7 @@
                data-aos="fade-up"
                data-aos-delay="100"
            >
-              上海酉佰佰致力于为企业提供前沿的解决方案，赋能数字化转型，
+              上海酉佰致力于为企业提供前沿的解决方案，赋能数字化转型，
              创造可持续的商业价值。
            </p>
            <div
@@ -109,7 +109,7 @@
            <SectionTitle
                title="为什么选择"
                subtitle="企业优势"
-                highlight="上海酉佰佰?"
+                highlight="上海酉佰?"
                data-aos="fade-right"
            />

@@ -336,13 +336,13 @@ const advantages = [

 const testimonials = [
  {
-    content: '上海酉佰佰团队的专业性和创新思维帮助我们完成了数字化转型，大幅提升了工作效率，为业务增长提供了强大支持。',
+    content: '上海酉佰团队的专业性和创新思维帮助我们完成了数字化转型，大幅提升了工作效率，为业务增长提供了强大支持。',
    name: '张先生',
    position: '某公司总经理',
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
  },
  {
-    content: '与酉佰佰的合作非常愉快，他们的解决方案深入理解了我们行业的特殊需求，实施效果远超我们的预期。',
+    content: '与酉佰的合作非常愉快，他们的解决方案深入理解了我们行业的特殊需求，实施效果远超我们的预期。',
    name: '李女士',
    position: '某制造企业CIO',
    avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
--- a/src/views/Team.vue
+++ b/src/views/Team.vue
@@ -89,7 +89,7 @@
              <div class="md:w-2/3 md:pl-8 order-2 lg:order-2" data-aos="fade-right" data-aos-delay="200">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">技术专家团队</h3>
                <p class="text-gray-600 mb-6">
-                  酉佰佰佰佰是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。
+                  酉佰佰是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。
                  我们遵循循序渐进，但绝不放任自流的管理理念。
                </p>
                <p class="text-gray-600 mb-6">
@@ -118,7 +118,7 @@
        <SectionTitle
            title="发展规划"
            subtitle="未来愿景"
-            description="酉佰佰佰佰团队的战略发展规划"
+            description="酉佰佰团队的战略发展规划"
            align="center"
            data-aos="fade-up"
        />
@@ -132,7 +132,7 @@
              <div class="md:w-2/3 md:pl-8 order-2 lg:order-1" data-aos="fade-left" data-aos-delay="200">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">五年发展规划</h3>
                <p class="text-gray-600 mb-6">
-                  酉佰佰佰佰团队刚经历了第一个五年的发展，展望未来，公司一方面致力于在宏观弱势期进行人才积累，
+                  酉佰佰团队刚经历了第一个五年的发展，展望未来，公司一方面致力于在宏观弱势期进行人才积累，
                  另一方面也在积极地进行政治经济研究、产业企业研究、风险管理研究和投资等投资公司核心竞争力的孵化与锻炼。
                </p>
                <p class="text-gray-600 mb-6">
@@ -254,7 +254,7 @@
        <div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">加入我们的团队</h2>
          <p class="text-xl text-blue-300 mb-8">
-            如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰佰佰佰大家庭
+            如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰佰大家庭
          </p>
          <router-link
              to="/careers"