style(组件): 优化搜索图片网格卡片样式
- 调整圆角为更精致的 rounded 样式 - 更新背景色支持亮色/暗色主题 - 使用 ring 替代 border 实现更细腻的边框效果 - 添加精细的阴影层次感 - 优化 hover 状态的阴影过渡效果
This commit is contained in:
parent
cb05f06483
commit
92ec88e1a3
@ -136,11 +136,12 @@ export function SearchImagesGrid({
|
|||||||
key={`${image.imageUrl}-${originalIndex}`}
|
key={`${image.imageUrl}-${originalIndex}`}
|
||||||
className={cn(
|
className={cn(
|
||||||
'break-inside-avoid mb-3 group relative',
|
'break-inside-avoid mb-3 group relative',
|
||||||
'rounded-lg overflow-hidden',
|
'rounded overflow-hidden',
|
||||||
'bg-muted/30 dark:bg-muted/20',
|
'bg-white dark:bg-zinc-900',
|
||||||
'border border-border/50',
|
'ring-1 ring-black/5 dark:ring-white/10',
|
||||||
|
'shadow-[0_2px_8px_rgba(0,0,0,0.06)]',
|
||||||
'transition-all duration-200',
|
'transition-all duration-200',
|
||||||
'hover:shadow-lg hover:border-primary/30',
|
'hover:shadow-[0_6px_20px_rgba(0,0,0,0.1)]',
|
||||||
!isLoaded && 'animate-pulse'
|
!isLoaded && 'animate-pulse'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user