Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-02-27 23:34:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: card hover overflow

Browse Source
This commit is contained in:
shinya
2025-07-05 02:25:43 +08:00
parent c924fc5f6c
commit 2b9918817b
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AggregateCard.tsx
View File

@@ -180,7 +180,7 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
className='group relative w-full rounded-lg overflow-hidden bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out'
>
{/* 封面图片 2:3 */}
<div className='relative aspect-[2/3] w-full overflow-hidden rounded-md group-hover:scale-[1.02] transition-all duration-400 cubic-bezier(0.4,0,0.2,1)'>
<div className='relative aspect-[2/3] w-full overflow-hidden rounded-md transition-all duration-400 cubic-bezier(0.4,0,0.2,1)'>
{/* 图片占位符 - 骨架屏效果 */}
<ImagePlaceholder aspectRatio='aspect-[2/3]' />
@@ -188,7 +188,7 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
src={first.poster}
alt={first.title}
fill
className={`object-cover transition-all duration-700 cubic-bezier(0.34,1.56,0.64,1)
className={`object-cover transition-all duration-700 cubic-bezier(0.34,1.56,0.64,1) group-hover:scale-[1.05]
${
isLoaded
? 'opacity-100 scale-100'
@@ -260,7 +260,7 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
</div>
{/* 标题 */}
<span className='mt-2 px-1 block font-semibold truncate w-full text-center text-xs sm:text-sm transition-all duration-500 cubic-bezier(0.34,1.56,0.64,1) group-hover:translate-y-[-2px] opacity-80 group-hover:opacity-100'>
<span className='mt-2 px-1 block font-semibold truncate w-full text-center text-xs sm:text-sm transition-all duration-500 cubic-bezier(0.34,1.56,0.64,1) group-hover:translate-y-[-4px] opacity-80 group-hover:opacity-100'>
<span className='text-gray-900 dark:text-gray-200 group-hover:text-green-600 dark:group-hover:text-green-400'>
{first.title}
</span>