*

ui/src/views/front/steamBalance.vue

@@ -12,6 +12,13 @@
 
       <div style="text-align: center; background-color: rgba($color: #ffffff, $alpha: 0.3);
         height: 100%;position: relative;">
+        <div class="line1">
+          <img src="@/assets/steamImg/line1.png" style="width:1px;height:635px">
+        </div>
+
+         <div class="line2">
+          <img src="@/assets/steamImg/line1.png" style="width:1px;height:635px">
+        </div>
 
         <div class="lu1-1">
           <p class="num1-1">376</p>
@@ -26,7 +33,7 @@
         </div>
 
         <div class="lu1-3">
-          <p class="num1-1">369</p>
+          <!-- <p class="num1-1">369</p> -->
           <img src="@/assets/steamImg/3.png" style="width:130px;height:86px">
           <p class="word1-1">K300</p>
         </div>
@@ -132,10 +139,12 @@
         </div>
 
         <div class="jiantou3">
+          <p class="num">5</p>
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
         </div>
 
         <div class="jiantou4">
+          <p class="num">1</p>
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
         </div>
 
@@ -144,7 +153,7 @@
         </div>
 
         <div class="jiantou6">
-          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:39px">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:59px">
         </div>
 
         <div class="jiantou7">
@@ -163,6 +172,148 @@
           <img src="@/assets/steamImg/jiantou7.png" style="width:39px;height:116px">
         </div>
 
+        <div class="jiantou11">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:39px">
+        </div>
+
+        <div class="jiantou12">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:39px">
+        </div>
+
+        <div class="jiantou13">
+          <img src="@/assets/steamImg/jiantou8.png" style="width:54px;height:39px">
+        </div>
+
+        <div class="jiantou14">
+          <img src="@/assets/steamImg/jiantou9.png" style="width:38px;height:48px">
+        </div>
+
+        <div class="jiantou15">
+          <img src="@/assets/steamImg/jiantou10.png" style="width:41px;height:62px">
+        </div>
+
+        <div class="jiantou16">
+          <img src="@/assets/steamImg/jiantou11.png" style="width:77px;height:40px">
+        </div>
+
+        <div class="jiantou17">
+          <img src="@/assets/steamImg/jiantou12.png" style="width:22px;height:69px">
+        </div>
+
+        <div class="jiantou18">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+        </div>
+
+        <div class="jiantou19">
+          <img src="@/assets/steamImg/jiantou14.png" style="width:8px;height:185px">
+        </div>
+
+        <div class="jiantou20">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+        </div>
+
+        <div class="jiantou21">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+        </div>
+
+        <div class="jiantou22">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+        </div>
+
+        <div class="jiantou23">
+          <img src="@/assets/steamImg/jiantou13.png" style="width:111px;height:33px">
+        </div>
+
+        <div class="jiantou24">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+        </div>
+
+        <div class="jiantou25">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+        </div>
+
+        <div class="jiantou26">
+          <p class="num">369</p>
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+        </div>
+
+        <div class="kuang pos-1">
+            <p>阀门</p>
+        </div>
+
+        <div class="kuang pos-2">
+            <p>p900</p>
+        </div>
+
+        <div class="kuang pos-3">
+            <p>Letdown</p>
+        </div>
+
+        <div class="kuang pos-4">
+            <p>Furnace</p>
+        </div>
+
+        <div class="kuang pos-5">
+            <p>TRANCING</p>
+        </div>
+        <div class="kuang pos-6">
+            <p>V900</p>
+        </div>
+        <div class="kuang pos-7">
+            <p>V303</p>
+        </div>
+        <div class="kuang pos-8">
+            <p>TRANCING</p>
+        </div>
+
+        <div class="jiantoulan pos-1">
+          <p class="text1">BFW</p>
+          <img src="@/assets/steamImg/jiantoulan1.png" style="width:75px;height:31px">
+        </div>
+        <div class="jiantoulan pos-2">
+          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
+          <p class="num2">5.4</p>
+        </div>
+        <div class="jiantoulan pos-3">
+          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
+        </div>
+        <div class="jiantoulan pos-4">
+          <img src="@/assets/steamImg/jiantoulan1.png" style="width:100px;height:31px">
+        </div>
+        <div class="jiantoulan pos-5">
+          <img src="@/assets/steamImg/jiantoulan3.png" style="width:80px;height:347px">
+        </div>
+        <div class="jiantoulan pos-6">
+          <img src="@/assets/steamImg/jiantoulan4.png" style="width:31px;height:150px">
+        </div>
+        <div class="jiantoulan pos-7">
+          <img src="@/assets/steamImg/jiantoulan5.png" style="width:45px;height:251px">
+        </div>
+         <div class="jiantoulan pos-8">
+          <img src="@/assets/steamImg/jiantoulan6.png" style="width:34px;height:89px">
+        </div>
+        <div class="jiantoulan pos-9">
+          <img src="@/assets/steamImg/jiantoulan11.png" style="width:31px;height:75px">
+        </div>
+        <div class="jiantoulan pos-10">
+          <img src="@/assets/steamImg/jiantoulan7.png" style="width:30px;height:46px">
+        </div>
+        <div class="jiantoulan pos-11">
+          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
+        </div>
+        <div class="jiantoulan pos-12">
+          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
+        </div>
+        <div class="jiantoulan pos-13">
+          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
+        </div>
+        <div class="jiantoulan pos-14">
+          <img src="@/assets/steamImg/jiantoulan10.png" style="width:201px;height:64px">
+        </div>
+        <div class="jiantoulan pos-15">
+          <img src="@/assets/steamImg/jiantoulan9.png" style="width:114px;height:127px">
+        </div>
+
       </div>
   </div>
 </template>
@@ -190,10 +341,148 @@
 #steamBalance{
   width: 1270px;
   height: 750px;
+  .line1{
+    position: absolute;
+    top: 0;
+    left: 160px;
+  }
+  .line2{
+    position: absolute;
+    top: 0;
+    left: 430px;
+  }
+  .jiantoulan{
+      position: absolute;
+      &.pos-1{
+        top: 110px;
+        left: 460px;
+        .text1{
+          position: absolute;
+          left: 20px;
+        }
+      }
+      &.pos-2{
+        top: 130px;
+        left: 560px;
+        .num2{
+          top: 20px;
+          left: 20px;
+          color: #3659ab;
+        }
+      }
+      &.pos-3{
+        top: 130px;
+        left: 1030px;
+      }
+      &.pos-4{
+        top: 80px;
+        left: 1090px;
+      }
+      &.pos-5{
+        top: 200px;
+        left: 70px;
+      }
+      &.pos-6{
+        top: 400px;
+        left: 190px;
+      }
+      &.pos-7{
+        top: 300px;
+        left: 240px;
+      }
+      &.pos-8{
+        top: 300px;
+        left: 340px;
+      }
+      &.pos-9{
+        top: 300px;
+        left: 470px;
+      }
+      &.pos-10{
+        top: 510px;
+        left: 330px;
+      }
+      &.pos-11{
+        top: 500px;
+        left: 520px;
+      }
+      &.pos-12{
+        top: 340px;
+        left: 780px;
+      }
+      &.pos-13{
+        top: 340px;
+        left: 940px;
+      }
+      &.pos-14{
+        top: 300px;
+        left: 1020px;
+      }
+      &.pos-15{
+        top: 580px;
+        left: 820px;
+      }
+  }
+  .kuang{
+    background: url(../../assets/steamImg/kuang.png);
+    width: 92px;
+    height: 47px;
+    background-size: 100% 100%;
+    position: absolute;
+    font-size: 18px;
+    color: rgb(178, 201, 255);
+    line-height: 47px;
+    &.pos-1{
+     top: 100px;
+      left: 530px;
+    }
+    &.pos-2{
+     top: 340px;
+     left: 160px;
+    }
+    &.pos-3{
+      top: 245px;
+      left: 440px;
+    }
+    &.pos-4{
+    top: 450px;
+    left: 710px;
+    }
+    &.pos-5{
+      top: 450px;
+      left: 1060px;
+      p{
+        transform: scale(.8,.8);
+      }
+    }
+    &.pos-6{
+      top: 640px;
+      left: 190px;
+    }
+    &.pos-7{
+      top: 640px;
+      left: 290px;
+    }
+    &.pos-8{
+        top: 640px;
+        left: 480px;
+         p{
+          transform: scale(.8,.8);
+        }
+    }
+  }
   .lu1-1{
     position: absolute;
     top: 60px;
     left: 40px;
+    .num1-1{
+      top: -20px;
+      left: 15px;
+    }
+    .word1-1{
+        bottom: -20px;
+        left: 20px;
+    }
   }
   .lu1-2{
     position: absolute;
@@ -213,28 +502,28 @@
   }
   .lu2-2{
     position: absolute;
-    top: 240px;
+    top: 220px;
     left: 260px;
   }
   .lu2-3{
     position: absolute;
-    top: 230px;
-    left: 500px;
+    top: 220px;
+    left: 560px;
   }
   .lu2-4{
     position: absolute;
-    top: 230px;
-    left: 700px;
+    top: 220px;
+    left: 740px;
   }
   .lu2-5{
     position: absolute;
     top: 300px;
-    left: 560px;
+    left: 610px;
   }
   .lu2-6{
     position: absolute;
     top: 300px;
-    left: 750px;
+    left: 760px;
   }
 
   .lu2-7{
@@ -257,13 +546,13 @@
   .lu2-10{
     position: absolute;
     top: 430px;
-    left: 350px;
+    left: 330px;
   }
 
   .lu2-11{
     position: absolute;
     top: 450px;
-    left: 500px;
+    left: 460px;
   }
 
   .lu2-12{
@@ -326,46 +615,160 @@
   .jiantou3{
     position: absolute;
     top: 50px;
-    left: 500px;
+    left: 570px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 20px;
+    }
   }
   .jiantou4{
     position: absolute;
     top: 40px;
     left: 750px;
+     .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 20px;
+    }
   }
   .jiantou5{
     position: absolute;
     top: 200px;
-    left: 170px;
+    left: 200px;
   }
    .jiantou6{
     position: absolute;
-    top: 200px;
-    left: 430px;
+    top: 180px;
+    left: 480px;
   }
 
   .jiantou7{
     position: absolute;
     top: 190px;
-    left: 560px;
+    left: 630px;
   }
 
   .jiantou8{
     position: absolute;
     top: 190px;
-    left: 760px;
+    left: 800px;
   }
 
   .jiantou9{
     position: absolute;
     top: 200px;
-    left: 635px;
+    left: 685px;
   }
 
   .jiantou10{
     position: absolute;
     top: 200px;
-    left: 680px;
+    left: 725px;
+  }
+
+  .jiantou11{
+    position: absolute;
+    top: 200px;
+    left: 950px;
+  }
+
+  .jiantou12{
+    position: absolute;
+    top: 200px;
+    left: 1100px;
+  }
+
+  .jiantou13{
+    position: absolute;
+    top: 430px;
+    left: 10px;
   }
+  .jiantou14{
+    position: absolute;
+    top: 420px;
+    left: 70px;
+  }
+
+  .jiantou15{
+    position: absolute;
+    top: 350px;
+    left: 320px;
+  }
+
+  .jiantou16{
+    position: absolute;
+    top: 390px;
+    left: 300px;
+  }
+
+  .jiantou17{
+    position: absolute;
+    top: 400px;
+    left: 400px;
+  }
+
+  .jiantou18{
+    position: absolute;
+    top: 400px;
+    left: 540px;
+  }
+
+  .jiantou19{
+    position: absolute;
+    top: 380px;
+    left: 620px;
+  }
+
+  .jiantou20{
+    position: absolute;
+    top: 400px;
+    left: 750px;
+  }
+
+  .jiantou21{
+    position: absolute;
+    top: 400px;
+    left: 940px;
+  }
+
+  .jiantou22{
+    position: absolute;
+    top: 400px;
+    left: 1100px;
+  }
+
+  .jiantou23{
+    position: absolute;
+    top: 600px;
+    left: 240px;
+  }
+
+  .jiantou24{
+    position: absolute;
+    top: 585px;
+    left: 330px;
+  }
+
+  .jiantou25{
+    position: absolute;
+    top: 585px;
+    left: 520px;
+  }
+
+  .jiantou26{
+    position: absolute;
+    top: 40px;
+    left: 970px;
+     .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 20px;
+    }
+  }
+
 }
 </style>