Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-02-22 02:24:44 +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>

6
src/components/DemoCard.tsx
View File

@@ -134,7 +134,7 @@ const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
>
{/* 海报图片区域 */}
<div
className='relative w-full overflow-hidden rounded-md group-hover:scale-[1.02] transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) safari-fix'
className='relative w-full overflow-hidden rounded-md transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) safari-fix'
style={{
// 为 Safari 提供固定宽高比的后备方案
paddingBottom: '150%', // 2:3 比例
@@ -150,7 +150,7 @@ const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
alt={title}
fill
ref={imgRef}
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 blur-0'
@@ -209,7 +209,7 @@ const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
</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'>
{title}
</span>

8
src/components/VideoCard.tsx
View File

@@ -214,7 +214,7 @@ export default function VideoCard({
}`}
>
{/* 海报图片容器 */}
<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]' />
@@ -222,7 +222,7 @@ export default function VideoCard({
src={poster}
alt={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'
@@ -346,7 +346,7 @@ export default function VideoCard({
)}
{/* 信息层 - 与 DemoCard 对齐的动画 */}
<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'>
{title}
</span>
@@ -354,7 +354,7 @@ export default function VideoCard({
{/* 来源信息 */}
{source && (
<span className='mt-1 px-1 block text-gray-500 text-[0.5rem] sm:text-xs w-full text-center dark:text-gray-400 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-1 px-1 block text-gray-500 text-[0.5rem] sm:text-xs w-full text-center dark:text-gray-400 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='inline-block border border-gray-500/60 rounded px-2 py-[1px] dark:border-gray-400/60'>
{source_name}
</span>