OPC 产品截图放大为旗舰特写布局:单列通栏 1090px 展示 + 文本双栏

- OPC 卡增加 .product-feature 单列布局,截图通卡宽渲染 1090px
  (原 841px),高度 614px,比例无失真
- .product-feature .product-visual 改 align-items:stretch,
  修复 flex 列 + align-items:center 导致 picture 收缩到图片固有宽的问题
- lang-block 双栏排布(痛点|方案),场景/效益通栏;
  移动端 ≤1024px 回落单列,无横向溢出
- CDP 静态取证全绿:FEATURE/EN_FEATURE/M_FEATURE 三条新断言
  (通栏宽度、中英双语双栏、移动端单列回落)+ 全量回归 exit 0
This commit is contained in:
2026-10-20 00:36:53 +08:00
parent cdc67e0ea3
commit 5470bc67a1
2 changed files with 15 additions and 2 deletions
+13
View File
@@ -136,6 +136,17 @@ body[data-lang="zh"] .en,body[data-lang="en"] .zh{display:none}
.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%;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-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}
/* 旗舰特写布局:OPC 单列通栏,截图通卡宽展示,文本双栏排布 */
.product-feature{direction:ltr;grid-template-columns:1fr;gap:34px;align-items:start}
.product-feature:nth-child(even){direction:ltr}
.product-feature .product-visual{gap:14px;align-items:stretch}
.product-feature .product-icon{display:none}
.product-feature .lang-block{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.product-feature .lang-block>p:first-child,
.product-feature .pb-scene,
.product-feature .pb-benefit{grid-column:1/-1}
.product-feature .pb-block{margin-top:24px}
/* ===== 产品详情:痛点 / 方案 / 场景 / 效益 ===== */ /* ===== 产品详情:痛点 / 方案 / 场景 / 效益 ===== */
.pb-block{margin-top:18px} .pb-block{margin-top:18px}
.pb-title{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;letter-spacing:1.5px;margin-bottom:10px} .pb-title{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;letter-spacing:1.5px;margin-bottom:10px}
@@ -230,6 +241,8 @@ body[data-lang="zh"] .en,body[data-lang="en"] .zh{display:none}
@media (max-width:1024px){ @media (max-width:1024px){
.product{grid-template-columns:1fr;padding:32px} .product{grid-template-columns:1fr;padding:32px}
.product:nth-child(even){direction:ltr} .product:nth-child(even){direction:ltr}
.product-feature{gap:26px}
.product-feature .lang-block{grid-template-columns:1fr}
.product-visual{order:-1} .product-visual{order:-1}
.product-icon{width:72px;height:72px} .product-icon{width:72px;height:72px}
.product-icon svg{width:40px;height:40px} .product-icon svg{width:40px;height:40px}
+2 -2
View File
@@ -172,8 +172,8 @@
<p class="section-desc"><span class="zh">从一人公司的 AI 操作系统,到企业的视频工作流、团队 AI 工作台,再到数字人才培育平台。</span><span class="en">From an AI operating system for one-person companies to enterprise video workflows, team AI workspaces, and a digital talent platform.</span></p> <p class="section-desc"><span class="zh">从一人公司的 AI 操作系统,到企业的视频工作流、团队 AI 工作台,再到数字人才培育平台。</span><span class="en">From an AI operating system for one-person companies to enterprise video workflows, team AI workspaces, and a digital talent platform.</span></p>
</div> </div>
<!-- Product 1: OPC --> <!-- Product 1: OPC(旗舰特写布局) -->
<article class="product reveal" data-tilt> <article class="product product-feature reveal" data-tilt>
<div class="product-visual"> <div class="product-visual">
<div class="product-icon"> <div class="product-icon">
<svg viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="20" stroke="currentColor" stroke-width="2.5" opacity="0.35"/><path d="M24 8v6M24 34v6M8 24h6M34 24h6M13 13l4 4M31 31l4 4M35 13l-4 4M17 31l-4 4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><circle cx="24" cy="24" r="6" fill="currentColor"/></svg> <svg viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="20" stroke="currentColor" stroke-width="2.5" opacity="0.35"/><path d="M24 8v6M24 34v6M8 24h6M34 24h6M13 13l4 4M31 31l4 4M35 13l-4 4M17 31l-4 4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><circle cx="24" cy="24" r="6" fill="currentColor"/></svg>