大屏页面开发

ui/src/views/front/materialBalance.vue

@@ -115,9 +115,23 @@
           <div class="layout_left">
             <div class="luzi2">
                 <div class="ebo2Box">EBO</div>
-                <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">
+                <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">
+
+                  <img src="@/assets/img/arror5.png" class="arror5 luzi2-img8 move7 ar-animated">
+
+                  <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">
+                </div> 
+
+                <div class="wordBox">
+                  
+                </div> 
+                
             </div>
           </div>
 
@@ -266,6 +280,65 @@
   margin-top: 0;
 }
 
+#materialBalance .layout .layout_left img.luzi2-img4{
+  position: absolute;
+  top: 280px;
+  left: 570px;
+  margin-top: 0;
+}
+
+#materialBalance .layout .layout_left img.arrorDown1{
+ 
+  margin-top: 0;
+  width: 18px;
+  height: 64px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+#materialBalance .layout .layout_left img.arrorDown2{
+ 
+  margin-top: 0;
+  width: 18px;
+  height: 48px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+#materialBalance .layout .layout_left img.luzi2-img5{
+  position: absolute;
+  top: 380px;
+  left: 250px;
+ 
+}
+
+#materialBalance .layout .layout_left img.luzi2-img6{
+  position: absolute;
+  top: 150px;
+  left: 470px;
+ 
+}
+
+#materialBalance .layout .layout_left img.luzi2-img7{
+  position: absolute;
+  top: 370px;
+  left: 470px;
+ 
+}
+
+#materialBalance .layout .layout_left img.arror5{
+  width: 87px;
+  height: 18px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+#materialBalance .layout .layout_left img.luzi2-img8{
+  position: absolute;
+  top: 620px;
+  left: -90px;
+ 
+}
+
 @keyframes move { 
 	  0% {left: -50%;	 opacity: 0; }
 	  60% { left: 10%; opacity: 1 }
@@ -301,6 +374,49 @@
   }
 
 
+  @keyframes move4 { 
+	  0% {top: 360px;	 opacity: 0; }
+	  50% { top: 370px; opacity: 1 }
+	  100% {top: 380px;opacity: 0;}
+	}		 
+	.move4{
+    -webkit-animation-name:move4;
+    animation-name:move4;
+  }
+
+
+  @keyframes move5 { 
+	  0% {top: 130px;	 opacity: 0; }
+	  50% { top: 140px; opacity: 1 }
+	  100% {top: 150px;opacity: 0;}
+	}		 
+	.move5{
+    -webkit-animation-name:move5;
+    animation-name:move5;
+  }
+
+
+  @keyframes move6 { 
+	  0% {top: 350px;	 opacity: 0; }
+	  50% { top: 360px; opacity: 1 }
+	  100% {top: 370px;opacity: 0;}
+	}		 
+
+	.move6{
+    -webkit-animation-name:move6;
+    animation-name:move6;
+  }
+
+  @keyframes move7 { 
+	  0% {left: -110px;	 opacity: 0; }
+	  50% { left: -100px; opacity: 1 }
+	  100% {left: -90px;opacity: 0;}
+	}		 
+  
+	.move7{
+    -webkit-animation-name:move7;
+    animation-name:move7;
+  }
 
 
 	.ar-animated{