Dual Plan Pricing
介绍
月付与终身两张并排定价卡：大号价格配划线原价，功能清单每行带线性图标和蓝色对勾，底部列出计费与使用期条件；推荐方案用浅蓝渐变、加粗描边和主色按钮突出。
拆自整页模板 澄榜 应用市场情报首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Dual Plan Pricing 加进你的项目并换成你的配色。
适用场景
SaaS 定价页、升级弹窗、方案对比和按月 / 按年切换。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add dual-plan-pricing
mcp › 使用 8pt MCP 调用 get_component("dual-plan-pricing")
代码
Dual Plan Pricing 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-dpp"><div class="dpp-grid"><div class="dpp-p "><div class="dpp-n"><b>月付</b></div><p class="dpp-sub">按月计费，随时取消。</p><div class="dpp-pr"><strong>¥199</strong><s>¥399</s></div><p class="dpp-u">/月 · 早鸟价</p><a href="#" class="dpp-btn">开通澄榜 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M9 7h8v8"/></svg></a><h6>功能</h6><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="6" height="6"/><rect x="14" y="4" width="6" height="6"/><rect x="4" y="14" width="6" height="6"/><rect x="14" y="14" width="6" height="6"/></svg>应用目录：双端商店<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20V10M12 20V4M19 20v-7"/></svg>收入与下载估算<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10v5a5 5 0 0 1-10 0zM12 14v4M8 20h8"/></svg>榜单、评分与筛选<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10v4h3l6 4V6L7 10z"/></svg>广告与素材<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h5a3 3 0 0 1 3 3v7"/></svg>付费流程与竞品<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v5M15 3v5M7 8h10v3a5 5 0 0 1-10 0zM12 16v5"/></svg>API 与 MCP<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li></ul><h6>条件</h6><dl><div><dt>计费</dt><dd>按月</dd></div><div><dt>7 天退款保障</dt><dd><i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></dd></div><div><dt>使用期</dt><dd>订阅期内</dd></div></dl></div><div class="dpp-p hot"><div class="dpp-n"><b>终身</b><span class="dpp-badge">更划算</span></div><p class="dpp-sub">一次付清，长期使用。</p><div class="dpp-pr"><strong>¥699</strong><s>¥1399</s></div><p class="dpp-u">一次性 · 早鸟价</p><a href="#" class="dpp-btn">开通澄榜 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M9 7h8v8"/></svg></a><h6>功能</h6><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="6" height="6"/><rect x="14" y="4" width="6" height="6"/><rect x="4" y="14" width="6" height="6"/><rect x="14" y="14" width="6" height="6"/></svg>应用目录：双端商店<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20V10M12 20V4M19 20v-7"/></svg>收入与下载估算<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10v5a5 5 0 0 1-10 0zM12 14v4M8 20h8"/></svg>榜单、评分与筛选<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10v4h3l6 4V6L7 10z"/></svg>广告与素材<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h5a3 3 0 0 1 3 3v7"/></svg>付费流程与竞品<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v5M15 3v5M7 8h10v3a5 5 0 0 1-10 0zM12 16v5"/></svg>API 与 MCP<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li></ul><h6>条件</h6><dl><div><dt>计费</dt><dd>一次付清</dd></div><div><dt>7 天退款保障</dt><dd><i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></dd></div><div><dt>使用期</dt><dd>长期</dd></div></dl></div></div></div>
.x-dpp{--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-dpp,.x-dpp *{box-sizing:border-box}.x-dpp a{color:inherit;text-decoration:none}.x-dpp button{font:inherit;cursor:pointer}.x-dpp{width:100%;max-width:840px;margin:0 auto;text-align:left}.x-dpp .dpp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.x-dpp .dpp-p{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 22px 18px;box-shadow:0 1px 3px rgba(16,24,40,.05);transition:transform .3s,box-shadow .3s}.x-dpp .dpp-p:hover{transform:translateY(-3px);box-shadow:0 16px 40px -20px rgba(16,24,40,.25)}.x-dpp .dpp-p.hot{background:linear-gradient(180deg,#EEF4FF,#fff 40%);border:2px solid #BFD2FB;box-shadow:0 20px 50px -24px rgba(47,107,234,.45)}.x-dpp .dpp-n{display:flex;justify-content:space-between;align-items:center}.x-dpp .dpp-n b{font-size:16px;font-weight:600}.x-dpp .dpp-badge{font-size:11px;color:var(--blue);background:#E0EAFF;padding:3px 10px;border-radius:999px}.x-dpp .dpp-sub{margin:8px 0 22px;font-size:12px;color:#667085}.x-dpp .dpp-pr{display:flex;align-items:baseline;gap:10px}.x-dpp .dpp-pr strong{font-size:38px;font-weight:500;letter-spacing:-.02em}.x-dpp .dpp-pr s{font-size:14px;color:#98A2B3}.x-dpp .dpp-u{margin:2px 0 16px;font-size:11px;color:#98A2B3}.x-dpp .dpp-btn{display:flex;justify-content:center;align-items:center;gap:8px;height:44px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;transition:all .2s}.x-dpp .dpp-btn:hover{border-color:var(--ink)}.x-dpp .hot .dpp-btn{background:var(--blue);border-color:var(--blue);color:#fff}.x-dpp .hot .dpp-btn:hover{background:#2459CF}.x-dpp h6{margin:20px 0 8px;font-size:11px;font-weight:500;color:#98A2B3}.x-dpp ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}.x-dpp li{display:flex;align-items:center;gap:10px;font-size:13px}.x-dpp li svg{width:15px;height:15px;color:#667085;flex:none}.x-dpp li i,.x-dpp dd i{margin-left:auto;width:18px;height:18px;border-radius:5px;background:#EEF4FF;color:var(--blue);display:grid;place-items:center}.x-dpp dl{margin:0;display:grid;gap:9px}.x-dpp dl div{display:flex;justify-content:space-between;align-items:center;font-size:13px}.x-dpp dt{font-weight:500}.x-dpp dd{margin:0;color:#667085;display:flex}@media (max-width:640px){.x-dpp .dpp-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.x-dpp *{transition:none!important}}.x-dpp{max-width:none;padding:48px 6%;background-image:radial-gradient(rgba(16,24,40,.14) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-dpp .dpp-grid{max-width:840px;margin:0 auto}订阅 Builder 查看完整源码。查看价格