style: hero true fullbleed — image breaks container, fills entire viewport width
This commit is contained in:
浅念
+108
-83
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user