基本完成静态页面

2025-06-09 22:19:09 +08:00
parent 5fbdd6845f
commit c8002eaed2
14 changed files with 1374 additions and 246 deletions
--- a/index.html
+++ b/index.html
@@ -4,6 +4,8 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <!-- 在public/index.html的head中添加 -->
 <!--      <script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图API密钥"></script>-->
    <title>Vite + Vue</title>
  </head>
  <body>
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@ant-design-vue/pro-layout": "^3.2.5",
    "@ant-design/icons-vue": "^7.0.1",
    "@fortawesome/fontawesome-free": "^6.7.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
  .:
    dependencies:
      '@amap/amap-jsapi-loader':
        specifier: ^1.0.1
        version: 1.0.1
      '@ant-design-vue/pro-layout':
        specifier: ^3.2.5
        version: 3.2.5(ant-design-vue@4.2.6(vue@3.5.13))(vue@3.5.13)
@@ -63,6 +66,9 @@ importers:
 packages:
  '@amap/amap-jsapi-loader@1.0.1':
    resolution: {integrity: sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==}
  '@ant-design-vue/pro-layout@3.2.5':
    resolution: {integrity: sha512-M87KEnnt3h5zLlYXPST4fTGHkuwnJac6xbBGOUTjNjMraOyyO9afx++UNdeOc8gtjtasOBcp9VYGFrGUQyJxVg==}
    peerDependencies:
@@ -302,36 +308,42 @@ 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==}
@@ -389,56 +401,67 @@ 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==}
@@ -496,24 +519,28 @@ 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==}
@@ -837,24 +864,28 @@ 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==}
@@ -1090,6 +1121,8 @@ packages:
 snapshots:
  '@amap/amap-jsapi-loader@1.0.1': {}
  '@ant-design-vue/pro-layout@3.2.5(ant-design-vue@4.2.6(vue@3.5.13))(vue@3.5.13)':
    dependencies:
      '@ant-design/icons-vue': 6.1.0(vue@3.5.13)
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -26,4 +26,8 @@ body {
 p {
    // 首行缩进两个字符
    text-indent: 2em;
-}
+}
 button {
    cursor: pointer; /* 确保鼠标悬停时显示为手型 */
 }
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -54,18 +54,19 @@
        </nav>
        <div class="hidden md:flex items-center space-x-4">
-          <a
+<!--          <a-->
-              href="#"
+<!--              href="#"-->
-              class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-colors"
+<!--              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">
+<!--            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">-->
-              <path
+<!--              <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"
+<!--                  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>
+<!--            </svg>-->
-          </a>
+<!--          </a>-->
          <button
-              class="bg-primary hover:bg-blue-700 font-semibold px-4 py-2 rounded-full transition-colors"
+              class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl active:translate-y-0 active:shadow-md"
              @click="openModal"
          >
            联系我们
          </button>
@@ -143,36 +144,97 @@
        </div>
      </div>
    </div>
  </header>
  <!-- 模态框组件 -->
  <transition name="modal-fade">
    <div v-if="showModal" @click="closeModal" class="fixed inset-0 z-50 overflow-auto bg-black/50 bg-opacity-50 flex items-center justify-center p-4 backdrop-blur-lg ">
      <div @click.stop class="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden transform transition-all ">
        <!-- 模态框头部 -->
        <div class="bg-gradient-to-r from-indigo-600 to-blue-700 p-6 text-white">
          <div class="flex justify-between items-center">
            <h2 class="text-2xl font-bold">留下您的联系方式</h2>
            <button @click="closeModal" class="text-white hover:text-gray-200">
              <i class="fas fa-times text-xl"></i>
            </button>
          </div>
        </div>
        <!-- 模态框内容 -->
        <div class="p-6 max-h-[70vh] overflow-y-auto bg-gradient-to-r from-indigo-900 to-blue-900">
           <ContactForm />
        </div>
        <!-- 模态框底部 -->
        <div class="bg-gray-50 px-6 py-4 flex justify-end  bg-gradient-to-r from-indigo-900 to-blue-900">
          <button
              @click="closeModal"
              class="px-5 py-2 text-white rounded-lg font-medium border border-gray-300 mr-3 hover:bg-gray-100"
          >
            关闭
          </button>
          <button
              class="px-5 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
          >
            立即申请
          </button>
        </div>
      </div>
    </div>
  </transition>
 </template>
-<script>
+<script setup>
-export default {
+// 模态框控制
-  name: 'Header',
+import {nextTick, onBeforeUnmount, onMounted, ref} from "vue";
-  data() {
+import ContactForm from "@/components/ui/ContactForm.vue";
-    return {
+
-      isScrolled: false,
+const isScrolled = ref(false)
-      isMenuOpen: false
+const isMenuOpen = ref(false)
-    }
+const showModal = ref(false)
-  },
+const currentJob = ref({})
-  mounted() {
+
-    window.addEventListener('scroll', this.handleScroll)
+// 打开模态框
-  },
+const openModal = (job) => {
-  beforeUnmount() {
+  currentJob.value = job
-    window.removeEventListener('scroll', this.handleScroll)
+  showModal.value = true
-  },
+  // 初始化地图
-  methods: {
+  nextTick(() => {
-    handleScroll() {
+    // initMap()
-      this.isScrolled = window.scrollY > 20
+  })
-    },
+}
-    toggleMenu() {
+
-      this.isMenuOpen = !this.isMenuOpen
+// 关闭模态框
-    },
+const closeModal = () => {
-    closeMenu() {
+  showModal.value = false
-      this.isMenuOpen = false
+  // 销毁地图实例
-    }
+  if (window.mapInstance) {
    window.mapInstance.destroy()
    window.mapInstance = null
  }
 }
 const handleScroll = () => {
  isScrolled.value = window.scrollY > 20
 }
 const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
 }
 const closeMenu = () => {
  isMenuOpen.value = false
 }
 onMounted(() => {
  window.addEventListener('scroll', handleScroll)
 })
 onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
 })
 </script>
 <style scoped>
@@ -189,4 +251,4 @@ export default {
  height: 2px;
  background-color: #2563eb;
 }
-</style>
+</style>
--- a/src/components/ui/ContactForm.vue
+++ b/src/components/ui/ContactForm.vue
@@ -0,0 +1,217 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 // 表单数据
 const formData = ref({
  name: '',
  email: '',
  phone: '',
  message: ''
 })
 // 错误信息
 const errors = ref({
  name: '',
  email: '',
  phone: '',
  message: ''
 })
 // 表单验证
 const validateForm = () => {
  let isValid = true
  errors.value = { name: '', email: '', phone: '', message: '' }
  // 姓名验证
  if (!formData.value.name.trim()) {
    errors.value.name = '请输入姓名'
    isValid = false
  } else if (formData.value.name.length < 2) {
    errors.value.name = '姓名至少需要2个字符'
    isValid = false
  }
  // 邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!formData.value.email) {
    errors.value.email = '请输入邮箱'
    isValid = false
  } else if (!emailRegex.test(formData.value.email)) {
    errors.value.email = '请输入有效的邮箱地址'
    isValid = false
  }
  // 电话验证
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!formData.value.phone) {
    errors.value.phone = '请输入电话'
    isValid = false
  } else if (!phoneRegex.test(formData.value.phone)) {
    errors.value.phone = '请输入有效的手机号码'
    isValid = false
  }
  // 留言验证
  if (!formData.value.message.trim()) {
    errors.value.message = '请输入留言内容'
    isValid = false
  } else if (formData.value.message.length < 10) {
    errors.value.message = '留言内容至少需要10个字符'
    isValid = false
  }
  return isValid
 }
 // 提交表单
 const submitForm = (event: Event) => {
  event.preventDefault()
  if (validateForm()) {
    // 在控制台打印表单值
    console.log('表单提交数据:', JSON.parse(JSON.stringify(formData.value)))
    // 这里可以添加实际的提交逻辑，如API请求
    // axios.post('/api/submit', formData.value)
    // 提交成功后重置表单
    formData.value = { name: '', email: '', phone: '', message: '' }
    alert('表单提交成功！')
  } else {
    console.log('表单验证失败:', errors.value)
  }
 }
 </script>
 <template>
  <div>
    <form class="space-y-6" @submit="submitForm">
      <!-- 姓名 -->
      <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"
            v-model="formData.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="请输入您的姓名"
            :class="{ 'border-red-500': errors.name }"
        >
        <div v-if="errors.name" class="text-red-400 text-sm mt-1">{{ errors.name }}</div>
      </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"
            v-model="formData.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="请输入您的邮箱"
            :class="{ 'border-red-500': errors.email }"
        >
        <div v-if="errors.email" class="text-red-400 text-sm mt-1">{{ errors.email }}</div>
      </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"
            v-model="formData.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="请输入您的电话"
            :class="{ 'border-red-500': errors.phone }"
        >
        <div v-if="errors.phone" class="text-red-400 text-sm mt-1">{{ errors.phone }}</div>
      </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"
            v-model="formData.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="请输入您的留言内容"
            :class="{ 'border-red-500': errors.message }"
        ></textarea>
        <div v-if="errors.message" class="text-red-400 text-sm mt-1">{{ errors.message }}</div>
      </div>
      <!-- 提交按钮 - 优化版 -->
      <button
          type="submit"
          class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl active:translate-y-0 active:shadow-md"
          data-aos="fade-up"
          data-aos-delay="400"
      >
        <i class="fas fa-paper-plane mr-2 transform group-hover:translate-x-1 transition-transform"></i>
        <span class="group-hover:font-semibold transition-all">提交申请</span>
      </button>
    </form>
  </div>
 </template>
 <style scoped>
 /* 添加输入框聚焦时的动画效果 */
 input:focus, textarea:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
 }
 /* 错误提示动画 */
 .text-red-400 {
  animation: fadeIn 0.3s ease;
 }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
 }
 /* 按钮悬停效果 */
 button {
  position: relative;
  overflow: hidden;
 }
 button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
 }
 button:focus:not(:active)::after {
  animation: ripple 1s ease-out;
 }
@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.7;
  }
  100% {
    transform: scale(50, 50);
    opacity: 0;
  }
 }
 /* 按钮图标动画 */
 button:hover i {
  transform: translateX(5px);
  transition: transform 0.3s ease;
 }
 </style>
--- a/src/components/ui/MapContainer.vue
+++ b/src/components/ui/MapContainer.vue
@@ -0,0 +1,84 @@
 <!-- src/components/MapContainer.vue -->
 <template>
  <div id="map-container" class="w-full h-full"></div>
 </template>
 <script setup>
 import { onMounted, defineProps } from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 const props = defineProps({
  lng: {
    type: Number,
    required: true
  },
  lat: {
    type: Number,
    required: true
  },
  zoom: {
    type: Number,
    default: 16
  },
  title: {
    type: String,
    default: '公司位置'
  },
  address: {
    type: String,
    default: ''
  }
 })
 onMounted(() => {
  // 安全密钥配置
  window._AMapSecurityConfig = {
    securityJsCode: "test123"
  }
  AMapLoader.load({
    key: "testkey",
    version: "2.0",
    plugins: ["AMap.InfoWindow"]
  }).then((AMap) => {
    // 初始化地图
    const map = new AMap.Map('map-container', {
      zoom: props.zoom,
      center: [props.lng, props.lat],
      viewMode: '3D'
    })
    // 添加标记
    const marker = new AMap.Marker({
      position: [props.lng, props.lat],
      title: props.title
    })
    map.add(marker)
    // 添加信息窗口
    const infoWindow = new AMap.InfoWindow({
      content: `<div class="p-2">
        <h4 class="font-bold">${props.title}</h4>
        <p class="text-sm">${props.address}</p>
      </div>`,
      offset: new AMap.Pixel(0, -30)
    })
    // 默认打开信息窗口
    infoWindow.open(map, [props.lng, props.lat])
    // 点击标记打开信息窗口
    marker.on('click', () => {
      infoWindow.open(map, [props.lng, props.lat])
    })
  }).catch(e => {
    console.error('地图加载失败', e)
  })
 })
 </script>
 <style scoped>
 #map-container {
  min-height: 300px;
 }
 </style>
--- a/src/components/ui/TeamMember.vue
+++ b/src/components/ui/TeamMember.vue
@@ -4,7 +4,13 @@
      <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">
+          <div v-if="member.avatar" class="w-full h-full flex items-center justify-center bg-blue-50 bg-cover bg-center"
               :style="{
                  backgroundImage: `url(${member.avatar})`
               }"
          >
          </div>
          <div v-else 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>
@@ -38,6 +44,7 @@ defineProps({
      name: '张经理',
      position: '技术总监',
      description: '拥有10年行业经验的技术专家',
      avatar: 'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      social: [
        { icon: 'fab fa-linkedin-in', link: '#' },
        { icon: 'fab fa-weibo', link: '#' },
@@ -45,4 +52,4 @@ defineProps({
    })
  }
 })
-</script>
+</script>
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -1,32 +0,0 @@
 <script setup lang="ts">
 </script>
 <template>
  <header class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-6 flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <!-- Logo -->
      <img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8 rounded-full">
      <span class="font-bold">My App</span>
    </div>
    <!-- Menu -->
    <nav class="hidden md:flex space-x-4">
      <a href="#" class="hover:text-gray-300">首页</a>
      <a href="#" class="hover:text-gray-300">About</a>
      <a href="#" class="hover:text-gray-300">Services</a>
      <a href="#" class="hover:text-gray-300">Contact</a>
    </nav>
    <!-- User Profile -->
    <div class="flex items-center space-x-4">
      <button class="text-sm bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
        Personal Center
      </button>
      <img src="https://via.placeholder.com/40" alt="User Avatar" class="h-8 w-8 rounded-full cursor-pointer">
    </div>
  </header>
 </template>
 <style lang="scss" scoped>
 </style>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import MainLayout from '@/layouts/Header.vue'
 // 在路由配置中添加个人中心路由
 const routes = [
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -286,6 +286,7 @@
          <TeamMemberCard
              v-for="(member, index) in teamMembers"
              :key="member.id"
              :member="member"
              :name="member.name"
              :position="member.position"
              :avatar="member.avatar"
@@ -298,7 +299,7 @@
    </section>
    <!-- 联系我们 -->
-    <section class="py-16 md:py-24">
+    <section class="py-16 md:py-24" id="contact-form">
      <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">
@@ -309,41 +310,7 @@
                填写下方表单，我们将尽快回复您。
              </p>
-              <form class="space-y-6">
+              <ContactForm />
                <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">
@@ -389,6 +356,7 @@ 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'
 import ContactForm from "@/components/ui/ContactForm.vue";
 const milestones = [
  {
@@ -570,7 +538,7 @@ const teamMembers = [
    id: 1,
    name: '张明',
    position: '创始人兼CEO',
-    avatar: '@/assets/images/team/member1.jpg',
+    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    description: '拥有20年IT行业经验，曾任职于多家知名科技企业，专注于企业数字化转型战略',
    socialLinks: [
      {icon: 'fab fa-linkedin', url: '#'},
@@ -581,7 +549,7 @@ const teamMembers = [
    id: 2,
    name: '李婷',
    position: '技术总监',
-    avatar: '@/assets/images/team/member2.jpg',
+    avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    description: '15年软件开发和团队管理经验，精通云计算、大数据和人工智能技术',
    socialLinks: [
      {icon: 'fab fa-github', url: '#'},
@@ -592,7 +560,7 @@ const teamMembers = [
    id: 3,
    name: '王强',
    position: '销售总监',
-    avatar: '@/assets/images/team/member3.jpg',
+    avatar: 'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    description: '10年企业服务销售经验，擅长为客户提供量身定制的数字化解决方案',
    socialLinks: [
      {icon: 'fab fa-linkedin', url: '#'},
@@ -603,7 +571,7 @@ const teamMembers = [
    id: 4,
    name: '陈静',
    position: '设计总监',
-    avatar: '@/assets/images/team/member4.jpg',
+    avatar: 'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    description: '8年UI/UX设计经验，曾主导多个大型企业应用和消费产品的设计工作',
    socialLinks: [
      {icon: 'fab fa-dribbble', url: '#'},
@@ -616,4 +584,4 @@ const teamMembers = [
 </script>
 <style lang="scss" scoped>
-</style>
+</style>
--- a/src/views/Careers.vue
+++ b/src/views/Careers.vue
@@ -1,7 +1,10 @@
 <template>
  <div>
    <!-- 页面标题 -->
-    <div class="pt-32 pb-20 bg-gradient-to-r from-indigo-700 to-blue-900">
+    <div
        class="pt-32 pb-20 bg-gradient-to-r from-indigo-700 to-blue-900"
        data-aos="fade-down"
    >
      <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>
@@ -20,9 +23,14 @@
            <SectionTitle
                title="开放职位"
                subtitle="寻找卓越人才"
                data-aos="fade-right"
            />
-            <div class="bg-gray-50 rounded-xl p-6 mt-10">
+            <div
                class="bg-gray-50 rounded-xl p-6 mt-10"
                data-aos="fade-right"
                data-aos-delay="100"
            >
              <h3 class="font-medium text-gray-900 mb-4">职位筛选</h3>
              <div class="space-y-3">
                <div class="flex items-center">
@@ -48,7 +56,11 @@
              </div>
            </div>
-            <div class="bg-amber-50 rounded-xl p-6 mt-8">
+            <div
                class="bg-amber-50 rounded-xl p-6 mt-8"
                data-aos="fade-right"
                data-aos-delay="200"
            >
              <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">
@@ -57,15 +69,45 @@
                </li>
              </ul>
            </div>
            <!-- 联系方式卡片 -->
            <div
                class="bg-blue-50 rounded-xl p-6 mt-8"
                data-aos="fade-right"
                data-aos-delay="300"
            >
              <h3 class="font-medium text-gray-900 mb-4">联系我们</h3>
              <div class="space-y-3 text-gray-700">
                <div class="flex items-start">
                  <i class="fas fa-phone-alt text-blue-600 mt-1 mr-3"></i>
                  <span>021-34161621</span>
                </div>
                <div class="flex items-start">
                  <i class="fas fa-envelope text-blue-600 mt-1 mr-3"></i>
                  <span>youbaiwangluo@163.com</span>
                </div>
                <div class="flex items-start">
                  <i class="fas fa-map-marker-alt text-blue-600 mt-1 mr-3"></i>
                  <span>上海市中山西路2020号华宜大厦2号楼1501室</span>
                </div>
              </div>
            </div>
          </div>
          <div class="lg:col-span-2">
-            <div class="flex items-center justify-between mb-8">
+            <div
                class="flex items-center justify-between mb-8"
                data-aos="fade-left"
            >
              <h2 class="text-2xl font-bold text-gray-900">
-                <span class="text-amber-600">12</span> 个开放职位
+                <span class="text-amber-600">{{ jobs.length }}</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">
+                <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>
@@ -75,6 +117,8 @@
                  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"
                  :data-aos="index % 2 === 0 ? 'fade-right' : 'fade-left'"
                  :data-aos-delay="100 * index"
              >
                <div class="p-6">
                  <div class="flex flex-col md:flex-row justify-between md:items-center">
@@ -109,7 +153,11 @@
                    <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">
+                  <a
                      href="#"
                      class="text-indigo-600 hover:text-indigo-800 flex items-center text-sm"
                      @click.prevent="openModal(job)"
                  >
                    查看详情
                    <i class="fas fa-arrow-right ml-1 text-xs"></i>
                  </a>
@@ -129,6 +177,7 @@
            subtitle="透明高效"
            description="我们简化招聘流程，让候选人拥有清晰明确的体验"
            align="center"
            data-aos="fade-up"
        />
        <div class="mt-16">
@@ -138,7 +187,13 @@
              <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
                    v-for="(step, index) in recruitmentSteps"
                    :key="index"
                    class="text-center"
                    data-aos="fade-up"
                    :data-aos-delay="index * 100"
                >
                  <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' :
@@ -168,10 +223,16 @@
            subtitle="关怀每一位伙伴"
            description="我们为员工提供全方位的福利保障和贴心关怀"
            align="center"
            data-aos="fade-up"
        />
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
-          <div v-for="(benefit, index) in employeeBenefits" :key="index">
+          <div
              v-for="(benefit, index) in employeeBenefits"
              :key="index"
              data-aos="fade-up"
              :data-aos-delay="index * 50"
          >
            <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"
@@ -190,17 +251,26 @@
    </section>
    <!-- 校招计划 -->
-    <section class="py-16 md:py-24 bg-gradient-to-r from-indigo-900 to-blue-900 text-white">
+    <section
        class="py-16 md:py-24 bg-gradient-to-r from-indigo-900 to-blue-900 text-white"
        data-aos="fade-up"
    >
      <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="md:w-2/5 mb-10 md:mb-0"
                data-aos="fade-right"
            >
              <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">
+            <div
                class="md:w-3/5 md:pl-12"
                data-aos="fade-left"
            >
              <SectionTitle
                  title="校园招聘计划"
                  subtitle="新生力量"
@@ -213,7 +283,13 @@
              </p>
              <ul class="space-y-4 mb-8">
-                <li v-for="(item, index) in campusPlan" :key="index" class="flex items-start">
+                <li
                    v-for="(item, index) in campusPlan"
                    :key="index"
                    class="flex items-start"
                    data-aos="fade-left"
                    :data-aos-delay="index * 50"
                >
                  <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>
@@ -224,6 +300,7 @@
              <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"
                  data-aos="fade-up"
              >
                了解校招计划
                <i class="fas fa-arrow-right ml-2"></i>
@@ -233,12 +310,146 @@
        </div>
      </div>
    </section>
    <!-- 在模态框的地图部分替换为 -->
    <section
        class="py-16 md:py-24 bg-gray-50"
        data-aos="fade-up"
    >
      <div class="mt-8 container mx-auto px-4">
        <h3 class="text-lg font-bold text-gray-900 mb-3">公司位置</h3>
        <MapContainer
            :lng="121.424"
            :lat="31.197"
            :title="'上海酉佰佰网络信息科技有限公司'"
            :address="'上海市中山西路2020号华宜大厦2号楼1501室'"
        />
      </div>
    </section>
    <!-- 模态框组件 -->
    <transition name="modal-fade">
      <div v-if="showModal" @click="closeModal" class="fixed inset-0 z-50 overflow-auto bg-black/50 bg-opacity-50 flex items-center justify-center p-4 backdrop-blur-lg ">
        <div @click.stop class="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden transform transition-all">
          <!-- 模态框头部 -->
          <div class="bg-gradient-to-r from-indigo-600 to-blue-700 p-6 text-white">
            <div class="flex justify-between items-center">
              <h2 class="text-2xl font-bold">{{ currentJob.title }}</h2>
              <button @click="closeModal" class="text-white hover:text-gray-200">
                <i class="fas fa-times text-xl"></i>
              </button>
            </div>
            <div class="mt-2 flex flex-wrap gap-2">
              <span class="text-sm bg-blue-500 text-white px-3 py-1 rounded-full">{{ currentJob.department }}</span>
              <span class="text-sm bg-amber-500 text-white px-3 py-1 rounded-full">{{ currentJob.type }}</span>
              <span class="text-sm bg-gray-700 text-white px-3 py-1 rounded-full">{{ currentJob.location }}</span>
            </div>
          </div>
          <!-- 模态框内容 -->
          <div class="p-6 max-h-[70vh] overflow-y-auto">
            <!-- 职位详情 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="md:col-span-2">
                <h3 class="text-lg font-bold text-gray-900 mb-3">职位描述</h3>
                <p class="text-gray-700 mb-4">{{ currentJob.description }}</p>
                <h3 class="text-lg font-bold text-gray-900 mb-3">岗位要求</h3>
                <ul class="list-disc pl-5 space-y-2 text-gray-700">
                  <li v-for="(requirement, idx) in currentJob.requirements" :key="idx">{{ requirement }}</li>
                </ul>
              </div>
              <div class="border-l border-gray-200 pl-6">
                <div class="mb-6">
                  <h3 class="text-lg font-bold text-gray-900 mb-3">负责人</h3>
                  <div class="flex items-center">
                    <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                      <i class="fas fa-user"></i>
                    </div>
                    <div class="ml-3">
                      <p class="font-medium">{{ currentJob.manager }}</p>
                      <p class="text-sm text-gray-600">{{ currentJob.managerTitle }}</p>
                    </div>
                  </div>
                </div>
                <div class="mb-6">
                  <h3 class="text-lg font-bold text-gray-900 mb-3">联系方式</h3>
                  <div class="space-y-2">
                    <div class="flex items-center">
                      <i class="fas fa-envelope text-indigo-600 mr-2"></i>
                      <a :href="'mailto:' + currentJob.email" class="text-indigo-600 hover:underline">{{ currentJob.email }}</a>
                    </div>
                    <div class="flex items-center">
                      <i class="fas fa-phone-alt text-indigo-600 mr-2"></i>
                      <span>{{ currentJob.phone }}</span>
                    </div>
                  </div>
                </div>
                <div>
                  <h3 class="text-lg font-bold text-gray-900 mb-3">照片要求</h3>
                  <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-sm text-gray-700">{{ currentJob.photoRequirement }}</p>
                  </div>
                </div>
              </div>
            </div>
 <!--            &lt;!&ndash; 地图容器 &ndash;&gt;-->
 <!--            <div class="mt-8">-->
 <!--              <h3 class="text-lg font-bold text-gray-900 mb-3">公司位置</h3>-->
 <!--              <div id="job-map-container" class="h-64 rounded-xl overflow-hidden border border-gray-200"></div>-->
 <!--            </div>-->
          </div>
          <!-- 模态框底部 -->
          <div class="bg-gray-50 px-6 py-4 flex justify-end">
            <button
                @click="closeModal"
                class="px-5 py-2 text-gray-700 rounded-lg font-medium border border-gray-300 mr-3 hover:bg-gray-100"
            >
              关闭
            </button>
            <button
                class="px-5 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
            >
              立即申请
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
 </template>
 <script setup>
 import SectionTitle from '@/components/ui/SectionTitle.vue'
 import Card from '@/components/ui/Card.vue'
 import {nextTick, onMounted, ref} from 'vue'
 import AOS from 'aos'
 import 'aos/dist/aos.css'
 import MapContainer from "@/components/ui/MapContainer.vue";
 // // 初始化AOS
 // onMounted(() => {
 //   AOS.init({
 //     duration: 800,
 //     offset: 100,
 //     easing: 'ease-in-out',
 //     once: true
 //   })
 //
 // })
 const position = {
  lng: 121.424,
  lat: 31.197,
  title: '上海酉佰佰网络信息科技有限公司',
  address: '上海市中山西路2020号华宜大厦2号楼1501室'
 }
 const benefits = [
  '富有竞争力的薪资待遇',
@@ -249,49 +460,6 @@ 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',
@@ -384,6 +552,126 @@ const campusPlan = [
  '应届生专属落户支持',
  '人才公寓或住房补贴'
 ]
 // 模态框控制
 const showModal = ref(false)
 const currentJob = ref({})
 // 打开模态框
 const openModal = (job) => {
  currentJob.value = job
  showModal.value = true
  // 初始化地图
  nextTick(() => {
    // initMap()
  })
 }
 // 关闭模态框
 const closeModal = () => {
  showModal.value = false
  // 销毁地图实例
  if (window.mapInstance) {
    window.mapInstance.destroy()
    window.mapInstance = null
  }
 }
 // 初始化地图
 function initMap() {
  // 确保地图容器存在
  const container = document.getElementById('job-map-container')
  if (!container) return
  // 检查是否已加载高德地图API
  if (!window.AMap) {
    console.error('高德地图API未加载')
    return
  }
  // 销毁旧地图实例
  if (window.mapInstance) {
    window.mapInstance.destroy()
  }
  // 创建新地图实例
  window.mapInstance = new AMap.Map('job-map-container', {
    zoom: 16,
    center: [121.424, 31.197], // 公司位置坐标
    viewMode: '3D'
  })
  // 添加标记
  new AMap.Marker({
    position: [121.424, 31.197],
    map: window.mapInstance,
    title: '上海酉佰佰网络信息科技有限公司'
  })
  // 添加信息窗口
  const infoWindow = new AMap.InfoWindow({
    content: `<div class="p-2">
      <h4 class="font-bold">上海酉佰佰</h4>
      <p class="text-sm">上海市中山西路2020号华宜大厦2号楼1501室</p>
    </div>`,
    offset: new AMap.Pixel(0, -30)
  })
  infoWindow.open(window.mapInstance, [121.424, 31.197])
 }
 // 更新职位数据，添加详细信息
 const jobs = ref([
  {
    title: '高级前端开发工程师',
    department: '技术部',
    type: '全职',
    location: '上海',
    date: '2023-07-10',
    salary: '25K-45K',
    experience: '5年以上',
    featured: true,
    // 新增字段
    description: '负责公司核心产品的前端架构设计与开发，优化用户体验和前端性能，与产品、设计团队紧密合作实现产品需求。',
    requirements: [
      '精通Vue.js框架及其生态系统',
      '熟悉前端工程化、模块化开发',
      '有大型项目架构设计经验',
      '良好的团队协作和沟通能力',
      '计算机相关专业本科以上学历'
    ],
    manager: '张经理',
    managerTitle: '技术总监',
    email: 'tech@shyoubai.com',
    phone: '021-34161621',
    photoRequirement: '请提供近期免冠证件照（白底）和生活照各一张，尺寸为2寸，文件大小不超过5MB。'
  },
  {
    title: '行业研究员',
    department: '研究部',
    type: '全职',
    location: '上海',
    date: '2023-07-15',
    salary: '20K-35K',
    experience: '3年以上',
    featured: true,
    // 新增字段
    description: '负责行业研究分析，定期撰写研究报告，建立研究框架和数据库，进行模拟交易和投资策略研究。',
    requirements: [
      '硕士及以上学历，经济、金融、理工类专业',
      '具备证券/基金/期货从业资格优先',
      '熟悉资本市场和投资分析方法',
      '优秀的逻辑思维和分析能力',
      '良好的数据敏感度和研究能力'
    ],
    manager: '王总监',
    managerTitle: '研究部负责人',
    email: 'research@shyoubai.com',
    phone: '021-34161622',
    photoRequirement: '请提供近期免冠证件照（蓝底）和全身职业照各一张，尺寸为2寸，文件大小不超过5MB。'
  },
  // 其他职位类似添加...
 ])
 </script>
 <style scoped>
@@ -399,4 +687,33 @@ const campusPlan = [
 .text-white ::v-deep .section-divider {
  background: rgba(255,255,255,0.3);
 }
-</style>
+
 /* 地图容器样式 */
 #map-container {
  min-height: 400px;
  background-color: #f0f4f8;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23e5e7eb"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23d1d5db" stroke-width="1"/></svg>');
  background-size: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-weight: 500;
 }
 /* 模态框动画 */
 .modal-fade-enter-active,
 .modal-fade-leave-active {
  transition: opacity 0.3s ease;
 }
 .modal-fade-enter-from,
 .modal-fade-leave-to {
  opacity: 0;
 }
 /* 地图容器样式 */
 #job-map-container {
  min-height: 256px;
 }
 </style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,15 +5,26 @@
      <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">
+            <h1
                class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight"
                data-aos="fade-up"
            >
              引领未来，<br>
              <span class="text-amber-600">创新</span>无限可能
            </h1>
-            <p class="text-lg text-gray-700 mb-8 max-w-lg">
+            <p
-              上海酉佰致力于为企业提供前沿的解决方案，赋能数字化转型，
+                class="text-lg text-gray-700 mb-8 max-w-lg"
                data-aos="fade-up"
                data-aos-delay="100"
            >
              上海酉佰佰致力于为企业提供前沿的解决方案，赋能数字化转型，
              创造可持续的商业价值。
            </p>
-            <div class="flex flex-wrap gap-4">
+            <div
                class="flex flex-wrap gap-4"
                data-aos="fade-up"
                data-aos-delay="200"
            >
              <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"
@@ -32,9 +43,13 @@
          <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 -top-6 -right-6 w-64 h-64 bg-amber-500 rounded-full opacity-10" data-aos="fade"></div>
-              <div class="absolute -bottom-6 -left-6 w-72 h-72 bg-indigo-500 rounded-full opacity-10"></div>
+              <div class="absolute -bottom-6 -left-6 w-72 h-72 bg-indigo-500 rounded-full opacity-10" data-aos="fade" data-aos-delay="300"></div>
-              <div class="relative z-10 rounded-2xl overflow-hidden shadow-xl w-full max-w-md">
+              <div
                  class="relative z-10 rounded-2xl overflow-hidden shadow-xl w-full max-w-md"
                  data-aos="zoom-in"
                  data-aos-delay="200"
              >
                <!-- 图片占位 -->
                <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">
@@ -57,6 +72,7 @@
            subtitle="以专业赢得信任"
            description="我们坚持创新驱动与客户至上的理念，为企业提供专业的数字化转型解决方案"
            align="center"
            data-aos="fade-up"
        />
        <div class="grid md:grid-cols-3 gap-8 mt-16">
@@ -65,6 +81,8 @@
              :key="index"
              :title="value.title"
              :icon="value.icon"
              :data-aos="'fade-up'"
              :data-aos-delay="index * 100"
          >
            <p>
              {{ value.description }}
@@ -91,45 +109,47 @@
            <SectionTitle
                title="为什么选择"
                subtitle="企业优势"
-                highlight="上海酉佰?"
+                highlight="上海酉佰佰?"
                data-aos="fade-right"
            />
-            <p class="text-gray-600 mt-6 mb-8">
+            <p class="text-gray-600 mt-6 mb-8" data-aos="fade-right" data-aos-delay="100">
              我们拥有多年的行业经验和专业团队，致力于为客户提供全方位的解决方案。
              凭借独特的技术优势和创新的服务理念，帮助企业实现数字化转型。
            </p>
            <div class="grid grid-cols-2 gap-4">
-              <div class="bg-white rounded-lg p-4 flex flex-col items-center">
+              <div
-                <div class="text-3xl font-bold text-indigo-800">12+</div>
+                  v-for="(stat, index) in stats"
-                <div class="text-gray-600">行业经验</div>
+                  :key="index"
-              </div>
+                  class="bg-white rounded-lg p-4 flex flex-col items-center"
-              <div class="bg-white rounded-lg p-4 flex flex-col items-center">
+                  :data-aos="'fade-up'"
-                <div class="text-3xl font-bold text-indigo-800">200+</div>
+                  :data-aos-delay="(index * 100) + 200"
-                <div class="text-gray-600">合作企业</div>
+              >
-              </div>
+                <div class="text-3xl font-bold text-indigo-800">{{ stat.value }}</div>
-              <div class="bg-white rounded-lg p-4 flex flex-col items-center">
+                <div class="text-gray-600">{{ stat.label }}</div>
                <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="lg:w-6/12" data-aos="fade-left" data-aos-delay="200">
            <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">
+                <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 bg-cover bg-center"
-                  <i class="fas fa-medal text-white text-5xl"></i>
+                     style="background-image: url('https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')">
                <i class="fas fa-medal text-amber-600 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">
+                    <li
                        v-for="(item, index) in advantages"
                        :key="index"
                        class="flex items-start"
                        :data-aos="'fade-up'"
                        :data-aos-delay="index * 100"
                    >
                      <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>
@@ -155,10 +175,16 @@
            subtitle="他们这样说"
            description="多年来，我们服务的客户遍布不同行业，获得了广泛认可"
            align="center"
            data-aos="fade-up"
        />
        <div class="grid md:grid-cols-3 gap-8 mt-16">
-          <div v-for="(testimonial, index) in testimonials" :key="index">
+          <div
              v-for="(testimonial, index) in testimonials"
              :key="index"
              :data-aos="'fade-up'"
              :data-aos-delay="index * 100"
          >
            <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>
@@ -169,7 +195,9 @@
              </p>
              <div class="mt-6 flex items-center">
-                <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div>
+                <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
                  <img :src="testimonial.avatar" alt="" />
                </div>
                <div>
                  <div class="font-medium text-gray-900">{{ testimonial.name }}</div>
                  <div class="text-sm text-gray-500">{{ testimonial.position }}</div>
@@ -182,17 +210,53 @@
    </section>
    <!-- 合作品牌 -->
-    <section class="py-16 md:py-20 bg-gradient-to-r from-indigo-50 to-blue-50">
+    <section class="py-16 md:py-20 bg-gradient-to-r from-indigo-50 to-blue-50 overflow-hidden">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="合作伙伴"
            subtitle="信赖品牌"
            align="center"
            data-aos="fade-up"
        />
-        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 mt-12">
+        <div class="partners-container 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
-            <div class="text-gray-400 font-bold text-xl">合作伙伴 {{ i }}</div>
+              v-for="(row, rowIndex) in partnerRows"
              :key="rowIndex"
              class="marquee-row-wrapper mb-8"
              @mouseenter="pauseRow(rowIndex)"
              @mouseleave="resumeRow(rowIndex)"
          >
            <div
                :class="[
            'marquee-row',
            rowIndex % 2 === 0 ? 'scroll-left' : 'scroll-right',
            rowIndex % 3 === 0 ? 'scroll-slow' : rowIndex % 3 === 1 ? 'scroll-medium' : 'scroll-fast'
          ]"
                :data-row="rowIndex"
            >
              <div
                  v-for="(partner, partnerIndex) in row"
                  :key="partnerIndex"
                  class="partner-item"
              >
                <div class="partner-logo-container">
                  <img :src="partner.logo" alt="" />
                  <div class="partner-name">{{ partner.name }}</div>
                </div>
              </div>
              <div
                  v-for="(partner, partnerIndex) in row"
                  :key="partnerIndex + 'copy'"
                  class="partner-item"
              >
                <div class="partner-logo-container">
                  <img :src="partner.logo" alt="" />
                  <div class="partner-name">{{ partner.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
@@ -201,7 +265,7 @@
    <!-- 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">
+        <div class="max-w-3xl mx-auto text-center" data-aos="zoom-in">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">开启数字化转型之旅</h2>
          <p class="text-xl text-blue-200 mb-8">
            联系我们获取免费咨询服务，量身定制您的解决方案
@@ -225,6 +289,7 @@
 <script setup>
 import SectionTitle from '@/components/ui/SectionTitle.vue'
 import Card from '@/components/ui/Card.vue'
 import {computed, onMounted, ref} from "vue";
 const values = [
  {
@@ -244,6 +309,13 @@ const values = [
  }
 ]
 const stats = [
  { value: '12+', label: '行业经验' },
  { value: '200+', label: '合作企业' },
  { value: '50+', label: '专业团队' },
  { value: '98%', label: '客户满意度' }
 ]
 const advantages = [
  {
    title: '行业专业知识',
@@ -264,19 +336,273 @@ const advantages = [
 const testimonials = [
  {
-    content: '上海酉佰团队的专业性和创新思维帮助我们完成了数字化转型，大幅提升了工作效率，为业务增长提供了强大支持。',
+    content: '上海酉佰佰团队的专业性和创新思维帮助我们完成了数字化转型，大幅提升了工作效率，为业务增长提供了强大支持。',
    name: '张先生',
-    position: '某公司总经理'
+    position: '某公司总经理',
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
  },
  {
-    content: '与酉佰的合作非常愉快，他们的解决方案深入理解了我们行业的特殊需求，实施效果远超我们的预期。',
+    content: '与酉佰佰的合作非常愉快，他们的解决方案深入理解了我们行业的特殊需求，实施效果远超我们的预期。',
    name: '李女士',
-    position: '某制造企业CIO'
+    position: '某制造企业CIO',
    avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
  },
  {
    content: '专业、高效、值得信赖的技术合作伙伴，他们的团队总能提出创新的解决方案帮助解决业务痛点。',
    name: '王总监',
-    position: '某零售企业技术总监'
+    position: '某零售企业技术总监',
    avatar: 'https://randomuser.me/api/portraits/men/67.jpg'
  }
 ]
-</script>
+
 // 生成合作伙伴数据（实际项目应使用真实数据）
 const partners = ref([
  { name: '腾讯科技', logo: 'https://logo.clearbit.com/tencent.com' },
  { name: '阿里巴巴', logo: 'https://logo.clearbit.com/alibaba.com' },
  { name: '华为技术', logo: 'https://logo.clearbit.com/huawei.com' },
  { name: '字节跳动', logo: 'https://logo.clearbit.com/bytedance.com' },
  { name: '京东集团', logo: 'https://logo.clearbit.com/jd.com' },
  { name: '百度科技', logo: 'https://logo.clearbit.com/baidu.com' },
  { name: '美团点评', logo: 'https://logo.clearbit.com/meituan.com' },
  { name: '拼多多', logo: 'https://logo.clearbit.com/pinduoduo.com' },
  { name: '小米科技', logo: 'https://logo.clearbit.com/mi.com' },
  { name: '网易科技', logo: 'https://logo.clearbit.com/netease.com' },
  { name: '携程旅行', logo: 'https://logo.clearbit.com/ctrip.com' },
  { name: '中国平安', logo: 'https://logo.clearbit.com/pingan.com' },
  { name: '招商银行', logo: 'https://logo.clearbit.com/cmbchina.com' },
  { name: '中国移动', logo: 'https://logo.clearbit.com/chinamobileltd.com' },
  { name: '中国电信', logo: 'https://logo.clearbit.com/chinatelecom-h.com' },
  { name: '格力电器', logo: 'https://logo.clearbit.com/gree.com' },
  { name: '海尔智家', logo: 'https://logo.clearbit.com/haier.net' },
  { name: '联想集团', logo: 'https://logo.clearbit.com/lenovo.com' },
  { name: '比亚迪汽车', logo: 'https://logo.clearbit.com/byd.com' },
  { name: '上汽集团', logo: 'https://logo.clearbit.com/saicmotor.com' },
  { name: '万科集团', logo: 'https://logo.clearbit.com/vanke.com' },
  { name: '碧桂园', logo: 'https://logo.clearbit.com/countrygarden.com.cn' },
  { name: '中国建筑', logo: 'https://logo.clearbit.com/chinaconstruction.com' },
  { name: '中信集团', logo: 'https://logo.clearbit.com/citic.com' },
  { name: '中国石油', logo: 'https://logo.clearbit.com/petrochina.com.cn' },
  { name: '中国石化', logo: 'https://logo.clearbit.com/sinopec.com' },
  { name: '国家电网', logo: 'https://logo.clearbit.com/sgcc.com.cn' },
  { name: '中国工商银行', logo: 'https://logo.clearbit.com/icbc.com.cn' },
  { name: '建设银行', logo: 'https://logo.clearbit.com/ccb.com' },
  { name: '农业银行', logo: 'https://logo.clearbit.com/abchina.com' }
 ])
 // 将合作伙伴按每行10个分组
 const partnerRows = computed(() => {
  const rows = []
  const itemsPerRow = 10
  for (let i = 0; i < partners.value.length; i += itemsPerRow) {
    rows.push(partners.value.slice(i, i + itemsPerRow))
  }
  return rows
 })
 // 暂停指定行滚动
 const pauseRow = (rowIndex) => {
  const rowElements = document.querySelectorAll(`.marquee-row[data-row="${rowIndex}"]`)
  rowElements.forEach(el => {
    el.style.animationPlayState = 'paused'
  })
 }
 // 恢复指定行滚动
 const resumeRow = (rowIndex) => {
  const rowElements = document.querySelectorAll(`.marquee-row[data-row="${rowIndex}"]`)
  rowElements.forEach(el => {
    el.style.animationPlayState = 'running'
  })
 }
 // 初始化滚动效果
 onMounted(() => {
  const style = document.createElement('style')
  style.textContent = `
    @keyframes scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes scroll-right {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }
    .scroll-slow {
      animation: scroll-left 40s linear infinite;
    }
    .scroll-medium {
      animation: scroll-left 30s linear infinite;
    }
    .scroll-fast {
      animation: scroll-left 20s linear infinite;
    }
    .marquee-row:hover {
      animation-play-state: paused;
    }
  `
  document.head.appendChild(style)
 })
 </script>
 <style scoped>
 /* 合作伙伴容器 */
 .partners-container {
  max-width: 1800px;
  margin: 0 auto;
 }
 /* 行容器 */
 .marquee-row-wrapper {
  overflow: hidden;
  position: relative;
  padding: 12px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.05);
  transition: all 0.3s ease;
 }
 .marquee-row-wrapper:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 15px rgba(79, 70, 229, 0.1);
 }
 /* 行内容 */
 .marquee-row {
  display: flex;
  width: max-content;
 }
 /* 合作伙伴项目 */
 .partner-item {
  flex-shrink: 0;
  padding: 0 20px;
 }
 /* 合作伙伴logo容器 */
 .partner-logo-container {
  position: relative;
  width: 140px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 10px;
  background: white;
 }
 /*.partner-logo-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
 }*/
 /* 合作伙伴logo */
 .partner-logo {
  max-height: 50px;
  max-width: 120px;
  object-fit: contain;
  transition: all 0.3s ease;
  filter: grayscale(0);
 }
 /* 鼠标悬停时logo变黑 */
 /*.partner-logo-container:hover .partner-logo {
  filter: grayscale(100%) brightness(0.3);
 }*/
 /* 合作伙伴名称 */
 .partner-name {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #4f46e5;
  background: white;
  padding: 2px 5px;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 /* 鼠标悬停时显示名称 */
 /*.partner-logo-container:hover .partner-name {
  opacity: 1;
  transform: translateY(0);
 }*/
 /* 滚动动画 */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
 }
@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
 }
 .scroll-slow {
  animation: scroll-left 40s linear infinite;
 }
 .scroll-medium {
  animation: scroll-left 30s linear infinite;
 }
 .scroll-fast {
  animation: scroll-left 20s linear infinite;
 }
 .scroll-left {
  animation: scroll-left 40s linear infinite;
 }
 .scroll-right {
  animation: scroll-right 40s linear infinite;
 }
 .marquee-row:hover {
  animation-play-state: paused;
 }
 /* 响应式调整 */
@media (max-width: 1024px) {
  .partner-item {
    padding: 0 15px;
  }
  .partner-logo-container {
    width: 120px;
  }
 }
@media (max-width: 768px) {
  .marquee-row-wrapper {
    margin-bottom: 12px;
  }
  .partner-item {
    padding: 0 10px;
  }
  .partner-logo-container {
    width: 100px;
    height: 70px;
  }
  .partner-logo {
    max-height: 40px;
  }
 }
 </style>
--- a/src/views/Team.vue
+++ b/src/views/Team.vue
@@ -3,7 +3,7 @@
    <!-- 页面标题 -->
    <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">
+        <div class="text-center" data-aos="fade-up">
          <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">
            专业、多元、充满活力的高素质团队
@@ -12,28 +12,84 @@
      </div>
    </div>
-    <!-- 技术团队介绍 -->
+    <!-- 团队展示 -->
    <section class="py-16 md:py-24">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16" data-aos="fade-up">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900">我们的团队</h2>
          <div class="w-24 h-1 bg-amber-500 mx-auto mt-4"></div>
        </div>
        <!-- 团队展示 - 修复后 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8" data-aos="fade-up">
          <!-- 团队 1 -->
          <div class="relative overflow-hidden rounded-2xl shadow-xl group h-96"
               data-aos="zoom-in" data-aos-delay="100">
            <div class="absolute inset-0 bg-gradient-to-t from-blue-900 to-transparent opacity-70">
              <div class="absolute inset-0 flex items-center justify-center">
                <img src="@/assets/images/team.png" alt="" class="w-full h-full object-cover object-center" />
              </div>
            </div>
            <div class="absolute bottom-0 left-0 p-6 text-white">
              <h3 class="text-xl font-bold">技术团队</h3>
              <p class="text-blue-200">专业卓越</p>
            </div>
          </div>
          <!-- 团队 2 -->
          <div class="relative overflow-hidden rounded-2xl shadow-xl group h-96"
               data-aos="zoom-in" data-aos-delay="200">
            <div class="absolute inset-0 bg-gradient-to-t from-indigo-900 to-transparent opacity-70">
              <div class="absolute inset-0 flex items-center justify-center">
                <img src="@/assets/images/team.png" alt="" class="w-full h-full object-cover object-center" />
              </div>
            </div>
            <div class="absolute bottom-0 left-0 p-6 text-white">
              <h3 class="text-xl font-bold">协作交流</h3>
              <p class="text-indigo-200">开放透明</p>
            </div>
          </div>
          <!-- 团队 3 -->
          <div class="relative overflow-hidden rounded-2xl shadow-xl group h-96"
               data-aos="zoom-in" data-aos-delay="300">
            <div class="absolute inset-0 bg-gradient-to-t from-amber-800 to-transparent opacity-70">
              <div class="absolute inset-0 flex items-center justify-center">
                <img src="@/assets/images/team.png" alt="" class="w-full h-full object-cover object-center" />
              </div>
            </div>
            <div class="absolute bottom-0 left-0 p-6 text-white">
              <h3 class="text-xl font-bold">发展规划</h3>
              <p class="text-amber-200">未来愿景</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 技术团队介绍 -->
    <section class="py-16 md:py-24 bg-white">
      <div class="container mx-auto px-4">
        <SectionTitle
            title="技术团队"
            subtitle="专业卓越"
            description="技术团队的核心成员拥有深厚的行业背景和技术专长"
            align="center"
            data-aos="fade-up"
        />
        <div class="mt-16">
-          <div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 mb-12">
+          <div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 mb-12" data-aos="fade-up">
-            <div class="flex flex-col md:flex-row">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-              <div class="md:w-1/3 mb-6 md:mb-0">
+              <div class="md:w-1/3 mb-6 md:mb-0 order-1 lg:order-1 items-center justify-center" data-aos="fade-left">
-                <div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl h-56 flex items-center justify-center">
+                <img  src="@/assets/images/team0001.jpeg" alt="" class="w-full" />
                  <i class="fas fa-code text-5xl text-blue-500 opacity-50"></i>
                </div>
              </div>
-              <div class="md:w-2/3 md:pl-8">
+              <div class="md:w-2/3 md:pl-8 order-2 lg:order-2" data-aos="fade-right" data-aos-delay="200">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">技术专家团队</h3>
                <p class="text-gray-600 mb-6">
-                  酉佰佰是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。
+                  酉佰佰佰佰是一支秉承着"开放透明、纪律严明、听从指挥、主观能动"管理风格的团队。
                  我们遵循循序渐进，但绝不放任自流的管理理念。
                </p>
                <p class="text-gray-600 mb-6">
@@ -42,7 +98,7 @@
                </p>
                <div class="flex flex-wrap gap-2">
                  <span
-                      v-for="(skill, idx) in ['金融', '数理', '工科']"
+                      v-for="(skill, idx) in ['金融', '数理', '工科', '海归硕士', '顶尖院校']"
                      :key="idx"
                      class="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm"
                  >
@@ -62,27 +118,50 @@
        <SectionTitle
            title="发展规划"
            subtitle="未来愿景"
-            description="酉佰佰团队的战略发展规划"
+            description="酉佰佰佰佰团队的战略发展规划"
            align="center"
            data-aos="fade-up"
        />
-        <div class="mt-16">
+        <div class="mt-16 ">
-          <div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6">
+          <div class="bg-white rounded-2xl overflow-hidden shadow-lg p-6" data-aos="fade-up">
-            <div class="flex flex-col md:flex-row">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-              <div class="md:w-1/3 mb-6 md:mb-0">
+              <div class="md:w-1/3 mb-6 md:mb-0 order-1 lg:order-2 items-center justify-center" data-aos="fade-right">
-                <div class="bg-gradient-to-br from-amber-50 to-yellow-100 rounded-xl h-56 flex items-center justify-center">
+                <img  src="@/assets/images/team0003.jpeg" alt="" class="w-full" />
                  <i class="fas fa-chart-line text-5xl text-amber-500 opacity-50"></i>
                </div>
              </div>
-              <div class="md:w-2/3 md:pl-8">
+              <div class="md:w-2/3 md:pl-8 order-2 lg:order-1" data-aos="fade-left" data-aos-delay="200">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">五年发展规划</h3>
                <p class="text-gray-600 mb-6">
-                  酉佰佰团队刚经历了第一个五年的发展，展望未来，公司一方面致力于在宏观弱势期进行人才积累，
+                  酉佰佰佰佰团队刚经历了第一个五年的发展，展望未来，公司一方面致力于在宏观弱势期进行人才积累，
                  另一方面也在积极地进行政治经济研究、产业企业研究、风险管理研究和投资等投资公司核心竞争力的孵化与锻炼。
                </p>
-                <p class="text-gray-600">
+                <p class="text-gray-600 mb-6">
                  希望在2028年，公司第二个五年结束之际，能组建一支研究功底深厚、技能全面、初具实战能力的队伍。
                </p>
                <div class="mt-6" data-aos="fade-up" data-aos-delay="300">
                  <h4 class="font-bold text-lg text-gray-800 mb-3">发展里程碑</h4>
                  <div class="space-y-3">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                        <span class="text-amber-600 font-bold">1</span>
                      </div>
                      <p class="text-gray-700">人才积累阶段 (2023-2025年)</p>
                    </div>
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                        <span class="text-amber-600 font-bold">2</span>
                      </div>
                      <p class="text-gray-700">核心竞争力孵化 (2025-2027年)</p>
                    </div>
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                        <span class="text-amber-600 font-bold">3</span>
                      </div>
                      <p class="text-gray-700">实战能力形成 (2028年达成目标)</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
@@ -98,6 +177,7 @@
            subtitle="专业覆盖"
            description="我们的核心研究领域和发展方向"
            align="center"
            data-aos="fade-up"
        />
        <div class="mt-16 grid md:grid-cols-3 gap-8">
@@ -105,6 +185,8 @@
              v-for="(field, index) in researchFields"
              :key="index"
              class="bg-white rounded-2xl overflow-hidden shadow-lg p-6 hover:shadow-xl transition-shadow"
              :data-aos="index % 2 === 0 ? 'fade-right' : 'fade-left'"
              :data-aos-delay="100 * (index + 1)"
          >
            <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
              <i :class="field.icon" class="text-2xl text-blue-600"></i>
@@ -116,17 +198,69 @@
      </div>
    </section>
-    <!-- 加入团队 -->
+    <!-- 团队文化 -->
-    <section class="py-16 md:py-24 bg-gradient-to-r from-blue-800 to-indigo-900 text-white">
+    <section class="py-16 md:py-24 bg-gradient-to-r from-blue-800 to-indigo-800">
      <div class="container mx-auto px-4">
-        <div class="max-w-3xl mx-auto text-center">
+        <div class="flex flex-col lg:flex-row items-center gap-12">
          <div class="lg:w-1/2" data-aos="fade-right">
            <img src="@/assets/images/company0002.jpeg">
          </div>
          <div class="lg:w-1/2 text-white" data-aos="fade-left" data-aos-delay="200">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">我们的文化</h2>
            <p class="text-lg mb-8 text-blue-200">
              开放、透明、纪律严明、主观能动
            </p>
            <div class="space-y-6">
              <div class="flex items-start">
                <div class="flex-shrink-0 mt-1">
                  <i class="fas fa-handshake text-2xl text-amber-400"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-xl font-bold mb-2">开放透明</h3>
                  <p class="text-blue-100">团队成员间信息共享、思想碰撞，营造互相学习、共同成长的氛围</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="flex-shrink-0 mt-1">
                  <i class="fas fa-tasks text-2xl text-amber-400"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-xl font-bold mb-2">纪律严明</h3>
                  <p class="text-blue-100">遵循循序渐进的管理理念，确保团队高效运转</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="flex-shrink-0 mt-1">
                  <i class="fas fa-lightbulb text-2xl text-amber-400"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-xl font-bold mb-2">主观能动</h3>
                  <p class="text-blue-100">鼓励创新思维和主动担当，激发团队成员潜力</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 加入团队 -->
    <section class="py-16 md:py-24 bg-gradient-to-r from-blue-900 to-indigo-900 text-white">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">加入我们的团队</h2>
          <p class="text-xl text-blue-300 mb-8">
-            如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰佰大家庭
+            如果你才华横溢、充满激情、渴望成长，我们欢迎你加入酉佰佰佰佰大家庭
          </p>
          <router-link
              to="/careers"
              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"
              data-aos="zoom-in"
              data-aos-delay="200"
          >
            查看职位空缺
            <i class="fas fa-arrow-right ml-3"></i>
@@ -139,8 +273,9 @@
 <script setup>
 import SectionTitle from '@/components/ui/SectionTitle.vue'
 import { ref } from 'vue'
-const researchFields = [
+const researchFields = ref([
  {
    icon: 'fas fa-coins',
    title: '现货市场',
@@ -156,13 +291,8 @@ const researchFields = [
    title: '全球市场',
    description: '最终覆盖全球市场，打造国际化研究能力与投资视野'
  }
-]
+])
 /*
 换一种排版布局，要把这几个图片用进去，分别是src/assets/images/team.png，
 src/assets/images/team0001.jpeg，
 src/assets/images/team0003.jpeg
 */
 </script>
 <style scoped>
@@ -181,4 +311,14 @@ src/assets/images/team0003.jpeg
    padding-top: 1.5rem;
  }
 }
-</style>
+
 /* 图片悬停效果 */
 .group:hover img {
  transform: scale(1.05);
 }
 /* 过渡动画 */
 img {
  transition: transform 0.5s ease;
 }
 </style>