azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(base-assets): F8 商品卡与人物/场景卡统一尺寸(240px 方图)

Browse Source 
- 原商品卡 360px高/3:5(高窄)、人物卡方图(矮宽)→ 视觉不一致
- 商品卡改 240px 宽 + 方图(aspect-ratio:1),与人物/场景卡一致
- 人物/场景网格列固定 240px(不拉伸)→ 与商品卡精确等大,左对齐
- 同步对齐稿:W4 审核范围收窄(仅视频趴人脸送审,模特上身图属图片趴不审)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
seaislee1209
2026-06-20 19:49:57 +08:00
co-authored by Claude Opus 4.8
parent 6322ef3a0a
commit 1c9143ce61
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/pipeline-page.css
+5 -3
View File
@@ -285,9 +285,11 @@
.asset-sec .sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.asset-sec .sec-h h3 { font-size: 15px; font-weight: 600; }
.asset-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
/* 固定 240px 列(不拉伸)→ 人物/场景卡与上方商品卡精确等大 */
.asset-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, 240px); gap: 14px; }
.prod-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.prod-row > .asset-card-2 { flex: 0 0 auto; width: auto; max-width: none; min-width: 0; height: 360px; aspect-ratio: 3 / 5; }
/* 商品卡与下方人物/场景卡统一尺寸:240px 宽 + 方图(原 360px高/3:5 高窄,跟人物卡不一致) */
.prod-row > .asset-card-2 { flex: 0 0 240px; width: 240px; min-width: 0; }
.prod-preview { flex: 0 0 360px; height: 360px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px; display: none; flex-direction: column; gap: 10px; }
.prod-preview.show { display: flex; }
.prod-preview-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-56); letter-spacing: .04em; text-transform: uppercase; }
@@ -328,7 +330,7 @@
.asset-card-2 .body-2 .btn:disabled:hover, .asset-card-2 .body-2 .btn.disabled:hover { background: transparent; border-color: transparent; color: var(--black-alpha-32); box-shadow: none; transform: none; }
.asset-card-2.prod-lib-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-48); }
.asset-card-2.prod-lib-card .prod-thumb { flex: 1 1 0; min-height: 0; position: relative; aspect-ratio: auto; }
.asset-card-2.prod-lib-card .prod-thumb { position: relative; aspect-ratio: 1; }
.asset-card-2.prod-lib-card .prod-body { padding: 14px 14px 12px; flex: 0 0 auto; }
.asset-card-2.prod-lib-card .prod-name { font-size: 14px; font-weight: 600; color: var(--accent-black); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-2.prod-lib-card .prod-cat { display: inline-flex; align-items: center; margin-top: 8px; padding: 2px 8px; background: var(--background-lighter); color: var(--black-alpha-72); border-radius: var(--r-sm); font-size: 12px; }