如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Number Growth 数字增长装修模块
概述
Number Growth 是一个为商城后台「设计 → 装修」功能增加数字增长统计展示模块的插件。它以带图标的卡片形式，展示一组统计数字（如客户数、订单数、好评数等）。当数字滚动到可视区域时，会自动触发递增动画，从 0 增长到目标数值，生动地展示商家的业务成果和品牌实力。
主要功能
📊 动态数字增长展示
| 特性 | 说明 |
|---|---|
| 滚动触发动画 | 数字进入可视区域后自动从 0 开始递增，提升视觉吸引力 |
| 千分位格式化 | 数字自动添加千分位分隔符（如 2,589），提升可读性 |
| 单位支持 | 可自定义单位（如 k、%、+），显示在数字后方 |
| 数字大小可调 | 数字字体大小 20~80px 可调 |
| 平滑缓动动画 | 使用 easeOutCubic 缓动函数，动画流畅自然 |
🏷️ 卡片内容配置
| 特性 | 说明 |
|---|---|
| 内置图标库 | 预设 22 个常用图标（物流、订单、评分、客户、增长等） |
| 自定义图标 | 支持上传自定义图片，上传后自动覆盖内置图标 |
| 数字与单位 | 每个卡片可独立设置数值和单位 |
| 文字描述 | 支持多语言文字描述 |
📐 丰富的配置选项
| 配置项 | 说明 |
|---|---|
| 标题 | 模块主标题（支持多语言） |
| 简短描述 | 模块描述文字（支持富文本） |
| 数字大小 | 可设置 20~80px |
| PC端每行数量 | 可设置 1~6 列 |
| 移动端每行数量 | 可设置 1~4 列 |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
🎨 内置图标列表
| 图标 | 说明 | 图标 | 说明 |
|---|---|---|---|
| truck | 物流/配送 | box-seam | 包裹 |
| credit-card | 支付 | shield-check | 安全/保障 |
| people | 客户 | person-check | 会员 |
| star | 评分 | hand-thumbs-up | 好评 |
| heart | 喜爱 | cart-check | 订单 |
| bag-check | 购物 | gift | 礼品 |
| globe | 全球 | trophy | 奖项 |
| award | 认证 | gem | 精品 |
| lightning-charge | 快速 | cup-hot | 咖啡/休闲 |
| headset | 客服 | clock-history | 时长 |
| bar-chart | 业绩 | graph-up-arrow | 增长 |
技术特点
-
✅ Intersection Observer 触发：使用浏览器原生 API 检测元素可见性，性能优异
-
✅ 尊重减少动态偏好：检测
prefers-reduced-motion，用户偏好减少动画时直接显示最终数值 -
✅ 响应式网格布局：PC 端 1~6 列，移动端 1~4 列，自动换行，分割线智能适配
-
✅ 平滑缓动动画：easeOutCubic 缓动函数，数字过渡自然
-
✅ 千分位格式化：大数字自动添加千分位分隔符
-
✅ 内置图标字体：不依赖主题图标库，后台预览和前台均可正常显示
-
✅ 任意主题兼容：前台视图由插件自带，样式使用 CSS 变量适配主题
-
✅ 装修编辑器完美支持：实时预览，数字大小可实时调整
适用场景
-
企业/品牌实力展示（成立年限、客户数量、服务经验）
-
电商数据统计（订单总数、好评率、复购率）
-
项目/案例展示（完成项目数、合作品牌数）
-
会员/社区数据（注册会员数、活跃用户数）
-
物流/服务数据（配送覆盖、服务时长）
