From d076088747d9c1e11d5887cfec21d6bfddf1a0e2 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sat, 1 Nov 2025 15:32:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E7=AB=96=E5=B1=8F?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 首页Carousel高度根据屏幕宽度变化
- 首页推荐栏目卡片数量随屏幕宽度改变
---
 .../pages/homepage/HomepageCarousel.vue       |  6 ++
 .../pages/homepage/HomepageProductSection.vue | 61 ++++++++++++++++--
 .../homepage/HomepageSolutionSection.vue      | 62 +++++++++++++++++--
 3 files changed, 119 insertions(+), 10 deletions(-)

diff --git a/app/components/pages/homepage/HomepageCarousel.vue b/app/components/pages/homepage/HomepageCarousel.vue
index 6324594..0621c96 100644
--- a/app/components/pages/homepage/HomepageCarousel.vue
+++ b/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>
diff --git a/app/components/pages/homepage/HomepageProductSection.vue b/app/components/pages/homepage/HomepageProductSection.vue
index da4540a..9a4c9b0 100644
--- a/app/components/pages/homepage/HomepageProductSection.vue
+++ b/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>
diff --git a/app/components/pages/homepage/HomepageSolutionSection.vue b/app/components/pages/homepage/HomepageSolutionSection.vue
index 3144c78..af1e062 100644
--- a/app/components/pages/homepage/HomepageSolutionSection.vue
+++ b/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,22 @@
       router.push(localePath(`/solutions/${documentId}`));
     }
   };
+
+  watch(height, (h) => {
+    if (h > 0) {
+      carouselHeight.value = h + 40 + 'px';
+      console.log('carouselHeight updated:', carouselHeight.value);
+    }
+  });
+
+  onMounted(() => {
+    updatePerPage();
+    window.addEventListener('resize', updatePerPage);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', updatePerPage);
+  });
 </script>
 
 <style scoped>
@@ -126,7 +166,7 @@
   .recommend-list {
     display: flex;
     padding: 1rem;
-    height: 400px;
+    height: auto;
   }
 
   .recommend-card-group {
@@ -134,7 +174,7 @@
     gap: 1rem;
     width: 100%;
     margin: 0 auto;
-    height: 100%;
+    height: auto;
   }
 
   .recommend-card {
@@ -173,4 +213,16 @@
     width: 100%;
     border-radius: 4px;
   }
+
+  @media (max-width: 1024px) {
+    .recommend-card {
+      width: 50%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .recommend-card {
+      width: 100%;
+    }
+  }
 </style>