一、组件概述
产品热点图组件用于在一张产品图片上标注多个可点击的热点，点击热点后显示该部位的名称、描述和详情链接。适合产品卖点拆解、设备部件说明、工厂场景介绍等场景。
组件提供两种展示款式：
- 标准款式：热点覆盖在产品图上，点击后弹出悬浮说明卡片。支持全宽、标准容器、半宽图文两栏三种布局。适合产品展示页、首页 Banner 区域。
- 双向联动款式：左侧图片加热点，右侧固定说明栏。点击热点后右侧内容同步切换。适合工业产品、设备类目，卖点内容较多时推荐使用。
二、后台操作流程
2.1 添加组件
- 在 SX-Creval 后台进入目标页面的编辑界面。
- 在内容区点击"添加"，从组件列表中找到"产品热点图"分组，选择"产品热点图组件"。
- 组件展开后从上到下依次填写：标题与描述 → 热点样式 → 弹出层样式 → 组件设置 → 背景设置 → 热点列表。
- 点击"保存草稿"后点击"预览"确认效果，无误后点击"发布"。
2.2 获取热点坐标（坐标拾取器）
热点位置用图片的百分比坐标表示（X：0 为最左，100 为最右；Y：0 为最上，100 为最下）。系统内置了坐标拾取工具，操作步骤如下：
- 填写好产品图和至少一个热点后，点击"保存草稿"，再点击"预览"打开预览窗口。
- 在预览页面中，将鼠标移到产品图上，光标会变为十字准星。
- 点击目标位置，页面会弹出坐标提示框，显示该位置的 X 和 Y 百分比数值。
- 点击提示框，系统自动将坐标复制到剪贴板，提示框短暂显示"已复制"。
- 回到后台编辑页，将 X 值（去掉 % 符号）填入热点的"X 轴位置"字段，Y 值填入"Y 轴位置"字段。
坐标拾取器仅在预览模式下可用，正式发布的页面不显示坐标提示框。每次更换产品图后建议重新拾取坐标，图片尺寸变化会导致原坐标偏移。
三、配置字段说明
3.1 标题与描述
组件顶部的整体标题区域。
- 小标签：标题上方的装饰性小标签，如"PRODUCT"。可留空。
- 标题：主标题，建议 10 字以内。
- 描述：标题下方的辅助说明，建议不超过 60 字。
- 对齐方式：左对齐 / 居中 / 右对齐。全宽模式建议居中，半宽模式建议左对齐。
- 标题颜色 / 描述颜色：文字颜色，深色背景建议用白色。
3.2 热点样式
控制图片上热点标记圆点的外观，所有热点共用同一样式。
- 热点样式：
- 经典脉冲：中心实心点加向外扩散的透明动画圈，最常用。
- 同心环：三层同心圆，外层有缓慢呼吸动画。
- 柔光晕：带模糊光晕效果，视觉较柔和。
- 星轨圆：外层虚线圈持续旋转，强调科技感。
- 数字：显示热点序号（1、2、3...），与双向联动款式配合效果最佳。
- 热点主色：热点的主要颜色，影响动画圈、边框和中心点的颜色。默认蓝色 #3573FF。
- 热点大小：小（20px）/ 中（28px）/ 大（36px）。图片较小时选"小"，大图选"中"或"大"。
3.3 弹出层样式
控制点击热点后弹出的说明卡片外观。在双向联动款式中，部分字段同时影响右侧说明栏的显示。
- 背景风格：纯色背景 / 玻璃拟态 / 无背景。玻璃拟态为半透明磨砂效果，与复杂背景图搭配时视觉较好，但需调整文字颜色保证可读性。
- 弹出背景颜色：弹出层的背景色。纯色模式即为填充色，玻璃模式与透明度配合使用。
- 透明度（玻璃有效）：10-100 之间的整数，仅玻璃拟态模式有效。建议 40-70。
- 模糊（玻璃有效）：轻微 / 标准 / 中等 / 较强 / 强，仅玻璃拟态模式有效。
- 文字颜色：弹出层内所有文字的颜色。
- 显示边框：开 / 关，开启后弹出层显示细线边框。
- 阴影：无 / 标准 / 大 / 超大。建议默认使用"超大"增强层次感。
- 弹出层宽度：窄（192px）/ 标准（256px）/ 宽（320px）。描述文字较多时选"宽"。
- 显示数字（双向联动）：开 / 关，仅双向联动款式有效。开启后右侧说明栏标题左侧显示大号序号 01、02...。
- 小标签（双向联动）：仅双向联动款式有效，显示在右侧说明栏顶部的装饰标签，如"FEATURE FOCUS"。可留空。
3.4 组件设置
控制整体布局结构、产品图和连接线。
- 展示款式：标准款式 / 双向联动。两种款式渲染结构不同，切换后需重新检查布局效果。
- 主图：产品主图，热点标注在此图上。建议上传宽度不低于 1200px 的图片，或为1920px，格式推荐 WebP 或 JPG。
- 显示连接线：开 / 关，开启后热点圆点到弹出层之间绘制一条虚线，帮助用户理解对应关系。
- 连接线颜色：连接虚线的颜色，建议与热点主色保持一致。
- 连接线方向（弹出层位置）：向左 / 向右，控制弹出层出现在热点左侧还是右侧。该设置为全局配置，所有热点共用。靠近图片左边缘的热点建议选"向右"，靠近右边缘的建议选"向左"。
- 连接线长度（px）：热点边缘到弹出层边缘的像素距离。建议 60-120px，默认 100px。
- 默认展开第几个热点：页面加载后默认激活的热点序号，从 1 开始。
- 容器宽度：
- 全宽：图片铺满浏览器整个宽度。
- 标准容器：图片居中，两侧有标准内边距，适合大多数场景。
- 半宽：仅标准款式有效，图片占右半栏，左半栏显示标题文案，形成图文两栏布局。
- 弹出层圆角：无圆角 / 小 / 中 / 大 / 全圆，建议与网站整体设计风格保持一致。
3.5 背景设置
组件整个区块的背景，位于产品图和热点层级下方。可设置纯色、渐变色或背景图，也可留空使用页面默认背景。该配置区域为通用组件，详情请参阅《通用动画类 文档》。
3.6 动效设置
控制组件进入视口时的入场动画，字段为选填，不需要动画留空即可。详情请参阅《背景组文档》。
3.7 热点列表
逐个配置每一个热点，每个热点包含以下字段：
- 热点标题 / 部件名称（必填）：弹出层的主标题，也是双向联动款式右侧说明栏的大标题。建议不超过 15 字。
- 简短描述 / 卖点说明（选填）：弹出层或右侧说明栏的正文描述，建议 1-2 句话，不超过 60 字。
- X 轴位置（0-100%）（必填）：热点在产品图上的水平位置，建议通过坐标拾取器获取。
- Y 轴位置（0-100%）（必填）：热点在产品图上的垂直位置，建议通过坐标拾取器获取。
- 详情页面链接（选填）：绑定一个站内页面，填写后弹出层底部显示"了解详情"跳转链接。
热点列表支持拖拽排序。"数字"热点样式和右侧"显示数字"功能的编号由列表顺序决定，第一项为 1，依此类推。如需调整编号，直接拖拽热点条目到对应位置即可。
四、两种款式的行为说明
4.1 标准款式（全宽/半宽）
- 页面加载后，"默认展开第几个热点"对应的热点自动展开弹出层。
- 点击其他热点，当前弹出层关闭，新热点弹出层打开，连接线同步更新。
- 弹出层右上角有关闭按钮，点击后所有弹出层关闭。
- 弹出层出现在热点的左侧或右侧，由"连接线方向"字段控制。
- 容器宽度选"半宽"时，页面分为左右两栏，左栏为标题文案，右栏为产品图和热点，标题不再渲染在图片上方。因此，其实标准款式是有两种样式布局的。
4.2 双向联动款式
- 布局固定为左图右文：左侧 7 列放产品图，右侧 5 列为说明栏，移动端自动切换为上下布局。
- 页面加载后，默认激活的热点对应的内容显示在右侧说明栏中。
- 点击热点后，右侧说明栏通过淡入动画平滑切换到对应内容。
- 同一时刻只有一个热点处于激活状态（高亮加轻微放大），没有关闭逻辑，始终保持一个激活。
- "容器宽度"中的"半宽"选项对此款式无效，全宽和标准容器均有效。
五、常见问题
热点位置与图片不对应，出现偏移
坐标是相对于产品图片本身的百分比，不是屏幕坐标。请确认在坐标拾取器中点击的是产品图片区域本身。如果图片尺寸或容器宽度配置发生变化，需要重新拾取坐标。
弹出层被图片边缘裁切，显示不完整
将对应热点的坐标向图片中心方向移动，或切换"连接线方向"，使弹出层出现在图片内部空间较大的一侧。注意连接线方向为全局配置，切换后所有热点的弹出层方向均会改变。如果你使用的是半宽，或双向联动模式的话，建议取消连接线，可避免弹出层被裁切的问题。
修改内容后前台页面没有更新
请确认已点击"发布"而非仅保存草稿。草稿状态下只有登录了后台的用户通过预览才能看到最新内容，普通访客看到的是上次发布的版本。
热点数量建议
标准款式建议不超过 6 个，热点过多会导致弹出层相互遮挡。双向联动款式建议控制在 5 个以内，卖点精选比数量多更有说服力。
能否给不同热点设置不同颜色
热点颜色为组件级全局设置，所有热点共用同一颜色，当前版本不支持单个热点独立配色。
SX-Creval / 洛阳尚贤科技 | 创造价值，长久合作
本文档随产品迭代更新，如内容与实际后台不符，以实际后台为准。