Segmented Pricing Tiers
介绍
胶囊分段控件切换三类产品定价：每类先是一段说明配右侧流程示意（访客流量穿过一排能力芯片，或等待与计算的对比条），下面是细线分格的档位列，标题、适用对象、示意价格、能力标签和描边按钮。
拆自整页模板 燧云 全球网络平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Segmented Pricing Tiers 加进你的项目并换成你的配色。
适用场景
SaaS 定价页、升级弹窗、方案对比和按月 / 按年切换。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add suiyun-tab-pricing
mcp › 使用 8pt MCP 调用 get_component("suiyun-tab-pricing")
代码
Segmented Pricing Tiers 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-tpt"><h2>只为代码运行的时间付费</h2><p class="x-tpt__sub">（不为空转的服务器买单。）</p><div class="x-tpt__seg" role="tablist"><span class="x-tpt__thumb" aria-hidden="true"></span><button type="button" class="is-on"><svg 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.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5c-2.4-2.3-3.6-5.1-3.6-8.5S9.6 5.8 12 3.5z"/></svg>网络与加速</button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>零信任</button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13.2 3 5.5 13.4h5.6L10.4 21l7.9-10.6h-5.6z"/></svg>计算与存储</button></div><div class="x-tpt__box"><div class="x-tpt__pane is-on"><div class="x-tpt__intro"><div><h4>为干净的流量付费</h4><p>每个站点都用同一套安全与性能：同样的防护、同样的全球加速、同样的网络。你只为站点需要的深度付费。</p></div><div class="x-tpt__flow"><p><span>访客流量</span><span class="x-tpt__or">你的站点</span></p><div class="x-tpt__chips"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13.2 3 5.5 13.4h5.6L10.4 21l7.9-10.6h-5.6z"/></svg>加速</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/><path d="M12 8.5v4"/><path d="M12 15.6v.1"/></svg>防护</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>证书</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.5 8-4 4 4 4"/><path d="m15.5 8 4 4-4 4"/><path d="m13.2 5.5-2.4 13"/></svg>防火墙</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="5.5" r="2"/><circle cx="7" cy="18.5" r="2"/><circle cx="17" cy="8.5" r="2"/><path d="M7 7.5v9"/><path d="M17 10.5c0 3.5-4 3.5-8.6 6.5"/></svg>机器人</span></div><p class="x-tpt__cap">每一档防护都相同——付费档位只是加深度</p></div></div><div class="x-tpt__plans" style="grid-template-columns:repeat(4,1fr)"><div class="x-tpt__plan"><h4>入门</h4><p class="x-tpt__for">个人项目</p><p class="x-tpt__price">¥ —<small>/月</small></p><ul><li>不限量防护</li><li>通用证书</li><li>全球加速</li></ul><a href="#">查看入门方案</a></div><div class="x-tpt__plan"><h4>专业</h4><p class="x-tpt__for">专业网站</p><p class="x-tpt__price">¥ —<small>/月</small></p><ul><li>图片优化</li><li>机器人防护</li><li>工单支持</li></ul><a href="#">查看专业方案</a></div><div class="x-tpt__plan"><h4>商业</h4><p class="x-tpt__for">小型企业</p><p class="x-tpt__price">¥ —<small>/月</small></p><ul><li>合规支持</li><li>可用性承诺</li><li>在线客服</li></ul><a href="#">查看商业方案</a></div><div class="x-tpt__plan"><h4>合约</h4><p class="x-tpt__for">关键业务</p><p class="x-tpt__price">定制<small></small></p><ul><li>网络优先级</li><li>全天候支持</li><li>定制合同</li></ul><a href="#">查看合约方案</a></div></div></div><div class="x-tpt__pane"><div class="x-tpt__intro"><div><h4>为活跃成员付费</h4><p>在一个零信任平台上连接并保护成员、设备与数据。小团队起步无负担，扩展到上千人也按统一单价计费。</p></div><div class="x-tpt__flow"><p><span>成员与设备</span><span class="x-tpt__or">内部应用</span></p><div class="x-tpt__chips"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>身份</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/><path d="M12 8.5v4"/><path d="M12 15.6v.1"/></svg>网关</span><span><svg 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.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5c-2.4-2.3-3.6-5.1-3.6-8.5S9.6 5.8 12 3.5z"/></svg>浏览</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.5 8-4 4 4 4"/><path d="m15.5 8 4 4-4 4"/><path d="m13.2 5.5-2.4 13"/></svg>数据</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5s-6-5.2-6-10.2a6 6 0 0 1 12 0c0 5-6 10.2-6 10.2z"/><circle cx="12" cy="10.2" r="2.2"/><path d="M8 20.5h8"/></svg>设备</span></div><p class="x-tpt__cap">按活跃成员计费，闲置账号不收钱</p></div></div><div class="x-tpt__plans" style="grid-template-columns:repeat(3,1fr)"><div class="x-tpt__plan"><h4>起步</h4><p class="x-tpt__for">小团队</p><p class="x-tpt__price">¥ —<small>/月</small></p><ul><li>访问控制</li><li>安全网关</li><li>社区支持</li></ul><a href="#">查看起步方案</a></div><div class="x-tpt__plan"><h4>按量</h4><p class="x-tpt__for">随人数增长</p><p class="x-tpt__price">¥ —<small>/人/月</small></p><ul><li>可用性承诺</li><li>日志留存</li><li>在线与工单</li></ul><a href="#">查看按量方案</a></div><div class="x-tpt__plan"><h4>合约</h4><p class="x-tpt__for">完整零信任</p><p class="x-tpt__price">定制<small></small></p><ul><li>数据防泄漏</li><li>日志推送</li><li>电话支持</li></ul><a href="#">查看合约方案</a></div></div></div><div class="x-tpt__pane"><div class="x-tpt__intro"><div><h4>墙钟时间与 CPU 时间</h4><p>等待慢接口、大模型或人工回复的空档不计费。只为真正的计算付费，长时间运行的智能体流程也一样。</p></div><div class="x-tpt__flow x-tpt__flow--bars"><div class="x-tpt__row"><span>模型调用</span><div class="x-tpt__track"><i style="width:78%"></i><b style="left:78%;width:3%"></b></div></div><div class="x-tpt__row"><span>接口调用</span><div class="x-tpt__track"><i style="width:46%"></i><b style="left:46%;width:4%"></b></div></div><div class="x-tpt__row"><span>页面渲染</span><div class="x-tpt__track"><i style="width:20%"></i><b style="left:20%;width:6%"></b></div></div><p class="x-tpt__cap"><i class="x-tpt__k1"></i>等待（不计费） <i class="x-tpt__k2"></i>CPU 计算</p></div></div><div class="x-tpt__plans" style="grid-template-columns:repeat(2,1fr)"><div class="x-tpt__plan"><h4>入门</h4><p class="x-tpt__for">试水与原型</p><p class="x-tpt__price">¥ 0<small>/月</small></p><ul><li>每日请求额度</li><li>键值存储</li><li>对象存储</li></ul><a href="#">查看入门方案</a></div><div class="x-tpt__plan"><h4>付费</h4><p class="x-tpt__for">生产环境</p><p class="x-tpt__price">¥ —<small>/月起</small></p><ul><li>按请求计费</li><li>按 CPU 毫秒计费</li><li>按存储计费</li></ul><a href="#">查看付费方案</a></div></div></div></div><p class="x-tpt__note">价格均为示意</p></div>
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap");.x-tpt{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-tpt h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-tpt__sub{margin:12px 0 28px;font-size:16px;color:#666}.x-tpt__seg{position:relative;display:inline-flex;gap:2px;padding:4px;border:1px solid #EBEBEB;border-radius:999px;background:#fff}.x-tpt__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:#FF5D1D;box-shadow:0 6px 16px -8px rgba(255,93,29,.8);transition:left .35s cubic-bezier(.3,.8,.3,1),width .35s cubic-bezier(.3,.8,.3,1)}.x-tpt__seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;color:#333;cursor:pointer;transition:color .3s}.x-tpt__seg button svg{width:15px;height:15px}.x-tpt__seg button.is-on{color:#fff}.x-tpt__box{position:relative;width:82%;margin:22px auto 0;border:1px solid #EBEBEB;background:#fff;text-align:left}.x-tpt__pane{display:none;animation:x-tpt-in .45s ease}.x-tpt__pane.is-on{display:block}.x-tpt__intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:30px 36px;border-bottom:1px solid #EBEBEB}.x-tpt__intro h4{margin:0 0 8px;font-size:16px;font-weight:500}.x-tpt__intro p{margin:0;font-size:14px;line-height:1.55;color:#666}.x-tpt__flow{padding:16px 18px;border:1px dashed #E3E3E3;border-radius:6px}.x-tpt__flow>p:first-child{display:flex;justify-content:space-between;margin:0 0 12px;font-size:12.5px;color:#888}.x-tpt__or{color:#FF5D1D}.x-tpt__chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.x-tpt__chips span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px dashed #E0E0E0;border-radius:6px;font-size:12.5px;color:#333;animation:x-tpt-pulse 3s ease-in-out infinite}.x-tpt__chips span:nth-child(2){animation-delay:.3s}.x-tpt__chips span:nth-child(3){animation-delay:.6s}.x-tpt__chips span:nth-child(4){animation-delay:.9s}.x-tpt__chips span:nth-child(5){animation-delay:1.2s}.x-tpt__chips svg{width:15px;height:15px}.x-tpt__cap{margin:12px 0 0!important;font-size:12.5px!important;color:#777!important;text-align:center}.x-tpt__plans{display:grid}.x-tpt__plan{padding:26px 26px 28px;border-left:1px solid #EBEBEB}.x-tpt__plan:first-child{border-left:0}.x-tpt__plan h4{margin:0;font-size:14.5px;font-weight:500}.x-tpt__for{margin:2px 0 0;font-size:13.5px;color:#777}.x-tpt__price{margin:16px 0 14px;font-size:30px;letter-spacing:-.01em}.x-tpt__price small{margin-left:4px;font-size:12.5px;color:#777}.x-tpt__plan ul{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0;list-style:none}.x-tpt__plan li{padding:3px 8px;border:1px solid #EDEDED;border-radius:4px;font-size:12px;color:#555}.x-tpt__plan a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid #E5E5E5;border-radius:999px;font-size:13.5px;color:#262626;text-decoration:none;transition:border-color .2s,color .2s}.x-tpt__plan a:hover{border-color:#FF5D1D;color:#FF5D1D}.x-tpt__row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;margin:8px 0;font-size:12.5px;color:#555}.x-tpt__track{position:relative;height:14px;border-radius:3px;background:#F4F4F2}.x-tpt__track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:repeating-linear-gradient(90deg,#E6E6E2 0 6px,#F4F4F2 6px 9px)}.x-tpt__track b{position:absolute;top:0;bottom:0;border-radius:3px;background:#FF5D1D}.x-tpt__k1,.x-tpt__k2{display:inline-block;width:10px;height:10px;margin:0 4px 0 10px;border-radius:2px;background:#E6E6E2;vertical-align:-1px}.x-tpt__k2{background:#FF5D1D}.x-tpt__note{margin:14px 0 0;font-size:12.5px;color:#999}@keyframes x-tpt-in{from{opacity:0;transform:translateY(8px)}}@keyframes x-tpt-pulse{0%,100%{border-color:#E0E0E0}50%{border-color:rgba(255,93,29,.55);color:#FF5D1D}}@media (max-width:900px){.x-tpt__box{width:100%}.x-tpt__intro{grid-template-columns:1fr;gap:18px;padding:24px 20px}.x-tpt__plans{grid-template-columns:1fr 1fr!important}.x-tpt__plan:nth-child(odd){border-left:0}.x-tpt__plan{border-top:1px solid #EBEBEB}}@media (max-width:640px){.x-tpt__plans{grid-template-columns:1fr!important}.x-tpt__plan{border-left:0}.x-tpt__seg button{padding:0 9px;font-size:12.5px;gap:4px}.x-tpt__seg button svg{display:none}.x-tpt__chips span{font-size:11px}}@media (prefers-reduced-motion:reduce){.x-tpt__pane,.x-tpt__chips span{animation:none}.x-tpt__thumb{transition:none}}(root) => {
const box = root.classList && root.classList.contains("x-tpt") ? root : root.querySelector(".x-tpt");
if (!box) return;
const btns = [...box.querySelectorAll(".x-tpt__seg button")];
const panes = [...box.querySelectorAll(".x-tpt__pane")];
const thumb = box.querySelector(".x-tpt__thumb");
const place = () => { const b = btns.find((x) => x.classList.contains("is-on")) || btns[0]; thumb.style.left = b.offsetLeft + "px"; thumb.style.width = b.offsetWidth + "px"; };
const offs = btns.map((b, i) => { const h = () => { btns.forEach((x, k) => { x.classList.toggle("is-on", k === i); x.setAttribute("aria-selected", k === i ? "true" : "false"); }); panes.forEach((p, k) => p.classList.toggle("is-on", k === i)); place(); }; b.addEventListener("click", h); return () => b.removeEventListener("click", h); });
place();
const ro = new ResizeObserver(place); ro.observe(box);
return () => { offs.forEach((f) => f()); ro.disconnect(); };
}订阅 Builder 查看完整源码。查看价格