如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Image Hotspot 图片热点装修模块
概述
Image Hotspot 是一个为商城后台「设计 → 装修」功能增加图片热点标注模块的插件。上传 PC/移动端 banner 图后，可以在图片上叠加多个可拖拽排序的热点标记。每个热点可独立设置位置、图标、标题和描述，访客点击热点即可展开图文气泡，展示详细内容。非常适合用于产品功能说明、场景化导购、示意图标注等场景。
主要功能
🖼️ 可交互的热点标注
| 特性 | 说明 |
|---|---|
| 双端图片 | 支持分别上传 PC 端和移动端背景图，自适应切换 |
| 拖拽排序 | 热点列表支持拖拽调整顺序 |
| 独立坐标 | 每个热点的 PC 端和移动端位置可独立设置（百分比坐标） |
| 自定义图标 | 支持使用系统默认图标或上传自定义图片作为热点标记 |
| 图标大小可调 | 热点标记大小可独立设置（16~120px） |
💬 图文气泡内容
| 特性 | 说明 |
|---|---|
| 标题 | 支持多语言标题 |
| 简短描述 | 支持富文本描述，可包含格式化内容和链接 |
| 气泡位置 | 可独立设置气泡弹出方向（居左 / 居中 / 居右） |
| 关闭按钮 | 气泡自带关闭按钮，点击空白处可关闭所有展开的热点 |
📐 模块配置选项
| 配置项 | 说明 |
|---|---|
| 标题 | 模块主标题（支持多语言） |
| 描述 | 模块描述文字（支持富文本） |
| PC端图片 | 建议尺寸 1920×600px |
| 移动端图片 | 建议尺寸 1242×900px |
| 蒙层颜色 | 叠加在图片上的半透明蒙层（支持透明度） |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
技术特点
-
✅ 双端独立坐标：PC 端和移动端热点位置各自独立配置，完美适配不同设备
-
✅ 百分比定位：使用百分比坐标，热点位置随图片比例自动缩放
-
✅ 优雅的交互：点击热点展开气泡，再次点击关闭，空白处点击关闭所有
-
✅ 视觉反馈：热点标记带有脉冲动画（未展开时）和悬停/点击缩放效果
-
✅ 自定义图标：支持上传自定义图标替换默认「+」号标记
-
✅ 气泡自适应：气泡内容过多时自动换行，支持富文本和链接
-
✅ 响应式设计：移动端自动切换坐标，气泡尺寸适当缩小
-
✅ 任意主题兼容：前台视图由插件自带，样式使用 CSS 变量适配主题
-
✅ 装修编辑器完美支持：实时预览，热点位置可精确调试
适用场景
-
产品功能卖点标注（介绍各部件功能）
-
场景化导购（服装搭配、家具布置等）
-
示意图/说明书标注（使用说明、安装指南）
-
门店/展厅导览（标注不同区域）
-
活动/促销海报重点标注
