|
|
@@ -67,6 +67,21 @@
|
|
|
background-color: #d9edf7;
|
|
|
border-color: #bce8f1;
|
|
|
}
|
|
|
+ .avatar {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border: 3px rgb(48, 69, 96) solid;
|
|
|
+ border-radius: 6px;
|
|
|
+ position: relative;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: rgb(48, 249, 75);
|
|
|
+ }
|
|
|
+ .inactive {
|
|
|
+ background-color: rgb(255, 0, 0);
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -75,9 +90,65 @@
|
|
|
<div class="layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">
|
|
|
- <span><i class="fa fa-dashboard"></i> dashboard</span>
|
|
|
+ <span><i class="fa fa-server"></i> 节点状态</span>
|
|
|
+ </div>
|
|
|
+ <div id="chart1" class="layui-card-body" style="height:400px;">
|
|
|
+ <table class="layui-table timo-detail-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th data-field="status">环境</th>
|
|
|
+ <th data-field="status">状态</th>
|
|
|
+ <th data-field="total">数量</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <span>prod</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="avatar active"></div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span>7</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <span>uat</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="avatar inactive"></div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span>1</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <span>test</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="avatar inactive"></div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span>9</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <span>dev</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="avatar inactive"></div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span>2</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
- <div id="chart1" class="layui-card-body" style="height:400px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-md6">
|
