修改了掘进系统的样式

src/components/tunneling/hard.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="hard" style="width: 140px;height: 240px;"></div>
+<div id="hard" style="width: 140px;height: 280px;"></div>
 </template>
  
 <script >

src/components/tunneling/mbl2.vue

@@ -2,34 +2,34 @@
   <div id="mbl2">
     <ul>
       <li>
-        油泵 :<span>{{ infoList[0] }}</span> 截低 :<span>{{
+        油泵:<span>{{ infoList[0] }}</span> 截低:<span>{{
           infoList[1]
         }}</span>
-        截高 :<span>{{ infoList[2] }}</span>
+        截高:<span>{{ infoList[2] }}</span>
       </li>
       <li>
-        二运 :<span>{{ infoList[3] }}</span> 风机 :<span>{{
+        二运:<span>{{ infoList[3] }}</span> 风机:<span>{{
           infoList[4]
         }}</span>
         水泵 :<span>{{ infoList[5] }}</span>
       </li>
       <li>
-        电铃 :<span>{{ infoList[6] }}</span> 左轮 :<span>{{
+        电铃:<span>{{ infoList[6] }}</span> 左轮:<span>{{
           infoList[7]
         }}</span>
-        右轮 :<span>{{ infoList[8] }}</span>
+        右轮:<span>{{ infoList[8] }}</span>
       </li>
       <li>
-        一运 :<span>{{ infoList[9] }}</span> 隔离 :<span>{{
+        一运:<span>{{ infoList[9] }}</span> 隔离:<span>{{
           infoList[10]
         }}</span>
         铲板 :<span>{{ infoList[11] }}</span>
       </li>
       <li>
-        后支 :<span>{{ infoList[12] }}</span> 润滑 :<span>{{
+        后支:<span>{{ infoList[12] }}</span> 润滑:<span>{{
           infoList[13]
         }}</span>
-        伸缩 :<span>{{ infoList[14] }}</span>
+        伸缩:<span>{{ infoList[14] }}</span>
       </li>
     </ul>
   </div>
@@ -92,23 +92,27 @@ export default {
 </script>
 
 <style scoped>
+
 ul {
   width: 100%;
   height: 100%;
 }
 li {
+  margin-top: 14px;
   width: 100%;
   height: 100%;
-  color: royalblue;
-  display: flex;
-  font-size: 1rem;
-  text-align: center;
+  color: #4ADEFE;
+  list-style-type: none;
+  /* display: flex; */
+  font-size: 1.1rem;
+  /* text-align: center; */
 }
 span {
   border-radius: 0.7rem;
   width: 2.5rem;
   height: 2.25rem;
-  background-color: rgb(133, 158, 231);
+  color:#F3DB5C ;
+  /* background-color: rgb(13s3, 158, 231); */
   margin: 0 0.325rem 0.25rem;
 }
 </style>

src/components/tunneling/rtone.vue

@@ -100,7 +100,7 @@ export default {
 li{
     width: 100%;
     height: 100%;
-    color: royalblue;
+    color: #4ADEFE;
     display: flex;
     /* flex-direction: column; */
     font-size: 1.25rem;
@@ -110,7 +110,9 @@ span{
     border-radius:0.7rem;
     width: 7.5rem;
     height: 1.625rem;
-    background-color: rgb(133, 158, 231);
+     color: #F3DB5C;
+     font-size: 25px;
+    /* background-color: rgb(133, 158, 231); */
     margin: 0 .325rem .25rem; 
     text-align: center;
 }

src/components/tunneling/rtop.vue

@@ -113,10 +113,10 @@ export default {
 li{
     width: 100%;
     height: 100%;
-    color: royalblue;
+    color: #4ADEFE;
     display: flex;
     flex-wrap: wrap;
-    margin-top: 3rem;
+    margin-top: 1rem;
     margin-right:.75rem;
     font-size: 1.25rem;
     text-align:end
@@ -127,9 +127,11 @@ span{
     border-radius:0.7rem;
     width: 1.875rem;
     height: 1.625rem;
-    background-color: rgb(133, 158, 231);
+    /* background-color: rgb(133, 158, 231); */
     margin: 0 .325rem .25rem; 
     text-align: center;
+      color: #F3DB5C;
+      font-size: 25px;
 }
 .red1{
     background-color: red;

src/components/tunneling/ruler.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="rulerChart" style="width: 100%;height: 140px;"></div>
+  <div id="rulerChart" style="width: 140px;height: 240px;"></div>
 </template>
 
 <script>

src/components/tunneling/six/five.vue

@@ -60,7 +60,7 @@ export default {
             //       ],
             //       [
             //         1,
-            //         "#f7f9fc"
+            //         "#fff"
             //       ]
             //     ],
             //     "width": 10

src/components/tunneling/temporature-two.vue

@@ -126,13 +126,13 @@ export default {
           y2: 20, //bottom部与x轴的距离
         },
         // backgroundColor: '#0C2F6F',
-        title: {
-          text: "油位",
-          show: true,
-          textStyle: {
-            color: "pink",
-          },
-        },
+        // title: {
+        //   text: "油位",
+        //   show: true,
+        //   textStyle: {
+        //     color: "pink",
+        //   },
+        // },
         yAxis: [
           {
             show: false,
@@ -183,7 +183,7 @@ export default {
             xAxisIndex: 0,
             data: [
               {
-                value: showValue,
+                value: 40,
               },
             ],
             barWidth: 8,

src/components/tunneling/temporature.vue

@@ -138,13 +138,13 @@ export default {
           y2: 20, //bottom部与x轴的距离
         },
         // backgroundColor: '#0C2F6F',
-        title: {
-          text: "油缸温度",
-          show: true,
-          textStyle: {
-            color: "pink",
-          },
-        },
+        // title: {
+        //   text: "油缸温度",
+        //   show: true,
+        //   textStyle: {
+        //     color: "pink",
+        //   },
+        // },
         yAxis: [
           {
             show: false,
@@ -195,7 +195,7 @@ export default {
             // data: arrayData[1],
             data: [
               {
-                value: this.showValue,
+                value: 30,
               },
             ],
             barWidth: 8,

src/components/tunneling/worklog.vue

@@ -0,0 +1,61 @@
+<template>
+<div>
+ <ul class="xcspwt-box js-xcspwt">
+	 <span style="font-size: 26px;
+							color: #FFFFFF;
+							
+							padding-top: 6%;">日志信息</span>
+                        <li>
+                            <span>掘进机控制系统</span>
+                            <span >启动中...</span>
+                            <!-- <span title="视频信号不稳定">视频信号不稳定</span> -->
+                        </li>
+                        <li>
+                            <span>油缸温度</span>
+                            <span>温度过高...</span>
+                        </li>
+                        <li>
+                            <span>粉尘浓度</span>
+                            <span>超出正常范围...</span>
+                        </li>
+ </ul></div>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>
+<style scoped>
+.xcspwt-box{
+    padding-top: 15px;
+}
+.xcspwt-box li{
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    color:#4ADEFE;
+    font-size: 18px;
+    margin-top: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor:default;
+}
+.xcspwt-box li span{
+    display: block;
+    float: left;
+}
+.xcspwt-box li span:nth-of-type(1){
+    padding: 0 5px;
+    line-height: 20px;
+    text-align: center;
+    /* background: url("../img/bg1.png") no-repeat; */
+    background-size: 100% 100%;
+}
+
+.xcspwt-box li span:nth-of-type(2){
+    color:#F3DB5C;
+    width: 138px;
+}
+</style>

src/store/index.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    websocketIP: "10.170.34.134:8081",
+    websocketIP: "10.170.16.208:8081",
   },
   mutations: {
 

src/views/app_personnel_positioning/personnelPositioning.vue

@@ -1,13 +1,58 @@
 <template>
-  <div>personnelPositioning</div>
+<div>
+ <ul class="xcspwt-box js-xcspwt">
+	 <span style="font-size: 16px;
+							color: #FFFFFF;
+							
+							padding-top: 6%;">日志</span>
+                        <li>
+                            <span>掘进机控制系统</span>
+                            <span >启动中...</span>
+                            <!-- <span title="视频信号不稳定">视频信号不稳定</span> -->
+                        </li>
+                        <li>
+                            <span>油缸温度</span>
+                            <span>温度过高...</span>
+                        </li>
+                        <li>
+                            <span>粉尘浓度</span>
+                            <span>超出正常范围...</span>
+                        </li>
+ </ul></div>
 </template>
 
 <script>
-export default {
-  name: "personnelPositioning"
-}
-</script>
+  export default {
 
+  }
+</script>
 <style scoped>
+.xcspwt-box li{
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    color:#4ADEFE;
+    font-size: 18px;
+    margin-top: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor:default;
+}
+.xcspwt-box li span{
+    display: block;
+    float: left;
+}
+.xcspwt-box li span:nth-of-type(1){
+    padding: 0 5px;
+    line-height: 20px;
+    text-align: center;
+    /* background: url("../img/bg1.png") no-repeat; */
+    background-size: 100% 100%;
+}
 
-</style>
+.xcspwt-box li span:nth-of-type(2){
+    color:#F3DB5C;
+    width: 138px;
+}
+</style>

src/views/tunnelling/zutai.vue

@@ -1,106 +1,151 @@
 <template>
-  <div class="tunneling">
-    <!-- <header class="screen-header">
-       
-          <h1 >掘进机远程智能控制系统</h1>
-      </header> -->
-      <div class="screen-body">
-          <section class="screen-left">
-              <div id="left-top">
-                  <div id="left-top-left">
-                      <!-- 行走状态 -->
-                      <!-- <footState></footState> -->
-                      <ruler></ruler>
-                  </div>
-                  <div id="left-top-right">
-                      <!-- 割接轨迹 -->
-                      <hard></hard>
-                  </div>
-              </div>
-              <div id="left-mid">
-                     <!-- 压入式风机 -->
-                     <lmid></lmid>
-              </div>
-              <div id="left-bottom">
-                  <!-- 除尘风机 -->
-                  <lbottom></lbottom>
-              </div>
-          </section>
-          <section class="screen-middle">
-              <div id="middle-top">
-                <!-- 6个仪表盘 -->
-                <div id="line_1">
-                    <div id="top_1">
-                        <span >系统电压</span>
-                        <dashBoard></dashBoard>
-                        
-                    </div>
-                    <div id="top_2">
-                        <span >油泵电流</span>
-                        <one></one>
-                    </div>
-                    <div id="top_3">
-                        <span>截低电流</span>
-                        <two></two>
-                    </div>
-                </div>
-                <div id="line_2">
-                    <div id="bottom_1">
-                        <span>截高电流</span>
-                        <three></three>
-                    </div>
-                    <div id="bottom_2">
-                        <span>二运电流</span>
-                        <four></four>
-                    </div>
-                    <div id="bottom_3">
-                        <span>风机电流</span>
-                        <five></five>                        
-                    </div>
-                </div>
-              </div>
-              <div id="middle-bottom">
-                  <div id="middle-bottom-left">
-                      <!-- 掘进机工作状态 -->
-                      <mbl2></mbl2>
-                  </div>
-                  <div id="middle-bottom-right">
-                      <div id="tem1">
-                        <!-- 油缸温度 -->
-                        <tempChart></tempChart>
-                      </div>
-                     <div id="tem2">
-                        <!-- 油位 -->
-                        <tempChart2></tempChart2>
-                      </div> 
-                  </div>
-              </div>
-          </section>
-          <section class="screen-right">
-              <div id="right-top">
-                  <!-- 掘进机控制系统 -->
-                  <rtop></rtop>
-              </div>
-              <div id="right-mid-one">
-                  <!-- 时间 ************************************************-->
-                  <!-- <current_time></current_time> -->
+  <div class="main1">
+    <!-- <div class="top_title">
+      <img src="../../assets/img/tunneling/top_title.png"/>
+    </div> -->
+    <div class="datas">
+      <div class="data_left">
+        <div class="left_top">
+          <div class="left_top_main">
+            <div class="ruler">
+              <ruler></ruler>
+            </div>
+            <div class="hard">
+              <!-- 割接轨迹 -->
+              <hard></hard>
+            </div>
+
+          </div>
+        </div>
+        <div class="left_bottom">
+          <!-- <div class="left_top_title"></div> -->
+
+          <div class="middle_top_list">
+            <div class="list_title">压入式风机风压</div>
+            <div class="list_num list_num1"><span class="counter-value">548</span>m^3/min</div>
+
+          </div>
+          <div class="middle_top_list">
+            <div class="list_title">压入式风机风量</div>
+            <div class="list_num list_num2"><span class="counter-value">1149.66</span>m^3/min</div>
+          </div>
+
+          <div class="middle_top_list">
+            <div class="list_title">除尘风机风压</div>
+            <div class="list_num list_num1"><span class="counter-value">687</span>m^3/min</div>
+
+          </div>
+          <div class="middle_top_list">
+            <div class="list_title">除尘风机风量</div>
+            <div class="list_num list_num2"><span class="counter-value">3803</span>m^3/min</div>
+          </div>
+
+        </div>
+
+      </div>
+      <div class="data_middle">
+        <!-- 六个仪表盘 -->
+        <el-row>
+          <el-col :span="8">
+            <div class="grid-content bg-purple">
+              <span class="text">系统电压</span>
+              <dashBoard></dashBoard>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="grid-content bg-purple-light">
+              <span class="text">油泵电流</span>
+              <one></one>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="grid-content bg-purple">
+              <span class="text">截低电流</span>
+              <two></two>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="grid-content bg-purple">
+              <span class="text">截高电流</span>
+              <three></three>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="grid-content bg-purple-light">
+              <span class="text">二运电流</span>
+              <four></four>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="grid-content bg-purple">
+              <span class="text">风机电流</span>
+              <five></five>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="14">
+            <div class="grid-content bg-purple">
+              <!-- 掘进机工作状态 -->
+              <div style="margin-top:120px">
+              <mbl2></mbl2>
               </div>
-              <div id="right-mid-two">
-                  <!-- 远控模式 -->
-                  <rtone></rtone>
+
+            </div>
+          </el-col>
+          <el-col :span="10">
+            <div class="grid-content temperature" style="margin-top:120px">
+              <!-- 油缸温度 -->
+              <div>
+                <span class="text">油缸温度</span>
+                <tempChart></tempChart>
               </div>
-              <div id="right-bottom">
-                  <!-- 日志 -->
-                  <log></log>
+              <!-- 油位 -->
+              <div>
+                <span class="text">油位</span>
+                <tempChart2></tempChart2>
               </div>
-          </section>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="data_right">
+        <div class="right_top">
+
+          <!-- 掘进机控制系统 -->
+          <rtop></rtop>
+
+          <!-- 远控模式 -->
+          <rtone></rtone>
+
+        </div>
+         <div class="right_bootom">
+
+           <worklog></worklog>
+        </div>
+
       </div>
+
+       
+
+    
+     
+      <!-- <div class="right_bottom"> -->
+      <!-- <div id="right-bottom">
+           
+                 
+              </div> -->
+      <!-- </div> -->
+
     </div>
   </div>
 </template>
 
 <script>
-import current_time from "@/components/tunneling/current_time.vue";
+import ruler from "@/components/tunneling/ruler.vue";
+import hard from "@/components/tunneling/hard.vue";
 import dashBoard from "@/components/tunneling/dashBoard.vue";
 import one from "@/components/tunneling/six/one.vue";
 import two from "@/components/tunneling/six/two.vue";
@@ -108,231 +153,193 @@ import three from "@/components/tunneling/six/three.vue";
 import four from "@/components/tunneling/six/four.vue";
 import five from "@/components/tunneling/six/five.vue";
 import tempChart from "@/components/tunneling/temporature.vue";
-import ruler from "@/components/tunneling/ruler.vue";
+import mbl2 from "@/components/tunneling/mbl2.vue";
 import tempChart2 from "@/components/tunneling/temporature-two.vue";
 import rtop from "@/components/tunneling/rtop.vue";
-import mbl2 from "@/components/tunneling/mbl2.vue";
+import worklog from "../../components/tunneling/worklog.vue";
 import rtone from "@/components/tunneling/rtone.vue";
-import lmid from "@/components/tunneling/lmid.vue";
-import lbottom from "@/components/tunneling/lbottom.vue";
-import log from "@/components/tunneling/log.vue";
-import hard from "@/components/tunneling/hard.vue";
 export default {
-  name: "组态",
+  name: "personnelPositioning",
   components: {
-    current_time,
+    ruler,
+    hard,
     dashBoard,
-    tempChart,
-    tempChart2,
     one,
     two,
     three,
     four,
     five,
-    ruler,
+    tempChart,
+    tempChart2,
     mbl2,
     rtop,
     rtone,
-    lmid,
-    lbottom,
-    log,
-    hard,
+    worklog,
   },
+  data() {},
 };
 </script>
 
 <style scoped>
-.tunneling {
-  width: 100%;
-  height: 100%;
-}
-.home {
-  width: 100%;
-  height: 100%;
-  padding: 0 20px;
-  background-color: #161522;
-  color: #fff;
-  box-sizing: border-box;
+.main1 {
   position: relative;
-}
-.screen-container {
   width: 100%;
-  height: 100%;
-  padding: 0 20px;
-  background-color: #161522;
-  color: #fff;
-  box-sizing: border-box;
+  height: 800px;
+  background: url(../../assets/img/tunneling/bg.jpg) no-repeat !important;
+  background-size: cover;
+  /* height: 880px; */
+  min-width: 1386px;
 }
-.screen-header {
+
+.datas {
   width: 100%;
-  height: 64px;
-  font-size: 20px;
-  position: relative;
-}
-h1 {
-  color: blue;
-  text-align: center;
-  margin: 0%;
+  height: 100%;
+  padding-top: 25px;
+  /* margin: auto;
+  margin-top: 2%; */
+}
+.data_left,
+.data_middle,
+.data_right {
+  float: left;
   height: 100%;
 }
-.screen-body {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    margin-top: 10px;
-    background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
-  position: relative;
-
-}
-.screen-left{
-    height: 100%;
-    flex: 3;
-    display: flex;
-    flex-direction: column;
-}
-#left-top{
-    height: 170px;
-    display: flex;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#left-top-left{
-    flex: 3;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#left-top-right{
-    margin-top: -20px;
-    flex: 4;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-        
-#left-mid{
-    height: 33%;
-    margin-top: 10px;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#left-bottom{
-    height: 33%;
-    margin-top: 10px;
-    position: relative;  
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-.screen-middle{
-    height: 100%;
-    width: 41.5%;
-    margin-left: 1.6%;
-    margin-right: 1.6%;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#middle-top{
-    height: 360px;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    display: flex;
-    flex-direction: column;
-}
-#line_1{    
-    flex: 1;
-    display: flex;
+.data_left {
+  width: 26%;
 }
-#top_1{     
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
+.left_top {
+  width: 100%;
+  height: 48%;
+  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
 }
-#top_2{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
+.left_top .left_top_main {
+  display: flex;
+  justify-content: space-around;
 }
-#top_3{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
+.ruler {
+  flex: 1;
 }
-#line_2{    
-    flex: 1;
-    display: flex;
+.hard {
+  flex: 1;
 }
-#bottom_1{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
+.left_bottom {
+  width: 100%;
+  height: 350px;
+  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  margin-top: 4%;
 }
-#bottom_2{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
+
+.data_middle {
+  width: 40%;
+  margin: 0 2.5%;
+  /* background: white; */
 }
-#bottom_3{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
+.middle_top {
+  width: 100%;
+  height: 17%;
+}
+.middle_top_list {
+  float: left;
+  width: 35.2%;
+  height: 18%;
+  margin-top: 15%;
+  margin-left: 5%;
+  text-align: center;
+  color: #4ADEFE;
+}
+.middle_top_list span {
+  color: #F3DB5C;
+}
+.text {
+  color: #4ADEFE;
+  font-size: 18px;
+  margin-left: 18px;
+}
+.temperature {
+  display: flex;
+}
+.list_title {
+  font-size: 18px;
+  margin-top: -15%;
+}
+/* .control{
+  margin-top: 20px;
+} */
+.list_num {
+  margin-top: 3%;
+  font-size: 16px;
+}
+.list_num span {
+  font-size: 30px;
+}
+.today_list_font {
+  font-size: 14px;
+  margin-top: 4%;
+}
+/* .middle_top_list:nth-of-type(2) {
+  border-left: 1px solid #4E72B0;
+  border-right: 1px solid #4E72B0;
+} */
+.middle_bottom {
+  width: 100%;
+  height: 75%;
+  margin-top: 9%;
+  background: transparent;
 }
-#middle-bottom{
-    height: 300px;
-    margin-top: 5px;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    display: flex;
+.data_right {
+  width: 29%;
 }
-#middle-bottom-left{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    margin-right: 0.1875rem;
-    flex:3;
-    position: relative; 
-    /* // 添加边角 */
+.right_top {
+  width: 100%;
+  height: 48%;
+
+  background: url(../../assets/img/tunneling/msgBg.png) no-repeat;
+  background-size: 100%;
 }
-#middle-bottom-right{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    margin-right: 0.1875rem;
-    width: 100%;
-    height: 500px;
-    flex: 2;
-    /* position: relative; */
-    display: flex;
-    /* // 添加边角 */
+.right_bootom {
+  width: 100%;
+  height: 300px;
+
+  background: url(../../assets/img/tunneling/msgBg.png) no-repeat;
+  background-size: 100%;
 }
-#tem1{
-    margin-top: 40px;
-    flex: 1;
-    width: 50%;
-    height: 150px;
-    /* position: relative; */
+.right_top_main {
+  width: 95%;
 }
-#tem2{
-    margin-top: 40px;
-    flex: 1;
-    width: 50%;
-    height: 150px;
-    /* position:absolute; */
+/* .right_bottom {
+  width: 100%;
+  height: 48%;
+  background: url(../../assets/img/tunneling/msgBg.png) no-repeat;
+  background-size: 100%;
+  margin-top: 6%;
+} */
+
+.highcharts-credits {
+  display: none;
 }
-.screen-right{
-    flex: 2;
-    display: flex;
-    flex-direction: column ;
-    border: 1px solid rgba(25, 186, 139, 0.17);
+.highcharts-legend {
+  display: none;
 }
-#right-top{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    flex:2
+/* .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  } */
+.el-col {
+  border-radius: 4px;
 }
-#right-mid-one{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    flex: 1;
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
 }
-#right-mid-two{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    flex: 2;
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
 }
-#right-bottom{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    flex: 5;
-} 
-.span{
-    text-align:center
+.el-row {
+  margin-bottom: 20px;
 }
-</style>
+</style>