需用title数组+自定义skin启用HTML解析：title设为['消息中心 <span class="unread-badge">3</span>', 'has-html-title']，同步设置skin: 'has-html-title'，并定义CSS控制小红点绝对定位与垂直居中。
在Layui layer弹窗标题中嵌入动态未读数小红点，需绕过title参数的HTML转义限制，改用数组形式传入含标签的标题，并配合CSS精准控制小红点样式与定位，否则小红点会显示为纯文本或错位溢出。
用title数组+自定义skin启用HTML解析
第一步：调用layer.open时，将title设为长度为2的数组，第一项是含HTML的小红点结构，第二项是任意非空字符串（作为skin类名占位）：
title: ['消息中心 <span class="unread-badge">3</span>', 'has-html-title']
第二步：必须同步设置skin: 'has-html-title'，否则layer仍会对title内容执行HTML转义，导致标签被原样输出而非渲染。这个skin名可任意取，但必须与数组第二项完全一致。
第三步：在页面CSS中定义.has-html-title .layui-layer-title下的.unread-badge样式，重点控制position: absolute、right偏移和top对齐，因为.layui-layer-title默认是relative定位，子元素absolute才能精准锚定：
.has-html-title .layui-layer-title { position: relative; }<br>.has-html-title .unread-badge { display: inline-block; width: 18px; height: 18px; line-height: 18px; font-size: 12px; background: #ff5722; color: #fff; border-radius: 50%; text-align: center; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
【注意：不加transform: translateY(-50%)会导致小红点垂直居中失效，因span默认基线对齐，不是中线对齐】
动态更新未读数（不重开弹窗）
方法一：通过layer索引精准修改对应弹窗标题内的数字
先保存open返回值：const index = layer.open({ ... })
再用jQuery定位并更新数字：$(`.layui-layer[layer-id="${index}"] .unread-badge`).text('5')
方法二：若已知弹窗DOM节点（如在success回调中），直接操作layero内部节点更可靠：
success: function(layero, index) { layero.find('.unread-badge').text('1'); }
这一步操作起来很简单，直接把数字塞进span就行，但必须确保layero.find能取到节点——如果弹窗带动画或自定义skin，建议加setTimeout(() => { ... }, 30)避让渲染延迟。
避免小红点样式被覆盖的硬性处理
第一步：检查是否引入了全局重置CSS（如normalize.css或某些UI库），它们可能给span设了vertical-align: baseline，导致小红点下沉。强制覆盖：
.unread-badge { vertical-align: middle !important; }
第二步：若弹窗用了skin: 'layui-layer-molv'等内置主题，其CSS可能设置了.layui-layer-molv .layui-layer-title的padding-right，挤压小红点空间。此时需显式增大该padding值，留出足够右侧余量：
.layui-layer-molv .layui-layer-title { padding-right: 40px !important; }
第三步：禁止使用.layui-layer-title .unread-badge这种宽泛选择器，它会污染所有弹窗；必须绑定到具体skin类或layer-id属性上，否则多个弹窗同时打开时，小红点数字会互相覆盖。
