From 706d4d0743387a84dd079e4a98b96b9540991cf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Thu, 29 Oct 2026 10:03:55 +0800
Subject: [PATCH] =?UTF-8?q?style:=20hero=20fullbleed=20=E2=80=94=20backgro?=
 =?UTF-8?q?und=20image=20+=20left=20text=20overlay=20(not=20split)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/trade-pro/blocks.css | 83 +++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)

diff --git a/themes/trade-pro/blocks.css b/themes/trade-pro/blocks.css
index 5723e87..f343194 100644
--- a/themes/trade-pro/blocks.css
+++ b/themes/trade-pro/blocks.css
@@ -312,3 +312,86 @@
 }
 /* 画布列内区块的移动端收边（V8.33 既有约定）*/
 @media(max-width:640px){.sf-theme-trade-pro .sf-layout-column{min-width:0}.sf-theme-trade-pro .sf-canvas .sf-section{padding-inline:clamp(12px,4vw,24px)}}
+
+/* ── Hero 全幅背景叠加模式（用户要求：大背景图+左文字，非分栏）── */
+.sf-theme-trade-pro .sf-section.sf-hero .sf-container{padding-block:0}
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split{
+  display:grid;
+  grid-template-columns:1fr;
+  position:relative;
+  min-height:min(72vh,640px);
+  align-items:end;
+  border-radius:var(--sf-tp-radius-sm,8px);
+  overflow:hidden;
+  isolation:isolate;
+}
+/* 背景图铺满整个 hero 区 */
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img{
+  position:absolute;
+  inset:0;
+  z-index:0;
+  margin:0;
+  height:100%;
+  min-height:100%;
+}
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img img{
+  width:100%;
+  height:100%;
+  object-fit:cover;
+  display:block;
+}
+/* 渐变叠加层：左侧深色保证文字可读 */
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img::after{
+  content:'';
+  position:absolute;
+  inset:0;
+  background:linear-gradient(90deg,
+    color-mix(in srgb,var(--sf-tp-color-surface-inverse, #0f2544) 72%, transparent) 0%,
+    color-mix(in srgb,var(--sf-tp-color-surface-inverse, #0f2544) 45%, transparent) 40%,
+    color-mix(in srgb,var(--sf-tp-color-brand-primary, #0874df) 18%, transparent) 100%);
+  pointer-events:none;
+}
+/* 无图时的品牌渐变底 */
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img.sf-hero-abstract{
+  background:linear-gradient(135deg,var(--sf-tp-color-surface-inverse,#0f2544),var(--sf-tp-color-brand-primary,#0874df));
+}
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img.sf-hero-abstract::after{display:none}
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img.sf-hero-abstract span{display:none}
+/* 文字叠加在左侧 */
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy{
+  position:relative;
+  z-index:2;
+  padding:var(--sf-tp-space-12,48px) var(--sf-tp-space-8,32px);
+  max-width:640px;
+  color:#fff;
+}
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy .sf-kicker{
+  color:var(--sf-tp-color-text-inverse-muted,#a8c8e8);
+}
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy h1,
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy h2{
+  color:#fff;
+  text-shadow:0 2px 12px rgba(0,0,0,.3);
+}
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy p{
+  color:rgba(255,255,255,.82);
+}
+.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy .sf-button{
+  background:var(--sf-tp-color-surface-brand,#0874df);
+  color:#fff;
+  border:0;
+}
+/* 移动端：文字仍可读 */
+@media (max-width:620px){
+  .sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split{
+    min-height:min(64vh,480px);
+  }
+  .sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img::after{
+    background:linear-gradient(180deg,
+      color-mix(in srgb,var(--sf-tp-color-surface-inverse,#0f2544) 30%, transparent) 0%,
+      color-mix(in srgb,var(--sf-tp-color-surface-inverse,#0f2544) 85%, transparent) 100%);
+  }
+  .sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy{
+    padding:20px 16px;
+  }
+}