cms-SiteForge/examples/V8_34_1_多图Banner与参数表_真实渲染预览.html

<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>SiteForge V8.34.1 · Banner & 产品参数真实渲染预览</title><style>
:root{--accent:#ec681b}*{box-sizing:border-box}body{margin:0;background:#f4f7fa;font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#203248}a{color:inherit}.demo-top{background:#fff;border-bottom:1px solid #e5eaf1;position:sticky;top:0;z-index:10;padding:12px 24px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.demo-top b{font-size:15px}.demo-top small{display:block;color:#687888;margin-top:2px}.demo-label{font-size:12px;color:#748397}.sf-section:nth-of-type(even){background:#fff}.sf-hero-img{background:linear-gradient(140deg,#d3e0ed,#f4f8fb);min-height:360px}.sf-hero-abstract{display:grid;place-items:center}.sf-hero-abstract span{font-size:9rem}.sf-section .sf-container{max-width:1200px}.demo-note{max-width:1180px;margin:24px auto;padding:18px 24px;background:#fff;border:1px solid #e2eaf3;border-radius:10px;color:#566a7a;font-size:13px;line-height:1.65}button{font-family:inherit} @media(max-width:620px){.demo-top{padding:12px 16px}.demo-note{margin:16px}.sf-hero-abstract span{font-size:5rem}}
/* Portable SiteForge blocks, loaded with every theme (all styles scoped to sf-). */
.sf-section{background:var(--sf-bg,transparent);color:var(--sf-fg,inherit);padding:var(--sf-pad,82px) 0;margin:0}.sf-section:nth-of-type(even){background:var(--sf-bg,#f4f6f9)}.sf-container{max-width:1200px;margin:auto;padding:0 32px}.sf-section h1,.sf-section h2,.sf-section h3,.sf-section p{color:inherit;line-height:1.3}.sf-section h1{font-size:clamp(38px,5vw,76px);font-weight:790;letter-spacing:-.052em}.sf-section h2{font-size:clamp(27px,3.2vw,44px);font-weight:760;letter-spacing:-.037em}.sf-kicker{display:block;font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:740;color:var(--accent,#3569d3);margin-bottom:18px}.sf-hero-grid,.sf-image-text{display:grid;grid-template-columns:1.08fr .92fr;gap:68px;align-items:center}.sf-hero-copy p{font-size:18px;line-height:1.75;max-width:520px;opacity:.75}.sf-hero-img,.sf-image-side{overflow:hidden;border-radius:9px;min-height:380px;background:linear-gradient(130deg,#d5e1ee,#eef3f9);display:grid;place-items:center}.sf-hero-img img,.sf-image-side img{width:100%;height:100%;max-height:580px;object-fit:cover}.sf-hero-abstract{font-size:110px;color:#a7bdd4}.sf-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;background:var(--accent,#315ee2);color:white!important;padding:16px 26px;border-radius:6px;font-size:14px;text-decoration:none;font-weight:720;margin-top:24px}.sf-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:32px;gap:24px}.sf-section-head h2{margin:0}.sf-section-head>a,.sf-link{color:var(--accent,#3569d3);font-weight:700;text-decoration:none}.sf-prose{font-size:16px;line-height:1.85;max-width:930px}.sf-prose p{line-height:1.85}.sf-features,.sf-collection,.sf-stats{display:grid;gap:20px}.sf-features{grid-template-columns:repeat(3,minmax(0,1fr))}.sf-feature{border:1px solid #e0e6eb;padding:32px 28px;border-radius:8px;background:#fff;color:#253247}.sf-feature>span{font-size:12px;font-weight:800;color:var(--accent,#346add)}.sf-feature h3{font-size:22px;margin:30px 0 8px}.sf-feature p{font-size:14px;line-height:1.7;color:#647181}.sf-stats{grid-template-columns:repeat(4,1fr);padding:40px 0;border-top:1px solid #b7c0cd66;border-bottom:1px solid #b7c0cd66}.sf-stats>div{display:flex;flex-direction:column;gap:8px}.sf-stats strong{font-size:clamp(28px,4vw,53px);letter-spacing:-.04em}.sf-stats span{font-size:12px;opacity:.65;letter-spacing:.04em}.sf-collection{grid-template-columns:repeat(var(--sf-cols,3),minmax(0,1fr))}.sf-item{display:block;text-decoration:none;color:#233044;background:#fff;border:1px solid #e8edf1;border-radius:8px;overflow:hidden;transition:transform .2s,box-shadow .2s}.sf-item:hover{transform:translateY(-4px);box-shadow:0 18px 38px #344d7018}.sf-item-img{height:210px;overflow:hidden;background:#e4eaf0}.sf-item-img img{height:100%;width:100%;object-fit:cover}.sf-placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:190px;background:linear-gradient(130deg,#e2eaf2,#c9d7e6);font-size:72px;color:#8399b2;font-weight:800}.sf-large{min-height:360px}.sf-item-copy{padding:25px}.sf-item-copy small{text-transform:uppercase;letter-spacing:.13em;color:var(--accent,#376edc)}.sf-item-copy h3{font-size:22px;margin:12px 0 7px}.sf-item-copy p{font-size:14px;line-height:1.6;color:#7a8796;min-height:42px}.sf-item-copy span{font-size:12px;color:var(--accent,#376edc);font-weight:800}.sf-image-text>div>p{font-size:17px;line-height:1.8;max-width:520px;opacity:.7}.sf-reverse>div:first-child{order:2}.sf-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.sf-gallery img{width:100%;height:230px;object-fit:cover;border-radius:6px}.sf-faq{max-width:920px}.sf-faq details{border-bottom:1px solid #dce3eb;padding:22px 0}.sf-faq summary{font-size:17px;cursor:pointer;font-weight:700}.sf-faq p{color:#647181;line-height:1.75}.sf-cta-wrap{display:flex;justify-content:space-between;align-items:center;gap:24px}.sf-cta-wrap h2{margin:0}.sf-cta-wrap p{font-size:16px;opacity:.75}.sf-section a{cursor:pointer}.sf-muted{opacity:.65}
@media(max-width:820px){.sf-container{padding:0 20px}.sf-section{padding:50px 0}.sf-hero-grid,.sf-image-text{grid-template-columns:1fr;gap:26px}.sf-reverse>div:first-child{order:initial}.sf-hero-img,.sf-image-side{min-height:250px}.sf-features,.sf-collection{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-stats{grid-template-columns:repeat(2,1fr)}.sf-cta-wrap{align-items:flex-start;flex-direction:column}}
@media(max-width:540px){.sf-features,.sf-collection,.sf-gallery{grid-template-columns:1fr}.sf-section-head{display:block}.sf-section-head>a{display:block;margin-top:13px}.sf-item-img{height:220px}.sf-hero-grid{gap:22px}.sf-hero-copy p{font-size:16px}.sf-stats{gap:28px}}

.sf-attributes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;border-top:1px solid #e5eaf0}.sf-attribute{display:flex;justify-content:space-between;align-items:center;gap:18px;border-bottom:1px solid #e5eaf0;padding:19px 10px;font-size:14px}.sf-attribute span{color:#748497}.sf-attribute strong{font-weight:720;text-align:right}@media(max-width:640px){.sf-attributes{grid-template-columns:1fr}}

/* SiteForge responsive no-code grid container */
.sf-layout-grid{display:grid;grid-template-columns:var(--sf-layout-cols,1fr 1fr);gap:var(--sf-layout-gap,24px);align-items:stretch}
.sf-layout-column{min-width:0}.sf-layout-column>.sf-section{padding:0;margin:0 0 18px}.sf-layout-column .sf-container{width:100%;padding:0}
.sf-layout-column>.sf-section:last-child{margin-bottom:0}
@media(max-width:820px){.sf-layout-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:540px){.sf-layout-grid{grid-template-columns:minmax(0,1fr)!important}}

/* V8.6: accessible, script-free commercial design blocks */
.sf-slides{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 18px;scrollbar-width:thin}
.sf-slide{flex:0 0 min(78%,720px);min-width:220px;margin:0;scroll-snap-align:start}
.sf-slide img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.sf-slide figcaption{padding:10px 2px;opacity:.7;font-size:14px}
.sf-video{aspect-ratio:16/9;max-width:1000px;background:#ebf0f5;border-radius:10px;overflow:hidden}
.sf-video iframe{width:100%;height:100%;border:0}
.sf-tab{padding:19px 0;border-bottom:1px solid #dde4ec;max-width:960px}
.sf-tab summary{font-size:18px;font-weight:700;cursor:pointer}.sf-tab p{max-width:850px;line-height:1.8}
.sf-prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.sf-price{padding:28px;background:#fff;border:1px solid #dee5ef;border-radius:10px;color:#29394b}
.sf-price strong{display:block;font-size:27px;margin:14px 0}.sf-price li{margin:11px 0}.sf-price ul{padding-left:19px}
.sf-map-address{font-style:normal;font-size:18px;white-space:pre-line;line-height:1.8}
@media (prefers-reduced-motion:reduce){.sf-slides{scroll-behavior:auto}.sf-item{transition:none}}
@media(max-width:540px){.sf-slide{flex-basis:92%}}

/* V8.33.1 grid-class collision fix: block section and inner collection/features
   share a class. The section must NOT become a grid container itself.
   Restrict grid layout to its dedicated inner element. */
.sf-section.sf-features,.sf-section.sf-collection,.sf-section.sf-stats,.sf-section.sf-gallery,.sf-section.sf-attributes{display:block;grid-template-columns:none}
.sf-section.sf-faq{max-width:none}


/* V8.34: opt-in no-code compositions; no change for legacy blocks with no choice. */
.sf-hero-grid.sf-hero-layout-image-first > .sf-hero-img{order:-1}
.sf-hero-grid.sf-hero-layout-centered{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
.sf-hero-grid.sf-hero-layout-centered .sf-hero-copy{max-width:900px;margin-inline:auto}
.sf-hero-grid.sf-hero-layout-centered .sf-hero-img{width:100%;min-height:240px;max-height:540px}
.sf-hero-grid.sf-fit-contain .sf-hero-img img{object-fit:contain}
.sf-collection.sf-fit-contain .sf-item-img{background:#f4f7f9}
.sf-collection.sf-fit-contain .sf-item-img img{object-fit:contain}
.sf-collection.sf-card-style-compact .sf-item-img{height:156px}
.sf-collection.sf-card-style-compact .sf-item-copy{padding:16px 19px}
.sf-collection.sf-card-style-compact .sf-item-copy h3{font-size:clamp(16px,1.5vw,20px);margin:8px 0 5px}
.sf-collection.sf-card-style-compact .sf-item-copy p{font-size:13px;min-height:0}
.sf-collection.sf-card-style-showcase .sf-item-img{height:auto;aspect-ratio:16/10}
.sf-collection.sf-card-style-showcase .sf-item-copy{padding:25px}
.sf-collection.sf-card-style-showcase .sf-item-copy h3{font-size:clamp(19px,2vw,26px)}
@media(max-width:820px){.sf-hero-grid.sf-hero-layout-image-first > .sf-hero-img{order:initial}}
@media(max-width:540px){.sf-collection.sf-card-style-compact .sf-item-img{height:180px}.sf-hero-grid.sf-hero-layout-centered .sf-hero-img{min-height:200px}}
@media(prefers-reduced-motion:reduce){.sf-collection.sf-card-style-showcase .sf-item{transition:none}}

/* Industrial product photography respects *explicit* image fit, not archived defaults. */
.sf-theme-industrial .pro-custom-content .sf-collection.sf-fit-cover .sf-item-img img{object-fit:cover}
.sf-theme-industrial .pro-custom-content .sf-collection.sf-fit-contain .sf-item-img img{object-fit:contain}


/* V8.34.1 opt-in multi-Banner. No autoplay, low JS cost, native swipe and keyboard scroll. */
.sf-hero-slider{min-width:0}.sf-hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}.sf-hero-track::-webkit-scrollbar{display:none}
.sf-hero-panel{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.sf-hero-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;color:inherit}
.sf-hero-controls button{border:1px solid currentColor;border-radius:50%;width:40px;height:40px;font-size:24px;line-height:1;background:transparent;color:inherit;cursor:pointer}
.sf-hero-controls button:focus-visible{outline:3px solid var(--accent,#3569d3);outline-offset:3px}
.sf-hero-count{font-size:13px;font-weight:700;min-width:40px;text-align:center}
@media(prefers-reduced-motion:reduce){.sf-hero-track{scroll-behavior:auto}}

.sf-hero-panel .sf-hero-copy h2{font-size:clamp(38px,5vw,76px);font-weight:790;letter-spacing:-.052em}
</style></head><body><div class="demo-top"><div><b>SiteForge V8.34.1 · 实际渲染预览</b><small>横幅逐张编辑 · 手动切换 · 参数可补充</small></div><span class="demo-label">静态构建同源渲染 · 演示数据</span></div><section class="sf-section sf-hero" data-block="631392234c"><div class="sf-container"><div class="sf-hero-slider" data-sf-hero-slider><div class="sf-hero-track" tabindex="0" role="region" aria-label="横幅内容"><div class="sf-hero-panel" role="group" aria-label="横幅 1 / 3"><div class="sf-hero-grid sf-hero-layout-split sf-fit-contain"><div class="sf-hero-copy"><span class="sf-kicker">CHINA SOURCING. GLOBAL DELIVERY.</span><h1>全球汽车采购与交付</h1><p>车辆采购、出口手续、国际物流到海外交付，一站完成。</p><a class="sf-button" href="/products/">了解业务</a></div><div class="sf-hero-img sf-hero-abstract" aria-hidden="true"><span>✧</span></div></div></div><div class="sf-hero-panel" role="group" aria-label="横幅 2 / 3"><div class="sf-hero-grid sf-hero-layout-split sf-fit-contain"><div class="sf-hero-copy"><span class="sf-kicker">AUTOMOTIVE EXPORT</span><h2>专业车型与可靠服务</h2><p>为不同市场匹配乘用车、皮卡与新能源车型。</p><a class="sf-button" href="/products/">查看车型</a></div><div class="sf-hero-img sf-hero-abstract" aria-hidden="true"><span>✧</span></div></div></div><div class="sf-hero-panel" role="group" aria-label="横幅 3 / 3"><div class="sf-hero-grid sf-hero-layout-split sf-fit-contain"><div class="sf-hero-copy"><span class="sf-kicker">AFTER-SALES SUPPORT</span><h2>从采购开始的长期合作</h2><p>本地交付及备件与售后协同，支持长期业务发展。</p><a class="sf-button" href="/contact/">联系我们</a></div><div class="sf-hero-img sf-hero-abstract" aria-hidden="true"><span>✧</span></div></div></div></div><div class="sf-hero-controls"><button type="button" data-sf-slide-step="-1" aria-label="上一张横幅">‹</button><span class="sf-hero-count" aria-live="polite">1 / 3</span><button type="button" data-sf-slide-step="1" aria-label="下一张横幅">›</button></div></div></div></section><section class="sf-section sf-attributes" data-block="97c421cdc7"><div class="sf-container"><div class="sf-section-head"><h2>车型示例参数</h2></div><div class="sf-attributes"><div class="sf-attribute"><span>品牌</span><strong>Sample Brand</strong></div><div class="sf-attribute"><span>类别</span><strong>Export Vehicles</strong></div><div class="sf-attribute"><span>动力形式</span><strong>纯电动 / 插电混动</strong></div><div class="sf-attribute"><span>可选配置</span><strong>按出口市场和车型版本核对</strong></div></div></div></section><div class="demo-note">此页面通过原项目 <code>render_blocks()</code> 生成区块，并内联相同的 <code>blocks.css</code> 与 <code>site-runtime.js</code>。可点击 Banner 左右控制按钮或在手机上横向滑动。参数同时显示自动数据与人工补充内容。图片位置为无素材占位，不代表正式网站。</div><script>'use strict';
(()=>{
 const $=s=>document.querySelector(s), $$=s=>[...document.querySelectorAll(s)];
 const menu=$('.sf-menu-toggle');if(menu){menu.addEventListener('click',()=>{let open=menu.getAttribute('aria-expanded')!=='true';menu.setAttribute('aria-expanded',String(open));$('#sf-primary-links')?.classList.toggle('is-open',open);});}
 // V8.34.1: accessible, manual carousel. Native scroll/swipe works without JS.
 $$('.sf-hero-slider[data-sf-hero-slider]').forEach(slider=>{
   const track=slider.querySelector('.sf-hero-track');const panels=[...slider.querySelectorAll('.sf-hero-panel')];
   if(!track||panels.length<2)return;
   const counter=slider.querySelector('.sf-hero-count');let index=0;
   const reduced=window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
   function choose(next){index=(next+panels.length)%panels.length;track.scrollTo({left:panels[index].offsetLeft-panels[0].offsetLeft,behavior:reduced?'instant':'smooth'});if(counter)counter.textContent=`${index+1} / ${panels.length}`;}
   slider.querySelectorAll('[data-sf-slide-step]').forEach(btn=>btn.addEventListener('click',()=>choose(index+Number(btn.dataset.sfSlideStep))));
   let raf=false;track.addEventListener('scroll',()=>{if(raf)return;raf=true;requestAnimationFrame(()=>{const left=track.scrollLeft;let best=0,delta=Infinity;panels.forEach((panel,i)=>{const d=Math.abs(panel.offsetLeft-panels[0].offsetLeft-left);if(d<delta){best=i;delta=d;}});index=best;if(counter)counter.textContent=`${index+1} / ${panels.length}`;raf=false;});},{passive:true});
 });
 // Filter actual static content cards, no API is needed at runtime.
 $$('.sf-collection[data-sf-filterable="true"]').forEach(grid=>{
   const cards=$$('.sf-item',grid);
   if(cards.length<2)return;
   const toolbar=document.createElement('div');toolbar.className='sf-filters';
   const search=document.createElement('input');search.type='search';search.placeholder='筛选当前列表';search.setAttribute('aria-label','筛选当前列表');
   const status=document.createElement('span');status.setAttribute('aria-live','polite');status.style.fontSize='12px';
   const brand=document.createElement('select');brand.setAttribute('aria-label','按品牌筛选');
   const category=document.createElement('select');category.setAttribute('aria-label','按分类筛选');
   function fill(el,field,all){el.append(new Option(all,''));const vals=[...new Set(cards.map(x=>x.dataset[field]||'').filter(Boolean))].sort();vals.forEach(v=>el.append(new Option(v,v)));if(!vals.length)el.hidden=true;}
   fill(brand,'brand','全部品牌');fill(category,'category','全部分类');
   toolbar.append(search,brand,category,status);grid.parentNode.insertBefore(toolbar,grid);
   function apply(){let val=search.value.trim().toLocaleLowerCase();let visible=0;cards.forEach(card=>{let hit=card.textContent.toLocaleLowerCase().includes(val)&&(!brand.value||card.dataset.brand===brand.value)&&(!category.value||card.dataset.category===category.value);card.hidden=!hit;if(hit)visible++;});status.textContent=`共 ${visible} 项`;}
   search.addEventListener('input',apply);brand.addEventListener('change',apply);category.addEventListener('change',apply);apply();
 });
 const input=$('#sf-search'),root=$('#sf-search-results'),count=$('#sf-search-count');
 if(input&&root){
   let data=[];const params=new URLSearchParams(location.search);input.value=params.get('q')||'';
   let debounce=null;
   const render=()=>{let q=input.value.trim().toLocaleLowerCase();let found=q?data.filter(d=>`${d.title} ${d.summary} ${d.brand} ${d.type}`.toLocaleLowerCase().includes(q)).slice(0,100):data.slice(0,30);
     root.replaceChildren();count.textContent=`${found.length} 条结果${!q?'（显示前30条）':''}`;
     found.forEach(d=>{let article=document.createElement('article'),a=document.createElement('a'),small=document.createElement('small'),p=document.createElement('p');article.className='sf-search-result';a.textContent=d.title;a.href=d.url.replace(/^\//,'');small.textContent=d.type;p.textContent=d.summary;article.append(a,small,p);root.append(article);});
   };const base=document.querySelector('base')?.href||location.href;
   fetch(new URL('search-index.json',base)).then(r=>{if(!r.ok)throw Error('index unavailable');return r.json();}).then(v=>{data=v;render()}).catch(()=>{count.textContent='搜索索引加载失败，请检查站点文件部署路径';});
   input.addEventListener('input',()=>{clearTimeout(debounce);debounce=setTimeout(render,100)});
 }
})();
</script></body></html>