|
@@ -0,0 +1,111 @@
|
|
|
+<template>
|
|
|
+ <div class="dustFallDevice">
|
|
|
+ <div class="fall-left-box">
|
|
|
+ <div class="box-c"></div>
|
|
|
+ <div class="box-left-t">
|
|
|
+ <div class="item-label">设备总数</div>
|
|
|
+ <div class="item-val">10</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-left-b">
|
|
|
+ <div class="item-label">喷雾开启数</div>
|
|
|
+ <div class="item-val">10</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-right-t">
|
|
|
+ <div class="item-label">联网数量</div>
|
|
|
+ <div class="item-val">10</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-right-b">
|
|
|
+ <div class="item-label">断网数量</div>
|
|
|
+ <div class="item-">10</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="fall-right-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.dustFallDevice {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .fall-left-box {
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .box-c {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -45%);
|
|
|
+ width: 224px;
|
|
|
+ height: 203px;
|
|
|
+ background: url('../../../../../assets/images/dust/dusthome/left-box1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .box-left-t{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 80px;
|
|
|
+ height: 81px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ background: url('../../../../../assets/images/dust/dusthome/left-box2.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .box-left-b{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 80px;
|
|
|
+ height: 81px;
|
|
|
+ background: url('../../../../../assets/images/dust/dusthome/left-box3.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .box-right-t{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 80px;
|
|
|
+ height: 81px;
|
|
|
+ background: url('../../../../../assets/images/dust/dusthome/left-box4.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .box-right-b{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 80px;
|
|
|
+ height: 81px;
|
|
|
+ background: url('../../../../../assets/images/dust/dusthome/left-box5.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .item-label{
|
|
|
+ font-size: 10px;
|
|
|
+ color: #9da5aa;
|
|
|
+ }
|
|
|
+ .item-val{
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #1fb3f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .fall-right-box {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}</style>
|