From c977dccbb3d88a264efbffc24c6d277d9d242e3b Mon Sep 17 00:00:00 2001
From: huangmin <2927933426@qq.com>
Date: Thu, 4 Jun 2026 16:01:10 +0800
Subject: [PATCH] =?UTF-8?q?style(HomeProjects):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=8C=BA=E5=9F=9F=E6=B8=90=E5=8F=98=E9=81=AE?=
 =?UTF-8?q?=E7=BD=A9=E5=92=8C=E6=8C=89=E9=92=AE=E5=B1=82=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  给第一个项目卡片容器添加z-index层级
2.  调整左侧渐变遮罩的位置和层级
3.  修正右侧溢出渐变遮罩的垂直定位
---
 src/components/HomeProjectsContent.tsx | 31 ++++++++++++++------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/HomeProjectsContent.tsx b/src/components/HomeProjectsContent.tsx
index 0e726404..f4339587 100644
--- a/src/components/HomeProjectsContent.tsx
+++ b/src/components/HomeProjectsContent.tsx
@@ -268,20 +268,23 @@ function ProjectSectionGrid({
         </div>
       ) : null}
       {firstProject ? (
-        <div key={firstProject.id} className="relative min-w-0">
+        <div key={firstProject.id} className="relative z-[15] min-w-0">
           {pageInfo ? (
-            <button
-              type="button"
-              aria-label={t("home.prevProject")}
-              title={t("home.prevProject")}
-              onClick={onPrevPage}
-              disabled={!canGoPrev || isLoadingProjects}
-              className="absolute left-[-19px] top-[50px] z-10 hidden h-[39px] w-[39px] items-center justify-center rounded-full bg-white text-[#666] shadow-[0_2px_5px_rgba(0,0,0,0.1)] transition hover:bg-[#f0f0f0] disabled:cursor-not-allowed disabled:opacity-40 xl:flex"
-            >
-              <span className="rotate-180">
-                <ArrowIcon />
-              </span>
-            </button>
+            <>
+              <div className="pointer-events-none absolute left-0 top-0 z-[5] hidden h-[139px] w-[105px] bg-gradient-to-r from-[#f9f9f9] to-[#f9f9f9]/0 xl:block" />
+              <button
+                type="button"
+                aria-label={t("home.prevProject")}
+                title={t("home.prevProject")}
+                onClick={onPrevPage}
+                disabled={!canGoPrev || isLoadingProjects}
+                className="absolute left-[-19px] top-[50px] z-[20] hidden h-[39px] w-[39px] items-center justify-center rounded-full bg-white text-[#666] shadow-[0_2px_5px_rgba(0,0,0,0.1)] transition hover:bg-[#f0f0f0] disabled:cursor-not-allowed disabled:opacity-40 xl:flex"
+              >
+                <span className="rotate-180">
+                  <ArrowIcon />
+                </span>
+              </button>
+            </>
           ) : null}
           <ProjectCard
             {...firstProject}
@@ -302,7 +305,7 @@ function ProjectSectionGrid({
       ))}
       {showOverflowCue && pageInfo && (
         <>
-          <div className="pointer-events-none absolute bottom-0 right-0 hidden h-[139px] w-[105px] bg-gradient-to-r from-[#f9f9f9]/0 to-[#f9f9f9] xl:block" />
+          <div className="pointer-events-none absolute right-0 top-0 hidden h-[139px] w-[105px] bg-gradient-to-r from-[#f9f9f9]/0 to-[#f9f9f9] xl:block" />
           <button
             type="button"
             aria-label={t("home.nextProject")}