PbootCMS 热区功能说明文档功能介绍热区功能允许在幻灯片图片上添加交互式热点标记可用于突出显示图片中的重要区域或添加链接。特性支持多个热点标记可自定义热点颜色可自定义热点透明度支持热点链接响应式布局自动适应不同屏幕尺寸动画效果增强用户体验使用方法1. 后台配置进入后台幻灯片管理选择或添加幻灯片点击添加热区按钮在图片上点击需要添加热区的位置设置热区属性颜色默认#378f34透明度默认0.8范围0-1链接可选保存设置2. 前端模板使用在模板中使用以下标签显示热区{pboot:hotspots id[slide:id]}divclassabsolutestyleleft:[hotspots:x]%;top:[hotspots:y]%;ahref[hotspots:link]classgroup relative blockdivclassw-[80px] h-[80px] relative cursor-pointer!-- 外层扩散动画 --divclassabsolute inset-0 rounded-full animate-pingstylebackground-color:[hotspots:color];opacity:calc([hotspots:opacity] * 0.3)/div!-- 中层光晕 --divclassabsolute inset-[10%] rounded-fullstylebackground-color:[hotspots:color];opacity:calc([hotspots:opacity] * 0.5)/div!-- 内层圆点 --divclassabsolute inset-[30%] rounded-full shadow-lgstylebackground-color:[hotspots:color];opacity:[hotspots:opacity]/div/div/a/div{/pboot:hotspots}3. 可用标签[hotspots:x]- 热区横向位置百分比[hotspots:y]- 热区纵向位置百分比[hotspots:link]- 热区链接[hotspots:color]- 热区颜色包含#号[hotspots:opacity]- 热区透明度0-1之间的小数数据格式热区数据以JSON数组形式存储示例[{x:160,y:166,link:/?product_7/118.html,color:#ff0000,opacity:0.3832589285714285}]默认值x: 0y: 0link: “”color: “#378f34”opacity: 0.8注意事项热区位置使用百分比定位确保在不同尺寸下正常显示建议图片尺寸保持一致推荐比例16:9热区颜色代码需要包含#号链接可以为空此时热区仅作为标记使用透明度值范围为0-10表示完全透明1表示完全不透明更新记录v1.1.0 (2024-01-17)添加透明度控制功能优化动画效果修复颜色代码格式问题更新文档说明v1.0.0 (2024-01-08)初始版本发布支持基础热区功能添加动画效果修复会话状态问题优化数据解析逻辑