From e0a8828a9a431d1b1945021502716a67f850dabe 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:43:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=20hero=20banner=20v3=20=E2=80=94=20compl?=
 =?UTF-8?q?ete=20rewrite=20as=20full-viewport=20carousel=20background?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/trade-pro/blocks.css | 211 +++++++++++++++++++-----------------
 1 file changed, 113 insertions(+), 98 deletions(-)

diff --git a/themes/trade-pro/blocks.css b/themes/trade-pro/blocks.css
index 4496707..c72443b 100644
--- a/themes/trade-pro/blocks.css
+++ b/themes/trade-pro/blocks.css
@@ -313,120 +313,135 @@
 /* 画布列内区块的移动端收边（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-hero-copy .sf-button{
-  color:#ffffff !important;
-  background:#0874df !important;
-}
-.sf-theme-trade-pro .sf-hero-copy .sf-button:hover{
-  color:#ffffff !important;
-  background:#065bb8 !important;
+
+/* ══════════════════════════════════════════════════════════
+   HERO BANNER — 全幅背景轮播大横幅
+   结构：section > container > grid > [copy, img]
+   目标：图片铺满全屏宽 → 渐变叠加 → 文字左下角 → 按钮可见
+   ══════════════════════════════════════════════════════════ */
+
+/* ── 1. section 层：去 padding、去底色、设为定位上下文 ── */
+.sf-theme-trade-pro section.sf-section.sf-hero {
+  padding: 0 !important;
+  margin: 0 !important;
+  background: #0f2544 !important; /* 无图时的深色兜底 */
+  position: relative;
+  overflow: hidden;
 }
 
-/* ── Hero 真全幅：背景图铺满屏幕宽度（突破 container 限制）── */
-/* section 变成定位上下文，去掉内边距 */
-.sf-theme-trade-pro section.sf-section.sf-hero{
-  position:relative;
-  overflow:hidden;
-  padding:0!important;
-  background:none!important;
+/* ── 2. container 层：撑满 section 宽度（去掉 max-width） ── */
+.sf-theme-trade-pro section.sf-section.sf-hero > .sf-container {
+  max-width: 100% !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
-/* container 撑满 section 宽度 */
-.sf-theme-trade-pro section.sf-section.sf-hero .sf-container{
-  max-width:none!important;
-  padding:0!important;
-  margin:0!important;
+
+/* ── 3. grid 层：变成全幅容器（不再是两列 grid） ── */
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-grid.sf-hero-layout-split {
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: flex-end !important;
+  position: relative !important;
+  min-height: min(72vh, 640px) !important;
+  width: 100% !important;
+  gap: 0 !important;
+  overflow: hidden;
 }
-/* hero-grid 变成全幅容器 */
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split{
-  display:block!important;
-  position:relative;
-  min-height:min(72vh,640px);
-  overflow:hidden;
+
+/* ── 4. 图片层：绝对定位铺满整个 hero 区域 ── */
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-img {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  border-radius: 0 !important;
+  background: #0f2544 !important;
+  z-index: 0 !important;
+  overflow: hidden;
 }
-/* 背景图铺满整个 section */
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img{
-  position:absolute!important;
-  inset:0!important;
-  width:100%!important;
-  height:100%!important;
-  min-height:100%!important;
-  margin:0!important;
-  border-radius:0!important;
-  z-index:0;
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-img img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover !important;
+  display: block;
+  max-height: none !important;
 }
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img img{
-  width:100%!important;
-  height:100%!important;
-  object-fit:cover!important;
-  display:block;
+/* 渐变叠加：左深右透 */
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-img::after {
+  content: '' !important;
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg,
+    rgba(15,37,68,0.82) 0%,
+    rgba(15,37,68,0.50) 45%,
+    rgba(8,116,223,0.12) 100%);
+  pointer-events: none;
 }
-/* 左侧深色渐变叠加 */
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img::after{
-  content:'';
-  position:absolute;
-  inset:0;
-  z-index:1;
-  background:linear-gradient(90deg,
-    color-mix(in srgb,#0f2544 78%,transparent) 0%,
-    color-mix(in srgb,#0f2544 50%,transparent) 45%,
-    color-mix(in srgb,#0874df 15%,transparent) 100%);
-  pointer-events:none;
+/* 无图时的品牌渐变 */
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-img.sf-hero-abstract {
+  background: linear-gradient(135deg, #0f2544, #0874df) !important;
 }
-/* 无图时品牌渐变底 */
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img.sf-hero-abstract{
-  background:linear-gradient(135deg,#0f2544,#0874df);
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-img.sf-hero-abstract span { display: none !important; }
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-img.sf-hero-abstract::after { display: none !important; }
+
+/* ── 5. 文字层：在图片上方，对齐整站版心（1200px） ── */
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-copy {
+  position: relative !important;
+  z-index: 2 !important;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 32px calc(min(72vh, 640px) * 0.12);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: min(72vh, 640px);
+  box-sizing: border-box;
+  color: #fff !important;
 }
-.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-img.sf-hero-abstract::after{display:none}
-/* 文字约束在可视容器内（与整站版心对齐） */
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy{
-  position:relative;
-  z-index:2;
-  max-width:1200px;
-  margin:0 auto;
-  padding:calc(min(72vh,640px) * 0.18) 32px;
-  min-height:min(72vh,640px);
-  display:flex;
-  flex-direction:column;
-  justify-content:flex-end;
-  width:100%;
-  box-sizing:border-box;
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-copy .sf-kicker {
+  color: #a8c8e8 !important;
 }
-/* hero 内文字样式 */
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy .sf-kicker{
-  color:#a8c8e8!important;
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-copy h1,
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-copy h2 {
+  color: #fff !important;
+  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
+  max-width: 640px;
 }
-.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!important;
-  text-shadow:0 2px 16px rgba(0,0,0,.35);
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-copy p {
+  color: rgba(255,255,255,0.85) !important;
+  max-width: 560px;
 }
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy p{
-  color:rgba(255,255,255,.85)!important;
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-copy .sf-button {
+  color: #ffffff !important;
+  background: #0874df !important;
+  border: none !important;
+  align-self: flex-start;
+  margin-top: 24px;
 }
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy .sf-button{
-  color:#ffffff!important;
-  background:#0874df!important;
-  border:0!important;
+.sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-copy .sf-button:hover {
+  background: #065bb8 !important;
+  color: #ffffff !important;
 }
-.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy .sf-button:hover{
-  background:#065bb8!important;
-  color:#ffffff!important;
-}
-/* 移动端：上透明下深色 */
-@media (max-width:620px){
-  .sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split{
-    min-height:min(64vh,480px);
+
+/* ── 6. 移动端：上透明下深色，文字底部 ── */
+@media (max-width: 620px) {
+  .sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-grid.sf-hero-layout-split {
+    min-height: min(64vh, 480px) !important;
   }
-  .sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img::after{
-    background:linear-gradient(180deg,
+  .sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-img::after {
+    background: linear-gradient(180deg,
       transparent 0%,
-      rgba(15,37,68,.4) 50%,
-      rgba(15,37,68,.92) 100%);
+      rgba(15,37,68,0.35) 50%,
+      rgba(15,37,68,0.92) 100%);
   }
-  .sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy{
-    padding:20px 16px;
-    min-height:min(64vh,480px);
+  .sf-theme-trade-pro section.sf-section.sf-hero .sf-hero-copy {
+    padding: 0 16px 24px;
+    min-height: min(64vh, 480px);
   }
 }