页面开发

ui/src/views/front/materialBalance.vue

@@ -116,7 +116,7 @@
             <div class="luzi2">
                 <div class="ebo2Box">EBO</div>
                 <div class="imgBox">
-                  <img src="@/assets/img/luzi2-img-arror1.png" class="luzi2-img1">
+                  
                   <img src="@/assets/img/luzi2-img-arror2.png" class="luzi2-img2 move2 ar-animated">
                   <img src="@/assets/img/arror4.png" class="arror4 luzi2-img3 move3 ar-animated">
                   <img src="@/assets/img/arror4.png" class="arror4 luzi2-img4 move3 ar-animated">
@@ -126,11 +126,65 @@
                   <img src="@/assets/img/arrorDown.png" class="arrorDown1 luzi2-img5 move4 ar-animated">
                   <img src="@/assets/img/arrorDown.png" class="arrorDown1 luzi2-img6 move5 ar-animated">
                   <img src="@/assets/img/arrorDown.png" class="arrorDown2 luzi2-img7 move6 ar-animated">
+
+
+                  <img src="@/assets/img/luzi2-img-arror1.png" class="luzi2-img1">
+                  <img src="@/assets/img/arror6.png" class="arror6">
+                  <img src="@/assets/img/arror7.png" class="arror7">
+
+                  <img src="@/assets/img/arror8.png" class="arror8">
+
+
+                  <img src="@/assets/img/arror9.png" class="arror9">
+                  <img src="@/assets/img/arror9.png" class="arror10">
+                  <img src="@/assets/img/arror9.png" class="arror11">
+                  <img src="@/assets/img/arror9.png" class="arror12">
                 </div> 
 
                 <div class="wordBox">
-                  
+                    <span class="location loc1">Compressor</span>
+                    <span class="location loc2">Cold Section</span>
+                    <span class="location loc3">Quech Section</span>
+                    <span class="location loc4">Depropanize</span>
+                    <span class="location loc5">Hot Section</span>
+                    <span class="location loc6">PGU</span>
+                    <span class="location loc7">C4 System</span>
+                    <span class="location loc8">AEU</span>
+
+
+                    <span class="location loc9">1884</span>
+                    <span class="location loc10">1621</span>
                 </div> 
+
+                <div class="elementBox elementBoxLoc1">
+                    <div class="box_one elementItem">RPG</div>
+                    <div class="box_one elementItem">H2</div>
+
+                </div>
+
+                <div class="elementBox elementBoxLoc2">
+                    <div class="box_one elementItem">Washoil</div>
+                    <div class="box_one elementItem">C5</div>
+                    <div class="box_one elementItem"><span>BTX product</span></div>
+                    <div class="box_one elementItem">C9</div>
+
+                </div>
+
+
+                <div class="elementBox elementBoxLoc3">
+                    <div class="box_one elementItem">H2</div>
+                    <div class="box_one elementItem">C2H4</div>
+                    <div class="box_one elementItem">CH4</div>
+                    <div class="box_one elementItem">Offags</div>
+                    <div class="box_one elementItem">LPG</div>
+                    <div class="box_one elementItem">C3H6</div>
+                    <div class="box_one elementItem">C4</div>
+                    <div class="box_one elementItem">Benzene</div>
+                    <div class="box_one elementItem">Toluene</div>
+                    <div class="box_one elementItem">Xylene</div>
+                    <div class="box_one elementItem">C6-C8 NA</div>
+
+                </div>
                 
             </div>
           </div>
@@ -320,7 +374,7 @@
 
 #materialBalance .layout .layout_left img.luzi2-img7{
   position: absolute;
-  top: 370px;
+  top: 380px;
   left: 470px;
  
 }
@@ -339,6 +393,166 @@
  
 }
 
+#materialBalance .layout .layout_left img.arror6{
+  width: 597px;
+  height: 80px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+    top: 460px;
+    left: -170px;
+}
+
+#materialBalance .layout .layout_left img.arror7{
+  width: 273px;
+  height: 84px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 378px;
+  left: 530px;
+}
+
+#materialBalance .layout .layout_left img.arror8{
+  width: 118px;
+  height: 8px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 560px;
+  left: -110px;
+}
+#materialBalance .layout .layout_left img.arror9{
+  width: 121px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 500px;
+  left: 130px;
+}
+#materialBalance .layout .layout_left img.arror10{
+  width: 121px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 550px;
+  left: 130px;
+}
+#materialBalance .layout .layout_left img.arror11{
+  width: 121px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 600px;
+  left: 130px;
+}
+#materialBalance .layout .layout_left img.arror12{
+  width: 121px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 650px;
+  left: 130px;
+}
+.wordBox{
+  width: 100%;
+  height: 100%;
+}
+.wordBox span{
+  font-size: 20px;
+  color: rgb(178, 201, 255);
+  text-align: center;
+  font-weight: bold;
+}
+.wordBox .location{
+  position: absolute;
+}
+
+.wordBox .location.loc1{
+    top: 135px;
+    left: 440px;
+}
+.wordBox .location.loc2{
+    top: 170px;
+    left: 590px;
+}
+
+.wordBox .location.loc3{
+    top: 365px;
+    left: 200px;
+}
+.wordBox .location.loc4{
+    top: 365px;
+    left: 420px;
+}
+.wordBox .location.loc5{
+    top: 365px;
+    left: 608px;
+}
+.wordBox .location.loc6{
+    top: 650px;
+    left: 40px;
+}
+.wordBox .location.loc7{
+    top: 580px;
+    left: 420px;
+}
+
+.wordBox .location.loc8{
+    top: 650px;
+    left: 630px;
+}
+
+.wordBox .location.loc9{
+    top: 540px;
+    left: -110px;
+    font-size: 16px;
+    color: rgb(32, 99, 255);
+}
+
+
+.wordBox .location.loc10{
+    top: 550px;
+    left: -50px;
+    font-size: 12px;
+    color: rgb(32, 99, 255);
+    
+}
+
+.elementBox{
+    position: absolute;
+}
+.elementBox.elementBoxLoc1{
+  top: 530px;
+  left: -210px;
+}
+.elementBox.elementBoxLoc2{
+  top: 470px;
+  left: 250px; 
+}
+.elementBox.elementBoxLoc3{
+  top: 0px;
+  left: 820px; 
+}
+
+.elementBox .elementItem span{
+  transform: scale(.8,.8);
+}
+.elementBox.elementBoxLoc2 .box_one{
+  margin-bottom: auto;
+}
+.elementBox.elementBoxLoc3 .box_one{
+  margin-bottom: 6px;
+}
+
+#materialBalance .layout .layout_left{
+  padding-top: 0;
+}
+
 @keyframes move { 
 	  0% {left: -50%;	 opacity: 0; }
 	  60% { left: 10%; opacity: 1 }
@@ -397,9 +611,9 @@
 
 
   @keyframes move6 { 
-	  0% {top: 350px;	 opacity: 0; }
-	  50% { top: 360px; opacity: 1 }
-	  100% {top: 370px;opacity: 0;}
+	  0% {top: 360px;	 opacity: 0; }
+	  50% { top: 370px; opacity: 1 }
+	  100% {top: 380px;opacity: 0;}
 	}		 
 
 	.move6{