feat: port cms case layout into trade-pro
Task 10g: rewrite pages/case.html from the thin 1-line variant to the cms projects/[slug].astro design (pixel baseline dist/hesupipe/en/projects/): PageHero (breadcrumb Home > Cases > title, cover bg) + 1.2fr/0.8fr detail grid (overview block with location/industry rows + rich body via the 10d typography layer; sticky side column with main photo, 3-col gallery tiles and Results card) + Recommended Products + Other Projects (groups['case'] minus self), all empty-data sections hidden. Results points come from the open fields.results convention (semicolon/newline separated); cms dictionary fallback copy is never ported (fake data across sites). Listing case branch (10c evaluation): core form (hero + cols-3 cards + pagination) already matches cms projects list; only the hero copy voice differed, so listing.html gains a case-aware eyebrow/lead fallback (OUR PROJECTS). cms-specific tabs (no data source) and the FEATURED CASE STUDY band (HESU-static dictionary content) stay unported, documented in the template header. Adds test_trade_pro_case_layout_structure (build-flow: gallery/results structure, related-case dedup, empty-data hiding, /cases/ hero voice). Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -531,3 +531,45 @@
|
||||
.sf-theme-trade-pro .sf-tp-contact-item{grid-template-columns:40px 1fr;gap:10px}
|
||||
.sf-theme-trade-pro .sf-tp-contact-form{padding:20px}
|
||||
}
|
||||
|
||||
/* ── Task 10g：case 案例详情（projects/[slug].astro 移植）──
|
||||
源 src/pages/[locale]/projects/[slug].astro：detail-grid 1.2fr/0.8fr 双栏
|
||||
（文案列概览块 + 正文；侧列 sticky：主图 + 3 列相册瓦片 + Results 成果卡）。
|
||||
共享组件复用：sf-tp-page-hero/breadcrumb（10c 内页 hero）、sf-tp-photo/
|
||||
photo-plain（10a 实景框）、sf-tp-section-head/card-grid/card（10a 卡片系）、
|
||||
sf-tp-article-body 排版层（10d 双挂）。本块只补 case 专属形态：● location
|
||||
行、相册瓦片、成果卡与 ✓ 圆徽。 */
|
||||
|
||||
.sf-theme-trade-pro .sf-tp-case-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:calc(var(--sf-tp-space-12) + var(--sf-tp-space-4));align-items:start}
|
||||
/* 概览块：眉题 + h2 + ● location 行（cms .location：品牌色半粗） */
|
||||
.sf-theme-trade-pro .sf-tp-case-overview h2{margin-block:var(--sf-tp-space-2) var(--sf-tp-space-4)}
|
||||
.sf-theme-trade-pro .sf-tp-case-location{display:flex;align-items:baseline;gap:var(--sf-tp-space-2);color:var(--sf-tp-color-text-brand);font-weight:var(--sf-tp-font-weight-semibold);margin-block-end:var(--sf-tp-space-3);line-height:var(--sf-tp-line-height-normal)}
|
||||
.sf-theme-trade-pro .sf-tp-case-location span{font-size:var(--sf-tp-font-size-xs)}
|
||||
/* 正文块与概览块分组（cms .detail-block 发丝线分隔的对应物） */
|
||||
.sf-theme-trade-pro .sf-tp-case-body{margin-block-start:var(--sf-tp-space-8);padding-block-start:var(--sf-tp-space-6);border-block-start:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
|
||||
/* 侧列 sticky（cms .detail-side：top = space-16 + space-4） */
|
||||
.sf-theme-trade-pro .sf-tp-case-side{display:grid;gap:var(--sf-tp-space-6);position:sticky;top:calc(var(--sf-tp-space-16) + var(--sf-tp-space-4))}
|
||||
/* 相册：3 列瓦片（cms .case-gallery），悬浮轻缩放 */
|
||||
.sf-theme-trade-pro .sf-tp-case-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sf-tp-space-2)}
|
||||
.sf-theme-trade-pro .sf-tp-case-gallery img{width:100%;aspect-ratio:var(--sf-tp-ratio-landscape);object-fit:cover;border-radius:var(--sf-tp-radius-sm);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);transition:transform var(--sf-tp-duration-fast) var(--sf-tp-easing-standard)}
|
||||
.sf-theme-trade-pro .sf-tp-case-gallery img:hover{transform:scale(1.03)}
|
||||
/* 成果卡（cms .results-card）：accent 顶边 + ✓ 圆徽要点列表 */
|
||||
.sf-theme-trade-pro .sf-tp-case-results{background:var(--sf-tp-color-surface-default);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);border-block-start:var(--sf-tp-border-width-strong) solid var(--sf-tp-color-brand-accent);border-radius:var(--sf-tp-card-border-radius);padding:var(--sf-tp-card-padding-md)}
|
||||
.sf-theme-trade-pro .sf-tp-case-results h3{font-size:var(--sf-tp-font-size-lg);margin-block-end:var(--sf-tp-space-3)}
|
||||
.sf-theme-trade-pro .sf-tp-case-results ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sf-tp-space-2)}
|
||||
.sf-theme-trade-pro .sf-tp-case-results li{display:flex;align-items:center;gap:var(--sf-tp-space-2);font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-secondary)}
|
||||
.sf-theme-trade-pro .sf-tp-case-check{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--sf-tp-space-4) + var(--sf-tp-space-1));height:calc(var(--sf-tp-space-4) + var(--sf-tp-space-1));color:var(--sf-tp-color-text-on-brand);background:var(--sf-tp-color-brand-primary);border-radius:var(--sf-tp-radius-full);flex:0 0 auto}
|
||||
|
||||
/* ── case 响应式（cms 断点 900 单列堆叠 + 侧列取消 sticky；620 紧凑。
|
||||
内页 hero 的 767/620 竖版由 10c 既有块覆盖；卡片栅格折叠由 10a 既有块
|
||||
提供（复用 sf-tp-card-grid 类名）；正文 620 字号由 10d 的
|
||||
sf-tp-article-body 双挂规则提供。折叠规则收在本任务媒体块内
|
||||
（10c 教训：同特异性按源顺序取胜）── */
|
||||
@media (max-width: 900px){
|
||||
.sf-theme-trade-pro .sf-tp-case-grid{grid-template-columns:1fr;gap:var(--sf-tp-space-8)}
|
||||
.sf-theme-trade-pro .sf-tp-case-side{position:static}
|
||||
}
|
||||
@media (max-width: 620px){
|
||||
.sf-theme-trade-pro .sf-tp-case-results{padding:16px}
|
||||
.sf-theme-trade-pro .sf-tp-case-results li{font-size:var(--sf-tp-font-size-xs)}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user