Device Price Card
介绍
一次买断的定价区：衬线斜体双行标题，白色价格卡带 1 台 / 2 台 / 3 台分段切换，价格数字带滚动过渡并标注示意价格，下方勾选清单和黑色下载按钮，背景是底部渐蓝的天空。
拆自整页模板 随贴 Mac 剪贴板历史官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Device Price Card 加进你的项目并换成你的配色。
适用场景
SaaS 定价页、升级弹窗、方案对比和按月 / 按年切换。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add device-price-card
mcp › 使用 8pt MCP 调用 get_component("device-price-card")
代码
Device Price Card 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-dpc"><div class="x-dpc__head"><h2>一次付费。<em>终身使用。</em></h2><p>买断制，不订阅。在你的 Mac 上一直用下去。</p></div><div class="x-dpc__card"><div class="x-dpc__top"><span class="x-dpc__name"><img src="https://8pt.dev/api/media/0b8c42a8ad950197eb176023.webp" alt="" width="36" height="36"><b>随贴 Mac 版</b></span><div class="x-dpc__seg" role="tablist"><button type="button" role="tab" aria-selected="true" data-n="1" data-p="98">1 台</button><button type="button" role="tab" aria-selected="false" data-n="2" data-p="168">2 台</button><button type="button" role="tab" aria-selected="false" data-n="3" data-p="228">3 台</button><span class="x-dpc__thumb" aria-hidden="true"></span></div></div><div class="x-dpc__price"><b>¥<span class="x-dpc__num">98</span></b><span class="x-dpc__tag">示意价格</span></div><ul class="x-dpc__list"><li><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 12.5l4.5 4.5L19 7.5"/></svg>一次付费</li><li><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 12.5l4.5 4.5L19 7.5"/></svg>不合适可申请退款</li><li><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 12.5l4.5 4.5L19 7.5"/></svg>终身版本更新</li><li><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 12.5l4.5 4.5L19 7.5"/></svg>全部功能直接解锁</li><li><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 12.5l4.5 4.5L19 7.5"/></svg>原生 Mac 应用</li><li><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 12.5l4.5 4.5L19 7.5"/></svg><span class="x-dpc__lic">1 台设备授权</span></li></ul><a class="x-dpc__buy" 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="M12 4v11"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>下载 Mac 版</a></div></div>
.x-dpc{box-sizing:border-box;width:100%;max-width:1100px;margin:0 auto;padding:56px 24px 64px;border-radius:30px;background:linear-gradient(180deg,#fff 0%,#fff 35%,#bfe1ff 75%,#5aa8ff 100%);color:#0b0b0f;text-align:center;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-dpc *,.x-dpc *::before,.x-dpc *::after{box-sizing:border-box}.x-dpc svg{width:1em;height:1em;flex:none}.x-dpc__head h2{margin:0;display:flex;flex-direction:column;font-size:clamp(34px,5vw,52px);line-height:1.12;font-weight:800;letter-spacing:.01em}.x-dpc__head em{font-family:"Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",serif;font-style:italic;font-weight:600}.x-dpc__head p{margin:14px 0 0;font-size:15px;color:#5f6370}.x-dpc__card{width:min(440px,100%);margin:34px auto 0;padding:22px;border-radius:26px;background:#fff;text-align:left;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 40px 80px -40px rgba(10,40,120,.55)}.x-dpc__top{display:flex;flex-direction:column;gap:14px}.x-dpc__name{display:flex;align-items:center;gap:10px;font-size:16px}.x-dpc__name img{width:36px;height:36px;border-radius:10px}.x-dpc__seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:14px;background:#f1f1f4}.x-dpc__seg button{position:relative;z-index:1;height:36px;border:0;background:transparent;color:#6b6f7a;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .25s}.x-dpc__seg button[aria-selected="true"]{color:#0b0b0f}.x-dpc__thumb{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/3);border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);transform:translateX(calc(var(--i,0) * 100%));transition:transform .35s cubic-bezier(.2,.8,.2,1)}.x-dpc__price{display:flex;align-items:center;gap:10px;margin:22px 0 18px}.x-dpc__price b{font-size:46px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}.x-dpc__num{display:inline-block}.x-dpc__num.is-pop{animation:x-dpc-pop .45s cubic-bezier(.2,.8,.2,1)}@keyframes x-dpc-pop{from{opacity:0;transform:translateY(10px)}}.x-dpc__tag{height:24px;padding:0 9px;border-radius:99px;background:#eef4ff;color:#2a62e8;font-size:12px;line-height:24px;font-weight:600}.x-dpc__list{display:grid;gap:11px;margin:0 0 22px;padding:16px 0 0;border-top:1px solid #efeff2;list-style:none;font-size:14px;color:#3a3a42}.x-dpc__list li{display:flex;align-items:center;gap:10px}.x-dpc__list svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#e9f1ff;color:#2a62e8}.x-dpc__buy{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:16px;background:#050506;color:#fff;font-size:15px;font-weight:650;text-decoration:none;transition:transform .2s}.x-dpc__buy:hover{transform:translateY(-2px)}@media (max-width:560px){.x-dpc{padding:40px 16px 48px}.x-dpc__price b{font-size:38px}}@media (prefers-reduced-motion:reduce){.x-dpc__thumb,.x-dpc__buy,.x-dpc__seg button{transition:none}.x-dpc__num.is-pop{animation:none}}(root) => {
const seg = root.querySelector('.x-dpc__seg');
const btns = [...seg.querySelectorAll('button')];
const num = root.querySelector('.x-dpc__num');
const lic = root.querySelector('.x-dpc__lic');
const onClick = e => {
const b = e.target.closest('button');
if (!b) return;
const i = btns.indexOf(b);
btns.forEach(x => x.setAttribute('aria-selected', String(x === b)));
seg.style.setProperty('--i', i);
num.textContent = b.dataset.p;
…订阅 Builder 查看完整源码。查看价格