admin/donsen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复产品截图未全尺寸展示：视觉列 420px 固定宽改比例分配 + 去除强制裁剪

Browse Source 
- 部署实测问题：产品卡视觉列硬编码 420px，截图渲染仅约 420px 宽；且 aspect-ratio:16/9 + object-fit:cover 将非 16:9 截图（如 4:3 的 AI智习室管理后台）上下裁掉
- 修复：.product 网格列改 minmax(0,1.15fr) minmax(0,.85fr)（桌面端截图渲染宽 420→599px）；.product-shot-img 去除 aspect-ratio/object-fit，按各图原始比例完整展示（HTML width/height 属性本就与 WebP 自然尺寸一致，无 CLS 风险）
- 取证（cdp-verify-shots.mjs）：新增 IMG_NOT_FULLSIZE（rendered≥520px）与 IMG_CROPPED（渲染比例=原始比例±1%）断言，四图 rendered=599 且 cropFree 全 true；移动端单栏 390px 无溢出；零 console 错误、零失败请求
This commit is contained in:
admin
2026-10-20 00:15:37 +08:00
parent 59607097c7
commit cdc67e0ea3
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+2 -2
View File
@@ -127,14 +127,14 @@ body[data-lang="zh"] .en,body[data-lang="en"] .zh{display:none}
.about-chips li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue-500);border-radius:12px;padding:16px 20px;font-weight:600;font-size:15px;color:var(--navy-800);box-shadow:var(--shadow)} .about-chips li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue-500);border-radius:12px;padding:16px 20px;font-weight:600;font-size:15px;color:var(--navy-800);box-shadow:var(--shadow)}
/* PRODUCTS */ /* PRODUCTS */
.product{display:grid;grid-template-columns:420px 1fr;gap:48px;align-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:44px;margin-bottom:36px} .product{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:44px;margin-bottom:36px}
.product:nth-child(even){direction:rtl} .product:nth-child(even){direction:rtl}
.product:nth-child(even)>*{direction:ltr} .product:nth-child(even)>*{direction:ltr}
.product-visual{display:flex;flex-direction:column;gap:20px;align-items:center} .product-visual{display:flex;flex-direction:column;gap:20px;align-items:center}
.product-icon{width:96px;height:96px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(30,95,216,.28),rgba(232,86,42,.18));border:1px solid rgba(91,155,255,.35);color:var(--blue-400)} .product-icon{width:96px;height:96px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(30,95,216,.28),rgba(232,86,42,.18));border:1px solid rgba(91,155,255,.35);color:var(--blue-400)}
.product-icon svg{width:52px;height:52px} .product-icon svg{width:52px;height:52px}
.product-shot{width:100%;aspect-ratio:16/10;border:1.5px dashed rgba(255,255,255,.22);border-radius:14px;display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:13.5px;letter-spacing:1px;background:rgba(255,255,255,.03)} .product-shot{width:100%;aspect-ratio:16/10;border:1.5px dashed rgba(255,255,255,.22);border-radius:14px;display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:13.5px;letter-spacing:1px;background:rgba(255,255,255,.03)}
.product-shot-img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;border:1.5px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.03);box-shadow:0 18px 50px rgba(0,0,0,.35)} .product-shot-img{width:100%;height:auto;border:1.5px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.03);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.product-shot-cap{font-size:12.5px;color:rgba(255,255,255,.68);letter-spacing:.5px;text-align:center} .product-shot-cap{font-size:12.5px;color:rgba(255,255,255,.68);letter-spacing:.5px;text-align:center}
/* ===== 产品详情：痛点 / 方案 / 场景 / 效益 ===== */ /* ===== 产品详情：痛点 / 方案 / 场景 / 效益 ===== */
.pb-block{margin-top:18px} .pb-block{margin-top:18px}