如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Price Compare 价格对比装修模块
概述
Price Compare 是一个为商城后台「设计 → 装修」功能增加价格对比展示模块的插件。它用于展示多个套餐/订阅价格方案，以卡片形式清晰呈现每个方案的内容。支持拖拽排序、入场动画、移动端横向滑动，并可独立设置「推荐」角标卡与「默认选中」高亮卡。所有颜色均可后台自定义，非常适合用于会员套餐、服务方案、订阅计划等对比展示。
主要功能
💳 价格对比卡片
| 特性 | 说明 |
|---|---|
| 卡片内容 | 每张卡片包含图片、主标题、副标题、现价、原价、单位、卖点列表（支持换行） |
| 两个按钮 | 主要按钮（全局文案）和次要按钮（每卡片独立文案），均支持跳转链接 |
| 拖拽排序 | 卡片列表支持拖拽调整顺序 |
| PC/移动端适配 | PC 端可设置每排数量（1~6列），移动端可选择横向滑动或竖向堆叠 |
🏷️ 特殊卡片标识
| 特性 | 说明 |
|---|---|
| 推荐角标 | 可指定某张卡片显示「Popular」推荐角标，支持自定义文案和颜色 |
| 默认选中高亮 | 可指定某张卡片为默认选中状态，支持独立的主标题背景/文字、内容背景颜色 |
🎨 丰富的颜色自定义
| 配置类别 | 可配置项 |
|---|---|
| 卡片通用 | 主标题背景/文字、内容背景/文字、现价颜色、原价颜色 |
| 按钮颜色 | 主要按钮背景/文字、次要按钮背景/文字（文字颜色也用作边框色） |
| 推荐角标 | 卡片位置、文案、文字颜色、背景颜色 |
| 选中卡片 | 卡片位置、主标题文字/背景、内容背景 |
✨ 视觉增强
| 特性 | 说明 |
|---|---|
| 入场动画 | 卡片滚动到可视区域时，从下方淡入并上浮，支持阶梯延迟效果 |
| 图标选择 | 卖点列表支持 6 种图标样式（打钩/圆形打钩/箭头/星星/圆点/无） |
| 悬停效果 | 卡片悬停有阴影效果，选中卡片阴影更明显 |
| 移动端滑动 | 移动端可选择横向滑动，卡片滚动吸附 |
技术特点
-
✅ 响应式网格布局：PC 端 1~6 列，移动端可切换横向滑动或竖向堆叠
-
✅ 入场滚动动画：使用 Intersection Observer 检测可见性，卡片依次淡入上浮
-
✅ 阶梯延迟效果：多张卡片按顺序依次出现，动画更自然
-
✅ 丰富颜色自定义：普通卡片、推荐卡片、选中卡片各自独立配色
-
✅ 灵活按钮系统：主要按钮全局统一，次要按钮每卡片独立
-
✅ 卖点列表换行输入：后台支持换行输入，每行自动解析为列表项
-
✅ 移动端优化：横向滑动模式支持滚动吸附，提升触屏体验
-
✅ 任意主题兼容：前台视图由插件自带，样式使用 CSS 变量适配
适用场景
-
会员套餐/订阅计划对比
-
服务方案/产品版本对比（标准版/专业版/旗舰版）
-
定价页面展示
-
SaaS 服务套餐对比
-
课程/培训方案展示
