<script setup>
|
|
</script>
|
|
<template>
|
<div class="production">
|
<div class="production-l">
|
<div class="data-item">
|
<div class="item-t">数据监控</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="data-item">
|
<div class="item-t">报警监控</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="data-item">
|
<div class="item-t">能耗分析</div>
|
<div class="item-c"></div>
|
</div>
|
</div>
|
<div class="production-c">
|
<div class="data-item">
|
<div class="item-t">水务驾驶舱</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="data-item">
|
<div class="item-t">供水总览</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="data-item">
|
<div class="item-t">工艺监控</div>
|
<div class="item-c"></div>
|
</div>
|
</div>
|
<div class="production-r">
|
<div class="data-item">
|
<div class="item-t">运行分析</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="data-item">
|
<div class="item-t">加药管理</div>
|
<div class="item-c"></div>
|
</div>
|
<div class="data-item">
|
<div class="item-t">统计分析</div>
|
<div class="item-c"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.production{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
.data-item{
|
width: 100%;
|
height: 33.3%;
|
.item-t{
|
width: 100%;
|
height: 3rem;
|
line-height: 2.8rem;
|
background: url("@/assets/images/screen/cbox-title.png") no-repeat;
|
background-size: 100% 100%;
|
font-size: 1.2rem;
|
font-weight: bold;
|
padding-left: 3rem;
|
color: #fff;
|
}
|
.item-c{
|
margin-top: 0.5rem;
|
width: 100%;
|
height: calc(100% - 3.5rem);
|
background: url("@/assets/images/screen/cbox-content.png") no-repeat;
|
background-size: 100% 100%;
|
padding: 0.7rem 0.7rem 1.1rem;
|
box-sizing: border-box;
|
overflow: hidden;
|
}
|
}
|
&-l{
|
width: 25%;
|
}
|
&-c{
|
width: 45%;
|
}
|
&-r{
|
width: 25%;
|
}
|
}
|
</style>
|
