中建四局(安全管理): 完成设备监控布局

src/views/projectAdmin/zjsj/security/rightTop.vue

@@ -1,6 +1,23 @@
 <template>
   <Card title="设备监控">
-    设备监控
+    <div class="devices">
+      <vue-scroll>
+        <div class="device" v-for="i in 6" :key="i">
+          <div class="device-name">压榨机</div>
+          <div class="info">
+            <img class="image" src="../assets/images/common/bg-event.jpg" />
+            <div class="detail">
+              <div class="detail-item green">状态：进行中</div>
+              <div class="detail-item grey">电压：10000V</div>
+              <div class="detail-item orange">电流：100A</div>
+              <div class="detail-item">线缆温度：120℃</div>
+              <div class="detail-item">环境温度：53℃</div>
+              <div class="detail-item">漏电流：99A</div>
+            </div>
+          </div>
+        </div>
+      </vue-scroll>
+    </div>
   </Card>
 </template>
 
@@ -11,4 +28,39 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.devices {
+  padding-left: 20px;
+  height: 100%;
+  color: #fff;
+  .device {
+    width: 100%;
+    height: 176px;
+    .device-name {
+      height: 36px;
+      line-height: 36px;
+    }
+    .info {
+      height: 22px;
+      line-height: 22px;
+      font-size: 12px;
+      color: #68d8e4;
+      display: flex;
+      .image {
+        margin-right: 20px;
+        width: 170px;
+        height: 140px;
+      }
+    }
+  }
+  .green {
+    color: #46d7b6;
+  }
+  .grey {
+    color: #9da1aa;
+  }
+  .orange {
+    color: #e7622a;
+  }
+}
+</style>