Dark Accordion Footer
介绍
近黑底的大页脚：右侧三分之二宽度是九组细线分隔的折叠链接，点击展开、同时只开一组，箭头旋转；底部三栏依次是品牌标志与社交图标、使命说明、登录入口外链。
拆自整页模板 知衡 AI 研究公司首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Dark Accordion Footer 加进你的项目并换成你的配色。
适用场景
常见问题（FAQ）、折叠面板、可展开的说明和设置分组。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add dark-accordion-footer
mcp › 使用 8pt MCP 调用 get_component("dark-accordion-footer")
代码
Dark Accordion Footer 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-daf"><div class="x-daf__acc"><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">研究<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">研究概览</a></li><li><a href="#">可解释性</a></li><li><a href="#">对齐科学</a></li><li><a href="#">社会影响</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">政策<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">政策观点</a></li><li><a href="#">透明度报告</a></li><li><a href="#">公共事务</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">承诺<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">审慎扩展政策</a></li><li><a href="#">模型准则</a></li><li><a href="#">安全与隐私</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">公司<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">关于我们</a></li><li><a href="#">加入我们</a></li><li><a href="#">新闻中心</a></li><li><a href="#">联系我们</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">产品<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">知衡助手</a></li><li><a href="#">开发者平台</a></li><li><a href="#">桌面客户端</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">模型<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">青岚</a></li><li><a href="#">远岫</a></li><li><a href="#">云栖</a></li><li><a href="#">晴川</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">解决方案<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">教育</a></li><li><a href="#">科研</a></li><li><a href="#">企业知识库</a></li><li><a href="#">客户服务</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">帮助与安全<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">帮助中心</a></li><li><a href="#">安全报告</a></li><li><a href="#">服务状态</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">条款与政策<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">使用条款</a></li><li><a href="#">隐私政策</a></li><li><a href="#">可接受使用政策</a></li></ul></div></div></div></div><div class="x-daf__bot"><div class="x-daf__id"><span class="x-daf__mk"><svg class="mk" viewBox="0 0 32 32" aria-hidden="true"><path d="M4 11h24" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M16 11L9.5 27h13L16 11z" fill="currentColor"/><circle cx="6" cy="17.5" r="2.6" fill="currentColor"/><circle cx="26" cy="17.5" r="2.6" fill="currentColor"/></svg>知衡</span><span class="x-daf__soc"><a href="#" aria-label="邮件订阅"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5"/><path d="M4.5 7.5l7.5 5.5 7.5-5.5"/></svg></a><a href="#" aria-label="订阅源"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 5.5a13 13 0 0 1 13 13"/><path d="M5.5 11a7.5 7.5 0 0 1 7.5 7.5"/><circle cx="6.5" cy="17.5" r="1"/></svg></a><a href="#" aria-label="全球站点"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.4 3.5 5.2 3.5 8.5s-1.1 6.1-3.5 8.5c-2.4-2.4-3.5-5.2-3.5-8.5s1.1-6.1 3.5-8.5z"/></svg></a></span><small>© 知衡</small></div><div class="x-daf__col"><h4>我们的使命</h4><p>知衡是一家以公共利益为宗旨的研究公司。我们的使命，是以负责任的方式开发和维护先进 AI，让它长期造福人类。</p></div><div class="x-daf__col"><h4>登录</h4><a href="#">知衡助手<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 16.5l9-9"/><path d="M9 7.5h7.5V15"/></svg></a><a href="#">开发者控制台<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 16.5l9-9"/><path d="M9 7.5h7.5V15"/></svg></a></div></div></div>
.x-daf{box-sizing:border-box;width:100%;padding:72px clamp(20px,5.5vw,80px) 44px;background:#141413;color:#faf9f5;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-daf *,.x-daf *::before,.x-daf *::after{box-sizing:border-box}.x-daf svg{width:1em;height:1em;flex:none}.x-daf__acc{width:calc(66.666% + 8px);margin-left:auto;border-bottom:1px solid #34332f}.x-daf__q{display:flex;align-items:center;justify-content:space-between;width:100%;height:46px;padding:0;border:0;border-top:1px solid #34332f;background:none;color:#d9d6cc;font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:color .2s}.x-daf__q:hover,.x-daf__g.is-open .x-daf__q{color:#fff}.x-daf__q svg{color:#8a8579;transition:transform .3s}.x-daf__g.is-open .x-daf__q svg{transform:rotate(180deg)}.x-daf__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}.x-daf__g.is-open .x-daf__a{grid-template-rows:1fr}.x-daf__a>div{min-height:0;overflow:hidden}.x-daf__a ul{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:2px 0 18px;list-style:none}.x-daf__a a{color:#b9b5aa;font-size:13.5px;text-decoration:none}.x-daf__a a:hover{color:#fff}.x-daf__bot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px;font-size:12.5px}.x-daf__id{display:flex;flex-direction:column;gap:14px}.x-daf__mk{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:.2em}.x-daf__mk .mk{width:20px;height:20px}.x-daf__soc{display:flex;gap:12px}.x-daf__soc a{color:#b9b5aa;font-size:17px;transition:color .2s}.x-daf__soc a:hover{color:#fff}.x-daf__id small{color:#8a8579;font-size:12px}.x-daf__col h4{margin:0 0 8px;font-size:12.5px;font-weight:650}.x-daf__col p{max-width:330px;margin:0;color:#b9b5aa;line-height:1.65}.x-daf__col a{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#b9b5aa;text-decoration:none}.x-daf__col a:hover{color:#fff}@media (max-width:800px){.x-daf{padding:48px 20px 36px}.x-daf__acc{width:100%}.x-daf__bot{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}.x-daf__id{order:3}}@media (prefers-reduced-motion:reduce){.x-daf__a,.x-daf__q svg{transition:none}}(root) => {
const gs = [...root.querySelectorAll('.x-daf__g')];
const onClick = (e) => {
const q = e.target.closest('.x-daf__q'); if (!q) return;
const g = q.parentElement; const open = !g.classList.contains('is-open');
gs.forEach(x => { x.classList.remove('is-open'); x.querySelector('.x-daf__q').setAttribute('aria-expanded', 'false'); });
if (open) { g.classList.add('is-open'); q.setAttribute('aria-expanded', 'true'); }
};
root.addEventListener('click', onClick);
return () => root.removeEventListener('click', onClick);
}订阅 Builder 查看完整源码。查看价格