Uptime-Kuma监控面板百分比显示的自定义方法

Uptime-Kuma作为一款开源的监控工具，默认会在每个监控项旁边显示一个带有百分比的圆形徽章，表示该服务的运行状态统计。这个设计虽然直观，但有时用户可能希望隐藏这些百分比显示，以获得更简洁的界面或满足特定的展示需求。

隐藏百分比显示的技术实现

通过简单的CSS定制，我们可以轻松隐藏这些百分比徽章。Uptime-Kuma的前端界面使用了Bootstrap框架的徽章(badge)组件来显示这些百分比，我们可以针对性地隐藏这些元素。

以下是实现这一效果的CSS代码：

.badge.rounded-pill.bg-secondary,
.badge.rounded-pill.bg-primary,
.badge.rounded-pill.bg-danger,
.badge.rounded-pill.bg-warning {
    display: none;
}

这段CSS代码的作用是：

1. 选择所有具有badge和rounded-pill类名的元素
2. 覆盖了四种不同状态的颜色类(bg-secondary、bg-primary、bg-danger、bg-warning)
3. 将这些元素的显示属性设置为none，使其完全隐藏

效果说明

应用这段CSS后，监控面板将不再显示任何状态百分比徽章，但保留其他所有功能和视觉元素。监控项的状态仍然会通过颜色变化来指示（如绿色表示正常，红色表示故障等），只是移除了具体的数字百分比显示。

应用场景

这种定制特别适合以下情况：

• 需要简化界面，减少视觉干扰
• 在公开展示时不想透露具体的运行统计数据
• 当百分比信息对用户不重要时
• 在移动设备等小屏幕上节省空间

注意事项

1. 这段CSS会全局应用，隐藏所有监控项的百分比显示
2. 如果需要保留某些监控项的百分比，需要修改选择器以更精确地定位
3. 更新Uptime-Kuma版本后，建议检查此定制是否仍然有效

通过这种简单的界面定制，用户可以更好地控制Uptime-Kuma的显示效果，使其更符合个人或组织的使用需求。