fix(core): 新建项目选商品卡封面锁 1.4:1 高度,竖图/截图不再拉伸卡片

object-fit:cover 裁切 + overflow 隐藏,对齐商品库网格做法

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
zyc
2026-06-18 09:22:23 +08:00
co-authored by Claude Opus 4.8
parent c3306bcac3
commit bd719041a5
+5 -1
View File
@@ -137,7 +137,11 @@
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E") no-repeat center / contain;
z-index: 3;
}
.pp-grid .product-thumb { aspect-ratio: 1.4 / 1; }
/* 锁死封面区高度:固定 1.4:1 比例 + 裁切溢出,真图用 object-fit:cover 填充,
避免竖图/截图(如交易明细截图)按原始比例把卡片无限拉高 */
.pp-grid .product-thumb { aspect-ratio: 1.4 / 1; overflow: hidden; flex-shrink: 0; }
.pp-grid .product-thumb.has-real-media { position: relative; background: var(--background-lighter); }
.pp-grid .product-thumb.has-real-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-grid .product-body { padding: 14px 14px 12px; flex: 1; }
.pp-grid .product-name {
font-size: 14px; font-weight: 600; color: var(--accent-black);