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

style: hero banner v3 — complete rewrite as full-viewport carousel background

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