徽章必须嵌套在a标签内紧贴文字右侧，用自定义类控制HOT/NEW样式，动态添加或隐藏需精准定位DOM，移动端需强制单行并适配尺寸。

直接在对应菜单项的文字后面插入带样式的标签即可，关键是位置要对、样式要轻量、不影响交互。

1. 徽章必须嵌套在a标签内部，紧贴文字右侧

错误写法（徽章在a外）：

@#@#@#@#@#@#@#@#@#@0NEW

这样会导致点击区域错位、折叠时被裁剪、移动端显示异常。

正确写法（徽章在a内，紧挨文字）：

@#@#@#@#@#@#@#@#@#@1

2. 用自定义类控制HOT/NEW样式，避免覆盖默认行为

Layui 默认的 layui-badge 主要用于数字计数，没有内置 HOT 或 NEW 文字样式。推荐自己加 CSS 类：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• 在页面中添加样式（放在 或全局 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; }
• 使用时：
  @#@#@#@#@#@#@#@#@#@2
@#@#@#@#@#@#@#@#@#@3

3. 动态添加或隐藏需精准定位 DOM

如果“NEW”只在有新内容时显示（比如首次访问某模块），不能全局刷所有徽章：

• 给目标菜单项加唯一标识：
  @#@#@#@#@#@#@#@#@#@4
• 初始化后判断并移除（例如用户已看过）：
  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，保持视觉协调
• 避免在文字过长的菜单项上硬加，可改用图标（如 ）替代文字标