瀏覽代碼

增加跳转link

zhangzf 5 天之前
父節點
當前提交
a116c87304

+ 2 - 2
src/app/(public)/_components/HomeBestSellers.tsx

@@ -27,7 +27,7 @@ const HomeBestSellers = ({ bestSellerSection }: jinGangSectionProps) => {
       <div className="grid grid-cols-4 gap-8">
         {bestSellers.map((product) => (
           <div key={product.id} className="flex min-w-0 flex-col gap-2">
-            <div className="relative aspect-[3/4] w-full overflow-hidden rounded-sm">
+            <Link  href={`/${product.urlKey}.html`} className="relative aspect-[3/4] w-full overflow-hidden rounded-sm block">
               <Image
                 src={product.image_url}
                 alt={product.name}
@@ -35,7 +35,7 @@ const HomeBestSellers = ({ bestSellerSection }: jinGangSectionProps) => {
                 sizes="25vw"
                 className="object-cover"
               />
-            </div>
+            </Link>
 
             <Link
               href={`/${product.urlKey}.html`}

+ 2 - 2
src/app/(public)/_components/HomeNewArrival.tsx

@@ -23,7 +23,7 @@ const HomeNewArrival = ({ newArrivalSection }: newArrivalSectionProps) => {
       <div className="grid grid-cols-4 gap-8">
         {newArrival.map((product) => (
           <div key={product.id} className="flex min-w-0 flex-col gap-2">
-            <div className="relative aspect-[3/4] w-full overflow-hidden rounded-sm">
+             <Link  href={`/${product.urlKey}.html`} className="relative aspect-[3/4] w-full overflow-hidden rounded-sm block">
               <Image
                 src={product.image_url}
                 alt={product.name}
@@ -31,7 +31,7 @@ const HomeNewArrival = ({ newArrivalSection }: newArrivalSectionProps) => {
                 sizes="25vw"
                 className="object-cover"
               />
-            </div>
+            </Link>
 
             <Link
               href={`/${product.urlKey}.html`}

+ 11 - 3
src/app/(public)/_components/MiddleImageSwiper.tsx

@@ -4,6 +4,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import type {HomeProduct,HomeSectionImage} from "@/types/home/type"
 import Link from "next/link";
+import Image from "next/image";
 interface zeroWearProps {
   zeroWear: HomeProduct[];
   zeroWearImage:HomeSectionImage[]
@@ -176,12 +177,19 @@ const MiddleImageSwiper = ({ zeroWear,zeroWearImage }: zeroWearProps) => {
             {productList.map((item) => (
               <SwiperSlide key={item.id}>
                 <div className="bg-white rounded overflow-hidden  flex flex-col">
-                  <img
+                  {/* <img
                     src={item.image_url}
                     alt={item.name}
                     className="w-full aspect-[3/4] object-cover"
-                  />
-
+                  /> */}
+                  <Link  href={`/${item.urlKey}.html`} className="relative aspect-[3/4] w-full overflow-hidden rounded-sm block">
+                    <Image
+                      src={item.image_url}
+                      alt={item.name}
+                      fill
+                      className="object-cover"
+                    />
+                  </Link>
                   <div className="p-2 flex flex-col gap-2">
                     <Link   href={`/${item.urlKey}.html`} className="text-sm text-gray-800 truncate">
                       {item.name}

+ 2 - 2
src/app/(public)/_components/RecommendedProducts.tsx

@@ -131,7 +131,7 @@ export default function RecommendedProducts({ recommendedSection }: newArrivalSe
         {productList.map((item) => (
           <div key={item.id} className="flex flex-col gap-3">
             {/* Next.Image 商品图容器 */}
-            <div className="relative w-full aspect-[3/4] overflow-hidden rounded-md">
+            <Link  href={`/${item.urlKey}.html`} className="relative w-full aspect-[3/4] overflow-hidden rounded-md block">
               <Image
                 src={item.image_url}
                 alt={item.name}
@@ -139,7 +139,7 @@ export default function RecommendedProducts({ recommendedSection }: newArrivalSe
                 sizes="(max-width:768px) 50vw, 33vw"
                 className="object-cover"
               />
-            </div>
+            </Link>
 
             {/* 标题 */}
             <Link   href={`/${item.urlKey}.html`} className="text-sm text-gray-800 truncate">

+ 2 - 2
src/app/(public)/_components/Trending.tsx

@@ -134,7 +134,7 @@ const Trending = ({ trendingSection }: newArrivalSectionProps) => {
             <SwiperSlide key={`${item.id}-${index}`}>
               <div className=" overflow-hidden  flex flex-col">
                 {/* 图片区域 + 中间播放按钮 */}
-                <div className="relative rounded-xl w-full aspect-[4/5] overflow-hidden rounded-xl">
+                <Link href={`/${item.urlKey}.html`} className="relative rounded-xl w-full aspect-[4/5] overflow-hidden rounded-xl block">
                   <Image
                       src={item.image_url}
                       alt={item.name}
@@ -161,7 +161,7 @@ const Trending = ({ trendingSection }: newArrivalSectionProps) => {
                       <polygon points="5 3 19 12 5 21 5 3" />
                     </svg>
                   </button>
-                </div>
+                </Link>
 
                 {/* 底部文字价格区域 */}
                 <div className="p-3 flex flex-col rounded-xl mt-3 bg-[#f0f8f5] gap-3">