Sfoglia il codice sorgente

首页部分调整

zhangzf 1 giorno fa
parent
commit
5b1a983b34

+ 9 - 7
src/app/(public)/_components/HomeContent.tsx

@@ -98,21 +98,23 @@ export default function HomeContent({ homeData }: HomeContentProps) {
        sections,
         // categories 
       } = homeData;
+  console.log('sections-----------------aaaa:',sections);
+      
       // 过滤出 banner 板块
-  const bannerSection = sections.find(sec => sec.name === "banner");
+  const bannerSection = sections.find(sec => sec.sort_order === 2);
   const bannerImages = bannerSection?.images ?? [];
        // 过滤出 banner 板块
-  const jinGangSection = sections.find(sec => sec.id === 13);
+  const jinGangSection = sections.find(sec => sec.sort_order === 3);
   
     // 2. 筛选热销板块,假设后端name为 best_sellers,自行修改匹配后端标识
-  const bestSellerSection = sections.find(sec => sec.name === "BestSellers");
+  const bestSellerSection = sections.find(sec => sec.sort_order === 4);
         // 过滤出 banner 板块
-  const middleBannerSection = sections.find(sec => sec.id === 15);
+  const middleBannerSection = sections.find(sec => sec.sort_order === 5);
   const middleBanner = middleBannerSection?.images ?? [];
    // 3. 筛选new Arrival板块
-  const newArrivalSection = sections.find(sec => sec.name === "New_Arrival");
+  const newArrivalSection = sections.find(sec => sec.sort_order === 6);
    // 4. 筛选7板块
-  const zeroWearImageSection = sections.find(sec => sec.id === 18);
+  const zeroWearImageSection = sections.find(sec => sec.sort_order === 8);
   const zeroWearImage= zeroWearImageSection?.images ?? [];
    // 4. 筛选7板块
   const zeroWearSection = sections.find(sec => sec.name === "7");
@@ -125,7 +127,7 @@ export default function HomeContent({ homeData }: HomeContentProps) {
   // const recommended: HomeProduct[] = recommendedSection?.products ?? [];
 
   return (<>
-    <div className="min-h-screen pt-[162px] bg-white font-sans">
+    <div className="min-h-screen  bg-white font-sans">
       {/* 顶部Banner */}
       <div className="w-full relative">
         <TopImageSwiper  bannerImages={bannerImages}  />

+ 20 - 12
src/app/(public)/_components/HomeMiddleBanner.tsx

@@ -4,6 +4,7 @@
 // import { Navigation } from "swiper/modules";
 import Image from "next/image";
 import type { HomeSectionImage } from "@/types/home/type";
+import Link from "next/link";
 interface middleBannerProps {
   middleBanner: HomeSectionImage[];
 }
@@ -33,18 +34,25 @@ export default function HomeMiddleBanner({ middleBanner }: middleBannerProps) {
         onSlideChange={handleSlideChange}
         className="mb-6"
       > */}
-        {middleBannerImages.map((item, idx) => (
-          // <SwiperSlide key={idx}>
-            <div key={idx} className="relative w-full h-42">
-              <Image
-                src={item.image}
-                alt={item.title}
-                fill
-                className="w-full h-auto object-cover rounded-md"
-              />
-            </div>
-             //  {/* </SwiperSlide> */}
-        ))}
+      {middleBannerImages.map((item, idx) => (
+        // <SwiperSlide key={idx}>
+        <Link
+          key={idx}
+          href={item.link}
+          className="block w-full"
+          aria-label={item.title}
+        >
+          <Image
+            src={item.image}
+            alt={item.title}
+            width={1408}
+            height={692}
+            sizes="100vw"
+            className="w-full h-auto rounded-md object-cover"
+          />
+        </Link>
+        //  {/* </SwiperSlide> */}
+      ))}
       {/* </Swiper> */}
       {/* <div className="flex justify-center gap-2">
         <button

+ 5 - 3
src/app/(public)/_components/JinGangSwiper.tsx

@@ -127,22 +127,24 @@ export default function JinGangSwiper({jinGangSection} :jinGangSectionProps ) {
           className="w-full"
         >
           {jinGang.map((item, index) => (
-            <SwiperSlide key={`${item.title}-${index}`}>
+            <SwiperSlide   className="!h-auto" key={`${item.title}-${index}`}>
               {item.link ? (
                 <Link
                   href={item.link}
-                  className="relative aspect-[3/4] w-full overflow-hidden rounded-md w-full"
+                  
                   aria-label={item.title}
                 >
+                  <div className="relative aspect-3/4 w-full overflow-hidden rounded-md" >
                   <Image
                     src={item.image}
                     alt={item.title}
                     fill
                     className="object-cover rounded-md"
                   />
+                  </div>
                 </Link>
               ) : (
-                <div className="relative aspect-[3/4] w-full overflow-hidden rounded-md w-full">
+                <div className="relative aspect-3/4 w-full overflow-hidden rounded-md">
                  <Image
                     src={item.image}
                     alt={item.title}

+ 3 - 0
src/app/(public)/_components/TopImageSwiper.tsx

@@ -1,5 +1,6 @@
 
 import { Swiper, SwiperSlide } from 'swiper/react';
+import Link from 'next/link';
 // import { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper/modules';
 // 定义图片类型
 type BannerImageItem = {
@@ -37,11 +38,13 @@ const TopImageSwiper = ({ bannerImages }: TopImageSwiperProps) => {
         {/* ✅ 自动遍历图片数组,一行代码搞定所有图片 */}
         {bannerImages .map((item, index) => (
           <SwiperSlide key={index}>
+            <Link href={item.link}>
             <img
                  src={item.image}
               alt={item.title}
               className="w-full h-full object-cover"
             />
+            </Link>
           </SwiperSlide>
         ))}