哪吒监控:一款适应手机的列表主题

Auth:猫饭       Date:2022/03/28       Cat:代码       Word:共3816字       Views:214

哪吒监控 一站式轻监控轻运维系统。支持系统状态、HTTP(SSL 证书变更、即将到期、到期)、TCP、Ping 监控报警,计划任务和在线终端。

哪吒监控:一款适应手机的列表主题 - 第1张图片

使用方法:

[notebox color="green"]登录后台-设置-前台主题选择[cokemine-hotaru][/notebox]

自定义代码处复制以下代码:

[prism lang=""]

<style> #app > div.container > table > thead > tr > th:nth-child(6){width:150px;} #app > div.page-section{ display:none; visibility:hidden; }<!--负载隐藏--> .table>thead>tr>th:last-child { padding-right: 10px; } .table > thead > tr > th { padding: 16px 10px; vertical-align: bottom; border-bottom: 1px solid #edeff2; color: #9da2a6; /* font-size: 12px; */ font-weight: bold; } .panel-body, .panel-block-sm { padding: 24px; background-color: transparent; } body.dark .page-section { border-bottom: transparent; } .sidebar-container ul{ display:none; visibility:hidden; } .location-info>li{ color: #1b1c1d; } body.dark .panel h3, body.dark .panel span { color: #1b1c1d; } body{ color: #1b1c1d; } body.dark table tr:nth-child(odd) { background-color: #f9f9f9; }

body.dark .panel { background-color: transparent; color: #aaa; } body.dark { background: url(http://i.his.im/static/theme-hotaru/img/bg_parts.png) repeat-y left top, url(http://i.his.im/static/theme-hotaru/img/bg.png) repeat left top;; color: #1b1c1d; } .hotaru-cover p, h1 { color: white; font-weight: bolder; text-shadow: 0.1em 0.1em 1em black; } .hotaru-cover { background: url(http://update.mymc.xyz/xxx.webp) center no-repeat; } .state-offline { background-color: slategray; border-radius: 0.3em; margin-left: 0.5em; margin-right:1em; } .state-online { background-color: rgb(0, 235, 139); border-radius: 0.3em; margin-left: 0.5em; margin-right:1em; } @media (max-width:992px) { #app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; } #location, tr td:nth-child(4) { display:none; visibility:hidden; } .container { padding-left: 10px; padding-right: 10px; } } @media (max-width:720px) { #app > div.container > table > thead > tr > th:nth-child(3){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(4){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; } #type, tr td:nth-child(3) { display:none; visibility:hidden; } #location, tr td:nth-child(4) { display:none; visibility:hidden; } #uptime, tr td:nth-child(5) { display:none; visibility:hidden; } .container { padding-left: 10px; padding-right: 10px; } } @media (max-width:600px) { #app > div.container > table > thead > tr > th:nth-child(3){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(4){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(6){display:none; visibility:hidden; } #type, tr td:nth-child(3) { display:none; visibility:hidden; } #location, tr td:nth-child(4) { display:none; visibility:hidden; } #uptime, tr td:nth-child(5) { display:none; visibility:hidden; } #load, tr td:nth-child(6) { display:none; visibility:hidden; } .container { padding-left: 10px; padding-right: 10px; } }

@media (max-width:533px) { #app > div.container > table > thead > tr > th:nth-child(3){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(4){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(6){display:none; visibility:hidden; } td:nth-child(3) { display:none; visibility:hidden; } td:nth-child(4) { display:none; visibility:hidden; } td:nth-child(5) { display:none; visibility:hidden; } .container { padding-left: 10px; padding-right: 10px; } } @media (max-width:450px) { #app > div.container > table > thead > tr > th:nth-child(3){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(4){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(5){display:none; visibility:hidden; } #app > div.container > table > thead > tr > th:nth-child(6){display:none; visibility:hidden; } #app > div.container > table > thead{ padding: 16px 10px;} .container { padding-left: 10px; padding-right: 10px; } } </style>

[/prism]

其他主题请访问:https://github.com/naiba/nezha 官方获取。

除非注明,猫饭文章均为原创,本文地址 https://maofun.com/2157.html,转载请以链接形式注明出处。

作者: 简介:

《哪吒监控:一款适应手机的列表主题》留言数:0

发表留言