fix(core): 新建项目选商品卡封面锁 1.4:1 高度,竖图/截图不再拉伸卡片
object-fit:cover 裁切 + overflow 隐藏,对齐商品库网格做法 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user