xinyouhe/cms-SiteForge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: hero fullbleed — background image + left text overlay (not split)

Browse Source
This commit is contained in:
浅念
2026-10-29 10:03:55 +08:00
parent 45c39b1695
commit 706d4d0743
1 changed files with 83 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/trade-pro/blocks.css
+83
View File
@@ -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;
}
}