乙烯平衡大屏优化

ui/src/views/front/ethyleneBalance.vue

@@ -13,223 +13,223 @@
       <div style="text-align: center; background-color: rgba($color: #ffffff, $alpha: 0.3);height:100%;position:relative;">
         <div class="ethylene_box">
               <!-- 数据文字1 -->
-               <div class="dataText pos1">
+               <div class="dataText num pos1">
                   -0.01
                </div>
 
                <!-- 数据文字2 -->
-               <div class="dataText pos2">
+               <div class="dataText num pos2">
                   4.08
                </div>
 
                <!-- 数据文字3 -->
-               <div class="dataText2 pos3">
+               <div class="dataText2 num pos3">
                   2.88
                </div>
                 <!-- 数据文字4 -->
-                <div class="dataText pos4">
+                <div class="dataText num pos4">
                   24.13
                 </div>
                 <!-- 数据文字5 -->
-                <div class="dataText2 pos5">
+                <div class="dataText2 num pos5">
                   24.00
                 </div>
                 <!-- 数据文字6 -->
-                <div class="dataText pos6">
+                <div class="dataText num pos6">
                   2.09
                 </div>
                 <!-- 数据文字7 -->
-                <div class="dataText2 pos7">
+                <div class="dataText2 num pos7">
                   2.13
                 </div>
                 <!-- 数据文字8 -->
-                <div class="dataText pos8">
+                <div class="dataText num pos8">
                   4.31
                 </div>
                 <!-- 数据文字9 -->
-                <div class="dataText2 pos9">
+                <div class="dataText2 num pos9">
                   4.31
                 </div>
                 <!-- 数据文字10 -->
-                <div class="dataText pos10">
+                <div class="dataText num pos10">
                   30.40
                 </div>
                 <!-- 数据文字11 -->
-                <div class="dataText2 pos11">
+                <div class="dataText2 num pos11">
                     30.30
                 </div>
                 <!-- 数据文字12 -->
-                <div class="dataText pos12">
+                <div class="dataText num pos12">
                   19.93
                 </div>
                 <!-- 数据文字13 -->
-                <div class="dataText2 pos13">
+                <div class="dataText2 num pos13">
                   19.86
                 </div>
                 <!-- 数据文字14 -->
-                <div class="dataText pos14">
+                <div class="dataText num pos14">
                   3.71
                 </div>
                 <!-- 数据文字15 -->
-                <div class="dataText pos15">
+                <div class="dataText num pos15">
                   2.98
                 </div>
                 <!-- 数据文字16 -->
-                <div class="dataText pos16">
+                <div class="dataText num pos16">
                     0.00
                 </div>
                 <!-- 数据文字17 -->
-                <div class="dataText3 pos17">
+                <div class="dataText3 num pos17">
                     3.32MPag
                 </div>
                 <!-- 数据文字18 -->
-                <div class="dataText3 pos18">
+                <div class="dataText3 num pos18">
                     Max 25t/h
                 </div>
                 <!-- 数据文字19 -->
-                <div class="dataText3 pos19">
+                <div class="dataText3 num pos19">
                     2.61t/h
                 </div>
                 <!-- 数据文字20 -->
-                <div class="dataText3 pos20">
+                <div class="dataText3 num pos20">
                     21.07 bar
                 </div>
                 <!-- 数据文字21 -->
-                <div class="dataText3 pos21">
+                <div class="dataText3 num pos21">
                     -1.33℃
                 </div>
                 <!-- 数据文字22 -->
-                <div class="dataText3 pos22">
+                <div class="dataText3 num pos22">
                     23.8kg(g)
                 </div>
                 <!-- 数据文字23 -->
-                <div class="dataText3 pos23">
+                <div class="dataText3 num pos23">
                     62%
                 </div>
                 <!-- 数据文字24 -->
-                <div class="dataText3 pos24">
+                <div class="dataText3 num pos24">
                   23.52 barg
                 </div>
                 <!-- 数据文字25 -->
-                <div class="dataText3 pos25">
+                <div class="dataText3 num pos25">
                     47.57℃
                 </div>
                 <!-- 数据文字26 -->
-                <div class="dataText3 pos26">
+                <div class="dataText3 num pos26">
                     -1.16%
                 </div>
                 <!-- 数据文字27 -->
-                <div class="dataText3 pos27">
+                <div class="dataText3 num pos27">
                     27.06℃
                 </div>
                 <!-- 数据文字28 -->
-                <div class="dataText3 pos28">
+                <div class="dataText3 num pos28">
                     23.8kg(g)
                 </div>
                 <!-- 数据文字29 -->
-                <div class="dataText3 pos29">
+                <!-- <div class="dataText3 num pos29">
                     RUNNING
-                </div>
+                </div> -->
                 <!-- 数据文字30 -->
-                <div class="dataText3 pos30">Open</div>
+                <div class="dataText3 num pos30">Open</div>
                 <!-- 数据文字31 -->
-                <div class="dataText3 pos31">3.22%</div>
+                <div class="dataText3 num pos31">3.22%</div>
                 <!-- 数据文字32 -->
-                <div class="dataText3 pos32">Open</div>
+                <div class="dataText3 num pos32">Open</div>
                 <!-- 数据文字33 -->
-                <div class="dataText3 pos33">0.00 t/h</div>
+                <div class="dataText3 num pos33">0.00 t/h</div>
                 <!-- 数据文字34 -->
-                <div class="dataText3 pos34">34</div>
+                <div class="dataText3 num pos34">34</div>
                 <!-- 数据文字35 -->
-                <div class="dataText3 pos35">35</div>
+                <div class="dataText3 num pos35">35</div>
                 <!-- 数据文字36 -->
-                <div class="dataText3 pos36">21.608.55 t/h</div>
+                <div class="dataText3 num pos36">21.608.55 t/h</div>
                 <!-- 数据文字37 -->
-                <div class="dataText3 pos37">2.38Mpa</div>
+                <div class="dataText3 num pos37">2.38Mpa</div>
                 <!-- 数据文字38 -->
-                <div class="dataText3 pos38">2.3 Mpa</div>
+                <div class="dataText3 num pos38">2.3 Mpa</div>
                 <!-- 数据文字39 -->
-                <div class="dataText3 pos39">12.72%</div>
+                <div class="dataText3 num pos39">12.72%</div>
                 <!-- 数据文字40 -->
-                <div class="dataText3 pos40">23.57barg</div>
+                <div class="dataText3 num pos40">23.57barg</div>
                 <!-- 数据文字41 -->
-                <div class="dataText pos41">0.00</div>
+                <div class="dataText num pos41">0.00</div>
                 <!-- 数据文字42 -->
-                <div class="dataText3 pos42">44.784.2 t/h</div>
+                <div class="dataText3 num pos42">44.784.2 t/h</div>
                 <!-- 数据文字43 -->
-                <div class="dataText3 pos43">1.65Mpa</div>
+                <div class="dataText3 num pos43">1.65Mpa</div>
                 <!-- 数据文字44 -->
-                <div class="dataText3 pos44">325.17 kg/m3</div>
+                <div class="dataText3 num pos44">325.17 kg/m3</div>
                 <!-- 数据文字45 -->
-                <div class="dataText3 pos45">0.88 t/h</div>
+                <div class="dataText3 num pos45">0.88 t/h</div>
                 <!-- 数据文字46 -->
-                <div class="dataText3 pos46">3.322 rpm</div>
+                <div class="dataText3 num pos46">3.322 rpm</div>
                 <!-- 数据文字47 -->
-                <div class="dataText3 pos47">549.41A</div>
+                <div class="dataText3 num pos47">549.41A</div>
                 <!-- 数据文字48 -->
-                <div class="dataText4 pos48">报警：580A</div>
+                <div class="dataText4 num pos48">报警：580A</div>
                 <!-- 数据文字49 -->
-                <div class="dataText3 pos49">267.64</div>
+                <div class="dataText3 num pos49">267.64</div>
                 <!-- 数据文字50 -->
-                <div class="dataText3 pos50">79,965.04 ton</div>
+                <div class="dataText3 num pos50">79,965.04 ton</div>
                 <!-- 数据文字51 -->
-                <div class="dataText3 pos51">Open</div>
+                <div class="dataText3 num pos51">Open</div>
                 <!-- 数据文字52 -->
-                <div class="dataText3 pos52">Open</div>
+                <div class="dataText3 num pos52">Open</div>
                 <!-- 数据文字53 -->
-                <div class="dataText3 pos53">Open</div>
+                <div class="dataText3 num pos53">Open</div>
                 <!-- 数据文字54 -->
-                <div class="dataText3 pos54">Closed</div>
+                <div class="dataText3 num pos54">Closed</div>
                 <!-- 数据文字55 -->
-                <div class="dataText pos55">13.21</div>
+                <div class="dataText num pos55">13.21</div>
                 <!-- 数据文字56 -->
-                <div class="dataText2 pos56">17.07</div>
+                <div class="dataText2 num pos56">17.07</div>
                 <!-- 数据文字57 -->
-                <div class="dataText3 pos57">41.27℃</div>
+                <div class="dataText3 num pos57">41.27℃</div>
                 <!-- 数据文字58 -->
-                <div class="dataText3 pos58">42.19℃</div>
+                <div class="dataText3 num pos58">42.19℃</div>
                 <!-- 数据文字59 -->
-                <div class="dataText3 pos59">3.960.31 kg/h</div>
+                <div class="dataText3 num pos59">3.960.31 kg/h</div>
                 <!-- 数据文字60 -->
-                <div class="dataText3 pos60">39.71℃</div>
+                <div class="dataText3 num pos60">39.71℃</div>
                 <!-- 数据文字61 -->
-                <div class="dataText3 pos61">0t/h</div>
+                <div class="dataText3 num pos61">0t/h</div>
                 <!-- 数据文字62 -->
-                <div class="dataText3 pos62">1.244</div>
+                <div class="dataText3 num pos62">1.244</div>
                 <!-- 数据文字63 -->
-                <div class="dataText3 pos63">1</div>
+                <div class="dataText3 num pos63">1</div>
                 <!-- 数据文字64 -->
-                <div class="dataText3 pos64">1.255</div>
+                <div class="dataText3 num pos64">1.255</div>
 
                 <!-- 数据文字65 -->
-                <div class="dataText3 pos65">20.88
+                <div class="dataText3 num pos65">20.88
                     <span style="margin-left: 4px;">barg</span>
                     <span style="margin-left: 20px;">0%</span>
                 </div>
                 <!-- 数据文字66 -->
-                <div class="dataText3 pos66">20.92
+                <div class="dataText3 num pos66">20.92
                   <span style="margin-left: 4px;">barg</span>
                   <span style="margin-left: 20px;">0%</span>
                 </div>
                 <!-- 数据文字67 -->
-                <div class="dataText3 pos67">20.84
+                <div class="dataText3 num pos67">20.84
                   <span style="margin-left: 4px;">barg</span>
                   <span style="margin-left: 20px;">0%</span>
                 </div>
                 <!-- 数据文字68 -->
-                <div class="dataText3 pos68">20.67
+                <div class="dataText3 num pos68">20.67
                   <span style="margin-left: 4px;">barg</span>
                   <span style="margin-left: 20px;">0%</span>
                 </div>
                 <!-- 数据文字69 -->
-                <div class="dataText3 pos69">19.47
+                <div class="dataText3 num pos69">19.47
                   <span style="margin-left: 4px;">barg</span>
                   <span style="margin-left: 20px;">0%</span>
                 </div>
                 <!-- 数据文字70 -->
-                <div class="dataText pos70">283.04</div>
+                <div class="dataText num pos70">283.04</div>
                 <!-- 数据文字71 -->
-                <div class="dataText pos71">108.57</div>
+                <div class="dataText num pos71">108.57</div>
 
                 <!-- 进度条1 -->
                 <div class="progress-bar progress-bar1 pos1" >
@@ -358,378 +358,383 @@
   }
 
   .dataText{
-    font-size: 8px;
+    font-size: 10px;
     color: #2f302e;
     position: absolute;
 
   }
   .dataText2{
-    font-size: 8px;
+    font-size: 10px;
     color: #f0faf3;
     position: absolute;
 
   }
  .dataText3{
-    font-size: 8px;
+    font-size:10px;
     color: #b2c9ff;
     position: absolute;
     // letter-spacing: -1px;
   }
   .dataText4{
-    font-size: 8px;
+    font-size: 10px;
     color: #ec1c24;
     position: absolute;
     // letter-spacing: -1px;
   }
-  .pos1{
-    top: 31.22222%;
-    left: 9.766666%;
-  }
-  .pos2{
-    top: 36.999%;
-    left: 2.822222%;
-    width: 2.2%;
-  }
-  .pos3{
-    top: 38.335598%;
-    left: 2.822222%;
-    width: 2.2%;
-  }
-  .pos4{
-    top: 46.55783%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos5{
-    top: 47.9421%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
+  .num{
+    &.pos1{
+      top: 31.122222%;
+      left: 9.966666%;
+    }
+    &.pos2{
+      top: 36.8%;
+      left: 2.322222%;
+      width: 2.8%;
+    }
+    &.pos3{
+      top: 38.48%;
+      left: 2.322222%;
+      width: 2.8%;
+    }
+    &.pos4{
+      top: 46.35783%;
+      left: 2.6122222%;
+      width: 2.8%;
+    }
+    &.pos5{
+      top: 47.921%;
+      left: 2.6122222%;
+      width: 2.8%;
+    }
 
-  .pos6 {
-    top: 56.385%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos7 {
-    top: 57.75%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos8 {
-    top: 60.1%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos9 {
-    top: 61.45%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos10 {
-    top: 66.7666%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos11 {
-    top: 68.1333%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos12 {
-    top: 70.85%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos13 {
-    top: 72.34%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos14 {
-    top: 77.44%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos15 {
-    top: 79.12%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos16 {
-    top: 80.9666%;
-    left: 3.122222%;
-    width: 2.2%;
-  }
-  .pos17 {
-    top: 31.2%;
-    left: 12.3%;
-    font-size: 10px;
-  }
-  .pos18 {
-    top: 65.3333%;
-    left: 15.2222%;
-    font-size: 10px;
-  }
-  .pos19 {
-    top: 81.2333%;
-    left: 11.1222%;
+    &.pos6 {
+      top: 56.2%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos7 {
+      top: 57.75%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos8 {
+      top: 59.9%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos9 {
+      top: 61.45%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos10 {
+      top: 66.4666%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos11 {
+      top: 68.1333%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos12 {
+      top: 70.7%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos13 {
+      top: 72.34%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos14 {
+      top: 77.24%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos15 {
+      top: 78.992%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos16 {
+      top: 80.76%;
+      left: 2.4522222%;
+      width: 2.8%;
+    }
+    &.pos17 {
+      top: 31.2%;
+      left: 12.3%;
+      font-size: 10px;
+    }
+    &.pos18 {
+      top: 65.3333%;
+      left: 15.2222%;
+      font-size: 10px;
+    }
+    &.pos19 {
+      top: 81.2333%;
+      left: 11.1222%;
 
-  }
-  .pos20 {
-    top: 22.2%;
-    left: 25.3%;
-  }
-  .pos21 {
-    top: 22.2%;
-    left: 30.3%;
-  }
-  .pos22 {
-    top: 36.9%;
-    left: 28.3%;
-    font-size: 13px;
-  }
-  .pos23 {
-    top: 35.6%;
-    left: 32.9%;
-    font-size: 10px;
-  }
-  .pos24 {
-    top: 40.1%;
-    left: 23.2%;
-    font-size: 10px;
-  }
-  .pos25 {
-    top: 40.1%;
-    left: 28.5%;
-    font-size: 10px;
-  }
-  .pos26 {
-    top: 49.5%;
-    left: 34.2%;
-    font-size: 10px;
-  }
-  .pos27 {
-    top: 54.4%;
-    left: 23.9%;
-    font-size: 10px;
-  }
-  .pos28 {
-    top: 55.99%;
-    left: 28.2%;
-    font-size: 10px;
-  }
-  .pos29 {
-    top: 35.7%;
-    left: 38.2%;
-    font-size: 10px;
-  }
-  .pos30 {
-    top: 35.6%;
-    left: 42.4%;
-    font-size: 10px;
-   }
-  .pos31 {
-    top: 43.8%;
-    left: 40%;
-   }
-  .pos32 {
-    top: 43.67%;
-    left: 42.5%;
-    font-size: 10px;
-   }
-  .pos33 {
-    top: 53.7%;
-    left: 39%;
-    font-size: 10px;
-   }
-  .pos34 {
-    top: 56.1%;
-    left: 43%;
-  }
-  .pos35 {
-    top: 57.6%;
-    left: 43%;
+    }
+    &.pos20 {
+      top: 22.2%;
+      left: 25.3%;
+    }
+    &.pos21 {
+      top: 22.2%;
+      left: 30.3%;
+    }
+    &.pos22 {
+      top: 36.9%;
+      left: 28.3%;
+      font-size: 13px;
+    }
+    &.pos23 {
+      top: 35.6%;
+      left: 32.9%;
+      font-size: 10px;
+    }
+    &.pos24 {
+      top: 40.1%;
+      left: 23.2%;
+      font-size: 10px;
+    }
+    &.pos25 {
+      top: 40.1%;
+      left: 28.5%;
+      font-size: 10px;
+    }
+    &.pos26 {
+      top: 49.5%;
+      left: 34.2%;
+      font-size: 10px;
+    }
+    &.pos27 {
+      top: 54.4%;
+      left: 23.9%;
+      font-size: 10px;
+    }
+    &.pos28 {
+      top: 55.99%;
+      left: 28.2%;
+      font-size: 10px;
+    }
+    &.pos29 {
+      top: 35.7%;
+      left: 38.2%;
+      font-size: 10px;
+    }
+    &.pos30 {
+      top: 35.6%;
+      left: 42.4%;
+      font-size: 10px;
+    }
+    &.pos31 {
+      top: 43.8%;
+      left: 40%;
+    }
+    &.pos32 {
+      top: 43.67%;
+      left: 42.5%;
+      font-size: 10px;
+    }
+    &.pos33 {
+      top: 53.7%;
+      left: 39%;
+      font-size: 10px;
+    }
+    &.pos34 {
+      top: 56.1%;
+      left: 43%;
+    }
+    &.pos35 {
+      top: 57.6%;
+      left: 43%;
 
-   }
-  .pos36 {
-    top: 65.1%;
-    left: 33%;
-    font-size: 10px;
-   }
-  .pos37 {
-    top: 65%;
-    left: 39%;
-    font-size: 10px;
-   }
-  .pos38 {
-    top: 66.9%;
-    left: 37.8%;
-    font-size: 10px;
-  }
-  .pos39 {
-    top: 73.9%;
-    left: 19.5%;
-    font-size: 10px;
-  }
-  .pos40 {
-    top: 74.3%;
-    left: 22%;
-    font-size: 10px;
-   }
-  .pos41 {
-    top: 79.4%;
-    left: 19.8%;
-    width: 2.2%;
-   }
-  .pos42 {
-    top: 73.8%;
-    left: 33%;
-    font-size: 12px;
-  }
-  .pos43 {
-    top: 76.5%;
-    left: 33%;
-    font-size: 12px;
-   }
-  .pos44 {
-    top: 26%;
-    left: 52.5%;
-    font-size: 10px;
-   }
-  .pos45 {
-    top: 29.5%;
-    left: 52.6%;
-    font-size: 10px;
-   }
-  .pos46 {
-    top: 76.9%;
-    left: 44.2%;
-    font-size: 10px;
-   }
-  .pos47 {
-    top: 79.6%;
-    left: 44.2%;
-    font-size: 10px;
-  }
-  .pos48 {
-    top: 81%;
-    left: 44.2%;
-    font-size: 11px;
-  }
-  .pos49 {
-    top: 77%;
-    left: 48.5%;
-    font-size: 10px;
-  }
-  .pos50 {
-    top: 79.6%;
-    left: 48.5%;
-    font-size: 10px;
-  }
-  .pos51 {
-    top: 63.2%;
-    left: 54.5%;
-    font-size: 10px;
-  }
-  .pos52 {
-    top: 70.1%;
-    left: 54.5%;
-    font-size: 10px;
-  }
-  .pos53 {
-    top: 60.2%;
-    left: 61%;
-    font-size: 10px;
-  }
-  .pos54 {
-    top: 60.3%;
-    left: 67.9%;
-  }
-  .pos55 {
-    top: 66.4%;
-    left: 64.3%;
-    width: 2%;
-  }
-  .pos56 {
-    top: 67.6%;
-    left: 64.3%;
-    width: 2%;
-  }
-  .pos57 {
-    top: 28.2%;
-    left: 80%;
-    font-size: 10px;
-  }
-  .pos58 {
-    top: 31.3%;
-    left: 80%;
-    font-size: 10px;
-  }
-  .pos59 {
-    top: 22.3%;
-    left: 85%;
-    font-size: 10px;
-  }
-  .pos60 {
-    top: 31.9%;
-    left: 86%;
-    font-size: 10px;
-  }
-  .pos61 {
-    top: 46.5%;
-    left: 86.7%;
-    font-size: 10px;
-  }
-  .pos62 {
-    top: 9.7%;
-    left: 52.4%;
-    width: 5.9%;
-  }
-  .pos63 {
-    top: 13.1%;
-    left: 52.4%;
-    width: 5.9%;
-  }
-  .pos64 {
-    top: 16.7%;
-    left: 52.4%;
-    width: 5.9%;
-  }
+    }
+    &.pos36 {
+      top: 65.1%;
+      left: 33%;
+      font-size: 10px;
+    }
+    &.pos37 {
+      top: 65%;
+      left: 39%;
+      font-size: 10px;
+    }
+    &.pos38 {
+      top: 66.9%;
+      left: 37.8%;
+      font-size: 10px;
+    }
+    &.pos39 {
+      top: 73.9%;
+      left: 19.5%;
+      font-size: 10px;
+    }
+    &.pos40 {
+      top: 74.3%;
+      left: 22%;
+      font-size: 10px;
+    }
+    &.pos41 {
+      top: 79.4%;
+      left: 20.2%;
+      width: 2.2%;
+    }
+    &.pos42 {
+      top: 73.8%;
+      left: 33%;
+      font-size: 12px;
+    }
+    &.pos43 {
+      top: 76.5%;
+      left: 33%;
+      font-size: 12px;
+    }
+    &.pos44 {
+      top: 26%;
+      left: 52.5%;
+      font-size: 10px;
+    }
+    &.pos45 {
+      top: 29.5%;
+      left: 52.6%;
+      font-size: 10px;
+    }
+    &.pos46 {
+      top: 76.9%;
+      left: 44.2%;
+      font-size: 10px;
+    }
+    &.pos47 {
+      top: 79.6%;
+      left: 44.2%;
+      font-size: 10px;
+    }
+    &.pos48 {
+      top: 81%;
+      left: 44.2%;
+      font-size: 11px;
+    }
+    &.pos49 {
+      top: 77%;
+      left: 48.5%;
+      font-size: 10px;
+    }
+    &.pos50 {
+      top: 79.6%;
+      left: 48.5%;
+      font-size: 10px;
+    }
+    &.pos51 {
+      top: 63.2%;
+      left: 54.5%;
+      font-size: 10px;
+    }
+    &.pos52 {
+      top: 70.1%;
+      left: 54.5%;
+      font-size: 10px;
+    }
+    &.pos53 {
+      top: 60.2%;
+      left: 61%;
+      font-size: 10px;
+    }
+    &.pos54 {
+      top: 60.3%;
+      left: 67.9%;
+    }
+    &.pos55 {
+      top: 66.1%;
+      left: 64.3%;
+      width: 2.2%;
+    }
+    &.pos56 {
+      top: 67.7%;
+      left: 64.3%;
+      width: 2.2%;
+    }
+    &.pos57 {
+      top: 28.2%;
+      left: 80%;
+      font-size: 10px;
+    }
+    &.pos58 {
+      top: 31.3%;
+      left: 80%;
+      font-size: 10px;
+    }
+    &.pos59 {
+      top: 22.3%;
+      left: 85%;
+      font-size: 10px;
+    }
+    &.pos60 {
+      top: 31.9%;
+      left: 86%;
+      font-size: 10px;
+    }
+    &.pos61 {
+      top: 46.5%;
+      left: 86.7%;
+      font-size: 10px;
+    }
+    &.pos62 {
+      top: 11.5%;
+      left: 37.76%;
+      width: 5.9%;
+    }
+    &.pos63 {
+      top: 11.5%;
+      left: 50%;
+      width: 5.9%;
+    }
+    &.pos64 {
+      top: 11.5%;
+      left: 62.3%;
+      width: 5.9%;
+    }
 
-  .pos65 {
-    top: 34.7%;
-    left: 49.4%;
-  }
-  .pos66 {
-    top: 34.7%;
-    left: 61.4%;
-  }
-  .pos67 {
-    top: 45.4%;
-    left: 49.4%;
-  }
-  .pos68 {
-    top: 45.4%;
-    left: 61.4%;
-  }
-  .pos69 {
-    top: 40%;
-    left: 70.4%;
-  }
-  .pos70 {
-    top: 53%;
-    left: 51.9%;
-    width: 2%;
-    letter-spacing: -1px;
-  }
-  .pos71 {
-    top: 53.3%;
-    left: 62.15%;
-    width: 2%;
-    letter-spacing: -1px;
+    &.pos65 {
+      top: 34.7%;
+      left: 49.4%;
+    }
+    &.pos66 {
+      top: 34.7%;
+      left: 61.4%;
+    }
+    &.pos67 {
+      top: 45.4%;
+      left: 49.4%;
+    }
+    &.pos68 {
+      top: 45.4%;
+      left: 61.4%;
+    }
+    &.pos69 {
+      top: 40%;
+      left: 70.4%;
+    }
+    &.pos70 {
+      top: 52.6%;
+      left: 50.7%;
+      // width: 2.5%;
+      padding: 2px 1px;
+      // letter-spacing: -1px;
+      background: #00ffff;
+    }
+    &.pos71 {
+      top: 52.6%;
+      left: 61%;
+      padding: 2px 1px;
+      background: #00ffff;
+    }
   }
 
+
   .progress-bar{
     width: 5.7778%;
     position: absolute;