forked from TALL/tall3-pc-keti
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.5 KiB
52 lines
1.5 KiB
4 years ago
|
<template>
|
||
|
|
<el-card shadow="hover" class="pb-4">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="text-sm text-gray-400">在线数量</div>
|
||
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
|
||
|
|
<div class="line-wrap bg-green-50">
|
||
|
|
<div class="line bg-green-300" style="width: 80%"></div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="text-sm text-gray-400">离线数量</div>
|
||
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
|
||
|
|
<div class="line-wrap bg-purple-50">
|
||
|
|
<div class="line bg-purple-300" style="width: 80%"></div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" class="mt-10">
|
||
|
|
<div class="text-sm text-gray-400">故障数量</div>
|
||
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
|
||
|
|
<div class="line-wrap bg-yellow-50">
|
||
|
|
<div class="line bg-yellow-300" style="width: 80%"></div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" class="mt-10">
|
||
|
|
<div class="text-sm text-gray-400">报警数量</div>
|
||
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
|
||
|
|
<div class="line-wrap bg-red-50">
|
||
|
|
<div class="line bg-red-300" style="width: 80%"></div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.line-wrap {
|
||
|
|
position: relative;
|
||
|
|
width: 60%;
|
||
|
|
height: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.line {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|