邓洁 : 用电量弹窗及样式修改

src/assets/styles/index.scss

@@ -16,6 +16,7 @@ a {
 html, body, #app, .el-container, .el-aside, .el-main {
   height: 100%;
 }
+
 .tunnel-title {
   width: 2330px;
   height: 156px;
@@ -26,6 +27,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
   margin-left: -1165px;
   background-image: url('../images/topAndDown/sp_tb.png');
 }
+
 .box-top {
   .manage-btn {
     display: flex;
@@ -125,7 +127,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
   background-image: url('../images/topAndDown/sp_icon_zyc.png');
 }
 
-.tunnel-length{
+.tunnel-length {
   position: absolute;
   top: 13%;
   left: 36%;
@@ -242,3 +244,130 @@ html, body, #app, .el-container, .el-aside, .el-main {
     transform: rotate(180deg);
   }
 }
+
+//弹窗样式
+.digital-tunnel {
+  #container {
+    height: 650px;
+    width: 1300px;
+  }
+
+  #containerEle {
+    height: 564px;
+    width: 1300px;
+  }
+
+  .el-dialog {
+    display: flex;
+    flex-direction: column;
+    height: 785px;
+    border: 2px solid #0F82AF;
+    background: rgba(6, 34, 71, 0.78);
+    border-radius: 20px;
+    padding: 47px 30px;
+    box-sizing: border-box;
+    margin: 588px auto 0 auto;
+
+    .el-dialog__header {
+      padding:0 0 25px 0;
+      //display: none;
+      .el-dialog__title {
+        font-size: 32px;
+        font-weight: bold;
+        color: #D6F1FA;
+      }
+
+      .el-dialog__close {
+        color: #05FEFF;
+        font-size: 35px;
+      }
+    }
+
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+
+  .left-top-icon {
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+  }
+
+  .right-top-icon {
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(90deg);
+  }
+
+  .time-select {
+    position: absolute;
+    top: 47px;
+    right: 119px;
+  }
+
+  .left-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(-90deg);
+  }
+
+  .right-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(180deg);
+  }
+
+  //用电量
+  .top-tag {
+    display: flex;
+    justify-content: center;
+
+    .allUsedEle {
+      width: 240px;
+      height: 149px;
+      border-radius: 10px;
+      border: 2px solid #0F82AF;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      &:nth-child(2) {
+        margin-left: 39px;
+      }
+
+      .use-title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 240px;
+        height: 50px;
+        background: #264A78;
+        font-size: 26px;
+        color: #FFFFFF;
+      }
+
+      .value {
+        margin-top: 20px;
+        font-size: 40px;
+        font-family: MicrosoftYaHei;
+        color: #FFFFFF;
+      }
+    }
+  }
+}