徽章必须嵌套在a标签内紧贴文字右侧，用自定义类控制HOT/NEW样式，动态添加或隐藏需精准定位DOM，移动端需强制单行并适配尺寸。
直接在对应菜单项的文字后面插入带样式的标签即可，关键是位置要对、样式要轻量、不影响交互。
1. 徽章必须嵌套在a标签内部，紧贴文字右侧
错误写法（徽章在a外）：<li class="layui-nav-item">
<a href="/msg">消息</a><span class="layui-badge layui-bg-red">NEW</span>
</li>
这样会导致点击区域错位、折叠时被裁剪、移动端显示异常。
正确写法（徽章在a内，紧挨文字）：<li class="layui-nav-item"><a href="/msg">消息<span class="layui-badge layui-bg-red">NEW</span></a></li>
2. 用自定义类控制HOT/NEW样式，避免覆盖默认行为
Layui 默认的 layui-badge 主要用于数字计数，没有内置 HOT 或 NEW 文字样式。推荐自己加 CSS 类：
- 在页面中添加样式（放在 或全局 CSS 中）：
.layui-badge-hot { background-color: #FF5722; color: #fff; padding: 0 6px; font-size: 12px; border-radius: 2px; margin-left: 4px; }.layui-badge-new { background-color: #4CAF50; color: #fff; padding: 0 6px; font-size: 12px; border-radius: 2px; margin-left: 4px; } - 使用时：
<a href="/log">操作日志<span class="layui-badge-new">NEW</span></a><a href="/report">实时报表<span class="layui-badge-hot">HOT</span></a>
3. 动态添加或隐藏需精准定位 DOM
如果“NEW”只在有新内容时显示（比如首次访问某模块），不能全局刷所有徽章：
- 给目标菜单项加唯一标识：
<a href="/analysis" data-module="analysis">数据分析<span class="layui-badge-new">NEW</span></a> - 初始化后判断并移除（例如用户已看过）：
document.querySelector('a[data-module="analysis"] .layui-badge-new')?.remove(); - 或用 jQuery：
$('a[data-module="analysis"]').find('.layui-badge-new').remove();
4. 移动端适配要点
小标签在窄屏下容易换行或溢出：
- 加 CSS 强制单行：
.layui-badge-hot, .layui-badge-new { white-space: nowrap; } - 导航用
layui-nav-sm时，同步调小徽章 padding 和 font-size，保持视觉协调 - 避免在文字过长的菜单项上硬加，可改用图标（如
<i class="layui-icon layui-icon-fire"></i>）替代文字标
