fix(card): 修复首页卡片封面图高度場陷

PostCard 的封面容器同时带 .blur-img 和 .post-card-cover-blur 两个类。
.blur-img 的 aspect-ratio: var(--ar) 定义在 .post-card-cover-blur 之后
(同特异性,后定义胜出),而卡片不写 --ar 变量(只有详情页 PostCover
在 SSR 写入),导致 var(--ar) 解析为空 → aspect-ratio 无效 → 高度 0。

用 .blur-img.post-card-cover-blur 双类选择器提升特异性(0,2,0 > 0,1,0),
让固定 4/3 比例可靠覆盖 var(--ar)。
This commit is contained in:
xfy 2026-06-24 15:38:53 +08:00
parent 66d29eaa62
commit d48b32b40e

View File

@ -526,8 +526,10 @@
text-underline-offset: 0.3rem;
}
/* 卡片封面blur-img 结构,固定 4:3 比例hover 缩放 */
.post-card-cover-blur {
/* 卡片封面blur-img 结构固定 4:3 比例hover 缩放
用属性选择器提升特异性可靠覆盖 .blur-img aspect-ratio: var(--ar)
卡片不写 --arvar(--ar) 解析为空会导致高度塌陷 */
.blur-img.post-card-cover-blur {
margin: 0;
aspect-ratio: 4 / 3;
}