Idea Search Marquee
介绍
胶囊搜索框配一组快捷词标签，下方是两端渐隐的应用卡片跑马灯，悬停暂停；点击标签会填入搜索框，并高亮同类卡片、淡化其余卡片。适合工具站首页的“先试一下”区块。
拆自整页模板 澄榜 应用市场情报首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Idea Search Marquee 加进你的项目并换成你的配色。
适用场景
搜索框、AI 对话输入框、表单字段、文件上传和验证码等用户输入的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add idea-search-marquee
mcp › 使用 8pt MCP 调用 get_component("idea-search-marquee")
代码
Idea Search Marquee 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-ism"><form class="ism-form" action="#"><label class="ism-in"><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><input type="text" placeholder="例如：卡路里计算、冥想、健身" aria-label="应用点子"></label><button type="submit" class="ism-go">查看应用 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button></form><div class="ism-chips"><button type="button">记账理财</button><button type="button">卡路里计算</button><button type="button">健身训练</button><button type="button">冥想助眠</button><button type="button">专注效率</button><button type="button">学英语</button><button type="button">识别植物</button><button type="button">修图</button></div><div class="ism-rail"><div class="ism-track"><div class="ism-card" data-c="营养"><div class="ism-top"><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>营养</small></span></div><p><b>¥80万–150万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><span class="ic" style="background:#F59E0B"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h7v14H4zM13 5h7v14h-7z"/></svg></span><span><b>背词鸭</b><small>语言</small></span></div><p><b>¥300万–500万</b><small>/月</small></p></div><div class="ism-card" data-c="理财"><div class="ism-top"><span class="ic" style="background:#6366F1"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 12.5h2"/></svg></span><span><b>圆账</b><small>理财</small></span></div><p><b>¥150万–300万</b><small>/月</small></p></div><div class="ism-card" data-c="修图"><div class="ism-top"><span class="ic" style="background:#EC4899"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg></span><span><b>光修</b><small>修图</small></span></div><p><b>¥200万–400万</b><small>/月</small></p></div><div class="ism-card" data-c="冥想"><div class="ism-top"><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>冥想</small></span></div><p><b>¥50万–80万</b><small>/月</small></p></div><div class="ism-card" data-c="健身"><div class="ism-top"><span class="ic" style="background:#111827"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg></span><span><b>铁练</b><small>健身</small></span></div><p><b>¥30万–60万</b><small>/月</small></p></div><div class="ism-card" data-c="植物"><div class="ism-top"><span class="ic" style="background:#10B981"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4-3-6-7-6 0 4 3 6 7 6zM12 12c0-4 3-6 7-6 0 4-3 6-7 6z"/></svg></span><span><b>叶识</b><small>植物</small></span></div><p><b>¥20万–50万</b><small>/月</small></p></div><div class="ism-card" data-c="效率"><div class="ism-top"><span class="ic" style="background:#F97316"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="7"/><path d="M12 13V9M10 3h4"/></svg></span><span><b>专注舟</b><small>效率</small></span></div><p><b>¥10万–30万</b><small>/月</small></p></div><div class="ism-card" data-c="运动"><div class="ism-top"><span class="ic" style="background:#EF4444"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18l5-5 3 3 8-8"/><path d="M15 8h5v5"/></svg></span><span><b>步野</b><small>运动</small></span></div><p><b>¥10万–20万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><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>语言</small></span></div><p><b>¥50万–100万</b><small>/月</small></p></div><div class="ism-card" data-c="营养"><div class="ism-top"><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>营养</small></span></div><p><b>¥80万–150万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><span class="ic" style="background:#F59E0B"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h7v14H4zM13 5h7v14h-7z"/></svg></span><span><b>背词鸭</b><small>语言</small></span></div><p><b>¥300万–500万</b><small>/月</small></p></div><div class="ism-card" data-c="理财"><div class="ism-top"><span class="ic" style="background:#6366F1"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 12.5h2"/></svg></span><span><b>圆账</b><small>理财</small></span></div><p><b>¥150万–300万</b><small>/月</small></p></div><div class="ism-card" data-c="修图"><div class="ism-top"><span class="ic" style="background:#EC4899"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg></span><span><b>光修</b><small>修图</small></span></div><p><b>¥200万–400万</b><small>/月</small></p></div><div class="ism-card" data-c="冥想"><div class="ism-top"><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>冥想</small></span></div><p><b>¥50万–80万</b><small>/月</small></p></div><div class="ism-card" data-c="健身"><div class="ism-top"><span class="ic" style="background:#111827"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg></span><span><b>铁练</b><small>健身</small></span></div><p><b>¥30万–60万</b><small>/月</small></p></div><div class="ism-card" data-c="植物"><div class="ism-top"><span class="ic" style="background:#10B981"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4-3-6-7-6 0 4 3 6 7 6zM12 12c0-4 3-6 7-6 0 4-3 6-7 6z"/></svg></span><span><b>叶识</b><small>植物</small></span></div><p><b>¥20万–50万</b><small>/月</small></p></div><div class="ism-card" data-c="效率"><div class="ism-top"><span class="ic" style="background:#F97316"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="7"/><path d="M12 13V9M10 3h4"/></svg></span><span><b>专注舟</b><small>效率</small></span></div><p><b>¥10万–30万</b><small>/月</small></p></div><div class="ism-card" data-c="运动"><div class="ism-top"><span class="ic" style="background:#EF4444"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18l5-5 3 3 8-8"/><path d="M15 8h5v5"/></svg></span><span><b>步野</b><small>运动</small></span></div><p><b>¥10万–20万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><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>语言</small></span></div><p><b>¥50万–100万</b><small>/月</small></p></div></div></div><div class="ism-rail"><div class="ism-track rev"><div class="ism-card" data-c="运动"><div class="ism-top"><span class="ic" style="background:#EF4444"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18l5-5 3 3 8-8"/><path d="M15 8h5v5"/></svg></span><span><b>步野</b><small>运动</small></span></div><p><b>¥10万–20万</b><small>/月</small></p></div><div class="ism-card" data-c="效率"><div class="ism-top"><span class="ic" style="background:#F97316"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="7"/><path d="M12 13V9M10 3h4"/></svg></span><span><b>专注舟</b><small>效率</small></span></div><p><b>¥10万–30万</b><small>/月</small></p></div><div class="ism-card" data-c="植物"><div class="ism-top"><span class="ic" style="background:#10B981"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4-3-6-7-6 0 4 3 6 7 6zM12 12c0-4 3-6 7-6 0 4-3 6-7 6z"/></svg></span><span><b>叶识</b><small>植物</small></span></div><p><b>¥20万–50万</b><small>/月</small></p></div><div class="ism-card" data-c="健身"><div class="ism-top"><span class="ic" style="background:#111827"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg></span><span><b>铁练</b><small>健身</small></span></div><p><b>¥30万–60万</b><small>/月</small></p></div><div class="ism-card" data-c="冥想"><div class="ism-top"><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>冥想</small></span></div><p><b>¥50万–80万</b><small>/月</small></p></div><div class="ism-card" data-c="修图"><div class="ism-top"><span class="ic" style="background:#EC4899"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg></span><span><b>光修</b><small>修图</small></span></div><p><b>¥200万–400万</b><small>/月</small></p></div><div class="ism-card" data-c="理财"><div class="ism-top"><span class="ic" style="background:#6366F1"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 12.5h2"/></svg></span><span><b>圆账</b><small>理财</small></span></div><p><b>¥150万–300万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><span class="ic" style="background:#F59E0B"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h7v14H4zM13 5h7v14h-7z"/></svg></span><span><b>背词鸭</b><small>语言</small></span></div><p><b>¥300万–500万</b><small>/月</small></p></div><div class="ism-card" data-c="营养"><div class="ism-top"><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>营养</small></span></div><p><b>¥80万–150万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><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>语言</small></span></div><p><b>¥50万–100万</b><small>/月</small></p></div><div class="ism-card" data-c="运动"><div class="ism-top"><span class="ic" style="background:#EF4444"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18l5-5 3 3 8-8"/><path d="M15 8h5v5"/></svg></span><span><b>步野</b><small>运动</small></span></div><p><b>¥10万–20万</b><small>/月</small></p></div><div class="ism-card" data-c="效率"><div class="ism-top"><span class="ic" style="background:#F97316"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="7"/><path d="M12 13V9M10 3h4"/></svg></span><span><b>专注舟</b><small>效率</small></span></div><p><b>¥10万–30万</b><small>/月</small></p></div><div class="ism-card" data-c="植物"><div class="ism-top"><span class="ic" style="background:#10B981"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4-3-6-7-6 0 4 3 6 7 6zM12 12c0-4 3-6 7-6 0 4-3 6-7 6z"/></svg></span><span><b>叶识</b><small>植物</small></span></div><p><b>¥20万–50万</b><small>/月</small></p></div><div class="ism-card" data-c="健身"><div class="ism-top"><span class="ic" style="background:#111827"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg></span><span><b>铁练</b><small>健身</small></span></div><p><b>¥30万–60万</b><small>/月</small></p></div><div class="ism-card" data-c="冥想"><div class="ism-top"><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>冥想</small></span></div><p><b>¥50万–80万</b><small>/月</small></p></div><div class="ism-card" data-c="修图"><div class="ism-top"><span class="ic" style="background:#EC4899"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg></span><span><b>光修</b><small>修图</small></span></div><p><b>¥200万–400万</b><small>/月</small></p></div><div class="ism-card" data-c="理财"><div class="ism-top"><span class="ic" style="background:#6366F1"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 12.5h2"/></svg></span><span><b>圆账</b><small>理财</small></span></div><p><b>¥150万–300万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><span class="ic" style="background:#F59E0B"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h7v14H4zM13 5h7v14h-7z"/></svg></span><span><b>背词鸭</b><small>语言</small></span></div><p><b>¥300万–500万</b><small>/月</small></p></div><div class="ism-card" data-c="营养"><div class="ism-top"><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>营养</small></span></div><p><b>¥80万–150万</b><small>/月</small></p></div><div class="ism-card" data-c="语言"><div class="ism-top"><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>语言</small></span></div><p><b>¥50万–100万</b><small>/月</small></p></div></div></div><p class="ism-note">示意数据</p></div>
.x-ism{--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-ism,.x-ism *{box-sizing:border-box}.x-ism a{color:inherit;text-decoration:none}.x-ism button{font:inherit;cursor:pointer}.x-ism{width:100%;max-width:1200px;margin:0 auto;text-align:center}.x-ism .ism-form{display:flex;align-items:center;gap:8px;max-width:620px;margin:0 auto;padding:6px 6px 6px 18px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 24px -10px rgba(16,24,40,.18)}.x-ism .ism-in{flex:1;display:flex;align-items:center;gap:10px;color:#98A2B3;min-width:0}.x-ism input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:15px;color:var(--ink);background:transparent}.x-ism .ism-go{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--ink);color:#fff;font-size:14px;font-weight:500;height:44px;padding:0 20px;border-radius:999px;white-space:nowrap;transition:transform .2s}.x-ism .ism-go:hover{transform:translateY(-1px)}.x-ism .ism-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px;margin:18px auto 34px}.x-ism .ism-chips button{border:1px solid var(--line);background:#fff;border-radius:999px;font-size:13px;color:#475467;padding:6px 14px;transition:all .2s}.x-ism .ism-chips button:hover,.x-ism .ism-chips button.on{border-color:var(--ink);color:var(--ink)}.x-ism .ism-rail{position:relative;overflow:hidden;contain:inline-size;max-width:100%;padding:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.x-ism .ism-track{display:flex;gap:14px;width:max-content;animation:ism-move 48s linear infinite}.x-ism .ism-rail:hover .ism-track{animation-play-state:paused}.x-ism .ism-card{width:236px;flex:none;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 1px 3px rgba(16,24,40,.05);transition:opacity .3s,transform .3s}.x-ism .ism-card.dim{opacity:.3}.x-ism .ism-card.hit{transform:translateY(-4px);border-color:#BFD2FB}.x-ism .ism-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}.x-ism .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}.x-ism .ic svg{width:19px;height:19px}.x-ism .ism-top>span:not(.ic){display:flex;flex-direction:column}.x-ism .ism-top b{font-size:15px;font-weight:600}.x-ism .ism-top small{font-size:12px;color:#98A2B3}.x-ism .ism-card p{margin:12px 0 0;display:flex;align-items:baseline;gap:4px}.x-ism .ism-card p b{font-size:16px;font-weight:600}.x-ism .ism-card p small{font-size:12px;color:#98A2B3}.x-ism .ism-note{margin:8px 0 0;font-size:11px;color:#98A2B3}.x-ism .ism-rail+.ism-rail{margin-top:8px}.x-ism .ism-track.rev{animation-direction:reverse;animation-duration:56s}@keyframes ism-move{to{transform:translateX(-50%)}}@media (max-width:640px){.x-ism .ism-go{padding:0 14px}.x-ism .ism-card{width:200px}}@media (prefers-reduced-motion:reduce){.x-ism .ism-track{animation:none}}.x-ism{max-width:none;padding:64px 6%;background-image:radial-gradient(rgba(16,24,40,.14) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-ism{width:1200px;max-width:100%}(root) => {
const input = root.querySelector('input');
const chips = [...root.querySelectorAll('.ism-chips button')];
const cards = [...root.querySelectorAll('.ism-card')];
const form = root.querySelector('form');
const map = { '记账理财': '理财', '卡路里计算': '营养', '健身训练': '健身', '冥想助眠': '冥想', '专注效率': '效率', '学英语': '语言', '识别植物': '植物', '修图': '修图' };
const apply = (q) => {
const c = map[q] || Object.values(map).find(v => q && q.includes(v)) || '';
cards.forEach(el => { el.classList.toggle('dim', !!c && el.dataset.c !== c); el.classList.toggle('hit', !!c && el.dataset.c === c); });
};
const onChip = (e) => { const b = e.currentTarget; chips.forEach(x => x.classList.toggle('on', x === b)); input.value = b.textContent; apply(b.textContent); };
const onSubmit = (e) => { e.preventDefault(); apply(input.value.trim()); };
…订阅 Builder 查看完整源码。查看价格