app/components/pages/homepage/HomepageCarousel.vue

@@ -83,4 +83,10 @@
     border-radius: 5px;
     font-size: 14px;
   }
+
+  @media (max-width: 768px) {
+    .homepage-carousel .el-carousel__item {
+      height: 50vw;
+    }
+  }
 </style>

app/components/pages/homepage/HomepageProductSection.vue

@@ -7,19 +7,20 @@
     <div v-if="!pending">
       <el-carousel
         class="recommend-carousel"
-        height="auto"
+        :height="carouselHeight"
         arrow="never"
         indicator-position="outside"
         :autoplay="false"
       >
         <el-carousel-item
-          v-for="n in Math.floor(products.length / 3) + 1"
+          v-for="n in pages"
+          ref="carouselItem"
           :key="n"
           class="recommend-list"
         >
           <div class="recommend-card-group">
             <el-card
-              v-for="(item, index) in products.slice((n - 1) * 3, n * 3)"
+              v-for="(item, index) in pageProducts(n)"
               :key="index"
               class="recommend-card"
               @click="handleProductCardClick(item.id.toString() || '')"
@@ -64,9 +65,32 @@
     },
   });
 
+  const carouselHeight = ref<string>('auto');
+  const perPage = ref(3);
+  const carouselItem = ref<HTMLElement | null>(null);
+
   const { getImageUrl } = useDirectusImage();
+  const { height } = useElementSize(carouselItem);
 
   const products = computed(() => props.homepageData?.recommendProducts || []);
+  const pages = computed(() =>
+    Math.ceil(products.value.length / perPage.value)
+  );
+
+  const updatePerPage = () => {
+    const width = window.innerWidth;
+    if (width < 768) {
+      perPage.value = 1;
+    } else if (width < 1024) {
+      perPage.value = 2;
+    } else {
+      perPage.value = 3;
+    }
+  };
+
+  const pageProducts = (n: number) => {
+    return products.value.slice((n - 1) * perPage.value, n * perPage.value);
+  };
 
   const handleProductCardClick = (documentId: string) => {
     // 使用路由导航到产品详情页
@@ -76,6 +100,21 @@
       router.push(localePath(`/products/${documentId}`));
     }
   };
+
+  watch(height, (h) => {
+    if (h > 0) {
+      carouselHeight.value = h + 40 + 'px';
+    }
+  });
+
+  onMounted(() => {
+    updatePerPage();
+    window.addEventListener('resize', updatePerPage);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', updatePerPage);
+  });
 </script>
 
 <style scoped>
@@ -126,7 +165,7 @@
   .recommend-list {
     display: flex;
     padding: 1rem;
-    height: 400px;
+    height: auto;
   }
 
   .recommend-card-group {
@@ -134,7 +173,7 @@
     gap: 1rem;
     width: 100%;
     margin: 0 auto;
-    height: 100%;
+    height: auto;
   }
 
   .recommend-card {
@@ -173,4 +212,16 @@
     width: 100%;
     border-radius: 4px;
   }
+
+  @media (max-width: 1024px) {
+    .recommend-card {
+      width: 50%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .recommend-card {
+      width: 100%;
+    }
+  }
 </style>

app/components/pages/homepage/HomepageSolutionSection.vue

@@ -5,19 +5,20 @@
     <div v-if="!pending">
       <el-carousel
         class="recommend-carousel"
-        height="auto"
+        :height="carouselHeight"
         arrow="never"
         indicator-position="outside"
         :autoplay="false"
       >
         <el-carousel-item
-          v-for="n in Math.floor(solutions.length / 3) + 1"
+          v-for="n in pages"
+          ref="carouselItem"
           :key="n"
           class="recommend-list"
         >
           <div class="recommend-card-group">
             <el-card
-              v-for="(item, index) in solutions.slice((n - 1) * 3, n * 3)"
+              v-for="(item, index) in pageSolutions(n)"
               :key="index"
               class="recommend-card"
               @click="handleSolutionCardClick(item.id.toString() || '')"
@@ -62,11 +63,34 @@
     },
   });
 
+  const carouselHeight = ref<string>('auto');
+  const perPage = ref(3);
+  const carouselItem = ref<HTMLElement | null>(null);
+
   const { getImageUrl } = useDirectusImage();
+  const { height } = useElementSize(carouselItem);
 
   const solutions = computed(
     () => props.homepageData?.recommendSolutions || []
   );
+  const pages = computed(() =>
+    Math.ceil(solutions.value.length / perPage.value)
+  );
+
+  const updatePerPage = () => {
+    const width = window.innerWidth;
+    if (width < 768) {
+      perPage.value = 1;
+    } else if (width < 1024) {
+      perPage.value = 2;
+    } else {
+      perPage.value = 3;
+    }
+  };
+
+  const pageSolutions = (n: number) => {
+    return solutions.value.slice((n - 1) * perPage.value, n * perPage.value);
+  };
 
   const handleSolutionCardClick = (documentId: string) => {
     // 使用路由导航到产品详情页
@@ -76,6 +100,21 @@
       router.push(localePath(`/solutions/${documentId}`));
     }
   };
+
+  watch(height, (h) => {
+    if (h > 0) {
+      carouselHeight.value = h + 40 + 'px';
+    }
+  });
+
+  onMounted(() => {
+    updatePerPage();
+    window.addEventListener('resize', updatePerPage);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', updatePerPage);
+  });
 </script>
 
 <style scoped>
@@ -126,7 +165,7 @@
   .recommend-list {
     display: flex;
     padding: 1rem;
-    height: 400px;
+    height: auto;
   }
 
   .recommend-card-group {
@@ -134,7 +173,7 @@
     gap: 1rem;
     width: 100%;
     margin: 0 auto;
-    height: 100%;
+    height: auto;
   }
 
   .recommend-card {
@@ -173,4 +212,16 @@
     width: 100%;
     border-radius: 4px;
   }
+
+  @media (max-width: 1024px) {
+    .recommend-card {
+      width: 50%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .recommend-card {
+      width: 100%;
+    }
+  }
 </style>

app/components/pages/products/ProductDetail.vue

@@ -42,4 +42,11 @@
     color: var(--el-text-color-primary);
     margin: 0;
   }
+
+  @media (max-width: 768px) {
+    .product-tabs ::v-deep(.el-tabs__nav) {
+      float: none;
+      min-width: 100%;
+    }
+  }
 </style>

app/components/pages/products/ProductHeader.vue

@@ -10,7 +10,7 @@
       <el-carousel
         v-else
         class="product-carousel"
-        height="500px"
+        height="auto"
         :autoplay="false"
         :loop="false"
         arrow="always"
@@ -18,8 +18,9 @@
         <el-carousel-item
           v-for="(item, index) in product.images || []"
           :key="index"
+          class="product-carousel-item"
         >
-          <div class="product-carousel-item">
+          <div>
             <el-image
               :src="getImageUrl(item.image || '')"
               :alt="product.name"
@@ -59,6 +60,10 @@
     gap: 3rem;
   }
 
+  .product-carousel-item {
+    height: 500px;
+  }
+
   .product-image .el-image {
     position: relative;
     width: 100%;
@@ -99,4 +104,23 @@
     line-height: 1.6;
     margin-bottom: 2rem;
   }
+
+  @media (max-width: 768px) {
+    .product-header {
+      grid-template-columns: 1fr;
+    }
+
+    .product-carousel-item {
+      height: 300px;
+    }
+
+    .product-image .el-image {
+      height: 300px;
+    }
+
+    .product-info h1 {
+      font-size: 1.5rem;
+      margin-top: 0;
+    }
+  }
 </style>

app/components/shared/JinshenFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <footer class="jinshen-footer">
-    <div class="footer-container">
+    <div class="footer-container hide-on-mobile">
       <!-- Logo 和公司信息 -->
       <div class="footer-section">
         <div class="footer-logo">
@@ -250,6 +250,10 @@
 
   /* 响应式设计 */
   @media (max-width: 768px) {
+    .hide-on-mobile {
+      display: none;
+    }
+
     .footer-container {
       grid-template-columns: 1fr;
       padding: 1.5rem 1rem;

app/components/shared/JinshenHeader.vue

@@ -1,5 +1,6 @@
 <template>
   <header class="header-container">
+    <!-- Logo -->
     <div class="logo-section">
       <NuxtLink :to="$localePath('/')" class="logo-link">
         <el-image
@@ -11,6 +12,7 @@
       </NuxtLink>
     </div>
 
+    <!-- 桌面菜单 -->
     <div class="header-menu-section">
       <!-- 导航菜单 -->
       <el-menu
@@ -48,6 +50,7 @@
       </el-link>
 
       <el-link
+        class="hide-on-mobile"
         type="info"
         :underline="false"
         href="http://cal.jinshen.cn"
@@ -56,7 +59,7 @@
         <el-icon class="mdi mdi-calculator action-icon" />
       </el-link>
 
-      <el-dropdown @command="setLocale">
+      <el-dropdown class="hide-on-mobile" @command="setLocale">
         <el-link type="info" :underline="false">
           <el-icon class="mdi mdi-translate action-icon" />
         </el-link>
@@ -67,6 +70,82 @@
           </el-dropdown-menu>
         </template>
       </el-dropdown>
+
+      <!-- 汉堡按钮（仅移动端显示） -->
+      <el-link type="info" :underline="false">
+        <el-icon
+          class="mdi mdi-menu mobile-menu-button"
+          @click="mobileMenuVisible = true"
+        />
+      </el-link>
+
+      <!-- Drawer 抽屉菜单 -->
+      <client-only>
+        <el-drawer
+          v-model="mobileMenuVisible"
+          class="mobile-drawer"
+          direction="rtl"
+          size="70%"
+        >
+          <template #header>
+            <div class="drawer-header">
+              <h1>菜单</h1>
+            </div>
+          </template>
+          <div>
+            <h2>站点导航</h2>
+            <el-menu
+              :default-active="activeName"
+              class="mobile-menu"
+              mode="vertical"
+              router
+              @select="mobileMenuVisible = false"
+            >
+              <el-menu-item index="products" :route="$localePath('/products')">
+                {{ $t('navigation.products') }}
+              </el-menu-item>
+              <el-menu-item
+                index="solutions"
+                :route="$localePath('/solutions')"
+              >
+                {{ $t('navigation.solutions') }}
+              </el-menu-item>
+              <el-menu-item index="support" :route="$localePath('/support')">
+                {{ $t('navigation.support') }}
+              </el-menu-item>
+              <el-menu-item index="about" :route="$localePath('/about')">
+                {{ $t('navigation.about-us') }}
+              </el-menu-item>
+            </el-menu>
+
+            <h2>实用工具</h2>
+            <el-menu
+              :default-active="activeName"
+              class="mobile-menu"
+              mode="vertical"
+              @select="mobileMenuVisible = false"
+            >
+              <el-menu-item @click="openExternalLink('http://cal.jinshen.cn')">
+                {{ $t('navigation.calculator') }}
+              </el-menu-item>
+            </el-menu>
+          </div>
+
+          <template #footer>
+            <el-dropdown @command="setLocale">
+              <el-link type="info" :underline="false">
+                <el-icon class="mdi mdi-translate mobile-menu-button" />
+              </el-link>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="zh">简体中文</el-dropdown-item>
+                  <el-dropdown-item command="en">English</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-drawer>
+      </client-only>
     </div>
   </header>
 </template>
@@ -78,6 +157,7 @@
   const { setLocale } = useI18n();
 
   const activeName = ref<string | undefined>(undefined);
+  const mobileMenuVisible = ref(false);
 
   const refreshMenu = () => {
     const path = router.currentRoute.value.path;
@@ -94,6 +174,10 @@
     }
   };
 
+  const openExternalLink = (url: string) => {
+    window.open(url, '_blank');
+  };
+
   onMounted(() => {
     refreshMenu();
     // 监听路由变化以更新激活状态
@@ -105,10 +189,10 @@
 
 <style scoped>
   .header-container {
-    padding: 0 10px;
     display: flex;
-    height: 80px;
     align-items: center;
+    height: 80px;
+    padding: 0 20px;
     border-bottom: 1px solid #e0e0e0;
   }
 
@@ -167,4 +251,88 @@
   .action-icon {
     font-size: 24px;
   }
+
+  .mobile-menu-button {
+    display: none; /* 默认隐藏汉堡按钮 */
+  }
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :deep(.el-drawer__header) {
+    margin-bottom: 0;
+  }
+
+  :deep(.el-drawer__body) {
+    padding: 20px;
+  }
+
+  .mobile-drawer h1 {
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .mobile-drawer h2 {
+    font-size: 20px;
+    margin-bottom: 16px;
+    font-weight: bold;
+  }
+
+  .mobile-menu {
+    border: none;
+    margin-bottom: 24px;
+  }
+
+  .mobile-menu .el-menu-item {
+    font-size: 16px;
+    background-color: transparent !important;
+  }
+
+  .mobile-menu .el-menu-item.is-active {
+    color: var(--el-color-primary);
+  }
+
+  .mobile-menu .el-menu-item:hover {
+    color: var(--el-color-primary);
+  }
+
+  @media (max-width: 1024px) {
+    .header-container {
+      height: 70px;
+      padding: 0 16px;
+    }
+
+    .website-logo {
+      height: 48px;
+    }
+
+    .header-menu-section .header-menu .el-menu-item {
+      font-size: 14px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .header-menu-section {
+      display: none; /* 隐藏横向菜单 */
+    }
+
+    .hide-on-mobile {
+      display: none; /* 隐藏部分图标 */
+    }
+
+    .header-actions {
+      gap: 12px;
+    }
+
+    .mobile-menu-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      cursor: pointer;
+    }
+  }
 </style>

app/components/shared/ProductFilter.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="question-category">
-    <el-row :gutter="12">
+    <el-row class="hide-on-mobile" :gutter="12">
       <el-col :span="8">
         <span class="select-label">产品分类</span>
         <el-select
@@ -43,6 +43,48 @@
         />
       </el-col>
     </el-row>
+    <el-row class="display-on-mobile" :gutter="12">
+      <el-col :span="12">
+        <span class="select-label">产品分类</span>
+        <el-select
+          v-model="model.selectedType"
+          placeholder="选择产品类型"
+          clearable
+        >
+          <el-option
+            v-for="type in productTypeOptions"
+            :key="type.id"
+            :label="type.name"
+            :value="type.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12">
+        <span class="select-label">产品系列</span>
+        <el-select
+          v-model="model.selectedProduct"
+          placeholder="选择系列产品"
+          clearable
+        >
+          <el-option
+            v-for="product in productOptions"
+            :key="product.id"
+            :label="product.name"
+            :value="product.id"
+          />
+        </el-select>
+      </el-col>
+    </el-row>
+    <el-row class="display-on-mobile">
+      <span class="select-label">关键词</span>
+      <el-input
+        v-model="model.keyword"
+        placeholder="输入关键词..."
+        clearable
+        :prefix-icon="Search"
+      />
+    </el-row>
   </div>
 </template>
 
@@ -82,4 +124,18 @@
     height: 40px;
     font-size: 0.9rem;
   }
+
+  .display-on-mobile {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    .hide-on-mobile {
+      display: none;
+    }
+    .display-on-mobile {
+      display: flex;
+      margin-bottom: 1rem;
+    }
+  }
 </style>

app/pages/support/index.vue

@@ -86,7 +86,8 @@
   }
 
   .card-group {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
     gap: 50px;
     justify-content: space-around;
     margin-bottom: 2rem;
@@ -121,4 +122,15 @@
     border-radius: 4px;
     min-height: 36px;
   }
+
+  @media (max-width: 768px) {
+    section {
+      width: 100%;
+    }
+
+    .card-group {
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+  }
 </style>