cms-SiteForge/examples/V8_34_主题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 · 真正生成的主题布局</title>
<style>*{box-sizing:border-box}body{margin:0;background:#edf1f6;color:#24344b;font-family:system-ui,"Microsoft YaHei",sans-serif}button,select{font:inherit}.toolbar{padding:16px 20px;background:white;border-bottom:1px solid #dfe6ed;display:flex;gap:15px;align-items:center;flex-wrap:wrap}.toolbar strong{font-size:17px}.toolbar small{display:block;color:#75869a;font-size:11px}.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}select{background:#f7fafc;border:1px solid #c9d6e2;border-radius:8px;padding:9px;color:#2c485e;max-width:185px}.size button{padding:9px;border:1px solid #ccd7e2;background:white;border-radius:6px;cursor:pointer}.size button[aria-pressed=true]{background:#205a8a;color:#fff}#canvas{display:block;width:100%;height:calc(100vh - 100px);min-height:520px;margin:auto;border:0;background:white;transition:width .2s}@media(max-width:680px){.toolbar{padding:12px;gap:10px}.controls{margin-left:0}#canvas{height:calc(100vh - 155px)}}</style></head><body>
<div class="toolbar"><div><strong>SiteForge V8.34 · Banner 与产品卡片</strong><small>来自实际服务端区块渲染 · 仅演示布局，不连接业务后台</small></div><div class="controls"><select id="theme" aria-label="主题"><option value="automotive">汽车主题</option><option value="industrial">工业建材主题</option></select><select id="banner" aria-label="Banner 布局"><option value="split">Banner · 文字左</option><option value="image-first">Banner · 图片左</option><option value="centered">Banner · 标题居中</option></select><select id="cards" aria-label="卡片形式"><option value="standard">卡片 · 标准</option><option value="compact">卡片 · 紧凑</option><option value="showcase">卡片 · 图片优先</option></select><div class="size"><button data-width="100%" aria-pressed="true">电脑</button><button data-width="820px" aria-pressed="false">平板</button><button data-width="390px" aria-pressed="false">手机</button></div></div></div>
<iframe id="canvas" title="主题页面真实渲染" sandbox="allow-scripts"></iframe><script type="application/json" id="data">{"views": {"automotive": {"split-standard": "<section class=\"sf-section sf-hero\" data-block=\"7a5faf7297\"><div class=\"sf-container\"><div class=\"sf-hero-grid sf-hero-layout-split sf-fit-contain\"><div class=\"sf-hero-copy\"><span class=\"sf-kicker\">GLOBAL AUTOMOTIVE<\/span><h1>中国汽车 · 全球交付<\/h1><p>这是实际服务端渲染的内容模块，点击选项可比较布局。<\/p><a class=\"sf-button\" href=\"/product/\">查看产品<\/a><\/div><div class=\"sf-hero-img sf-hero-abstract\"><span>✧<\/span><\/div><\/div><\/div><\/section><section class=\"sf-section sf-collection\" data-block=\"f7d804a9fa\"><div class=\"sf-container\"><div class=\"sf-section-head\"><div><span class=\"sf-kicker\">PRODUCT SELECTION<\/span><h2>精选车型<\/h2><\/div><a href=\"/product/\">查看全部<\/a><\/div><div class=\"sf-collection sf-card-style-standard sf-fit-contain\" data-sf-filterable=\"false\" style=\"--sf-cols:3\"><a class=\"sf-item\" data-category=\"\" data-brand=\"\" href=\"/product/model-1/\"><div class=\"sf-item-img\"><div class=\"sf-placeholder\">SU<\/div><\/div><div class=\"sf-item-copy\"><small>product<\/small><h3>SUV 车型 A<\/h3><p>出口车型展示 · 可按实际车型数据替换<\/p><span>查看详情 →<\/span><\/div><\/a><a class=\"sf-item\" data-category=\"\" data-brand=\"\" href=\"/product/model-2/\"><div class=\"sf-item-img\"><div class=\"sf-placeholder\">新能<\/div><\/div><div class=\"sf-item-copy\"><small>product<\/small><h3>新能源车型 B<\/h3><p>出口车型展示 · 可按实际车型数据替换<\/p><span>查看详情 →<\/span><\/div><\/a><a class=\"sf-item\" data-category=\"\" data-brand=\"\" href=\"/product/model-3/\"><div class=\"sf-item-img\"><div class=\"sf-placeholder\">皮卡<\/div><\/div><div class=\"sf-item-copy\"><small>product<\/small><h3>皮卡车型 C<\/h3><p>出口车型展示 · 可按实际车型数据替换<\/p><span>查看详情 →<\/span><\/div><\/a><a class=\"sf-item\" data-category=\"\" data-brand=\"\" href=\"/product/model-4/\"><div class=\"sf-item-img\"><div class=\"sf-placeholder\">商务<\/div><\/div><div class=\"sf-item-copy\"><small>product<\/small><h3>商务车型 D<\/h3><p>出口车型展示 · 可按实际车型数据替换<\/p><span>查看详情 →<\/span><\/div><\/a><a class=\"sf-item\" data-category=\"\" data-brand=\"\" href=\"/product/model-5/\"><div class=\"sf-item-img\"><div class=\"sf-placeholder\">紧凑<\/div><\/div><div class=\"sf-item-copy\"><small>product<\/small><h3>紧凑车型 E<\/h3><p>出口车型展示 · 可按实际车型数据替换<\/p><span>查看详情 →<\/span><\/div><\/a><a class=\"sf-item\" data-category=\"\" data-brand=\"\" href=\"/product/model-6/\"><div class=\"sf-item-img\"><div class=\"sf-placeholder\">乘用<\/div><\/div><div class=\"sf-item-copy\"><small>product<\/small><h3>乘用车型 F<\/h3><p>出口车型展示 · 可按实际车型数据替换<\/p><span>查看详情 →<\/span><\/div><\/a><\/div><\/div><\/section>", "split-compact": "<section class=\"sf-section sf-hero\" data-block=\"80f692f498\"><div class=\"sf-container\"><div class=\"sf-hero-grid sf-hero-layout-split sf-fit-contain\"><div class=\"sf-hero-copy\"><span class=\"sf-kicker\">GLOBAL AUTOMOTIVE<\/span><h1>中国汽车 · 全球交付<\/h1><p>这是实际服务端渲染的内容模块，点击选项可比较布局。<\/p><a class=\"sf-button\" href=\"/product/\">查看产品<\/a><\/div><div class=\"sf-hero-img sf-hero-abstract\"><span>✧<\/span><\/div><\/div><\/div><\/section><section class=\"sf-section sf-collection\" data-block=\"656284f760\"><div class=\"sf-container\"><div class=\"sf-section-head\"><div><span class=\"sf-kicker\">PRODUCT SELECTION<\/span><h2>精选车型<\/h2><\/div><a href=\"/product/\">查看全部<\/a><\/div><div class=\"sf-collection sf-card-style-compact sf-fit-contain\" data-sf-filterable=\"false\" style=\"--sf-cols:3\"><a class=\"sf-item\" data-category=\"\" data-brand=\"\" href=\"/product/
const data=JSON.parse(document.getElementById('data').textContent), frame=document.getElementById('canvas');
function paint(){const t=document.getElementById('theme').value,key=document.getElementById('banner').value+'-'+document.getElementById('cards').value;const page='<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>'+data.blocks+'</style><style>'+data.styles[t]+'</style><style>body{margin:0;font-family:system-ui,"Microsoft YaHei",sans-serif;background:white;color:#20354a}.sf-hero-abstract{background:linear-gradient(140deg,#eff4f8,#d5e3ed);border-radius:12px}.sf-item{height:100%}</style></head><body><div class="sf-theme-'+t+'"><main class="pro-custom-content">'+data.views[t][key]+'</main></div></body></html>';frame.srcdoc=page;}
['theme','banner','cards'].forEach(id=>document.getElementById(id).addEventListener('change',paint));document.querySelectorAll('[data-width]').forEach(b=>b.addEventListener('click',()=>{frame.style.width=b.dataset.width;document.querySelectorAll('[data-width]').forEach(x=>x.setAttribute('aria-pressed',String(x===b)));}));paint();</script></body></html>