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:
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user