From e017d3a809da0d45df038cb93d1b4ae1c593fc1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= Date: Fri, 23 Oct 2026 11:00:13 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20home=20visual=20feedback=20round=20?= =?UTF-8?q?=E2=80=94=20soft=20bg=20for=20features,=20branded=20placeholder?= =?UTF-8?q?,=20plan=2010j?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - advantages section gains section--soft (white cards were invisible on white) - .pro-art placeholder redesigned: brand gradient + initials + small kind label, ring ornament hidden (was heavy gray block) - plan: new Task 10j (port cms header/footer chrome visuals) per user feedback that overall look should match cms - verified live: mirror build 7f1e8c47f0c4 (374/384 real images pulled, 203 pages, 0 errors) Co-Authored-By: Claude Code --- .../plans/2026-10-22-trade-pro-theme-port.md | 10 ++++++++++ themes/trade-pro/pages/home.html | 2 +- themes/trade-pro/pro.css | 7 +++++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/superpowers/plans/2026-10-22-trade-pro-theme-port.md b/docs/superpowers/plans/2026-10-22-trade-pro-theme-port.md index d1d3549..e34d65d 100644 --- a/docs/superpowers/plans/2026-10-22-trade-pro-theme-port.md +++ b/docs/superpowers/plans/2026-10-22-trade-pro-theme-port.md @@ -377,6 +377,16 @@ def test_theme_color_map_covers_trade_pro(): 5. **前端入口 option 文案**：三个 HTML 下拉用"Trade Pro · 外贸 B2B（英文）"中文风格与各文件现状一致（theme-gallery 用英文）。 6. **平台数据层中文残留（Task 5 质量审查发现）**：bootstrap 生成的 8 个标准页（/about/ /contact/ /products/ /news/ 等）的 ``、`<h1>`、面包屑来自平台造的中文标题（关于我们/联系我们/产品中心…），主题层无法翻译用户数据。Phase 3 视觉验收时接受（真实站点内容为英文导入数据时自然英文），若 bootstrap 英文化成为需求属平台任务另行立项。 +## 用户反馈修复队列（2026-10-23 首页预览反馈，10b 收口后立即执行） + +0. **[新增 10j] cms 页眉/页脚移植**（用户反馈"整体不是 cms 效果"）：在平台 site_design 生成的 DOM 结构上，用 .sf-theme-trade-pro 作用域 CSS 完整还原 cms Header/Footer 视觉（Header.astro/Footer.astro 源码样式：白底细分割线、导航字距/悬停态、蓝色 GET A QUOTE 按钮、cms 页脚深色带与栏目布局）。保持平台 chrome 数据流（导航/公告/CTA 配置仍生效）。排在 10c-10i 之后、Task 11 之前。 + +1. `.sf-tp-feature` 补 cms FeatureGrid.astro 的卡片皮肤：白底（--sf-tp-color-surface-default）+ hairline 边框（--sf-tp-color-border-subtle）+ 圆角 + 居中 + padding，900px 两列、620px 横排（源码 scoped CSS 全量对照） +2. `.sf-tp-card` 对照 cms dist 的 .card scoped CSS 补边框卡片皮肤（含 hover 抬升已有则保留） +3. `.sf-theme-trade-pro` 作用域内重设计 `.pro-art` 无图占位：brand 渐变底（surface-inverse → brand-primary 混合）+ 白色首字母居中 + 小写 kind 标签，替代共享宏灰块（"10 PRODUCT"噪字） +4. Hero 双按钮改横排（flex gap，620px 换行）——核对 pro.css hero 区现状 +5. 验收方式：浏览器截图前后对照（Playwright），产品卡/特性卡/占位块三处逐一确认 + ## 风险与回退 - 每个 Task 独立 commit，出问题 `git revert` 单点回退 diff --git a/themes/trade-pro/pages/home.html b/themes/trade-pro/pages/home.html index 23ba012..ab8553a 100644 --- a/themes/trade-pro/pages/home.html +++ b/themes/trade-pro/pages/home.html @@ -105,7 +105,7 @@ </div> </section> {% endif %} -<section class="section"> +<section class="section section--soft"> <div class="wrap"> <div class="sf-tp-section-head" data-reveal> <div> diff --git a/themes/trade-pro/pro.css b/themes/trade-pro/pro.css index 3866383..d6ebdfd 100644 --- a/themes/trade-pro/pro.css +++ b/themes/trade-pro/pro.css @@ -263,3 +263,10 @@ .sf-theme-trade-pro .pro-footer-bottom{border-top:1px solid #24344c} .sf-theme-trade-pro .pro-filter-panel{border:1px solid #dfe7f2;border-radius:var(--sf-tp-radius,8px)} .sf-theme-trade-pro .pro-404 strong{color:var(--sf-tp-primary,#0b3d91)} + +/* ── 无图占位重设计（用户反馈 2026-10-23：共享宏灰块与设计不符）── + brand 渐变底 + 首字母 + 小型 kind 标签；环形装饰隐藏 */ +.sf-theme-trade-pro .pro-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sf-tp-space-2);background:linear-gradient(135deg,var(--sf-tp-color-surface-brand-soft),color-mix(in srgb,var(--sf-tp-color-brand-primary) 12%,var(--sf-tp-color-surface-default)));color:var(--sf-tp-color-text-brand)} +.sf-theme-trade-pro .pro-art .pro-art-ring{display:none} +.sf-theme-trade-pro .pro-art .pro-art-center{font-size:28px;font-weight:800;letter-spacing:.04em} +.sf-theme-trade-pro .pro-art .pro-art-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sf-tp-color-text-muted)}