如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Brand List 商标列表装修模块
概述
Brand List 是一个为商城后台「设计 → 装修」功能增加商标/品牌 Logo 展示模块的插件。它以一排优雅的品牌 Logo 网格形式，展示合作品牌、入驻商家或合作伙伴。每个品牌包含 Logo 图片（建议 400×200）和可选的跳转链接，支持拖拽排序、自定义标题和描述，非常适合用于首页品牌墙、合作伙伴展示区或品牌推荐区域。
主要功能
🏷️ 品牌 Logo 网格展示
| 特性 | 说明 |
|---|---|
| 品牌列表 | 可拖拽排序，每个品牌独立配置 Logo 和跳转链接 |
| 自适应网格 | 网格自动适应屏幕宽度，一排约显示 6 个 Logo，空间不足时自动换行 |
| 图片比例 | 建议图片尺寸 400×200（2:1 比例），Logo 居中完整显示不被裁切 |
| 悬停效果 | 鼠标悬停时卡片上浮并带阴影，增加交互感 |
| 链接支持 | 每个品牌可配置独立的跳转链接（支持新窗口打开） |
📝 内容配置选项
| 配置项 | 说明 |
|---|---|
| 标题 | 模块主标题（支持多语言） |
| 描述 | 模块描述文字（支持富文本） |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
| 品牌列表 | 拖拽排序，每个品牌包含图片和跳转链接 |
技术特点
-
✅ 自适应网格布局：使用 CSS Grid + auto-fit，自动计算每排最佳数量，移动端自动收缩
-
✅ 图片完整展示：采用
object-fit: contain，Logo 居中完整显示，不裁剪变形 -
✅ 2:1 黄金比例：图片容器固定为 2:1 比例，适配绝大多数品牌 Logo 尺寸
-
✅ 拖拽排序：品牌列表支持拖拽调整顺序
-
✅ 悬停交互：卡片上浮 + 阴影效果，提升视觉体验
-
✅ 响应式设计：移动端自动缩小卡片间距和内边距
-
✅ 任意主题兼容：前台视图由插件自带，样式采用 CSS 变量适配主题色调
-
✅ 装修编辑器完美支持：实时预览，未添加品牌时显示占位提示
适用场景
-
首页品牌墙/品牌展示区
-
合作伙伴/入驻商家展示
-
战略合作品牌推荐
-
客户案例/荣誉资质展示
-
赞助商展示
