Rounded FAQ Stack
介绍
基于原生 details 的圆角卡片问答列表，每题独立成卡，展开时加号旋转成叉号、卡片浮起阴影、答案轻微下滑淡入；同一时间只展开一项，没有脚本也能正常使用。
拆自整页模板 澄榜 应用市场情报首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Rounded FAQ Stack 加进你的项目并换成你的配色。
适用场景
常见问题（FAQ）、折叠面板、可展开的说明和设置分组。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add rounded-faq-stack
mcp › 使用 8pt MCP 调用 get_component("rounded-faq-stack")
代码
Rounded FAQ Stack 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-rfq"><details open><summary>还没做过应用，也能用吗？<i></i></summary><div class="rfq-a"><p>能。输入一个点子，先看这个方向里已经有谁在赚钱、靠什么获客、怎么收费，再决定要不要动手。</p></div></details><details><summary>我已经有应用了，能分析什么？<i></i></summary><div class="rfq-a"><p>可以盯住同类竞品的收入区间、下载走势、在投广告和付费流程，找到自己还没覆盖的空档。</p></div></details><details><summary>数字是精确的吗？<i></i></summary><div class="rfq-a"><p>不是。收入与下载都是基于公开信号的区间估算，用来判断量级与趋势，不作为财务依据。</p></div></details><details><summary>能看国内市场吗？<i></i></summary><div class="rfq-a"><p>可以按商店地区切换榜单与关键词排名，地区之间的对比也在同一个页面里完成。</p></div></details><details><summary>这算不算窥探？<i></i></summary><div class="rfq-a"><p>所有数据都来自公开的商店页面与广告资料库，我们只是把它们整理到一起。</p></div></details><details><summary>不满意怎么退款？<i></i></summary><div class="rfq-a"><p>开通后 7 天内发邮件到 name@example.com 说明即可，原路退回。</p></div></details><details><summary>网页端产品也覆盖吗？<i></i></summary><div class="rfq-a"><p>目前以手机应用为主，网页产品的收录正在陆续加入。</p></div></details></div>
.x-rfq{--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-rfq,.x-rfq *{box-sizing:border-box}.x-rfq a{color:inherit;text-decoration:none}.x-rfq button{font:inherit;cursor:pointer}.x-rfq{width:100%;max-width:880px;margin:0 auto;text-align:left;display:grid;gap:10px}.x-rfq details{background:#fff;border:1px solid var(--line);border-radius:14px;transition:box-shadow .25s,border-color .25s}.x-rfq details:hover{border-color:#D0D5DD}.x-rfq details[open]{box-shadow:0 10px 30px -18px rgba(16,24,40,.3)}.x-rfq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-size:15px;font-weight:500;cursor:pointer}.x-rfq summary::-webkit-details-marker{display:none}.x-rfq summary i{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:#F2F4F7;transition:transform .3s,background .3s}.x-rfq summary i::before,.x-rfq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#475467;border-radius:2px}.x-rfq summary i::after{transform:rotate(90deg)}.x-rfq details[open] summary i{transform:rotate(45deg);background:#EEF4FF}.x-rfq .rfq-a{padding:0 20px 18px;animation:rfq-in .35s ease}.x-rfq .rfq-a p{margin:0;font-size:14px;line-height:1.75;color:#667085}@keyframes rfq-in{from{opacity:0;transform:translateY(-4px)}}@media (max-width:640px){.x-rfq summary{padding:16px;font-size:14px}.x-rfq .rfq-a{padding:0 16px 16px}}@media (prefers-reduced-motion:reduce){.x-rfq *{animation:none!important;transition:none!important}}.x-rfq{max-width:none;padding:56px 6%;background-image:radial-gradient(rgba(16,24,40,.14) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-rfq details{width:100%;max-width:820px;margin:0 auto}.x-rfq{display:flex;flex-direction:column;gap:10px}(root) => {
const items = [...root.querySelectorAll('details')];
const onToggle = (e) => { const d = e.currentTarget; if (d.open) items.forEach(o => { if (o !== d) o.open = false; }); };
items.forEach(d => d.addEventListener('toggle', onToggle));
return () => items.forEach(d => d.removeEventListener('toggle', onToggle));
}订阅 Builder 查看完整源码。查看价格