<template>
|
<div class="device">
|
<div class="device-l">
|
<div class="left">
|
<div class="left-item">
|
<div class="item-t">设备时长</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="left-item">
|
<div class="item-t">风机管理</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="left-item">
|
<div class="item-t">工单处理</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="left-item">
|
<div class="item-t">设备状态</div>
|
<div class="item-c"></div>
|
</div>
|
</div>
|
</div>
|
<div class="device-c">
|
<div class="center">
|
<div class="center-item">
|
<div class="item-t">实时数据</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="center-item">
|
<div class="item-t">终端监控分类曲线</div>
|
<div class="item-c"></div>
|
</div>
|
</div>
|
</div>
|
<div class="device-r">
|
<div class="right">
|
<div class="right-item">
|
<div class="item-t">风机状态</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="right-item">
|
<div class="item-t">设备报警</div>
|
<div class="item-c"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
|
</script>
|
|
<style scoped lang="scss">
|
.device{
|
height: 100%;
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
&-l{
|
width: 25%;
|
height: 100%;
|
.left{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.left-item{
|
width: 100%;
|
height: 24%;
|
background-image: url('@/assets/images/screen/ct-small.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
.item-t{
|
width: 100%;
|
height: 3rem;
|
line-height: 3rem;
|
padding-left: 3.5rem;
|
}
|
.item-c{
|
height: calc(100% - 3rem);
|
padding: 0.5rem;
|
}
|
}
|
}
|
}
|
&-c{
|
width: 49%;
|
height: 100%;
|
.center{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.center-item{
|
height: 49%;
|
background-image: url('@/assets/images/screen/ct-large.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
.item-t{
|
height: 3rem;
|
line-height: 3rem;
|
padding-left: 4.5rem;
|
}
|
.item-c{
|
height: calc(100% - 3rem);
|
padding: 0.5rem;
|
}
|
}
|
}
|
}
|
&-r{
|
width: 25%;
|
height: 100%;
|
.right{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.right-item{
|
height: 49%;
|
background-image: url('@/assets/images/screen/ct-default.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
.item-t{
|
height: 3rem;
|
line-height: 3rem;
|
padding-left: 3rem;
|
}
|
.item-c{
|
height: calc(100% - 3rem);
|
padding: 0.5rem;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
