调整部分样式

src/components/layout/Header.vue

@@ -177,24 +177,21 @@ const menuItems = computed(() => {
 
 // 新增：输出视口和导航宽度
 const logDimensions = () => {
-  // 获取视口宽度
-  viewportWidth.value = window.innerWidth;
+  setTimeout(function () {
+    // 获取视口宽度
+    viewportWidth.value = window.innerWidth;
 
-
-  // 输出到控制台
-  console.log('视口宽度:', `${viewportWidth.value}px`);
-  console.log('----------------------');
-  // 获取导航元素宽度
-  const navElement = document.querySelector('header');
-  if (navElement) {
-    navWidth.value = navElement.offsetWidth;
-  }
-  console.log('导航宽度:', `${navWidth.value}px`);
-  console.log('----------------------');
-  // 修改header标签的宽度
-  navElement.style.width = `${navWidth.value}px`;
-  // 修改body的宽度
-  document.body.style.width = `${viewportWidth.value}px`;
+    // 获取导航元素宽度
+    const navElement = document.querySelector('header');
+    if (navElement) {
+      navWidth.value = navElement.offsetWidth;
+    }
+    console.log(`触发: ${viewportWidth.value}`);
+    // 修改header标签的宽度
+    navElement.style.width = `${navWidth.value}px`;
+    // 修改body的宽度
+    document.body.style.width = `${viewportWidth.value}px`
+  }, 800);
 };
 
 const toggleLanguage = () => {

src/views/About.vue

@@ -305,17 +305,8 @@
       <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>
 
-              <ContactForm />
-            </div>
-
-            <div class="relative h-64 lg:h-auto">
+            <div class="call-me order-2 lg:order-2 relative h-64 lg:h-auto">
 
               <img src="../assets/images/join0001.jpeg" alt="联系我们"
                    class="absolute inset-0 w-full h-full object-cover">
@@ -346,6 +337,16 @@
                 </div>
               </div>
             </div>
+
+            <div class="order-2 lg:order-1 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>
+
+              <ContactForm />
+            </div>
           </div>
         </div>
       </div>
@@ -588,4 +589,10 @@ const teamMembers = [
 </script>
 
 <style lang="scss" scoped>
+// 媒体查询
+@media (max-width: 768px) {
+  .call-me {
+    display: none;
+  }
+}
 </style>