初始化项目

2025-06-09 16:51:58 +08:00
parent 7efc3dfd67
commit a3ad70de03
39 changed files with 3034 additions and 49 deletions
--- a/package.json
+++ b/package.json
@@ -9,17 +9,19 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "tailwindcss": "^4.1.4",
-    "vue": "^3.5.13",
    "@ant-design-vue/pro-layout": "^3.2.5",
    "@ant-design/icons-vue": "^7.0.1",
+    "@fortawesome/fontawesome-free": "^6.7.2",
    "@tailwindcss/vite": "^4.1.4",
    "@vueuse/head": "^2.0.0",
    "ant-design-vue": "^4.1.1",
+    "aos": "^2.3.4",
    "axios": "^1.6.2",
    "lucide-vue-next": "^0.507.0",
    "pinia": "^2.1.7",
-    "swiper": "^11.0.5",
+    "swiper": "^11.2.6",
+    "tailwindcss": "^4.1.4",
+    "vue": "^3.5.13",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
      '@ant-design/icons-vue':
        specifier: ^7.0.1
        version: 7.0.1(vue@3.5.13)
+      '@fortawesome/fontawesome-free':
+        specifier: ^6.7.2
+        version: 6.7.2
      '@tailwindcss/vite':
        specifier: ^4.1.4
        version: 4.1.4(vite@6.3.3(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.88.0))
@@ -36,7 +39,7 @@ importers:
        specifier: ^2.1.7
        version: 2.3.1(vue@3.5.13)
      swiper:
-        specifier: ^11.0.5
+        specifier: ^11.2.6
        version: 11.2.6
      tailwindcss:
        specifier: ^4.1.4
@@ -263,6 +266,10 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@fortawesome/fontawesome-free@6.7.2':
+    resolution: {integrity: sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==}
+    engines: {node: '>=6'}
+
  '@jridgewell/sourcemap-codec@1.5.0':
    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}

@@ -295,42 +302,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==}
@@ -388,67 +389,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==}
@@ -506,28 +496,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==}
@@ -851,28 +837,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==}
@@ -1229,6 +1211,8 @@ snapshots:
  '@esbuild/win32-x64@0.25.3':
    optional: true

+  '@fortawesome/fontawesome-free@6.7.2': {}
+
  '@jridgewell/sourcemap-codec@1.5.0': {}

  '@parcel/watcher-android-arm64@2.5.1':
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,23 @@
 <script setup>
+import Header from '@/components/layout/Header.vue'
+import Footer from '@/components/layout/Footer.vue'
 </script>

 <template>
-  <router-view />
+  <div id="app" class="min-h-screen flex flex-col">
+    <Header />
+    <main class="flex-grow pt-16 md:pt-20">
+      <router-view />
+    </main>
+    <Footer />
+  </div>
 </template>

 <style lang='scss' scoped>
-
+#app {
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;
+  color: #1a202c;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 </style>
--- a/src/assets/images/company0002.jpeg
+++ b/src/assets/images/company0002.jpeg
--- a/src/assets/images/company0003.jpeg
+++ b/src/assets/images/company0003.jpeg
--- a/src/assets/images/company0004.jpeg
+++ b/src/assets/images/company0004.jpeg
--- a/src/assets/images/company0005.jpeg
+++ b/src/assets/images/company0005.jpeg
--- a/src/assets/images/company0006.png
+++ b/src/assets/images/company0006.png
--- a/src/assets/images/features-home.png
+++ b/src/assets/images/features-home.png
--- a/src/assets/images/features0001.jpeg
+++ b/src/assets/images/features0001.jpeg
--- a/src/assets/images/features0002.jpeg
+++ b/src/assets/images/features0002.jpeg
--- a/src/assets/images/gongan.png
+++ b/src/assets/images/gongan.png
--- a/src/assets/images/home0001.jpeg
+++ b/src/assets/images/home0001.jpeg
--- a/src/assets/images/join0001.jpeg
+++ b/src/assets/images/join0001.jpeg
--- a/src/assets/images/join0002.jpeg
+++ b/src/assets/images/join0002.jpeg
--- a/src/assets/images/logo-white.png
+++ b/src/assets/images/logo-white.png
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/images/logo@1x.png
+++ b/src/assets/images/logo@1x.png
--- a/src/assets/images/mark_bs.png
+++ b/src/assets/images/mark_bs.png
--- a/src/assets/images/team0001.jpeg
+++ b/src/assets/images/team0001.jpeg
--- a/src/assets/images/team0003.jpeg
+++ b/src/assets/images/team0003.jpeg
--- a/src/assets/images/zq0001.png
+++ b/src/assets/images/zq0001.png
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -0,0 +1,29 @@
+body {
+    font-family: 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;
+    color: #1a202c;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.container {
+    @apply mx-auto px-4;
+}
+
+.section {
+    @apply py-16 md:py-24;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+p {
+    // 首行缩进两个字符
+    text-indent: 2em;
+}
--- a/src/components/layout/Footer.vue
+++ b/src/components/layout/Footer.vue
@@ -0,0 +1,142 @@
+<template>
+  <footer class="bg-gray-900 text-white pt-16 pb-10 px-4 sm:px-8 lg:px-24">
+    <div class="container mx-auto">
+      <div class="flex flex-wrap -mx-4">
+        <!-- 公司信息部分 -->
+        <div class="w-full md:w-1/3 px-4 mb-8 md:mb-0">
+          <div>
+            <router-link to="/" class="flex items-center mb-6">
+              <img
+                  src="@/assets/images/logo-white.png"
+                  alt="酉佰"
+                  class="h-8 md:h-10"
+              />
+              <span class="ml-2 text-xl md:text-2xl font-bold text-white"
+              >酉佰</span
+              >
+            </router-link>
+            <p class="text-gray-400 mb-4 max-w-xs text-sm sm:text-base">
+              酉佰专注金融、投资领域的专业服务，提供金融行业解决方案。
+            </p>
+            <div class="flex space-x-4">
+              <a
+                  v-for="(item, index) in social"
+                  :key="index"
+                  :href="item.link"
+                  class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gray-800 hover:bg-primary transition-colors"
+                  aria-label="社交媒体链接"
+              >
+                <i :class="item.icon" class="text-white text-sm sm:text-base"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- 导航链接部分 -->
+        <div
+            v-for="(block, index) in footerLinks"
+            :key="index"
+            class="w-full sm:w-1/2 md:w-1/4 px-4 mb-8 md:mb-0"
+        >
+          <h3 class="text-base sm:text-lg font-semibold mb-4">{{ block.title }}</h3>
+          <ul class="space-y-2">
+            <li v-for="(link, linkIndex) in block.links" :key="linkIndex">
+              <a
+                  :href="link.path"
+                  class="text-gray-400 hover:text-primary transition-colors text-sm sm:text-base"
+              >
+                {{ link.title }}
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <!-- 订阅部分 -->
+<!--        <div class="w-full md:w-1/4 px-4">-->
+<!--          <h3 class="text-base sm:text-lg font-semibold mb-4">订阅我们</h3>-->
+<!--          <p class="text-gray-400 mb-4 text-sm sm:text-base">-->
+<!--            订阅我们的邮件，获取最新电商行业资讯和解决方案。-->
+<!--          </p>-->
+<!--          <div class="flex">-->
+<!--            <input-->
+<!--                type="email"-->
+<!--                placeholder="您的邮箱地址"-->
+<!--                class="w-full px-3 py-2 sm:px-4 sm:py-2 rounded-l-lg focus:outline-none text-gray-700 text-sm sm:text-base"-->
+<!--                aria-label="订阅邮箱输入框"-->
+<!--            />-->
+<!--            <button-->
+<!--                class="bg-primary hover:bg-blue-700 text-white font-semibold px-3 sm:px-4 py-2 rounded-r-lg transition-colors text-sm sm:text-base"-->
+<!--                aria-label="订阅按钮"-->
+<!--            >-->
+<!--              订阅-->
+<!--            </button>-->
+<!--          </div>-->
+<!--        </div>-->
+      </div>
+
+      <!-- 底部版权信息 -->
+      <div class="border-t border-gray-800 mt-10 pt-6">
+        <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
+          <div class="mb-4 md:mb-0">
+            <p class="text-gray-500 text-xs sm:text-sm">
+              © 2021 shyoubai.com. All rights reserved
+            </p>
+          </div>
+          <div class="flex flex-wrap justify-center gap-x-4 gap-y-2">
+            <a href="#" class="text-gray-500 hover:text-primary transition-colors text-xs sm:text-sm">
+              隐私政策
+            </a>
+            <span class="text-gray-500 hidden sm:inline">|</span>
+            <a href="#" class="text-gray-500 hover:text-primary transition-colors text-xs sm:text-sm">
+              使用条款
+            </a>
+            <span class="text-gray-500 hidden sm:inline">|</span>
+            <span class="text-gray-500 text-xs sm:text-sm">
+              沪公网安备 31010402009014号
+            </span>
+            <span class="text-gray-500 hidden sm:inline">|</span>
+            <span class="text-gray-500 text-xs sm:text-sm">
+              沪ICP备2021007173号-1
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  data() {
+    return {
+      social: [
+        { icon: 'fab fa-weixin', link: '#' },
+        { icon: 'fab fa-weibo', link: '#' },
+        { icon: 'fab fa-linkedin-in', link: '#' },
+        { icon: 'fab fa-zhihu', link: '#' },
+      ],
+      footerLinks: [
+        {
+          title: '快速导航',
+          links: [
+            { title: '关于我们', path: '/about' },
+            { title: '团队介绍', path: '/team' },
+            { title: '服务特色', path: '/features' },
+            { title: '加入我们', path: '/careers' },
+          ]
+        },
+        {
+          title: '联系我们',
+          links: [
+            { title: '上海市中山西路2020号华宜大厦2号楼1501室', path: '#' },
+            { title: '021-34161621', path: 'tel:021-34161621' },
+            { title: 'youbaiwangluo@163.com', path: 'mailto:youbaiwangluo@163.com' },
+            { title: '周一至周五 9:00-18:00', path: '#' },
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -0,0 +1,192 @@
+<template>
+  <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-transparent py-5': !isScrolled && !isMenuOpen
+    }"
+  >
+    <div class="container mx-auto">
+      <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>
+
+        <nav class="hidden md:flex space-x-8">
+          <router-link
+              to="/"
+              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
+          >
+        </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="bg-primary hover:bg-blue-700 font-semibold px-4 py-2 rounded-full transition-colors"
+          >
+            联系我们
+          </button>
+        </div>
+
+        <button @click="toggleMenu" class="md:hidden text-gray-700">
+          <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="M4 6h16M4 12h16m-7 6h7"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- 移动端菜单 -->
+    <div
+        v-show="isMenuOpen"
+        class="md:hidden fixed inset-0 bg-white z-50 py-5"
+        style="margin-top: 76px"
+    >
+      <div class="container">
+        <nav class="flex flex-col space-y-4 py-4">
+          <router-link
+              to="/"
+              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
+          >
+        </nav>
+        <div class="pt-8">
+          <button
+              class="w-full bg-primary hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors"
+          >
+            联系我们
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  data() {
+    return {
+      isScrolled: false,
+      isMenuOpen: false
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeUnmount() {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    handleScroll() {
+      this.isScrolled = window.scrollY > 20
+    },
+    toggleMenu() {
+      this.isMenuOpen = !this.isMenuOpen
+    },
+    closeMenu() {
+      this.isMenuOpen = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.router-link-exact-active {
+  position: relative;
+}
+
+.router-link-exact-active::after {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #2563eb;
+}
+</style>
--- a/src/components/ui/Card.vue
+++ b/src/components/ui/Card.vue
@@ -0,0 +1,56 @@
+<template>
+  <div
+      class="bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-shadow overflow-hidden"
+      :class="[bordered ? 'border border-gray-200' : '']"
+      data-aos="fade-up"
+  >
+    <div
+        v-if="$slots.icon || icon"
+        class="w-12 h-12 md:w-16 md:h-16 rounded-lg bg-primary/10 text-primary p-3 flex items-center justify-center mb-5"
+    >
+      <slot name="icon">
+        <i v-if="icon" :class="icon" class="text-xl"></i>
+      </slot>
+    </div>
+    <h3
+        class="text-xl md:text-2xl font-bold text-gray-800 mb-3"
+        v-if="$slots.title || title"
+    >
+      <slot name="title">{{ title }}</slot>
+    </h3>
+    <p
+        class="text-gray-600 mb-6"
+        :class="{ 'md:text-lg': largeText }"
+        v-if="$slots.default"
+    >
+      <slot></slot>
+    </p>
+    <div v-if="$slots.actions">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    largeText: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
--- a/src/components/ui/Company.vue
+++ b/src/components/ui/Company.vue
@@ -0,0 +1,269 @@
+<template>
+  <div
+      class="relative rounded-2xl overflow-hidden shadow-xl"
+      @touchstart="startDrag"
+      @touchmove="onDrag"
+      @touchend="endDrag"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="endDrag"
+      @mouseleave="endDrag"
+  >
+    <!-- 公司实景轮播图 -->
+    <div class="relative h-96 overflow-hidden">
+      <div
+          v-for="(slide, index) in companySlides"
+          :key="index"
+          class="absolute inset-0 transition-transform duration-500 ease-in-out"
+          :style="{
+            transform: getSlideTransform(index),
+            zIndex: getSlideZIndex(index)
+          }"
+      >
+        <div
+            class="absolute inset-0"
+            :class="{
+              'animate-kenburns': currentSlide === index
+            }"
+        >
+          <!-- 使用img标签确保图片正常显示 -->
+          <img :src="slide.src" :alt="slide.alt" class="w-full h-full object-cover"></img>
+        </div>
+      </div>
+    </div>
+
+    <!-- 轮播控制按钮 - 小圆点指示器（始终显示） -->
+    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-50">
+      <button
+          v-for="(slide, index) in companySlides"
+          :key="index"
+          class="w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-colors cursor-pointer"
+          :class="{ '!bg-white': currentSlide === index }"
+          @click="goToSlide(index)"
+      ></button>
+    </div>
+
+    <!-- 左右切换按钮 - 只在PC端显示 -->
+    <button
+        @click="goToSlide(currentSlide - 1)"
+        class="hidden md:flex absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 hover:bg-white/40 items-center justify-center transition-colors cursor-pointer z-50"
+    >
+      <svg width="14" height="24" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white">
+        <polyline fill="none" stroke="currentColor" stroke-width="1.4" points="12.775,1 1.225,12 12.775,23"></polyline>
+      </svg>
+    </button>
+    <button
+        @click="goToSlide(currentSlide + 1)"
+        class="hidden md:flex absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 hover:bg-white/40 items-center justify-center transition-colors cursor-pointer z-50"
+    >
+      <svg width="14" height="24" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white">
+        <polyline fill="none" stroke="currentColor" stroke-width="1.4" points="1.225,23 12.775,12 1.225,1"></polyline>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+// 请确保这些图片路径正确
+import img1 from '@/assets/images/company0002.jpeg'
+import img2 from '@/assets/images/company0003.jpeg'
+import img3 from '@/assets/images/company0004.jpeg'
+import img4 from '@/assets/images/company0005.jpeg'
+import img5 from '@/assets/images/company0006.png'
+
+const currentSlide = ref(0)
+const prevSlide = ref(null)
+const isDragging = ref(false)
+const dragStartX = ref(0)
+const dragCurrentX = ref(0)
+const dragDelta = ref(0)
+const direction = ref('right') // 添加方向状态
+
+const companySlides = ref([
+  { src: img1, alt: '公司环境实景1' },
+  { src: img2, alt: '公司环境实景2' },
+  { src: img3, alt: '公司环境实景3' },
+  { src: img4, alt: '公司环境实景4' },
+  { src: img5, alt: '公司环境实景5' }
+])
+
+let slideInterval = null
+
+// 轮播图控制函数
+const goToSlide = (index) => {
+  const slidesCount = companySlides.value.length;
+
+  // 计算正确的索引
+  if (index < 0) index = slidesCount - 1;
+  else if (index >= slidesCount) index = 0;
+
+  // 确定切换方向
+  direction.value = index > currentSlide.value ? 'right' : 'left';
+
+  // 更新幻灯片索引
+  prevSlide.value = currentSlide.value;
+  currentSlide.value = index;
+
+  resetInterval();
+}
+
+// 重置自动轮播计时器
+const resetInterval = () => {
+  clearInterval(slideInterval)
+  slideInterval = setInterval(() => {
+    direction.value = 'right';
+    goToSlide(currentSlide.value + 1)
+  }, 5000)
+}
+
+// 触摸/鼠标拖动功能
+const startDrag = (e) => {
+  // 阻止鼠标事件在按钮上触发拖动
+  if (e.target.closest('button')) return;
+
+  isDragging.value = true;
+  dragStartX.value = getClientX(e);
+  dragCurrentX.value = dragStartX.value;
+  dragDelta.value = 0;
+  clearInterval(slideInterval);
+
+  // 添加拖动样式，提高性能
+  document.body.classList.add('dragging');
+
+  // PC端添加额外处理
+  if (e.type === 'mousedown') {
+    e.preventDefault();
+  }
+}
+
+const onDrag = (e) => {
+  if (!isDragging.value) return;
+
+  const clientX = getClientX(e);
+  dragDelta.value = clientX - dragStartX.value;
+  dragCurrentX.value = clientX;
+
+  // PC端添加额外处理
+  if (e.type === 'mousemove') {
+    e.preventDefault();
+  }
+}
+
+const endDrag = () => {
+  if (!isDragging.value) return;
+
+  isDragging.value = false;
+  document.body.classList.remove('dragging');
+
+  // 根据拖动距离判断是否切换幻灯片
+  const threshold = window.innerWidth / 5; // 调整为屏幕宽度的1/5
+
+  if (Math.abs(dragDelta.value) > threshold) {
+    if (dragDelta.value > 0) {
+      direction.value = 'left';
+      goToSlide(currentSlide.value - 1); // 向右拖动，切换到上一张
+    } else {
+      direction.value = 'right';
+      goToSlide(currentSlide.value + 1); // 向左拖动，切换到下一张
+    }
+  } else {
+    // 如果拖动距离不够，回到当前位置
+    dragDelta.value = 0;
+  }
+
+  resetInterval();
+}
+
+// 获取客户端X坐标（兼容触摸和鼠标事件）
+const getClientX = (e) => {
+  if (e.type.includes('touch')) {
+    return e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX;
+  }
+  return e.clientX;
+}
+
+// 获取幻灯片变换值
+const getSlideTransform = (index) => {
+  if (isDragging.value) {
+    // 拖动状态：当前幻灯片跟随拖动位置
+    if (index === currentSlide.value) {
+      return `translateX(${dragDelta.value}px)`;
+    }
+    // 其他幻灯片保持原位
+    return `translateX(${index > currentSlide.value ? '100%' : '-100%'})`;
+  }
+
+  // 非拖动状态
+  if (index === currentSlide.value) {
+    return 'translateX(0)';
+  }
+
+  // 根据方向确定位置
+  if (direction.value === 'right') {
+    return `translateX(${index > currentSlide.value ? '100%' : '-100%'})`;
+  } else {
+    return `translateX(${index > currentSlide.value ? '100%' : '-100%'})`;
+  }
+}
+
+// 获取幻灯片层级
+const getSlideZIndex = (index) => {
+  // 当前幻灯片最高层级
+  if (index === currentSlide.value) return 30;
+
+  // 下一张幻灯片次高
+  const nextIndex = direction.value === 'right'
+      ? (currentSlide.value + 1) % companySlides.value.length
+      : (currentSlide.value - 1 + companySlides.value.length) % companySlides.value.length;
+
+  if (index === nextIndex) return 20;
+
+  // 其他幻灯片最低
+  return 10;
+}
+
+onMounted(() => {
+  resetInterval()
+})
+
+onUnmounted(() => {
+  clearInterval(slideInterval)
+})
+</script>
+
+<style scoped>
+/* 定义Ken Burns效果动画 */
+@keyframes kenburns {
+  0% {
+    transform: scale(1.05);
+    transform-origin: 50% 50%;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 50%;
+  }
+}
+
+.animate-kenburns {
+  animation: kenburns 5s linear forwards;
+}
+
+/* 定义滑动动画效果 */
+.transition-transform {
+  transition: transform 0.5s ease-in-out;
+}
+
+/* 拖动时的性能优化 */
+.dragging * {
+  user-select: none;
+  pointer-events: none;
+}
+
+/* 确保图片填充容器 */
+.object-cover {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/components/ui/FeatureCard.vue
+++ b/src/components/ui/FeatureCard.vue
@@ -0,0 +1,39 @@
+<template>
+  <div
+      class="relative bg-white rounded-xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-shadow overflow-hidden"
+      data-aos="fade-up"
+      data-aos-duration="600"
+  >
+    <div
+        class="w-12 h-12 md:w-16 md:h-16 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center mb-6"
+    >
+      <i :class="icon" class="text-xl"></i>
+    </div>
+    <h3 class="text-xl md:text-2xl font-bold text-gray-800 mb-3">
+      {{ title }}
+    </h3>
+    <p class="text-gray-600">
+      {{ description }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FeatureCard',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
--- a/src/components/ui/SectionTitle.vue
+++ b/src/components/ui/SectionTitle.vue
@@ -0,0 +1,85 @@
+<template>
+  <div
+      :class="[
+      'mb-10 md:mb-16',
+      align === 'center' ? 'text-center' : 'text-left',
+      titleClass
+    ]"
+      data-aos="fade-up"
+  >
+    <h2
+        class="text-2xl md:text-4xl font-bold leading-tight mb-4"
+        :class="titleClass"
+    >
+      <template v-if="highlight">
+        {{ titlePart1 }}<span class="text-primary">{{ highlight }}</span>{{ titlePart2 }}
+      </template>
+      <template v-else>
+        {{ title }}
+      </template>
+    </h2>
+    <div class="relative inline-block" v-if="divider && align === 'center'">
+      <div
+          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-20 h-0.5 bg-primary"
+      ></div>
+    </div>
+    <p
+        v-if="subtitle"
+        class="text-gray-500 text-lg max-w-3xl"
+        :class="[align === 'center' ? 'mx-auto' : '']"
+    >
+      {{ subtitle }}
+    </p>
+    <p
+        v-if="description"
+        class="text-gray-600 mt-4 max-w-3xl"
+        :class="[align === 'center' ? 'mx-auto' : '']"
+    >
+      {{ description }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SectionTitle',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    highlight: {
+      type: String,
+      default: ''
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    align: {
+      type: String,
+      default: 'left'
+    },
+    divider: {
+      type: Boolean,
+      default: true
+    },
+    titleClass: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    titlePart1() {
+      return this.title.split(this.highlight)[0]
+    },
+    titlePart2() {
+      return this.title.split(this.highlight)[1]
+    }
+  }
+}
+</script>
--- a/src/components/ui/TeamMember.vue
+++ b/src/components/ui/TeamMember.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="group" data-aos="fade-up" data-aos-delay="50">
+    <div class="overflow-hidden rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 transform group-hover:-translate-y-1">
+      <div class="relative overflow-hidden">
+        <!-- 图片占位 -->
+        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full aspect-square">
+          <div class="w-full h-full flex items-center justify-center bg-blue-50">
+            <i class="fas fa-user text-4xl text-gray-300"></i>
+          </div>
+        </div>
+
+        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex flex-col justify-end p-6">
+          <div class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+            <p class="text-sm">{{ member.description }}</p>
+            <div class="flex mt-4 space-x-3">
+              <a v-for="(social, idx) in member.social" :key="idx" :href="social.link"
+                 class="w-8 h-8 rounded-full bg-white/20 hover:bg-amber-600 flex items-center justify-center text-white">
+                <i :class="social.icon"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-6">
+        <h3 class="text-lg font-bold text-gray-900">{{ member.name }}</h3>
+        <p class="text-amber-600 text-sm font-medium">{{ member.position }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  member: {
+    type: Object,
+    default: () => ({
+      name: '张经理',
+      position: '技术总监',
+      description: '拥有10年行业经验的技术专家',
+      social: [
+        { icon: 'fab fa-linkedin-in', link: '#' },
+        { icon: 'fab fa-weibo', link: '#' },
+      ]
+    })
+  }
+})
+</script>
--- a/src/main.js
+++ b/src/main.js
@@ -2,9 +2,13 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import Antd from 'ant-design-vue'
 import './style.css'
+import '@/assets/styles/global.scss'
 import App from './App.vue'
 // 注册路由
 import router from './router'
+import AOS from 'aos'
+import 'aos/dist/aos.css'
+import '@fortawesome/fontawesome-free/css/all.min.css';

 const app = createApp(App)

@@ -13,4 +17,10 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(Antd)
+app.use(AOS.init({
+    duration: 800,
+    offset: 100,
+    easing: 'ease-in-out',
+    once: true
+}))
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,13 +4,11 @@ import MainLayout from '@/layouts/Header.vue'

 // 在路由配置中添加个人中心路由
 const routes = [
-  {
-    path: '/',
-    component: MainLayout,
-    children: [
-      { path: '', name: 'Home', component: () => import('@/views/index/index.vue') },
-    ]
-  },
+  { path: '/', meta: { title: '首页' }, name: 'Home', component: () => import('@/views/Home.vue') },
+  { path: '/about', meta: { title: '公司介绍' }, name: 'About', component: () => import('@/views/About.vue') },
+  { path: '/team', meta: { title: '团队介绍' }, name: 'Team', component: () => import('@/views/Team.vue') },
+  { path: '/features', meta: { title: '公司特色' }, name: 'Features', component: () => import('@/views/Features.vue') },
+  { path: '/careers', meta: { title: '加入我们' }, name: 'Careers', component: () => import('@/views/Careers.vue') },
 ]

 const router = createRouter({
@@ -21,18 +19,19 @@ const router = createRouter({
  }
 })

-router.beforeEach((to, from) => {
-  const userStore = useUserStore()
-  if (to.meta.requiresAuth && !userStore.user) {
-    return { name: 'Login', query: { redirect: to.fullPath } }
-  }
-})

 export default router

 router.beforeEach((to, from) => {
-  const userStore = useUserStore()
-  if (to.meta.requiresAuth && !userStore.user) {
-    return { name: 'Login', query: { redirect: to.fullPath } }
+  // const userStore = useUserStore()
+  // if (to.meta.requiresAuth && !userStore.user) {
+  //   return { name: 'Login', query: { redirect: to.fullPath } }
+  // }
+
+  if (to.meta.title) {
+    console.log('to.meta.title', to.meta)
+    document.title = `${to.meta.title} | 上海酉佰`
+  } else {
+    document.title = `上海酉佰`
  }
 })
--- a/src/style.css
+++ b/src/style.css
@@ -1 +1,28 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');*/
+
+/*body {*/
+/*    font-family: 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;*/
+/*    color: #1a202c;*/
+/*    -webkit-font-smoothing: antialiased;*/
+/*    -moz-osx-font-smoothing: grayscale;*/
+/*}*/
+
+/*.container {*/
+/*    @apply mx-auto px-4;*/
+/*}*/
+
+/*.section {*/
+/*    @apply py-16 md:py-24;*/
+/*}*/
+
+/*.fade-enter-active,*/
+/*.fade-leave-active {*/
+/*    transition: opacity 0.3s ease;*/
+/*}*/
+
+/*.fade-enter-from,*/
+/*.fade-leave-to {*/
+/*    opacity: 0;*/
+/*}*/
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -0,0 +1,619 @@
+<template>
+  <div>
+    <!-- 页面标题 -->
+    <div class="about-index pt-32 pb-20 bg-gradient-to-r from-indigo-900 to-blue-900"
+         data-aos="fade-down"
+         data-aos-duration="800">
+      <div class="container mx-auto px-4">
+        <div class="text-center" data-aos="fade-up" data-aos-duration="800">
+          <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">公司介绍</h1>
+          <p class="text-xl text-blue-300 max-w-2xl mx-auto">
+            专业、创新、值得信赖的数字化解决方案提供商
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关于我们 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div class="order-2 lg:order-1" data-aos="fade-right" data-aos-duration="800">
+            <SectionTitle
+                subtitle="关于我们"
+                title="我们是上海酉佰佰"
+            />
+
+            <div class="prose max-w-none text-gray-600 mt-6">
+              <p>
+                上海酉佰佰有限公司成立于2010年，总部位于上海浦东新区，
+                是一家专注于提供企业级数字化解决方案的高新技术企业。
+              </p>
+              <p>
+                公司自成立以来，始终秉承"创新驱动、客户至上"的理念，
+                致力于为企业客户提供从战略咨询到技术实施的一站式服务。
+              </p>
+              <p>
+                我们的团队由行业资深专家和技术精英组成，拥有丰富的行业经验和专业知识，
+                已经帮助超过200家企业完成数字化转型，业务覆盖制造、零售、金融、医疗等多个行业。
+              </p>
+            </div>
+
+            <div class="grid grid-cols-2 gap-6 mt-8">
+              <div class="bg-blue-50 rounded-xl p-5" data-aos="zoom-in" data-aos-delay="200">
+                <h3 class="text-xl font-bold text-gray-900 mb-2">我们的理念</h3>
+                <p class="text-gray-600">
+                  大道不孤、众行致远
+                </p>
+              </div>
+              <div class="bg-amber-50 rounded-xl p-5" data-aos="zoom-in" data-aos-delay="300">
+                <h3 class="text-xl font-bold text-gray-900 mb-2">我们的愿景</h3>
+                <p class="text-gray-600">
+                  实现研究成果与投资回报的双丰收，成为行业领军机构
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="relative order-1 lg:order-2" data-aos="fade-left" data-aos-duration="800">
+            <Component />
+            <div class="z-50 absolute -bottom-6 -right-6 w-48 h-48 bg-amber-500/20 rounded-full"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 成立背景 -->
+    <section class="py-16 md:py-24 bg-gray-50">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="成立背景"
+            subtitle="我们的起源"
+            align="center"
+            data-aos="fade-up"
+        />
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
+          <div class="order-2 lg:order-1" data-aos="fade-right" data-aos-duration="800">
+            <div class="prose max-w-none text-gray-600">
+              <p>
+                我们公司于2018年3月正式成立，公司实缴资本5000万元人民币，注册于上海南翔经济开发区，办公地址在徐汇区华宜大厦。
+              </p>
+              <p>
+                当前，世界正处于"百年未有之大变局"，从大周期来看，西方文明正经历着从十四世纪到二十世纪达到巅峰后的大衰退期，而中华民族则正处于自明朝以来，七百年的上升期。回顾过去一百年，我国自1921年以来，已经经历了生存、发展两大阶段，目前正处于壮大阶段的准备期。对于2030年之后的市场，我们充满信心，所以，未来几年正是黎明前的黑暗，大战前的沉寂，是我们深耕世界政治经济、产业链和企业研究的黄金时期。
+              </p>
+              <p>
+                秉着"大道不孤、众行致远"的理念，我们毅然决定顺应时代潮流，把握时代机遇，组建一支满怀热情、激情、力量和毅力的研究和投资军队，在市场上奋力拼搏，创造属于我们的辉煌！
+              </p>
+            </div>
+          </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">
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 公司目标 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="公司目标"
+            subtitle="我们的方向"
+            align="center"
+            data-aos="fade-up"
+        />
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
+          <div class="order-2 lg:order-2" data-aos="fade-left" data-aos-duration="800">
+            <div class="prose max-w-none text-gray-600">
+              <p>
+                我们公司于2018年3月正式成立，公司实缴资本5000万元人民币，注册于上海南翔经济开发区，办公地址在徐汇区华宜大厦。
+              </p>
+              <p>
+                当前，世界正处于"百年未有之大变局"，从大周期来看，西方文明正经历着从十四世纪到二十世纪达到巅峰后的大衰退期，而中华民族则正处于自明朝以来，七百年的上升期。回顾过去一百年，我国自1921年以来，已经经历了生存、发展两大阶段，目前正处于壮大阶段的准备期。对于2030年之后的市场，我们充满信心，所以，未来几年正是黎明前的黑暗，大战前的沉寂，是我们深耕世界政治经济、产业链和企业研究的黄金时期。
+              </p>
+              <p>
+                秉着"大道不孤、众行致远"的理念，我们毅然决定顺应时代潮流，把握时代机遇，组建一支满怀热情、激情、力量和毅力的研究和投资军队，在市场上奋力拼搏，创造属于我们的辉煌！
+              </p>
+            </div>
+          </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">
+            </div>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
+          <div
+              class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
+              data-aos="fade-up" data-aos-delay="100">
+            <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mb-6">
+              <i class="fas fa-rocket text-blue-600 text-2xl"></i>
+            </div>
+            <h3 class="text-xl font-bold text-gray-900 mb-3">技术创新</h3>
+            <p class="text-gray-600">
+              持续投入研发，保持技术领先地位，每年推出至少3项创新解决方案，引领行业发展方向。
+            </p>
+          </div>
+
+          <div
+              class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
+              data-aos="fade-up" data-aos-delay="200">
+            <div class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center mb-6">
+              <i class="fas fa-users text-amber-600 text-2xl"></i>
+            </div>
+            <h3 class="text-xl font-bold text-gray-900 mb-3">客户服务</h3>
+            <p class="text-gray-600">
+              建立完善的客户服务体系，客户满意度保持在95%以上，成为客户首选的数字化转型合作伙伴。
+            </p>
+          </div>
+
+          <div
+              class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
+              data-aos="fade-up" data-aos-delay="300">
+            <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-6">
+              <i class="fas fa-globe text-indigo-600 text-2xl"></i>
+            </div>
+            <h3 class="text-xl font-bold text-gray-900 mb-3">市场拓展</h3>
+            <p class="text-gray-600">
+              三年内将业务覆盖全国主要城市，并逐步拓展国际市场，成为具有全球影响力的数字化服务提供商。
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 发展历程 -->
+    <section class="py-16 md:py-24 bg-gray-50">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="发展历程"
+            subtitle="一路成长"
+            align="center"
+            description="回顾上海酉佰佰发展中的重要里程碑"
+            data-aos="fade-up"
+        />
+
+        <div class="relative mt-16">
+          <!-- 时间线 -->
+          <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gray-200 hidden lg:block"></div>
+
+          <div class="space-y-8 lg:space-y-12 max-w-4xl mx-auto">
+            <div
+                v-for="(milestone, index) in milestones"
+                :key="index"
+                :class="['flex flex-col lg:flex-row items-center', index % 2 === 0 ? 'lg:flex-row-reverse' : '']"
+                :data-aos="index % 2 === 0 ? 'fade-left' : 'fade-right'"
+                :data-aos-delay="index * 100"
+            >
+              <div :class="['lg:w-5/12 p-6', index % 2 === 0 ? 'lg:pr-12' : 'lg:pl-12']">
+                <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
+                  <div class="text-sm font-medium text-amber-600">{{ milestone.date }}</div>
+                  <h3 class="text-xl font-bold mt-2 text-gray-900">{{ milestone.title }}</h3>
+                  <p class="mt-3 text-gray-600">{{ milestone.description }}</p>
+                </div>
+              </div>
+
+              <div class="hidden lg:flex w-2/12 justify-center">
+                <div
+                    class="w-16 h-16 rounded-full bg-white border-4 border-amber-500 flex items-center justify-center relative z-10">
+                  <i :class="milestone.icon" class="text-amber-600 text-xl"></i>
+                </div>
+              </div>
+
+              <div :class="['lg:w-5/12 p-6', index % 2 === 0 ? 'lg:pl-12' : 'lg:pr-12']">
+                <!-- 替换为实际图片 -->
+                <img v-if="milestone.image" :src="`@/assets/images/milestone_${index + 1}.jpg`" alt="里程碑图片"
+                     class="rounded-xl overflow-hidden aspect-video object-cover">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 公司文化 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto text-center">
+          <SectionTitle
+              title="公司文化"
+              subtitle="我们的核心价值观"
+              align="center"
+              data-aos="fade-up"
+          />
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
+
+            <div v-for="(value, index) in culturalValues" :key="index"
+                 class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
+                 data-aos="fade-up" :data-aos-delay="index * 100">
+              <div class="w-14 h-14 rounded-full flex items-center justify-center mb-6" :class="value.iconBgClass">
+                <i :class="value.icon" class="text-2xl"></i>
+              </div>
+              <h3 class="text-xl font-bold text-gray-900 mb-3">{{ value.title }}</h3>
+              <p class="text-gray-600">
+                {{ value.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 业务范围 -->
+    <section class="py-16 md:py-24 bg-gray-50">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="业务范围"
+            subtitle="我们的服务"
+            align="center"
+            data-aos="fade-up"
+        />
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
+          <!-- 替换ServiceCard为自定义组件 -->
+          <div v-for="(service, index) in services" :key="service.id"
+               class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-lg"
+               data-aos="fade-up" :data-aos-delay="index * 100">
+            <div class="w-14 h-14 rounded-full flex items-center justify-center mb-6" :class="service.iconBg">
+              <i :class="service.icon" class="text-2xl"></i>
+            </div>
+            <h3 class="text-xl font-bold text-gray-900 mb-3">{{ service.title }}</h3>
+            <p class="text-gray-600">
+              {{ service.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 团队介绍 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="核心团队"
+            subtitle="专业的团队是我们的基石"
+            align="center"
+            data-aos="fade-up"
+        />
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
+          <TeamMemberCard
+              v-for="(member, index) in teamMembers"
+              :key="member.id"
+              :name="member.name"
+              :position="member.position"
+              :avatar="member.avatar"
+              :description="member.description"
+              :social-links="member.socialLinks"
+              data-aos="fade-up" :data-aos-delay="index * 100"
+          />
+        </div>
+      </div>
+    </section>
+
+    <!-- 联系我们 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="bg-gradient-to-r from-indigo-900 to-blue-900 rounded-2xl overflow-hidden" data-aos="fade-up">
+          <div class="grid grid-cols-1 lg:grid-cols-2">
+            <div class="p-8 md:px-12 md:py-16 lg:py-20">
+              <h2 class="text-3xl font-bold text-white mb-6" data-aos="fade-up" data-aos-delay="100">联系我们</h2>
+              <p class="text-blue-200 mb-8" data-aos="fade-up" data-aos-delay="150">
+                无论您有任何问题或需求，我们都期待与您取得联系。
+                填写下方表单，我们将尽快回复您。
+              </p>
+
+              <form class="space-y-6">
+                <div data-aos="fade-up" data-aos-delay="200">
+                  <label for="name" class="block text-sm font-medium text-blue-200 mb-1">姓名</label>
+                  <input type="text" id="name" name="name"
+                         class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
+                         placeholder="请输入您的姓名">
+                </div>
+
+                <div data-aos="fade-up" data-aos-delay="250">
+                  <label for="email" class="block text-sm font-medium text-blue-200 mb-1">邮箱</label>
+                  <input type="email" id="email" name="email"
+                         class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
+                         placeholder="请输入您的邮箱">
+                </div>
+
+                <div data-aos="fade-up" data-aos-delay="300">
+                  <label for="phone" class="block text-sm font-medium text-blue-200 mb-1">电话</label>
+                  <input type="tel" id="phone" name="phone"
+                         class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
+                         placeholder="请输入您的电话">
+                </div>
+
+                <div data-aos="fade-up" data-aos-delay="350">
+                  <label for="message" class="block text-sm font-medium text-blue-200 mb-1">留言内容</label>
+                  <textarea id="message" name="message" rows="4"
+                            class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
+                            placeholder="请输入您的留言内容"></textarea>
+                </div>
+
+                <button type="submit"
+                        class="bg-white text-blue-900 hover:bg-blue-200 transition-colors font-medium py-2 px-6 rounded-lg flex items-center"
+                        data-aos="fade-up" data-aos-delay="400">
+                  <i class="fas fa-paper-plane mr-2"></i> 提交
+                </button>
+              </form>
+            </div>
+
+            <div class="relative h-64 lg:h-auto">
+
+              <img src="../assets/images/join0001.jpeg" alt="联系我们"
+                   class="absolute inset-0 w-full h-full object-cover">
+              <div class="absolute inset-0 bg-blue-900/50"></div>
+              <div class="absolute inset-0 flex flex-col justify-center p-8 md:px-12 md:py-16 lg:py-20 text-white">
+                <div class="mb-8" data-aos="fade-up" data-aos-delay="100">
+                  <h3 class="text-xl font-bold mb-4">公司地址</h3>
+                  <p class="text-blue-200">上海市浦东新区张江高科技园区博云路2号浦软大厦</p>
+                </div>
+
+                <div class="mb-8" data-aos="fade-up" data-aos-delay="150">
+                  <h3 class="text-xl font-bold mb-4">联系方式</h3>
+                  <div class="space-y-3">
+                    <div class="flex items-center">
+                      <i class="fas fa-phone mr-3 text-blue-300"></i>
+                      <span>400-888-9999</span>
+                    </div>
+                    <div class="flex items-center">
+                      <i class="fas fa-envelope mr-3 text-blue-300"></i>
+                      <span>info@shyoubai.com</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div data-aos="fade-up" data-aos-delay="200">
+                  <h3 class="text-xl font-bold mb-4">工作时间</h3>
+                  <p class="text-blue-200">周一至周五: 9:00 - 18:00</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import SectionTitle from '@/components/ui/SectionTitle.vue'
+import Card from '@/components/ui/Card.vue'
+import Component from '@/components/ui/Company.vue'
+import TeamMemberCard from '@/components/ui/TeamMember.vue'
+
+const milestones = [
+  {
+    date: '2018年3月',
+    title: '公司创立',
+    description: '在上海南翔经济开发区正式注册成立，实缴资本5000万元人民币',
+    icon: 'fas fa-building'
+  },
+  {
+    date: '2019年',
+    title: '战略布局',
+    description: '完成初期团队组建，确立世界政治经济与产业链研究为核心方向',
+    icon: 'fas fa-chess'
+  },
+  {
+    date: '2020-2022年',
+    title: '深耕研究',
+    description: '建立完整的研究体系，在全球宏观经济和产业升级领域形成专业洞见',
+    icon: 'fas fa-search-dollar'
+  },
+  {
+    date: '2023年',
+    title: '投资布局',
+    description: '基于研究成果启动战略性投资，把握百年变局中的历史性机遇',
+    icon: 'fas fa-chart-line'
+  },
+  {
+    date: '2025年(预期)',
+    title: '规模扩张',
+    description: '研究团队突破百人规模，形成具有国际影响力的研究智库',
+    icon: 'fas fa-expand'
+  },
+  {
+    date: '2030年(愿景)',
+    title: '战略收获期',
+    description: '实现研究成果与投资回报的双丰收，成为行业领军机构',
+    icon: 'fas fa-trophy'
+  }
+]
+
+const culturalValues = [
+  {
+    title: '大道不孤',
+    icon: 'fas fa-mountain',
+    description: '秉持历史发展规律，把握文明兴替大周期，做时代趋势的同行者',
+    iconBgClass: 'bg-blue-50 text-blue-600'
+  },
+  {
+    title: '深研致远',
+    icon: 'fas fa-microscope',
+    description: '深耕世界政治经济研究，以专业洞见创造长期价值',
+    iconBgClass: 'bg-emerald-50 text-emerald-600'
+  },
+  {
+    title: '众行至远',
+    icon: 'fas fa-people-group',
+    description: '汇聚志同道合者，构建研究投资共同体，共享发展成果',
+    iconBgClass: 'bg-purple-50 text-purple-600'
+  },
+  {
+    title: '韧性成长',
+    icon: 'fas fa-oak-leaf',
+    description: '保持战略定力，在周期波动中实现稳健持续发展',
+    iconBgClass: 'bg-amber-50 text-amber-600'
+  },
+  {
+    title: '家国情怀',
+    icon: 'fas fa-landmark',
+    description: '将个人发展融入民族复兴，以专业能力服务国家战略',
+    iconBgClass: 'bg-red-50 text-red-600'
+  }
+]
+
+/*const services = [
+  {
+    id: 1,
+    title: '数字化战略咨询',
+    description: '基于企业现状和未来发展目标，制定全面的数字化转型战略规划',
+    icon: 'fas fa-chart-line',
+    iconBg: 'bg-blue-50 text-blue-600'
+  },
+  {
+    id: 2,
+    title: '企业应用开发',
+    description: '定制化企业管理系统、移动应用和Web应用开发，提升工作效率',
+    icon: 'fas fa-code',
+    iconBg: 'bg-amber-50 text-amber-600'
+  },
+  {
+    id: 3,
+    title: '数据智能分析',
+    description: '基于大数据和AI技术，提供数据分析、商业智能和预测模型服务',
+    icon: 'fas fa-database',
+    iconBg: 'bg-indigo-50 text-indigo-600'
+  },
+  {
+    id: 4,
+    title: '云计算服务',
+    description: '提供云基础设施建设、迁移和管理服务，降低IT成本，提升灵活性',
+    icon: 'fas fa-cloud',
+    iconBg: 'bg-green-50 text-green-600'
+  },
+  {
+    id: 5,
+    title: '用户体验设计',
+    description: '专注于产品界面设计、交互设计和用户体验优化，提升产品竞争力',
+    icon: 'fas fa-paint-brush',
+    iconBg: 'bg-purple-50 text-purple-600'
+  },
+  {
+    id: 6,
+    title: 'IT运维服务',
+    description: '提供全方位的IT基础设施运维和管理服务，保障系统稳定运行',
+    icon: 'fas fa-cogs',
+    iconBg: 'bg-red-50 text-red-600'
+  },
+]*/
+const services = [
+  {
+    id: 1,
+    title: '行业信息咨询',
+    description: '提供深度行业分析报告、竞争格局研究和市场进入策略咨询',
+    icon: 'fas fa-chart-pie',
+    iconBg: 'bg-blue-50 text-blue-600'
+  },
+  {
+    id: 2,
+    title: '市场调查与分析',
+    description: '执行专业的定量与定性市场调研，提供消费者洞察和商业决策支持',
+    icon: 'fas fa-search-dollar',
+    iconBg: 'bg-amber-50 text-amber-600'
+  },
+  {
+    id: 3,
+    title: '社会经济咨询',
+    description: '开展区域经济研究、政策影响评估和社会发展趋势分析',
+    icon: 'fas fa-landmark',
+    iconBg: 'bg-indigo-50 text-indigo-600'
+  },
+  {
+    id: 4,
+    title: '商业数据处理',
+    description: '提供数据清洗、统计分析、可视化呈现等全流程数据服务',
+    icon: 'fas fa-database',
+    iconBg: 'bg-green-50 text-green-600'
+  },
+  {
+    id: 5,
+    title: '企业管理咨询',
+    description: '涵盖战略规划、组织优化、运营提升等全方位管理解决方案',
+    icon: 'fas fa-briefcase',
+    iconBg: 'bg-purple-50 text-purple-600'
+  },
+  {
+    id: 6,
+    title: '商业策划服务',
+    description: '提供项目可行性研究、商业计划书编制及投资决策支持',
+    icon: 'fas fa-lightbulb',
+    iconBg: 'bg-red-50 text-red-600'
+  },
+  {
+    id: 7,
+    title: '政策研究咨询',
+    description: '开展政策解读、合规性分析和政策红利应用方案设计',
+    icon: 'fas fa-file-contract',
+    iconBg: 'bg-teal-50 text-teal-600'
+  },
+  {
+    id: 8,
+    title: '投资决策咨询',
+    description: '提供投资项目评估、风险分析和收益预测专业服务',
+    icon: 'fas fa-coins',
+    iconBg: 'bg-orange-50 text-orange-600'
+  }
+]
+
+const teamMembers = [
+  {
+    id: 1,
+    name: '张明',
+    position: '创始人兼CEO',
+    avatar: '@/assets/images/team/member1.jpg',
+    description: '拥有20年IT行业经验，曾任职于多家知名科技企业，专注于企业数字化转型战略',
+    socialLinks: [
+      {icon: 'fab fa-linkedin', url: '#'},
+      {icon: 'fab fa-twitter', url: '#'}
+    ]
+  },
+  {
+    id: 2,
+    name: '李婷',
+    position: '技术总监',
+    avatar: '@/assets/images/team/member2.jpg',
+    description: '15年软件开发和团队管理经验，精通云计算、大数据和人工智能技术',
+    socialLinks: [
+      {icon: 'fab fa-github', url: '#'},
+      {icon: 'fab fa-linkedin', url: '#'}
+    ]
+  },
+  {
+    id: 3,
+    name: '王强',
+    position: '销售总监',
+    avatar: '@/assets/images/team/member3.jpg',
+    description: '10年企业服务销售经验，擅长为客户提供量身定制的数字化解决方案',
+    socialLinks: [
+      {icon: 'fab fa-linkedin', url: '#'},
+      {icon: 'fab fa-weixin', url: '#'}
+    ]
+  },
+  {
+    id: 4,
+    name: '陈静',
+    position: '设计总监',
+    avatar: '@/assets/images/team/member4.jpg',
+    description: '8年UI/UX设计经验，曾主导多个大型企业应用和消费产品的设计工作',
+    socialLinks: [
+      {icon: 'fab fa-dribbble', url: '#'},
+      {icon: 'fab fa-behance', url: '#'}
+    ]
+  },
+]
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/views/Careers.vue
+++ b/src/views/Careers.vue
@@ -0,0 +1,402 @@
+<template>
+  <div>
+    <!-- 页面标题 -->
+    <div class="pt-32 pb-20 bg-gradient-to-r from-indigo-700 to-blue-900">
+      <div class="container mx-auto px-4">
+        <div class="text-center">
+          <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">加入我们</h1>
+          <p class="text-xl text-blue-300 max-w-2xl mx-auto">
+            与优秀团队一起成长，创造改变世界的价值
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 职位列表 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div class="lg:col-span-1">
+            <SectionTitle
+                title="开放职位"
+                subtitle="寻找卓越人才"
+            />
+
+            <div class="bg-gray-50 rounded-xl p-6 mt-10">
+              <h3 class="font-medium text-gray-900 mb-4">职位筛选</h3>
+              <div class="space-y-3">
+                <div class="flex items-center">
+                  <input id="filter-all" type="radio" name="job-type" class="h-4 w-4 text-indigo-600" checked>
+                  <label for="filter-all" class="ml-2 text-gray-700">所有职位</label>
+                </div>
+                <div class="flex items-center">
+                  <input id="filter-tech" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
+                  <label for="filter-tech" class="ml-2 text-gray-700">技术类</label>
+                </div>
+                <div class="flex items-center">
+                  <input id="filter-product" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
+                  <label for="filter-product" class="ml-2 text-gray-700">产品类</label>
+                </div>
+                <div class="flex items-center">
+                  <input id="filter-design" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
+                  <label for="filter-design" class="ml-2 text-gray-700">设计类</label>
+                </div>
+                <div class="flex items-center">
+                  <input id="filter-business" type="radio" name="job-type" class="h-4 w-4 text-indigo-600">
+                  <label for="filter-business" class="ml-2 text-gray-700">市场类</label>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-amber-50 rounded-xl p-6 mt-8">
+              <h3 class="font-medium text-gray-900 mb-4">加入我们的优势</h3>
+              <ul class="space-y-3">
+                <li v-for="(benefit, index) in benefits" :key="index" class="flex items-start">
+                  <i class="fas fa-check-circle text-amber-600 mt-1 mr-2"></i>
+                  <span class="text-gray-700">{{ benefit }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="lg:col-span-2">
+            <div class="flex items-center justify-between mb-8">
+              <h2 class="text-2xl font-bold text-gray-900">
+                <span class="text-amber-600">12</span> 个开放职位
+              </h2>
+              <div class="relative w-64">
+                <input type="text" placeholder="搜索职位..." class="w-full pl-10 pr-4 py-2 bg-gray-50 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-transparent">
+                <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
+              </div>
+            </div>
+
+            <div class="space-y-6">
+              <div
+                  v-for="(job, index) in jobs"
+                  :key="index"
+                  class="bg-white rounded-xl shadow-sm border border-gray-200 hover:border-indigo-200 hover:shadow-md transition-all duration-300"
+              >
+                <div class="p-6">
+                  <div class="flex flex-col md:flex-row justify-between md:items-center">
+                    <div>
+                      <h3 class="text-xl font-bold text-gray-900">{{ job.title }}</h3>
+                      <div class="mt-1 flex flex-wrap gap-2">
+                        <span class="text-sm bg-blue-50 text-blue-700 px-3 py-1 rounded-full">{{ job.department }}</span>
+                        <span class="text-sm bg-amber-50 text-amber-700 px-3 py-1 rounded-full">{{ job.type }}</span>
+                        <span class="text-sm bg-gray-50 text-gray-700 px-3 py-1 rounded-full">{{ job.location }}</span>
+                      </div>
+                    </div>
+                    <button
+                        class="mt-4 md:mt-0 px-5 py-2.5 text-white rounded-lg font-medium transition-colors duration-300"
+                        :class="job.featured ? 'bg-amber-600 hover:bg-amber-700' : 'bg-indigo-600 hover:bg-indigo-700'"
+                    >
+                      立即申请
+                    </button>
+                  </div>
+
+                  <div class="mt-6 flex items-center text-sm text-gray-500">
+                    <span>发布日期: {{ job.date }}</span>
+                    <span class="mx-2">•</span>
+                    <span>{{ job.salary }}</span>
+                  </div>
+                </div>
+
+                <div class="border-t border-gray-100 px-6 py-4 flex justify-between items-center">
+                  <div class="flex items-center">
+                    <div class="w-8 h-8 rounded-md bg-indigo-50 flex items-center justify-center text-indigo-600">
+                      <i class="fas fa-briefcase"></i>
+                    </div>
+                    <span class="ml-2 text-sm text-gray-600">{{ job.experience }}经验</span>
+                  </div>
+
+                  <a href="#" class="text-indigo-600 hover:text-indigo-800 flex items-center text-sm">
+                    查看详情
+                    <i class="fas fa-arrow-right ml-1 text-xs"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 招聘流程 -->
+    <section class="py-16 md:py-24 bg-gray-50">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="招聘流程"
+            subtitle="透明高效"
+            description="我们简化招聘流程，让候选人拥有清晰明确的体验"
+            align="center"
+        />
+
+        <div class="mt-16">
+          <div class="flex justify-center">
+            <div class="relative">
+              <!-- 流程线 -->
+              <div class="absolute top-14 left-0 right-0 h-1 bg-gray-200 mx-auto z-0 w-4/5" style="left: 10%;"></div>
+
+              <div class="grid grid-cols-1 md:grid-cols-5 gap-8 relative z-10">
+                <div v-for="(step, index) in recruitmentSteps" :key="index" class="text-center">
+                  <div class="w-20 h-20 rounded-full flex items-center justify-center mx-auto text-xl bg-white border-4 border-gray-50 shadow-md mb-4"
+                       :class="index === 0 ? 'text-blue-500 border-blue-100' :
+                              index === 1 ? 'text-amber-500 border-amber-100' :
+                              index === 2 ? 'text-green-500 border-green-100' :
+                              index === 3 ? 'text-purple-500 border-purple-100' :
+                              'text-indigo-500 border-indigo-100'">
+                    <i :class="step.icon"></i>
+                  </div>
+                  <h3 class="font-bold text-lg text-gray-900">{{ step.title }}</h3>
+                  <p class="text-gray-600 text-sm mt-2">{{ step.description }}</p>
+                  <div class="text-xs mt-2 font-medium text-gray-500">
+                    {{ step.duration }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 员工福利 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="员工福利"
+            subtitle="关怀每一位伙伴"
+            description="我们为员工提供全方位的福利保障和贴心关怀"
+            align="center"
+        />
+
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
+          <div v-for="(benefit, index) in employeeBenefits" :key="index">
+            <Card no-border hover-effect class="h-full">
+              <template #icon>
+                <div class="w-16 h-16 rounded-lg mx-auto mb-6 flex items-center justify-center text-2xl"
+                     :class="benefit.iconBgClass">
+                  <i :class="benefit.icon"></i>
+                </div>
+              </template>
+              <h3 class="text-lg font-bold text-center text-gray-900">{{ benefit.title }}</h3>
+              <p class="text-center text-gray-600 mt-2">
+                {{ benefit.description }}
+              </p>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 校招计划 -->
+    <section class="py-16 md:py-24 bg-gradient-to-r from-indigo-900 to-blue-900 text-white">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto">
+          <div class="flex flex-col md:flex-row items-center">
+            <div class="md:w-2/5 mb-10 md:mb-0">
+              <div class="bg-gradient-to-br from-blue-500 to-indigo-600 p-10 rounded-2xl flex items-center justify-center">
+                <i class="fas fa-user-graduate text-6xl text-white opacity-40"></i>
+              </div>
+            </div>
+
+            <div class="md:w-3/5 md:pl-12">
+              <SectionTitle
+                  title="校园招聘计划"
+                  subtitle="新生力量"
+                  align="left"
+                  class="text-white"
+              />
+
+              <p class="text-xl text-blue-200 mb-6">
+                我们为应届毕业生和在校学生提供专属的职业发展计划
+              </p>
+
+              <ul class="space-y-4 mb-8">
+                <li v-for="(item, index) in campusPlan" :key="index" class="flex items-start">
+                  <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs mr-3">
+                    {{ index+1 }}
+                  </div>
+                  <span class="flex-1">{{ item }}</span>
+                </li>
+              </ul>
+
+              <router-link
+                  to="/campus"
+                  class="inline-flex items-center px-6 py-3 bg-white text-indigo-900 rounded-lg font-medium hover:bg-gray-100 transition-colors"
+              >
+                了解校招计划
+                <i class="fas fa-arrow-right ml-2"></i>
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import SectionTitle from '@/components/ui/SectionTitle.vue'
+import Card from '@/components/ui/Card.vue'
+
+const benefits = [
+  '富有竞争力的薪资待遇',
+  '全面的福利保障体系',
+  '灵活的工作时间和地点',
+  '专业的职业发展支持',
+  '多元包容的企业文化',
+  '丰厚的绩效奖金和股票期权'
+]
+
+const jobs = [
+  {
+    title: '高级前端开发工程师',
+    department: '技术部',
+    type: '全职',
+    location: '上海',
+    date: '2023-07-10',
+    salary: '25K-45K',
+    experience: '5年以上',
+    featured: true
+  },
+  {
+    title: 'UI/UX设计师',
+    department: '设计部',
+    type: '全职',
+    location: '上海',
+    date: '2023-07-12',
+    salary: '18K-30K',
+    experience: '3年以上',
+    featured: false
+  },
+  {
+    title: '后端开发工程师 (Java方向)',
+    department: '技术部',
+    type: '全职',
+    location: '上海',
+    date: '2023-07-08',
+    salary: '20K-40K',
+    experience: '3年以上',
+    featured: false
+  },
+  {
+    title: '产品经理',
+    department: '产品部',
+    type: '全职',
+    location: '北京',
+    date: '2023-07-05',
+    salary: '25K-40K',
+    experience: '5年以上',
+    featured: true
+  }
+]
+
+const recruitmentSteps = [
+  {
+    icon: 'fas fa-file-alt',
+    title: '提交申请',
+    description: '在线提交您的简历',
+    duration: '1-3个工作日'
+  },
+  {
+    icon: 'fas fa-phone-alt',
+    title: '简历评估',
+    description: 'HR电话初步沟通',
+    duration: '2-4个工作日'
+  },
+  {
+    icon: 'fas fa-laptop-code',
+    title: '技术面试',
+    description: '专业能力技术评估',
+    duration: '1-2次面试'
+  },
+  {
+    icon: 'fas fa-user-friends',
+    title: '经理面试',
+    description: '团队文化和价值观评估',
+    duration: '1次面试'
+  },
+  {
+    icon: 'fas fa-award',
+    title: '录用通知',
+    description: '发放正式录用offer',
+    duration: '1-2个工作日'
+  }
+]
+
+const employeeBenefits = [
+  {
+    title: '薪酬福利',
+    icon: 'fas fa-money-bill-wave',
+    description: '有竞争力的薪资及绩效奖金',
+    iconBgClass: 'bg-green-100 text-green-600'
+  },
+  {
+    title: '五险一金',
+    icon: 'fas fa-shield-alt',
+    description: '全面的社会保障和住房公积金',
+    iconBgClass: 'bg-blue-100 text-blue-600'
+  },
+  {
+    title: '带薪休假',
+    icon: 'fas fa-umbrella-beach',
+    description: '灵活的年假、病假及各类假期',
+    iconBgClass: 'bg-amber-100 text-amber-600'
+  },
+  {
+    title: '健康关怀',
+    icon: 'fas fa-heartbeat',
+    description: '年度体检及补充商业保险',
+    iconBgClass: 'bg-red-100 text-red-600'
+  },
+  {
+    title: '学习发展',
+    icon: 'fas fa-graduation-cap',
+    description: '专业培训与个人发展基金',
+    iconBgClass: 'bg-purple-100 text-purple-600'
+  },
+  {
+    title: '弹性工作',
+    icon: 'fas fa-laptop-house',
+    description: '灵活工作时间及远程办公选项',
+    iconBgClass: 'bg-indigo-100 text-indigo-600'
+  },
+  {
+    title: '团队活动',
+    icon: 'fas fa-users',
+    description: '丰富多彩的团队建设活动',
+    iconBgClass: 'bg-pink-100 text-pink-600'
+  },
+  {
+    title: '节日福利',
+    icon: 'fas fa-gift',
+    description: '节日礼品及员工关怀礼包',
+    iconBgClass: 'bg-yellow-100 text-yellow-600'
+  }
+]
+
+const campusPlan = [
+  '面向应届毕业生的专项培养计划',
+  '技术大牛导师一对一指导',
+  '轮岗实践了解公司业务',
+  '快速成长通道和晋升机会',
+  '应届生专属落户支持',
+  '人才公寓或住房补贴'
+]
+</script>
+
+<style scoped>
+/* 校招计划中的SectionTitle需要调整文字颜色 */
+.text-white ::v-deep .section-title {
+  color: white;
+}
+
+.text-white ::v-deep .section-subtitle {
+  color: #93c5fd;
+}
+
+.text-white ::v-deep .section-divider {
+  background: rgba(255,255,255,0.3);
+}
+</style>
--- a/src/views/Features.vue
+++ b/src/views/Features.vue
@@ -0,0 +1,542 @@
+<template>
+  <div>
+    <!-- 页面标题 - 使用公司文化背景图 -->
+    <div
+        class="relative pt-32 pb-20 bg-gradient-to-r from-blue-800 to-indigo-900"
+        data-aos="fade-down"
+        data-aos-duration="800"
+    >
+      <!-- 背景图片 -->
+      <div class="absolute inset-0 z-0">
+        <img
+            src="../assets/images/features-home.png"
+            alt="公司文化背景图"
+            class="w-full h-full object-cover"
+        />
+      </div>
+
+      <div class="container mx-auto px-4 relative z-10">
+        <div class="text-center">
+          <h1
+              class="text-4xl md:text-5xl font-bold text-white mb-4"
+              data-aos="fade-up"
+              data-aos-delay="200"
+          >
+            公司文化
+          </h1>
+          <p
+              class="text-xl text-blue-100 max-w-2xl mx-auto"
+              data-aos="fade-up"
+              data-aos-delay="300"
+          >
+            以学习驱动成长，以渐进实现卓越
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 学习文化部分 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="学习文化"
+            subtitle="研究与投资的持久战"
+            description="保持学习，不断思考是持久战的基础"
+            align="center"
+            data-aos="fade-up"
+        />
+
+        <div class="grid md:grid-cols-2 gap-12 mt-16">
+          <div class="flex flex-col justify-center">
+            <div class="space-y-6">
+              <div
+                  class="flex items-start"
+                  data-aos="fade-right"
+                  data-aos-delay="100"
+              >
+                <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
+                  <i class="fas fa-book-open text-xl"></i>
+                </div>
+                <div>
+                  <h3 class="text-xl font-semibold text-gray-800 mb-2">日常学习机制</h3>
+                  <p class="text-gray-600">
+                    我们建立每日晨读、每周分享、每月专题研讨的学习体系，营造持续学习氛围，让知识更新成为团队习惯。
+                  </p>
+                </div>
+              </div>
+
+              <div
+                  class="flex items-start"
+                  data-aos="fade-right"
+                  data-aos-delay="200"
+              >
+                <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
+                  <i class="fas fa-user-graduate text-xl"></i>
+                </div>
+                <div>
+                  <h3 class="text-xl font-semibold text-gray-800 mb-2">深度入职培训</h3>
+                  <p class="text-gray-600">
+                    新员工将接受为期2个月的系统培训，涵盖行业研究方法、宏观分析框架、企业评估模型等专业内容，建立扎实的知识基础。
+                  </p>
+                </div>
+              </div>
+
+              <div
+                  class="flex items-start"
+                  data-aos="fade-right"
+                  data-aos-delay="300"
+              >
+                <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
+                  <i class="fas fa-lightbulb text-xl"></i>
+                </div>
+                <div>
+                  <h3 class="text-xl font-semibold text-gray-800 mb-2">知识共享平台</h3>
+                  <p class="text-gray-600">
+                    建立内部知识库，汇集行业研究报告、项目复盘总结、方法论工具包等资源，实现知识资产的有效沉淀与共享。
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+              class="relative rounded-xl overflow-hidden shadow-lg"
+              data-aos="fade-left"
+              data-aos-delay="400"
+          >
+            <div class="h-full bg-gradient-to-br from-blue-50 to-indigo-50 p-8 flex items-center">
+              <div class="text-center w-full">
+                <div class="mb-8 flex justify-center">
+                  <div class="w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
+                    <i class="fas fa-brain text-3xl"></i>
+                  </div>
+                </div>
+                <h3 class="text-2xl font-bold text-gray-800 mb-4">学习型组织</h3>
+                <p class="text-gray-600 max-w-md mx-auto">
+                  我们相信持续学习是保持竞争力的核心，通过系统化的知识管理和培训体系，打造深度思考能力，为长期发展蓄能。
+                </p>
+                <div class="mt-8">
+                  <div class="inline-flex items-center px-4 py-2 bg-white border border-blue-200 text-blue-600 rounded-full text-sm font-medium">
+                    <i class="fas fa-book mr-2"></i>
+                    查看学习资源
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 团队理念部分：大道不孤、众行致远 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="团队理念"
+            subtitle="大道不孤，众行致远"
+            description="在酉佰佰，我们坚信真正的成功来自团队协作与共同成长"
+            align="center"
+            data-aos="fade-up"
+        />
+
+        <div
+            class="bg-white rounded-2xl shadow-xl overflow-hidden mt-16"
+            data-aos="fade-up"
+            data-aos-delay="200"
+        >
+          <div class="grid md:grid-cols-2">
+            <!-- 左侧：理念详情 -->
+            <div class="p-8 md:p-12 bg-gradient-to-br from-blue-50 to-indigo-50">
+              <div class="flex items-center mb-8">
+                <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
+                  <i class="fas fa-hands-helping text-2xl"></i>
+                </div>
+                <h2 class="text-3xl font-bold text-gray-800">大道不孤，众行致远</h2>
+              </div>
+
+              <p class="text-gray-600 text-lg mb-8">
+                在酉佰，我们坚信真正的成功来自团队协作与共同成长。个人的力量有限，但团队的力量无穷。
+              </p>
+
+              <div class="space-y-6">
+                <div
+                    class="flex items-start"
+                    data-aos="fade-right"
+                    data-aos-delay="300"
+                >
+                  <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
+                    <i class="fas fa-users"></i>
+                  </div>
+                  <div>
+                    <h3 class="text-xl font-semibold text-gray-800 mb-1">协作共赢</h3>
+                    <p class="text-gray-600">
+                      打破部门壁垒，建立跨职能协作机制，共享知识与资源，实现1+1>2的协同效应。
+                    </p>
+                  </div>
+                </div>
+
+                <div
+                    class="flex items-start"
+                    data-aos="fade-right"
+                    data-aos-delay="400"
+                >
+                  <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
+                    <i class="fas fa-hands"></i>
+                  </div>
+                  <div>
+                    <h3 class="text-xl font-semibold text-gray-800 mb-1">互助成长</h3>
+                    <p class="text-gray-600">
+                      建立导师制度与伙伴计划，经验丰富的成员带领新人成长，形成互帮互助的学习网络。
+                    </p>
+                  </div>
+                </div>
+
+                <div
+                    class="flex items-start"
+                    data-aos="fade-right"
+                    data-aos-delay="500"
+                >
+                  <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4 flex-shrink-0">
+                    <i class="fas fa-road"></i>
+                  </div>
+                  <div>
+                    <h3 class="text-xl font-semibold text-gray-800 mb-1">长远发展</h3>
+                    <p class="text-gray-600">
+                      着眼长期价值而非短期利益，与客户、伙伴建立持久合作关系，共同创造可持续的未来。
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 右侧：视觉展示 -->
+            <div class="p-8 md:p-12 bg-gradient-to-br from-indigo-600 to-blue-800 flex items-center justify-center">
+              <div class="text-center max-w-md">
+                <div class="mb-8">
+                  <i class="fas fa-people-carry text-5xl text-white opacity-90"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-white mb-4">团队协作的力量</h3>
+                <p class="text-blue-100 mb-8">
+                  共同的目标、共享的价值观、协作的智慧，让我们在复杂多变的环境中稳步前行。
+                </p>
+
+                <div class="relative h-40 mx-auto">
+                  <svg viewBox="0 0 500 200" class="w-full h-40">
+                    <!-- 团队协作路径 -->
+                    <path
+                        d="M50,150 C150,50 200,100 250,50 C300,100 350,50 450,150"
+                        stroke="#c7d2fe"
+                        stroke-width="4"
+                        fill="none"
+                        stroke-dasharray="1000"
+                        class="path-animation"
+                    />
+
+                    <!-- 团队成员 -->
+                    <g transform="translate(50,150)">
+                      <circle cx="0" cy="0" r="8" fill="#818cf8" />
+                      <text x="12" y="5" fill="#c7d2fe" font-size="12">技术</text>
+                    </g>
+
+                    <g transform="translate(150,50)">
+                      <circle cx="0" cy="0" r="8" fill="#60a5fa" />
+                      <text x="12" y="5" fill="#c7d2fe" font-size="12">研究</text>
+                    </g>
+
+                    <g transform="translate(250,50)">
+                      <circle cx="0" cy="0" r="8" fill="#38bdf8" />
+                      <text x="12" y="5" fill="#c7d2fe" font-size="12">咨询</text>
+                    </g>
+
+                    <g transform="translate(350,50)">
+                      <circle cx="0" cy="0" r="8" fill="#22d3ee" />
+                      <text x="12" y="5" fill="#c7d2fe" font-size="12">客户</text>
+                    </g>
+
+                    <g transform="translate(450,150)">
+                      <circle cx="0" cy="0" r="8" fill="#2dd4bf" />
+                      <text x="12" y="5" fill="#c7d2fe" font-size="12">成功</text>
+                    </g>
+                  </svg>
+                </div>
+
+                <p class="text-blue-100 text-sm mt-6">
+                  技术、研究、咨询与客户共同协作，共创成功之路
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 循序渐进部分 -->
+    <section class="py-16 md:py-24 bg-gradient-to-r from-amber-50 to-amber-100">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="循序渐进"
+            subtitle="顺其自然，脚踏实地"
+            description="不盲目追求无用的结果，一步一步向前迈进"
+            align="center"
+            data-aos="fade-up"
+        />
+
+        <div
+            class="max-w-4xl mx-auto mt-16"
+            data-aos="fade-up"
+            data-aos-delay="200"
+        >
+          <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
+            <div class="grid md:grid-cols-5">
+              <div class="md:col-span-3 p-8 md:p-12">
+                <h2 class="text-2xl font-bold text-gray-900 mb-6">我们的渐进式发展理念</h2>
+
+                <div class="space-y-6">
+                  <div
+                      class="flex"
+                      data-aos="fade-right"
+                      data-aos-delay="300"
+                  >
+                    <div class="flex-shrink-0">
+                      <div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600">
+                        <i class="fas fa-seedling"></i>
+                      </div>
+                    </div>
+                    <div class="ml-4">
+                      <h3 class="text-lg font-medium text-gray-900">自然生长阶段</h3>
+                      <p class="text-gray-600 mt-1">
+                        在公司前期探索阶段，我们遵循业务自然发展规律，不揠苗助长，
+                        在探索中找准定位和发展方向。
+                      </p>
+                    </div>
+                  </div>
+
+                  <div
+                      class="flex"
+                      data-aos="fade-right"
+                      data-aos-delay="400"
+                  >
+                    <div class="flex-shrink-0">
+                      <div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600">
+                        <i class="fas fa-stairs"></i>
+                      </div>
+                    </div>
+                    <div class="ml-4">
+                      <h3 class="text-lg font-medium text-gray-900">稳步前进阶段</h3>
+                      <p class="text-gray-600 mt-1">
+                        在明确方向后，我们有规律、有效率、有目标地前进，制定切实可行的阶段目标，
+                        一步一个脚印地实现突破。
+                      </p>
+                    </div>
+                  </div>
+
+                  <div
+                      class="flex"
+                      data-aos="fade-right"
+                      data-aos-delay="500"
+                  >
+                    <div class="flex-shrink-0">
+                      <div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600">
+                        <i class="fas fa-mountain"></i>
+                      </div>
+                    </div>
+                    <div class="ml-4">
+                      <h3 class="text-lg font-medium text-gray-900">长期价值导向</h3>
+                      <p class="text-gray-600 mt-1">
+                        不追求短期利益最大化，专注于创造可持续的长期价值，
+                        通过持续积累实现从量变到质变的飞跃。
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                  class="md:col-span-2 bg-gradient-to-b from-amber-400 to-amber-600 p-8 flex items-center"
+                  data-aos="fade-left"
+                  data-aos-delay="600"
+              >
+                <div class="text-center w-full">
+                  <div class="mb-6">
+                    <i class="fas fa-chart-line text-4xl text-white opacity-80"></i>
+                  </div>
+                  <h3 class="text-xl font-bold text-white mb-2">渐进式发展曲线</h3>
+                  <p class="text-amber-100 mb-6">持续积累，阶梯式成长</p>
+
+                  <div class="relative h-32">
+                    <div class="absolute bottom-0 left-0 right-0">
+                      <!-- 渐进式增长曲线示意 -->
+                      <svg viewBox="0 0 200 100" class="w-full h-32">
+                        <path
+                            d="M0,80 C40,60 80,40 120,30 C160,20 200,10 200,10"
+                            stroke="white"
+                            stroke-width="3"
+                            fill="none"
+                            class="path-animation"
+                        />
+                        <circle cx="0" cy="80" r="4" fill="white" />
+                        <circle cx="40" cy="60" r="4" fill="white" />
+                        <circle cx="80" cy="40" r="4" fill="white" />
+                        <circle cx="120" cy="30" r="4" fill="white" />
+                        <circle cx="160" cy="20" r="4" fill="white" />
+                        <circle cx="200" cy="10" r="4" fill="white" />
+                      </svg>
+                    </div>
+                  </div>
+
+                  <p class="text-amber-100 text-sm mt-4">
+                    每个阶段都是下一阶段的坚实基础
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 文化实践案例 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="文化实践"
+            subtitle="理念落地实例"
+            description="学习与渐进理念在实际工作中的体现"
+            align="center"
+            data-aos="fade-up"
+        />
+
+        <div
+            class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16"
+            data-aos="fade-up"
+            data-aos-delay="200"
+        >
+          <div
+              class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
+              data-aos="zoom-in"
+              data-aos-delay="300"
+          >
+            <div class="p-6">
+              <div class="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600 mb-4">
+                <i class="fas fa-users"></i>
+              </div>
+              <h3 class="text-xl font-bold text-gray-800 mb-3">新人培养计划</h3>
+              <p class="text-gray-600 mb-4">
+                为期3个月的阶梯式培训体系，从方法论到实践，逐步培养行业研究能力
+              </p>
+              <div class="flex items-center text-sm text-gray-500">
+                <i class="far fa-clock mr-2"></i>
+                平均培养周期：90天
+              </div>
+            </div>
+          </div>
+
+          <div
+              class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
+              data-aos="zoom-in"
+              data-aos-delay="400"
+          >
+            <div class="p-6">
+              <div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-600 mb-4">
+                <i class="fas fa-tasks"></i>
+              </div>
+              <h3 class="text-xl font-bold text-gray-800 mb-3">项目推进方法</h3>
+              <p class="text-gray-600 mb-4">
+                采用阶段性目标分解，通过小步快跑的方式确保项目高质量交付
+              </p>
+              <div class="flex items-center text-sm text-gray-500">
+                <i class="fas fa-chart-line mr-2"></i>
+                项目成功率提升40%
+              </div>
+            </div>
+          </div>
+
+          <div
+              class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
+              data-aos="zoom-in"
+              data-aos-delay="500"
+          >
+            <div class="p-6">
+              <div class="w-12 h-12 rounded-lg bg-green-50 flex items-center justify-center text-green-600 mb-4">
+                <i class="fas fa-book-reader"></i>
+              </div>
+              <h3 class="text-xl font-bold text-gray-800 mb-3">知识迭代机制</h3>
+              <p class="text-gray-600 mb-4">
+                每季度更新行业研究方法论，通过持续学习保持专业领先优势
+              </p>
+              <div class="flex items-center text-sm text-gray-500">
+                <i class="fas fa-book mr-2"></i>
+                已积累120+份研究文档
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 加入我们 -->
+    <section
+        class="py-16 md:py-24 bg-gradient-to-r from-blue-800 to-indigo-900"
+        data-aos="fade-up"
+    >
+      <div class="container mx-auto px-4">
+        <div
+            class="max-w-3xl mx-auto text-center"
+            data-aos="fade-up"
+            data-aos-delay="200"
+        >
+          <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">加入酉佰佰，共同成长</h2>
+          <p class="text-xl text-blue-200 mb-10">
+            我们正在寻找认同学习文化和渐进理念的伙伴，一起创造长期价值
+          </p>
+
+          <div class="flex flex-col sm:flex-row justify-center gap-4">
+            <router-link
+                to="/careers"
+                class="px-8 py-4 bg-white text-blue-700 font-medium rounded-lg hover:bg-blue-50 transition-colors"
+                data-aos="zoom-in"
+                data-aos-delay="300"
+            >
+              查看职位空缺
+              <i class="fas fa-arrow-right ml-2"></i>
+            </router-link>
+
+            <router-link
+                to="/culture"
+                class="px-8 py-4 bg-transparent border-2 border-white text-white font-medium rounded-lg hover:bg-white/10 transition-colors"
+                data-aos="zoom-in"
+                data-aos-delay="400"
+            >
+              了解更多文化
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import SectionTitle from '@/components/ui/SectionTitle.vue'
+
+// 这里可以添加组件需要的响应式数据或方法
+</script>
+
+<style scoped>
+.path-animation {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: dash 5s linear forwards;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* 背景图片的透明度调整 */
+.absolute img {
+  opacity: 0.65;
+}
+</style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,282 @@
+<template>
+  <div>
+    <!-- 主视觉区域 -->
+    <section class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-blue-50 to-indigo-50">
+      <div class="container mx-auto px-4">
+        <div class="flex flex-col md:flex-row items-center">
+          <div class="md:w-1/2 mb-12 md:mb-0">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
+              引领未来，<br>
+              <span class="text-amber-600">创新</span>无限可能
+            </h1>
+            <p class="text-lg text-gray-700 mb-8 max-w-lg">
+              上海酉佰致力于为企业提供前沿的解决方案，赋能数字化转型，
+              创造可持续的商业价值。
+            </p>
+            <div class="flex flex-wrap gap-4">
+              <router-link
+                  to="/features"
+                  class="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-lg font-medium shadow-md transition-all duration-300 hover:shadow-lg flex items-center"
+              >
+                <span>了解更多</span>
+                <i class="fas fa-arrow-right ml-2 text-xs"></i>
+              </router-link>
+              <button
+                  class="px-6 py-3 bg-white text-indigo-900 border border-indigo-200 rounded-lg font-medium hover:bg-indigo-50 transition-colors flex items-center"
+              >
+                <i class="fas fa-phone-alt mr-2"></i>
+                <span>联系我们</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="md:w-1/2 flex justify-center">
+            <div class="relative">
+              <div class="absolute -top-6 -right-6 w-64 h-64 bg-amber-500 rounded-full opacity-10"></div>
+              <div class="absolute -bottom-6 -left-6 w-72 h-72 bg-indigo-500 rounded-full opacity-10"></div>
+              <div class="relative z-10 rounded-2xl overflow-hidden shadow-xl w-full max-w-md">
+                <!-- 图片占位 -->
+                <div class="bg-gradient-to-br from-indigo-600 to-indigo-900 border-2 border-dashed rounded-xl w-full h-96 p-6 flex items-center justify-center">
+                  <div class="text-center text-white">
+                    <i class="fas fa-chart-line text-5xl mb-4 opacity-70"></i>
+                    <p class="text-xl font-light">企业解决方案展示</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 核心价值 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="我们的核心价值"
+            subtitle="以专业赢得信任"
+            description="我们坚持创新驱动与客户至上的理念，为企业提供专业的数字化转型解决方案"
+            align="center"
+        />
+
+        <div class="grid md:grid-cols-3 gap-8 mt-16">
+          <Card
+              v-for="(value, index) in values"
+              :key="index"
+              :title="value.title"
+              :icon="value.icon"
+          >
+            <p>
+              {{ value.description }}
+            </p>
+            <template #actions>
+              <a
+                  href="#"
+                  class="inline-flex items-center mt-4 font-medium text-amber-600 hover:text-amber-700 transition-colors"
+              >
+                <span>了解详情</span>
+                <i class="fas fa-arrow-right ml-2 text-xs"></i>
+              </a>
+            </template>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- 企业优势 -->
+    <section class="py-16 md:py-24 bg-gray-50">
+      <div class="container mx-auto px-4">
+        <div class="flex flex-col lg:flex-row items-center justify-between">
+          <div class="lg:w-5/12 mb-12 lg:mb-0">
+            <SectionTitle
+                title="为什么选择"
+                subtitle="企业优势"
+                highlight="上海酉佰?"
+            />
+
+            <p class="text-gray-600 mt-6 mb-8">
+              我们拥有多年的行业经验和专业团队，致力于为客户提供全方位的解决方案。
+              凭借独特的技术优势和创新的服务理念，帮助企业实现数字化转型。
+            </p>
+
+            <div class="grid grid-cols-2 gap-4">
+              <div class="bg-white rounded-lg p-4 flex flex-col items-center">
+                <div class="text-3xl font-bold text-indigo-800">12+</div>
+                <div class="text-gray-600">行业经验</div>
+              </div>
+              <div class="bg-white rounded-lg p-4 flex flex-col items-center">
+                <div class="text-3xl font-bold text-indigo-800">200+</div>
+                <div class="text-gray-600">合作企业</div>
+              </div>
+              <div class="bg-white rounded-lg p-4 flex flex-col items-center">
+                <div class="text-3xl font-bold text-indigo-800">50+</div>
+                <div class="text-gray-600">专业团队</div>
+              </div>
+              <div class="bg-white rounded-lg p-4 flex flex-col items-center">
+                <div class="text-3xl font-bold text-indigo-800">98%</div>
+                <div class="text-gray-600">客户满意度</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="lg:w-6/12">
+            <div class="relative">
+              <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full rounded-3xl bg-gradient-to-r from-amber-400/10 to-blue-400/10 rotate-12"></div>
+              <div class="relative bg-white rounded-2xl overflow-hidden shadow-lg flex">
+                <div class="hidden lg:block w-1/3 bg-gradient-to-b from-amber-500 to-amber-600 p-6 flex items-center justify-center">
+                  <i class="fas fa-medal text-white text-5xl"></i>
+                </div>
+                <div class="w-full lg:w-2/3 p-8">
+                  <h3 class="text-xl font-bold text-gray-900 mb-4">专业服务能力</h3>
+                  <ul class="space-y-4">
+                    <li v-for="(item, index) in advantages" :key="index" class="flex items-start">
+                      <div class="w-8 h-8 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center flex-shrink-0 mr-3">
+                        <i :class="item.icon"></i>
+                      </div>
+                      <div>
+                        <h4 class="font-medium text-gray-900">{{ item.title }}</h4>
+                        <p class="text-gray-600 text-sm mt-1">{{ item.description }}</p>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 客户评价 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="客户评价"
+            subtitle="他们这样说"
+            description="多年来，我们服务的客户遍布不同行业，获得了广泛认可"
+            align="center"
+        />
+
+        <div class="grid md:grid-cols-3 gap-8 mt-16">
+          <div v-for="(testimonial, index) in testimonials" :key="index">
+            <Card size="lg" hover-effect no-border class="h-full" icon-bg-class="bg-indigo-50 text-indigo-600">
+              <template #icon>
+                <div class="text-5xl text-indigo-100 font-serif">"</div>
+              </template>
+
+              <p class="text-gray-600 italic">
+                {{ testimonial.content }}
+              </p>
+
+              <div class="mt-6 flex items-center">
+                <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div>
+                <div>
+                  <div class="font-medium text-gray-900">{{ testimonial.name }}</div>
+                  <div class="text-sm text-gray-500">{{ testimonial.position }}</div>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 合作品牌 -->
+    <section class="py-16 md:py-20 bg-gradient-to-r from-indigo-50 to-blue-50">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="合作伙伴"
+            subtitle="信赖品牌"
+            align="center"
+        />
+
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 mt-12">
+          <div v-for="i in 6" :key="i" class="bg-white rounded-xl p-6 flex items-center justify-center h-32">
+            <div class="text-gray-400 font-bold text-xl">合作伙伴 {{ i }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-16 md:py-24 bg-gradient-to-r from-indigo-900 to-blue-900 text-white">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto text-center">
+          <h2 class="text-3xl md:text-4xl font-bold mb-6">开启数字化转型之旅</h2>
+          <p class="text-xl text-blue-200 mb-8">
+            联系我们获取免费咨询服务，量身定制您的解决方案
+          </p>
+          <div class="flex flex-col sm:flex-row justify-center gap-4">
+            <button class="px-8 py-3.5 bg-amber-500 hover:bg-amber-600 rounded-lg font-medium shadow-lg transition-colors duration-300 flex items-center justify-center">
+              立即咨询
+              <i class="fas fa-comment ml-3"></i>
+            </button>
+            <button class="px-8 py-3.5 bg-transparent border-2 border-white/30 hover:border-white rounded-lg font-medium flex items-center justify-center">
+              预约演示
+              <i class="fas fa-calendar ml-3"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import SectionTitle from '@/components/ui/SectionTitle.vue'
+import Card from '@/components/ui/Card.vue'
+
+const values = [
+  {
+    title: '创新驱动',
+    icon: 'fas fa-lightbulb',
+    description: '不断探索新技术、新思路，为客户提供前沿解决方案'
+  },
+  {
+    title: '客户至上',
+    icon: 'fas fa-handshake',
+    description: '深度理解客户需求，提供定制化服务与全流程支持'
+  },
+  {
+    title: '专业可靠',
+    icon: 'fas fa-medal',
+    description: '高素质专业团队，严谨的工作态度，确保项目高质量交付'
+  }
+]
+
+const advantages = [
+  {
+    title: '行业专业知识',
+    icon: 'fas fa-book',
+    description: '深耕行业多年的专家团队，掌握行业发展趋势'
+  },
+  {
+    title: '技术创新',
+    icon: 'fas fa-cogs',
+    description: '持续投资技术研发，引领行业技术创新'
+  },
+  {
+    title: '定制解决方案',
+    icon: 'fas fa-clipboard-list',
+    description: '根据企业需求量身定制解决方案'
+  },
+]
+
+const testimonials = [
+  {
+    content: '上海酉佰团队的专业性和创新思维帮助我们完成了数字化转型，大幅提升了工作效率，为业务增长提供了强大支持。',
+    name: '张先生',
+    position: '某公司总经理'
+  },
+  {
+    content: '与酉佰的合作非常愉快，他们的解决方案深入理解了我们行业的特殊需求，实施效果远超我们的预期。',
+    name: '李女士',
+    position: '某制造企业CIO'
+  },
+  {
+    content: '专业、高效、值得信赖的技术合作伙伴，他们的团队总能提出创新的解决方案帮助解决业务痛点。',
+    name: '王总监',
+    position: '某零售企业技术总监'
+  }
+]
+</script>
--- a/src/views/Team.vue
+++ b/src/views/Team.vue
@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <!-- 页面标题 -->
+    <div class="pt-32 pb-20 bg-gradient-to-r from-blue-900 to-indigo-900">
+      <div class="container mx-auto px-4">
+        <div class="text-center">
+          <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">团队介绍</h1>
+          <p class="text-xl text-blue-300 max-w-2xl mx-auto">
+            专业、多元、充满活力的高素质团队
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 领导团队 -->
+    <section class="py-16 md:py-24">
+
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="技术团队"
+            subtitle="专业卓越"
+            description="技术团队的核心成员拥有深厚的行业背景和技术专长"
+            align="center"
+        />
+
+
+        <div class="mt-16">
+          <div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 mb-12">
+            <div class="flex flex-col md:flex-row">
+              <div class="md:w-1/3 mb-6 md:mb-0">
+                <div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl h-56 flex items-center justify-center">
+                  <i class="fas fa-code text-5xl text-blue-500 opacity-50"></i>
+                </div>
+              </div>
+              <div class="md:w-2/3 md:pl-8">
+                <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">
+                  团队目前有10名成员左右，由一批具有金融、数理、工科等背景的海归硕士及国内顶尖院校硕士组成。公司团队工作开放透明，和谐融洽，注重深入研究、互相学习和分享交流。研究方面，公司按照对市场的理解，目前从现货市场入手，覆盖货币、债券、证券、商品等，未来将逐步拓展到期货、期权等衍生品市场，最后覆盖到全球市场。
+                </p>
+                <div class="flex flex-wrap gap-2">
+                  <span v-for="(skill, idx) in ['金融', '数理', '工科']" :key="idx"
+                        class="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm">
+                    {{ skill }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- 领导团队 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="领导团队"
+            subtitle="核心管理"
+            description="我们的管理层拥有丰富的行业经验和专业知识"
+            align="center"
+        />
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
+          <TeamMember
+              v-for="(leader, index) in leaders"
+              :key="index"
+              :member="leader"
+          />
+        </div>
+      </div>
+    </section>
+
+    <!-- 技术团队 -->
+    <section class="py-16 md:py-24 bg-gray-50">
+      <div class="container mx-auto px-4">
+        <SectionTitle
+            title="技术团队"
+            subtitle="专业卓越"
+            description="技术团队的核心成员拥有深厚的行业背景和技术专长"
+            align="center"
+        />
+
+        <div class="mt-16">
+          <div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 mb-12">
+            <div class="flex flex-col md:flex-row">
+              <div class="md:w-1/3 mb-6 md:mb-0">
+                <div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl h-56 flex items-center justify-center">
+                  <i class="fas fa-code text-5xl text-blue-500 opacity-50"></i>
+                </div>
+              </div>
+              <div class="md:w-2/3 md:pl-8">
+                <h3 class="text-2xl font-bold text-gray-900 mb-4">技术专家团队</h3>
+                <p class="text-gray-600 mb-6">
+                  我们的技术团队由多名资深架构师和行业专家组成，平均拥有8年以上相关领域经验。
+                  团队成员精通云计算、大数据、人工智能、物联网等前沿技术，致力于为客户提供创新的技术解决方案。
+                </p>
+                <div class="flex flex-wrap gap-2">
+                  <span v-for="(skill, idx) in ['云计算', '大数据', 'AI/ML', '区块链', '物联网', '微服务', 'DevOps']" :key="idx"
+                        class="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm">
+                    {{ skill }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+            <TeamMember
+                v-for="(member, index) in techTeam"
+                :key="index"
+                :member="member"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 团队文化 -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="flex flex-col lg:flex-row gap-16">
+          <div class="lg:w-5/12">
+            <SectionTitle
+                title="团队文化"
+                subtitle="工作环境"
+            />
+
+            <p class="text-gray-600 mt-6 mb-8">
+              我们致力于打造一个充满活力、开放包容、鼓励创新的工作环境。
+              为团队成员提供良好的发展平台和职业成长空间。
+            </p>
+
+            <div class="space-y-5">
+              <div v-for="(feature, index) in cultureFeatures" :key="index" class="flex">
+                <div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center mr-4 text-amber-600">
+                  <i :class="feature.icon"></i>
+                </div>
+                <div>
+                  <h3 class="font-medium text-gray-900">{{ feature.title }}</h3>
+                  <p class="text-gray-600 text-sm mt-1">{{ feature.description }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="lg:w-7/12">
+            <div class="grid grid-cols-2 gap-4">
+              <div v-for="i in 4" :key="i" class="rounded-xl overflow-hidden aspect-square">
+                <div :class="['h-full flex items-center justify-center',
+                           `bg-gradient-to-br ${i === 1 ? 'from-blue-100 to-blue-200' :
+                            i === 2 ? 'from-amber-100 to-amber-200' :
+                            i === 3 ? 'from-indigo-100 to-indigo-200' :
+                            'from-green-100 to-green-200'}`]">
+                  <i :class="[i === 1 ? 'fas fa-users' :
+                            i === 2 ? 'fas fa-laptop-code' :
+                            i === 3 ? 'fas fa-brain' : 'fas fa-glass-cheers']"
+                     class="text-4xl opacity-30"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 加入团队 -->
+    <section class="py-16 md:py-24 bg-gradient-to-r from-blue-800 to-indigo-900 text-white">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto text-center">
+          <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"
+              class="inline-flex items-center px-8 py-3.5 bg-amber-500 hover:bg-amber-600 rounded-lg font-medium shadow-lg transition-colors duration-300"
+          >
+            查看职位空缺
+            <i class="fas fa-arrow-right ml-3"></i>
+          </router-link>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import SectionTitle from '@/components/ui/SectionTitle.vue'
+import TeamMember from '@/components/ui/TeamMember.vue'
+
+const leaders = [
+  { name: '张总', position: '创始人 & CEO', description: '拥有15年行业经验，成功创办两家企业' },
+  { name: '李经理', position: '技术总监', description: '前全球500强企业技术负责人，系统架构专家' },
+  { name: '王女士', position: '运营总监', description: '项目管理专家，曾管理过多个千万级项目' },
+  { name: '陈总监', position: '市场总监', description: '资深营销专家，拥有丰富的品牌建设经验' }
+]
+
+const techTeam = [
+  { name: '张工', position: '首席架构师' },
+  { name: '李工', position: '大数据专家' },
+  { name: '陈工', position: 'AI研究员' },
+  { name: '刘工', position: '云平台专家' },
+  { name: '王工', position: '前端技术专家' },
+  { name: '赵工', position: '安全专家' },
+]
+
+const cultureFeatures = [
+  {
+    title: '学习与发展',
+    icon: 'fas fa-book-reader',
+    description: '每年提供专项培训预算和职业发展计划'
+  },
+  {
+    title: '创新文化',
+    icon: 'fas fa-lightbulb',
+    description: '鼓励创新思维，设有专项创新奖励基金'
+  },
+  {
+    title: '灵活办公',
+    icon: 'fas fa-laptop-house',
+    description: '提供灵活的办公时间和远程工作机会'
+  },
+  {
+    title: '团队建设',
+    icon: 'fas fa-users',
+    description: '定期组织团建活动和兴趣小组交流'
+  }
+]
+</script>
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,7 +15,7 @@ export default defineConfig({
        }
    },
    server: {
-        port: 8888,
+        port: 10186,
        proxy: {
            '/api': {
                // target: 'http://127.0.0.1:18007/api/',
@@ -24,5 +24,19 @@ export default defineConfig({
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
+    },
+    build: {
+        assetsDir: 'assets/images',
+        rollupOptions: {
+            output: {
+                assetFileNames: (assetInfo) => {
+                    let extType = assetInfo.name.split('.').at(1);
+                    if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
+                        return `assets/images/[name]-[hash][extname]`;
+                    }
+                    return `assets/[name]-[hash][extname]`;
+                }
+            }
+        }
    }
 })