Browse Source

style(HomeProjects): 调整项目区域渐变遮罩和按钮层级

1.  给第一个项目卡片容器添加z-index层级
2.  调整左侧渐变遮罩的位置和层级
3.  修正右侧溢出渐变遮罩的垂直定位
feature/group
huangmin 1 month ago
parent
commit
c977dccbb3
  1. 31
      src/components/HomeProjectsContent.tsx

31
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")}

Loading…
Cancel
Save