feat: 优化移动端响应式布局和样式调整

- 为多个组件添加移动端适配样式，包括首页、联系我们、关于我们等页面
- 调整导航栏显示逻辑，根据配置动态显示菜单项
- 优化表单元素和按钮在不同屏幕尺寸下的表现
- 统一添加 box-sizing 属性确保布局一致性
- 移除未使用的语言切换功能

.env.development

@@ -2,5 +2,5 @@
 
 
 # 开发环境
-VITE_APP_BASE_API = '/dev-api'
-# VITE_APP_BASE_API = 'http://42.194.239.145:8005/official'
+# VITE_APP_BASE_API = '/dev-api'
+VITE_APP_BASE_API = 'http://42.194.239.145:8005/official'

src/App.vue

@@ -359,14 +359,63 @@ main {
   .footer-bottom {
     flex-direction: column;
     text-align: center;
+    gap: 15px;
+    padding: 20px 15px;
+  }
+  
+  .footer-bottom p {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+  
+  .footer-nav {
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 15px;
+  }
+  
+  .footer-nav a {
+    margin: 0;
+    font-size: 14px;
+    padding: 5px 10px;
+  }
+  
+  .footer-record-number {
+    margin: 0;
+    font-size: 12px;
+    color: #888;
+    word-break: break-all;
+    text-align: center;
+  }
+}
+
+/* 更小屏幕的适配 */
+@media (max-width: 480px) {
+  .footer-bottom {
+    padding: 15px 10px;
+    gap: 12px;
+  }
+  
+  .footer-bottom p {
+    font-size: 13px;
   }
   
   .footer-nav {
-    margin-top: 15px;
+    flex-direction: column;
+    gap: 10px;
   }
   
   .footer-nav a {
-    margin: 0 10px;
+    font-size: 13px;
+    padding: 3px 8px;
+  }
+  
+  .footer-record-number {
+    font-size: 11px;
+    padding: 0 5px;
   }
 }
 </style>

src/assets/scss/main.scss

@@ -92,6 +92,7 @@ $breakpoints: (
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
+  box-sizing: border-box;
 }
 
 // 卡片样式

src/components/CallToAction.vue

@@ -115,6 +115,7 @@ const props = defineProps({
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 15px;
+  box-sizing: border-box;
 }
 
 .cta-content {
@@ -219,14 +220,22 @@ const props = defineProps({
 
 /* 响应式样式 */
 @media (max-width: 768px) {
+  .cta-section {
+    padding: 60px 0;
+  }
+  
   .cta-content {
     h2 {
-      font-size: 2rem;
+      font-size: 1.8rem;
+      margin-bottom: 15px;
+      line-height: 1.3;
     }
     
     p {
-      font-size: 1.1rem;
-      padding: 0 15px;
+      font-size: 1rem;
+      padding: 0 20px;
+      margin-bottom: 25px;
+      line-height: 1.5;
     }
   }
   
@@ -234,23 +243,78 @@ const props = defineProps({
     flex-direction: column;
     align-items: center;
     width: 100%;
-    gap: 15px;
+    gap: 12px;
     
     .btn-primary,
     .btn-outline {
-      width: 80%;
-      max-width: 300px;
+      width: 85%;
+      max-width: 280px;
       text-align: center;
+      padding: 16px 24px;
+      font-size: 1rem;
+      border-radius: 25px;
+      font-weight: 600;
+    }
+    
+    .btn-primary {
+      i {
+        margin-left: 6px;
+      }
+    }
+  }
+  
+  .cta-icon {
+    margin-bottom: 20px;
+    
+    i {
+      width: 70px;
+      height: 70px;
+      line-height: 70px;
+      font-size: 2.2rem;
+    }
+  }
+}
+
+/* 更小屏幕的适配 */
+@media (max-width: 480px) {
+  .cta-section {
+    padding: 50px 0;
+  }
+  
+  .cta-content {
+    h2 {
+      font-size: 1.6rem;
+      margin-bottom: 12px;
+    }
+    
+    p {
+      font-size: 0.95rem;
+      padding: 0 15px;
+      margin-bottom: 20px;
+    }
+  }
+  
+  .cta-buttons {
+    gap: 10px;
+    
+    .btn-primary,
+    .btn-outline {
+      width: 90%;
+      max-width: 260px;
+      padding: 14px 20px;
+      font-size: 0.95rem;
     }
   }
   
   .cta-icon {
+    margin-bottom: 15px;
+    
     i {
-      width: 80px;
-      height: 80px;
-      line-height: 80px;
-      font-size: 2.8rem;
+      width: 60px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 2rem;
     }
   }
 }
-</style> 
+</style>

src/components/MobileNav.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useConfigStore } from '@/stores/config'
+
+const { configParams, getConfigParams } = useConfigStore()
 
 // 定义props
 const props = defineProps({
@@ -52,13 +55,13 @@ function navigateTo(path) {
           <li><a @click="navigateTo('/')">首页</a></li>
           <li><a @click="navigateTo('/services')">服务</a></li>
           <li><a @click="navigateTo('/cases')">案例</a></li>
-          <li><a @click="navigateTo('/about')">关于我们</a></li>
-          <li><a @click="navigateTo('/team')">团队</a></li>
+          <li v-if="configParams.navbar_about_show == 1"><a @click="navigateTo('/about')">关于我们</a></li>
+          <li v-if="configParams.navbar_team_show == 1"><a @click="navigateTo('/team')">团队</a></li>
           <li><a @click="navigateTo('/contact')">联系我们</a></li>
         </ul>
       </nav>
       <div class="mobile-nav-footer">
-        <button class="lang-switch" @click="toggleLanguage">{{ currentLang === 'CN' ? 'EN' : 'CN' }}</button>
+        <!-- <button class="lang-switch" @click="toggleLanguage">{{ currentLang === 'CN' ? 'EN' : 'CN' }}</button> -->
         <button class="contact-btn" @click="navigateTo('/contact')">联系我们</button>
       </div>
     </div>

src/views/company/About.vue

@@ -162,6 +162,41 @@ onMounted(async () => {
         background: $primary-color;
         margin: 0 auto;
     }
+
+    @media (max-width: 768px) {
+        margin-bottom: 30px;
+
+        h2 {
+            font-size: 1.8rem;
+            margin-bottom: 15px;
+
+            i {
+                margin-right: 8px;
+            }
+        }
+
+        .separator {
+            width: 60px;
+            height: 2px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        margin-bottom: 20px;
+
+        h2 {
+            font-size: 1.5rem;
+            margin-bottom: 12px;
+
+            i {
+                margin-right: 6px;
+            }
+        }
+
+        .separator {
+            width: 50px;
+        }
+    }
 }
 
 .company-tabs {
@@ -237,10 +272,14 @@ onMounted(async () => {
         z-index: 1;
         max-width: 900px;
         margin: 0 auto;
-
-        @media (max-width: 992px) {
-            padding: 0 20px;
-        }
+        box-sizing: border-box;
+
+        // @media (max-width: 992px) {
+        //     padding: 0 15px;
+        // }
+        // @media (max-width: 480px) {
+        //     padding: 0 10px;
+        // }
     }
 
     .intro-content {
@@ -254,6 +293,11 @@ onMounted(async () => {
             position: relative;
             border-top: 5px solid $primary-color;
             transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-sizing: border-box;
+
+            @media (max-width: 480px) {
+                padding: 15px 20px;
+            }
 
             &:hover {
                 transform: translateY(-5px);
@@ -449,30 +493,114 @@ onMounted(async () => {
         @media (max-width: 768px) {
             width: 100%;
             padding-right: 0;
-            padding-left: 40px;
+            padding-left: 30px;
             margin-left: 0;
+            margin-bottom: 40px;
 
             &.right {
                 margin-left: 0;
+                padding-left: 30px;
             }
 
             .year {
-                left: -20px !important;
+                left: -15px !important;
                 right: auto !important;
-                top: -40px;
+                top: -35px;
                 text-align: left !important;
+                font-size: 18px;
+                width: auto;
             }
 
             .dot {
-                left: -9px !important;
+                left: -7px !important;
                 right: auto !important;
+                width: 12px;
+                height: 12px;
+                top: 15px;
+            }
+
+            .event {
+                padding: 18px;
+                border-radius: 8px;
+
+                h3 {
+                    font-size: 1.2rem;
+                    margin-bottom: 8px;
+                }
+
+                p {
+                    font-size: 0.9rem;
+                    line-height: 1.5;
+                }
+
+                .milestone-icon {
+                    font-size: 18px;
+                    top: 15px;
+                    right: 15px;
+                }
+            }
+        }
+
+        @media (max-width: 480px) {
+            padding-left: 25px;
+            margin-bottom: 30px;
+
+            .year {
+                left: 10px !important;
+                top: -26px;
+                font-size: 16px;
+            }
+
+            .dot {
+                left: -28px !important;
+                width: 10px;
+                height: 10px;
+                top: 3px;
+            }
+
+            .event {
+                padding: 15px;
+                border-radius: 6px;
+
+                h3 {
+                    font-size: 1.1rem;
+                    margin-bottom: 6px;
+                }
+
+                p {
+                    font-size: 0.85rem;
+                    line-height: 1.4;
+                }
+
+                .milestone-icon {
+                    font-size: 16px;
+                    top: 12px;
+                    right: 12px;
+                }
             }
         }
     }
 
     @media (max-width: 768px) {
-        .timeline-container::before {
-            left: 0;
+        padding: 50px 0;
+
+        .timeline-container {
+            margin: 30px auto 0;
+            max-width: 100%;
+            padding: 0 15px;
+
+            &::before {
+                left: 0;
+            }
+        }
+    }
+
+    @media (max-width: 480px) {
+        padding: 40px 0;
+
+        .timeline-container {
+            margin: 20px auto 0;
+            padding: 0 10px;
         }
     }
 }

src/views/pages/Contact.vue

@@ -569,6 +569,7 @@ onMounted(() => {
                 font-size: 1rem;
                 transition: all 0.3s ease;
                 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+                box-sizing: border-box;
                 
                 &:focus {
                     border-color: $primary-color;
@@ -824,68 +825,32 @@ onMounted(() => {
             }
         }
     }
-    
-    @media (max-width: 768px) {
-        padding: 60px 0;
-        
-        .map-container {
-            height: 450px;
-            
-            .map-card {
-                bottom: 20px;
-                left: 20px;
-                padding: 15px;
-                width: calc(100% - 40px);
-                max-width: none;
-            }
-        }
-    }
-    
-    @media (max-width: 480px) {
-        .map-container {
-            height: 400px;
-            
-            .map-card {
-                padding: 12px;
-                
-                .map-card-icon {
-                    width: 40px;
-                    height: 40px;
-                    min-width: 40px;
-                    
-                    i {
-                        font-size: 1.2rem;
-                    }
-                }
-                
-                .map-card-content {
-                    h3 {
-                        font-size: 1rem;
-                    }
-                    
-                    p {
-                        font-size: 0.85rem;
-                        margin-bottom: 10px;
-                    }
-                    
-                    .map-direction-btn {
-                        padding: 6px 12px;
-                        font-size: 0.8rem;
-                    }
-                }
-            }
-        }
-    }
 }
 
 @media (max-width: 768px) {
     .contact-form .form {
         grid-template-columns: 1fr;
         padding: 30px 20px;
+        margin: 0 15px;
+        
+        .form-group {
+            &.full-width,
+            &:not(.full-width) {
+                grid-column: span 1;
+            }
+            
+            input,
+            textarea {
+                padding: 12px;
+                font-size: 0.95rem;
+                box-sizing: border-box;
+            }
+        }
         
-        .form-group.full-width,
         .submit-btn {
             grid-column: span 1;
+            padding: 15px 25px;
+            font-size: 1rem;
         }
     }
     
@@ -912,8 +877,28 @@ onMounted(() => {
             }
         }
     }
+}
+
+@media (max-width: 480px) {
+    .contact-form .form {
+        padding: 20px 15px;
+        margin: 0 10px;
+        
+        .form-group {
+            input,
+            textarea {
+                padding: 10px;
+                font-size: 0.9rem;
+            }
+        }
+        
+        .submit-btn {
+            padding: 12px 20px;
+            font-size: 0.95rem;
+        }
+    }
     
-    @media (max-width: 480px) {
+    .map-section {
         .map-container {
             height: 400px;
             

src/views/pages/Home.vue

@@ -435,6 +435,11 @@ onMounted(() => {
         filter: brightness(0.3);
         /* 降低亮度以增加对比度 */
     }
+    
+    /* 移动端隐藏优势部分 */
+    @media (max-width: 768px) {
+        display: none;
+    }
 }
 
 .overlay-dark {