Imdroid/security-monitor
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix：调整设备总览的样式

Browse Source
This commit is contained in:
fengyarnom 2025-06-10 18:09:07 +08:00
parent ba8b2e9512
commit 3a7b33259f
1 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
sec-beidou/src/main/resources/templates/page/device_overview.html
View File

@ -17,19 +17,53 @@
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
} }
.top-panel > .layui-card-body{
height: 60px; .stats-panel {
height: 100%;
display: flex;
flex-direction: column;
} }
.top-panel-number{
line-height:60px; .stats-panel > .layui-card-body {
height: auto;
min-height: 60px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.top-panel-number {
/* line-height: 60px; // 删除或注释掉这一行 */
font-size: 30px; font-size: 30px;
border-right:1px solid #eceff9; border-right: 1px solid #eceff9;
height: 100%;
display: flex;
align-items: center;
justify-content: center; /* 可选：让数字水平居中 */
} }
.top-panel-tips{ .top-panel-tips{
line-height:30px; line-height:30px;
font-size: 12px font-size: 12px
} }
.flex-row {
display: flex;
align-items: stretch;
}
.flex-row > .layui-col-xs12,
.flex-row > .layui-col-md6 {
display: flex;
flex-direction: column;
}
.stats-panel .layui-col-xs3 a,
.stats-panel .layui-col-md4 a,
.stats-panel .layui-col-xs3 div a,
.stats-panel .layui-col-md4 div a {
display: block;
margin-bottom: 2px;
}
ul li { ul li {
list-style: none; list-style: none;
} }
@ -119,9 +153,9 @@
<body> <body>
<div class="layuimini-main"> <div class="layuimini-main">
<div class="layui-row layui-col-space30"> <div class="layui-row layui-col-space30 flex-row" style="margin-bottom: 2em;">
<div class="layui-col-xs12 layui-col-md6"> <div class="layui-col-xs12 layui-col-md6">
<div class="layui-card top-panel"> <div class="layui-card top-panel stats-panel">
<div class="layui-card-header">设备数量</div> <div class="layui-card-header">设备数量</div>
<div class="layui-card-body"> <div class="layui-card-body">
<div class="layui-row layui-col-space5"> <div class="layui-row layui-col-space5">
@ -129,9 +163,9 @@
<a style="color: #1aa094" th:text="${deviceOnlineNum}">2,020</a><br> <a style="color: #1aa094" th:text="${deviceOnlineNum}">2,020</a><br>
</div> </div>
<div class="layui-col-xs3 layui-col-md4"> <div class="layui-col-xs3 layui-col-md4">
<a href="#" onclick="queryDevices('offline')" style="color: #bd3004" th:text="'掉线数 '+${deviceOfflineNum}">0</a><br> <a href="#" onclick="queryDevices('offline')" style="color: #bd3004" th:text="'掉线数 '+${deviceOfflineNum}">0</a>
<div th:if="${deviceNoFwdNum>0}"><a href="#" onclick="queryDevices('no_fwd')" style="color: #bd3004" th:text="'未推送数 '+${deviceNoFwdNum}">0</a><br></div> <div th:if="${deviceNoFwdNum>0}"><a href="#" onclick="queryDevices('no_fwd')" style="color: #bd3004" th:text="'未推送数 '+${deviceNoFwdNum}">0</a></div>
<div th:if="${noFix>0}"><a href="#" onclick="queryDevices('nofixed')" style="color: #bd3004" th:text="'长期无效解 '+${noFix}">0</a><br></div> <div th:if="${noFix>0}"><a href="#" onclick="queryDevices('nofixed')" style="color: #bd3004" th:text="'长期无效解 '+${noFix}">0</a></div>
<a style="color: #000000" th:text="'装机量 '+${deviceDeployedNum}">2020</a> <a style="color: #000000" th:text="'装机量 '+${deviceDeployedNum}">2020</a>
</div> </div>
</div> </div>
@ -139,7 +173,7 @@
</div> </div>
</div> </div>
<div class="layui-col-xs12 layui-col-md6"> <div class="layui-col-xs12 layui-col-md6">
<div class="layui-card top-panel"> <div class="layui-card top-panel stats-panel">
<div class="layui-card-header">告警统计</div> <div class="layui-card-header">告警统计</div>
<div class="layui-card-body"> <div class="layui-card-body">
<div class="layui-row layui-col-space5"> <div class="layui-row layui-col-space5">
@ -147,9 +181,9 @@
<a style="color: #f6c102" th:text="${warningTotalNum}">20</a><br> <a style="color: #f6c102" th:text="${warningTotalNum}">20</a><br>
</div> </div>
<div class="layui-col-xs3 layui-col-md4"> <div class="layui-col-xs3 layui-col-md4">
<a href="#" onclick="queryDevices('warning2')" style="color: #bd3004" th:text="'严重 '+${warning2Num}">5</a><br> <a href="#" onclick="queryDevices('warning2')" style="color: #bd3004" th:text="'严重 '+${warning2Num}">5</a>
<a href="#" onclick="queryDevices('warning1')" style="color: #f6c102" th:text="'一般 '+${warning1Num}">20</a> <a href="#" onclick="queryDevices('warning1')" style="color: #f6c102" th:text="'一般 '+${warning1Num}">20</a>
<div th:if="${noGGA>0}"><a href="#" onclick="queryDevices('nogga')" style="color: #e7be1d" th:text="'无GGA '+${noGGA}">0</a><br></div> <div th:if="${noGGA>0}"><a href="#" onclick="queryDevices('nogga')" style="color: #e7be1d" th:text="'无GGA '+${noGGA}">0</a></div>
</div> </div>
</div> </div>
</div> </div>