Four Answer Window
介绍
毛玻璃浏览器窗口里的四格答案面板：搜索框轮换关键词，进度条逐步走满，四张卡片依次从“读取中”切换为“就绪”，分别展示收入排行、下载条形图、广告素材扇形和付费墙手机。窄屏改为两列。
拆自整页模板 澄榜 应用市场情报首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Four Answer Window 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add four-answer-window
mcp › 使用 8pt MCP 调用 get_component("four-answer-window")
代码
Four Answer Window 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-faw"><div class="faw-win"><div class="faw-bar"><span class="faw-dots"><i></i><i></i><i></i></span><span class="faw-url">澄榜 / 探索</span><span class="faw-tag"><i></i>示意数据</span></div><div class="faw-body"><div class="faw-top"><div class="faw-q"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg><span class="faw-typed">卡路里计算</span><i class="faw-caret"></i></div><div class="faw-prog"><span><b class="faw-n">0</b> / 4 个答案已就绪</span><i><u></u></i></div></div><div class="faw-grid"> <div class="faw-c"><div class="faw-h"><span class="faw-hi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M15 7h6v6"/></svg></span><b>谁在赚钱</b><span class="faw-st"><i class="spin"></i><i class="ok"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span class="t1">读取中</span><span class="t2">就绪</span></span></div><ul class="faw-who"><li><em>1</em><span class="ic" style="background:#22C55E"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14z"/><path d="M5 19l7-7"/></svg></span><span><b>轻食记</b><small>¥80万–150万</small></span></li><li><em>2</em><span class="ic" style="background:#8B5CF6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><span><b>声浪口语</b><small>¥50万–100万</small></span></li><li><em>3</em><span class="ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z"/></svg></span><span><b>眠岛</b><small>¥50万–80万</small></span></li></ul><p class="faw-ft">月收入估算</p></div> <div class="faw-c"><div class="faw-h"><span class="faw-hi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg></span><b>下载多少</b><span class="faw-st"><i class="spin"></i><i class="ok"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span class="t1">读取中</span><span class="t2">就绪</span></span></div><ul class="faw-bars"><li><span><b>轻食记</b><small>2万–5万</small></span><i><u style="--w:46%"></u></i></li><li><span><b>声浪口语</b><small>5万–10万</small></span><i><u style="--w:82%"></u></i></li><li><span><b>眠岛</b><small>5千–1万</small></span><i><u style="--w:22%"></u></i></li></ul><p class="faw-ft">月下载估算</p></div> <div class="faw-c"><div class="faw-h"><span class="faw-hi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10v4h3l6 4V6L7 10z"/><path d="M17 9a4 4 0 0 1 0 6"/></svg></span><b>怎么投放</b><span class="faw-st"><i class="spin"></i><i class="ok"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span class="t1">读取中</span><span class="t2">就绪</span></span></div><div class="faw-ads"><img src="https://8pt.dev/api/media/73e8c0f2a8fe39d4eb44761d.webp" alt=""><img src="https://8pt.dev/api/media/bb261f7dbeedbc68bf1caabb.webp" alt=""><img src="https://8pt.dev/api/media/aa5e034b9c4678b60c3f1f52.webp" alt=""><span class="faw-play"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span></div><p class="faw-ft">轻食记 · 3 条在投素材</p></div> <div class="faw-c"><div class="faw-h"><span class="faw-hi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg></span><b>怎么收费</b><span class="faw-st"><i class="spin"></i><i class="ok"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span class="t1">读取中</span><span class="t2">就绪</span></span></div><div class="faw-phone"><div class="faw-ph"><div class="ph-notch"></div><div class="ph-scr"><b>解锁全部计划</b><span class="ph-sub">让目标更快达成</span><div class="ph-ring"><i></i><em>—</em></div><div class="ph-rows"><span></span><span></span><span></span></div><div class="ph-plan on">年度 · 示意价</div><div class="ph-plan">月度</div><div class="ph-btn">继续</div></div></div><span class="faw-pw">付费墙</span></div><p class="faw-ft">轻食记 · 完整流程</p></div> </div></div></div></div>
.x-faw{--ink:#0E1116;--blue:#2F6BEA;--blue2:#5B8DF5;--muted:#667085;--line:#E6E8EE;--soft:#F3F5F9;--bg:#FAFAFB;font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}.x-faw,.x-faw *{box-sizing:border-box}.x-faw a{color:inherit;text-decoration:none}.x-faw button{font:inherit;cursor:pointer}.x-faw{width:100%;max-width:1120px;margin:0 auto;text-align:left}.x-faw .faw-win{border-radius:22px;padding:0 8px 8px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);box-shadow:0 30px 80px -30px rgba(18,40,90,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.x-faw .faw-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 10px}.x-faw .faw-dots{display:flex;gap:7px}.x-faw .faw-dots i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.x-faw .faw-dots i:nth-child(2){background:#FEBC2E}.x-faw .faw-dots i:nth-child(3){background:#28C840}.x-faw .faw-url{margin:0 auto;font-size:11px;color:#667085;background:rgba(255,255,255,.8);padding:3px 14px;border-radius:6px}.x-faw .faw-tag{display:flex;align-items:center;gap:6px;font-size:11px;color:#475467}.x-faw .faw-tag i{width:7px;height:7px;border-radius:50%;background:var(--blue)}.x-faw .faw-body{background:#fff;border-radius:16px;padding:18px;background-image:radial-gradient(#E9ECF2 1px,transparent 1px);background-size:16px 16px}.x-faw .faw-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}.x-faw .faw-q{display:flex;align-items:center;gap:10px;flex:0 1 380px;height:46px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#98A2B3;box-shadow:0 2px 6px rgba(16,24,40,.04)}.x-faw .faw-typed{color:var(--ink);font-size:15px}.x-faw .faw-caret{width:1.5px;height:18px;background:var(--ink);animation:faw-blink 1s steps(1) infinite}.x-faw .faw-prog{flex:0 1 300px;font-size:12px;color:#344054}.x-faw .faw-prog b{font-weight:600}.x-faw .faw-prog i{display:block;height:4px;border-radius:4px;background:#E6E8EE;margin-top:8px;overflow:hidden}.x-faw .faw-prog u{display:block;height:100%;width:0;background:var(--blue);border-radius:4px;transition:width .6s ease}.x-faw .faw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}.x-faw .faw-c{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;min-height:236px;box-shadow:0 1px 2px rgba(16,24,40,.04)}.x-faw .faw-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}.x-faw .faw-hi{width:26px;height:26px;border-radius:7px;background:#EEF4FF;color:var(--blue);display:grid;place-items:center}.x-faw .faw-hi svg{width:15px;height:15px}.x-faw .faw-h b{font-size:13px;font-weight:600}.x-faw .faw-st{margin-left:auto;display:flex;white-space:nowrap;flex:none;align-items:center;gap:4px;font-size:11px;color:#475467;background:#F2F4F7;border-radius:999px;padding:3px 9px}.x-faw .faw-st .spin{width:9px;height:9px;border-radius:50%;border:1.5px solid #C7D2E4;border-top-color:var(--blue);animation:faw-spin .8s linear infinite}.x-faw .faw-st .ok,.x-faw .faw-st .t2{display:none}.x-faw .faw-c.done .faw-st{background:#EEF4FF;color:var(--blue)}.x-faw .faw-c.done .spin,.x-faw .faw-c.done .t1{display:none}.x-faw .faw-c.done .ok,.x-faw .faw-c.done .t2{display:inline-flex}.x-faw .faw-c>*:not(.faw-h){transition:opacity .5s ease,transform .5s ease}.x-faw .faw-c:not(.done)>*:not(.faw-h){opacity:.25;transform:translateY(4px)}.x-faw ul{list-style:none;margin:0;padding:0}.x-faw .faw-who{display:grid;gap:6px}.x-faw .faw-who li{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px}.x-faw .faw-who li:first-child{background:#F3F5F9}.x-faw .faw-who em{font-style:normal;font-size:11px;color:#98A2B3;width:10px}.x-faw .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}.x-faw .ic svg{width:15px;height:15px}.x-faw .faw-who li>span:not(.ic){display:flex;flex-direction:column;line-height:1.3}.x-faw .faw-who b{font-size:13px;font-weight:500}.x-faw .faw-who small,.x-faw .faw-bars small{font-size:11px;color:#667085}.x-faw .faw-bars{display:grid;gap:14px;padding-top:4px}.x-faw .faw-bars span{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}.x-faw .faw-bars b{font-weight:500}.x-faw .faw-bars i{display:block;height:6px;border-radius:6px;background:#EEF1F6;overflow:hidden}.x-faw .faw-bars u{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#2F6BEA,#7FA6F8);transition:width 1s cubic-bezier(.2,.8,.2,1)}.x-faw .faw-c.done .faw-bars u{width:var(--w)}.x-faw .faw-ads{position:relative;height:132px;display:flex;justify-content:center;align-items:center}.x-faw .faw-ads img{position:absolute;width:72px;height:118px;object-fit:cover;border-radius:9px;border:2px solid #fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}.x-faw .faw-ads img:nth-child(1){transform:translateX(-52px) rotate(-8deg)}.x-faw .faw-ads img:nth-child(2){z-index:2;width:80px;height:128px}.x-faw .faw-ads img:nth-child(3){transform:translateX(52px) rotate(8deg)}.x-faw .faw-play{position:absolute;z-index:3;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink)}.x-faw .faw-phone{position:relative;height:132px;display:flex;justify-content:center;overflow:hidden}.x-faw .faw-phone .faw-ph{transform:scale(.62);transform-origin:top center}.x-faw .faw-pw{position:absolute;right:10%;top:44px;font-size:10px;color:#fff;background:#0E1116;padding:3px 9px;border-radius:999px}.x-faw .faw-ft{margin:auto 0 0;padding-top:10px;font-size:11px;color:#667085}@keyframes faw-spin{to{transform:rotate(360deg)}}@keyframes faw-blink{50%{opacity:0}}@media (max-width:900px){.x-faw .faw-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.x-faw .faw-top{flex-direction:column;align-items:stretch;gap:12px}.x-faw .faw-q{flex:none}.x-faw .faw-prog{flex:none}.x-faw .faw-body{padding:12px}.x-faw .faw-grid{gap:10px}.x-faw .faw-c{padding:10px;min-height:210px}.x-faw .faw-st .t1,.x-faw .faw-c.done .faw-st .t2{display:none}.x-faw .faw-st{padding:4px 6px}.x-faw .faw-h b{font-size:12px;white-space:nowrap}.x-faw .faw-hi{width:22px;height:22px}.x-faw .faw-who li{padding:5px 4px;gap:6px}.x-faw .faw-who em{display:none}.x-faw .faw-ads img:nth-child(1){transform:translateX(-36px) rotate(-8deg)}.x-faw .faw-ads img:nth-child(3){transform:translateX(36px) rotate(8deg)}.x-faw .faw-ads img{width:58px;height:100px}.x-faw .faw-ads img:nth-child(2){width:64px;height:110px}.x-faw .faw-url{display:none}}@media (prefers-reduced-motion:reduce){.x-faw *{animation:none!important;transition:none!important}}.x-faw .faw-ph{position:relative;width:118px;height:236px;border-radius:22px;background:#0E1116;padding:5px;box-shadow:0 18px 40px -16px rgba(14,17,22,.45)}.x-faw .faw-ph .ph-notch{position:absolute;top:9px;left:50%;width:34px;height:8px;margin-left:-17px;border-radius:6px;background:#0E1116;z-index:2}.x-faw .faw-ph .ph-scr{height:100%;border-radius:18px;background:#fff;padding:22px 9px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;overflow:hidden}.x-faw .faw-ph b{font-size:10px;font-weight:600;color:#0E1116}.x-faw .faw-ph .ph-sub{font-size:7px;color:#98A2B3}.x-faw .faw-ph .ph-ring{position:relative;width:46px;height:46px;border-radius:50%;background:conic-gradient(#2F6BEA 0 68%,#E6E8EE 0);display:grid;place-items:center;margin:3px 0}.x-faw .faw-ph .ph-ring i{position:absolute;inset:6px;border-radius:50%;background:#fff}.x-faw .faw-ph .ph-ring em{position:relative;font-style:normal;font-size:9px;font-weight:600}.x-faw .faw-ph .ph-rows{width:100%;display:grid;gap:3px}.x-faw .faw-ph .ph-rows span{height:5px;border-radius:3px;background:#EEF1F6}.x-faw .faw-ph .ph-rows span:nth-child(2){width:80%}.x-faw .faw-ph .ph-plan{width:100%;font-size:7px;padding:4px 6px;border:1px solid #E6E8EE;border-radius:6px;color:#475467}.x-faw .faw-ph .ph-plan.on{border-color:#2F6BEA;color:#2F6BEA;background:#EEF4FF}.x-faw .faw-ph .ph-btn{margin-top:auto;width:100%;text-align:center;font-size:8px;color:#fff;background:#0E1116;border-radius:7px;padding:5px 0}.x-faw{max-width:none;padding:56px 4%;background-image:radial-gradient(rgba(255,255,255,.22) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}(root) => {
const cards = [...root.querySelectorAll('.faw-c')];
const n = root.querySelector('.faw-n');
const bar = root.querySelector('.faw-prog u');
const typed = root.querySelector('.faw-typed');
const words = ['卡路里计算', '冥想助眠', '背单词', '记账理财'];
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let timers = [], w = 0;
const set = (k) => { cards.forEach((c, i) => c.classList.toggle('done', i < k)); n.textContent = k; bar.style.width = (k * 25) + '%'; };
const run = () => {
timers.forEach(clearTimeout); timers = [];
typed.textContent = words[w % words.length]; w++;
…订阅 Builder 查看完整源码。查看价格