如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Promo Grid 推广格子装修模块
概述
Promo Grid 是一个为商城后台「设计 → 装修」功能增加推广格子展示模块的插件。左侧为可自动轮播的图片轮播图，右侧为两个促销专辑格子（各含图片、标题与跳转链接）。前台左右分栏自适应展示，移动端自动堆叠为上下布局。非常适合用于首页促销活动展示、热门商品推荐、品牌专区入口等场景。
主要功能
🖼️ 左右分栏布局
| 区域 | 内容 | 说明 |
|---|---|---|
| 左侧 | 图片轮播图 | 支持多张图片自动轮播，可配置分页点颜色、自动轮播开关与轮播间隔 |
| 右侧 | 两个促销专辑格子 | 各含图片、标题与跳转链接，支持自定义 |
🎠 左侧轮播图特性
| 特性 | 说明 |
|---|---|
| 标题 | 可自定义轮播区域标题（支持多语言） |
| 分页点颜色 | 可自定义分页点颜色 |
| 自动轮播 | 支持开启/关闭自动轮播 |
| 轮播间隔 | 可设置 1~10 秒的轮播间隔 |
| 无限循环 | 多张图片时自动无限循环轮播 |
📦 右侧促销专辑特性
| 特性 | 说明 |
|---|---|
| 两个独立格子 | 可分别配置图片、标题和跳转链接 |
| 图片比例 | 建议比例 2:1（如 1000×500px） |
| 标题叠加 | 标题显示在图片底部，带渐变蒙层提升可读性 |
| 悬停效果 | 鼠标悬停时图片平滑放大 |
| 链接支持 | 支持内部/外部链接，可选择新窗口打开 |
📐 配置选项
| 配置项 | 说明 |
|---|---|
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
| 左侧标题 | 轮播区域标题（支持多语言） |
| 右侧标题 | 促销专辑区域标题（支持多语言） |
| 分页点颜色 | 自定义轮播图分页点颜色 |
| 自动轮播开关 | 控制是否自动播放 |
| 轮播间隔 | 1~10 秒可调 |
| 轮播图列表 | 支持多张图片，可拖拽排序 |
| 促销专辑1/2 | 独立配置图片、标题和跳转链接 |
技术特点
-
✅ 左右分栏响应式：PC 端左右两栏等宽排列，移动端自动堆叠为上下布局
-
✅ 左侧轮播图：基于 Swiper 实现，支持自动轮播、分页点、无限循环
-
✅ 右侧专辑卡片：图片背景叠加标题，悬停图片放大
-
✅ 分页点颜色可调：支持自定义轮播图分页点颜色
-
✅ 等高分栏对齐：左右两侧高度自动对齐，右侧两个专辑等高分布
-
✅ 任意主题兼容：前台视图由插件自带，样式使用 CSS 变量适配主题
-
✅ 装修编辑器完美支持：实时预览，轮播图和专辑均支持预览
适用场景
-
首页促销活动展示（左侧活动轮播 + 右侧入口）
-
热门商品/品牌推荐区
-
季节/节日促销专区（左侧主推 + 右侧辅助）
-
内容推广区块（左侧资讯轮播 + 右侧专题入口）
-
品牌故事/企业文化展示
