From 0bb459c121f04f573230fa98de5ffc75b53f9960 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 29 十月 2021 14:22:11 +0800
Subject: [PATCH] map
---
src/pages/internetEquipment/module/elecModule.vue | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 50 insertions(+), 1 deletions(-)
diff --git a/src/pages/internetEquipment/module/elecModule.vue b/src/pages/internetEquipment/module/elecModule.vue
index c157c30..59e25cd 100644
--- a/src/pages/internetEquipment/module/elecModule.vue
+++ b/src/pages/internetEquipment/module/elecModule.vue
@@ -1,10 +1,17 @@
<template>
<div class="elec-module">
- <div class="title"></div>
+ <div class="title">鐢甸噺杩囦綆棰勮</div>
<div class="elec-item"
v-for="(item,index) in warnArr"
:key="index">
+ <div class="left">
+ <img src="/images/InternetDevice/鐢垫睜.png" alt="">
+ <div class="colobox"
+ :style="{'width':`${item.elec/100*29}px`,
+ 'background-color':`${item.elec >= 30 ? 'rgb(37, 174, 109)' : 'rgb(255, 100, 100)'}`}"></div>
+ <div class="elec">鐢甸噺: {{item.elec}}</div>
+ </div>
<warnDescription
:warnDes="{code:item.code,
time:item.time,
@@ -29,12 +36,54 @@
</script>
<style scoped lang="scss">
+
.elec-module {
+ padding: 20px;
width: 280px;
height: 292px;
background-color: #fff;
box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
border-radius: 15px;
overflow-y: scroll;
+
+ .title {
+ margin-bottom: 10px;
+ font-size: 14px;
+ font-weight: 700;
+ text-align: left;
+ }
+
+ .elec-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 4px;
+ padding: 20px 5px 20px 5px;
+ width: 240px;
+ height: 78px;
+ background: #F9FAFC;
+ border-radius: 10px;
+
+ .elec {
+ font-weight: 700;
+ }
+
+ .left {
+ position: relative;
+ img {
+ width: 40px;
+ height: 20px;
+ }
+
+ .colobox {
+ position: absolute;
+ top: 2px;
+ left: 10px;
+ width: 29px;
+ height: 15px;
+ border-radius: 2px;
+ }
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0