149 lines
4.7 KiB
Vue
149 lines
4.7 KiB
Vue
<template>
|
||
<el-card style="border-radius: 15px;">
|
||
<el-row gutter="35">
|
||
<el-col :span="8" class="status-card">
|
||
<div class="title">设备状态</div>
|
||
<!-- gutter设置为20，创建左右间隙 -->
|
||
<el-row gutter="20" style="width: 100%;">
|
||
<!-- 一行2个，每个占12格（24/2=12） -->
|
||
<el-col :span="12">
|
||
<div class="item">
|
||
<div class="status">在线</div>
|
||
<div class="count" style="color: rgba(0, 184, 122, 1);">56</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="item">
|
||
<div class="status">离线</div>
|
||
<div class="count" style="color: rgba(102, 102, 102, 1);">10</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="item">
|
||
<div class="status">网络延迟</div>
|
||
<div class="count" style="color: rgba(255, 208, 35, 1);">8</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="item">
|
||
<div class="status">故障</div>
|
||
<div class="count" style="color: rgba(227, 39, 39, 1);">1</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="16" class="alarm-card">
|
||
<div class="title">最近报警</div>
|
||
<el-row class="list">
|
||
<el-col>
|
||
<div class="item red">
|
||
<div class="sub-title">
|
||
异常移动检测
|
||
</div>
|
||
<div class="content">
|
||
A区b栋102 | 今天08:23
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col>
|
||
<div class="item yellow">
|
||
<div class="sub-title">
|
||
设备连接不稳定
|
||
</div>
|
||
<div class="content">
|
||
A区b栋102 | 今天08:23
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col>
|
||
<div class="item red">
|
||
<div class="sub-title">
|
||
异常移动检测
|
||
</div>
|
||
<div class="content">
|
||
A区b栋102 | 今天08:23
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</template>
|
||
<style scoped>
|
||
.title {
|
||
font-family: "Alibaba-PuHuiTi-Bold";
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 24px;
|
||
color: rgb(0, 30, 59);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.status-card {
|
||
|
||
.item {
|
||
background: rgba(245, 245, 245, 0.2);
|
||
border: 1px solid rgba(230, 233, 238, 1);
|
||
margin-bottom: 20px;
|
||
border-radius: 15px;
|
||
padding: 15px 30px;
|
||
text-align: center;
|
||
|
||
.status {
|
||
color: rgba(175, 175, 175, 1);
|
||
font-size: 20px;
|
||
margin-bottom: 10px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.count {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.alarm-card {
|
||
.item {
|
||
border: 1px solid #E6E9EE;
|
||
border-radius: 10px;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
padding-left: 20px;
|
||
text-align: left;
|
||
}
|
||
|
||
.red {
|
||
::v-deep::before {
|
||
position: absolute;
|
||
content: '';
|
||
background-color: rgba(227, 39, 39, 1);
|
||
height: 100%;
|
||
width: 7px;
|
||
border-radius: 7px 0px 0px 7px;
|
||
top: 0;
|
||
left: 1px;
|
||
}
|
||
}
|
||
|
||
.yellow {
|
||
::v-deep::before {
|
||
position: absolute;
|
||
content: '';
|
||
background-color: rgba(255, 208, 35, 1);
|
||
height: 100%;
|
||
width: 7px;
|
||
border-radius: 7px 0px 0px 7px;
|
||
top: 0;
|
||
left: 1px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<script setup></script> |