diff --git a/themes/trade-pro/blocks.css b/themes/trade-pro/blocks.css index 672029c..4496707 100644 --- a/themes/trade-pro/blocks.css +++ b/themes/trade-pro/blocks.css @@ -313,89 +313,6 @@ /* 画布列内区块的移动端收边(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; - } -} - /* ── 修复:确保 hero 按钮文字始终可见(白字蓝底)── */ .sf-theme-trade-pro .sf-hero-copy .sf-button{ color:#ffffff !important; @@ -405,3 +322,111 @@ color:#ffffff !important; background:#065bb8 !important; } + +/* ── Hero 真全幅:背景图铺满屏幕宽度(突破 container 限制)── */ +/* section 变成定位上下文,去掉内边距 */ +.sf-theme-trade-pro section.sf-section.sf-hero{ + position:relative; + overflow:hidden; + padding:0!important; + background:none!important; +} +/* container 撑满 section 宽度 */ +.sf-theme-trade-pro section.sf-section.sf-hero .sf-container{ + max-width:none!important; + padding:0!important; + margin:0!important; +} +/* 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; +} +/* 背景图铺满整个 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 .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 .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 .sf-hero-grid.sf-hero-layout-split .sf-hero-img.sf-hero-abstract{ + background:linear-gradient(135deg,#0f2544,#0874df); +} +.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; +} +/* hero 内文字样式 */ +.sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy .sf-kicker{ + color:#a8c8e8!important; +} +.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 .sf-hero-grid.sf-hero-layout-split .sf-hero-copy p{ + color:rgba(255,255,255,.85)!important; +} +.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 .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); + } + .sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-img::after{ + background:linear-gradient(180deg, + transparent 0%, + rgba(15,37,68,.4) 50%, + rgba(15,37,68,.92) 100%); + } + .sf-theme-trade-pro .sf-hero-grid.sf-hero-layout-split .sf-hero-copy{ + padding:20px 16px; + min-height:min(64vh,480px); + } +}