大屏页面开发

ui/src/views/front/materialBalance.vue

@@ -17,7 +17,7 @@
                 <span class="box_one">Nap</span>
                 <div class="arror_one">
                     <p class="textOne">7326</p>
-                    <img src="@/assets/img/arror1.png" class="arror1">
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
                 </div>
             </div>
 
@@ -25,7 +25,7 @@
                 <span class="box_one">乙烷</span>
                 <div class="arror_one">
                     <p class="textOne">4</p>
-                    <img src="@/assets/img/arror1.png" class="arror1">
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated" >
                 </div>
             </div>
 
@@ -33,7 +33,7 @@
                 <span class="box_one">C5</span>
                 <div class="arror_one">
                     <p class="textOne">7326</p>
-                    <img src="@/assets/img/arror1.png" class="arror1">
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
                 </div>
             </div>
 
@@ -41,7 +41,7 @@
                 <span class="box_one">C6-C8</span>
                 <div class="arror_one">
                     <p class="textOne">7326</p>
-                    <img src="@/assets/img/arror1.png" class="arror1">
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
                 </div>
             </div>
 
@@ -49,7 +49,7 @@
                 <span class="box_one">LPG</span>
                 <div class="arror_one">
                     <p class="textOne">0</p>
-                    <img src="@/assets/img/arror1.png" class="arror1">
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
                 </div>
             </div>
           </div>
@@ -108,8 +108,21 @@
 
             <div class="furnace">Furnace</div>
           </div>
-         
-         
+
+          <div class="layout_left">
+            <img src="@/assets/img/arror4.png" class="arror4 move ar-animated ar-delay-4s">
+          </div>
+          <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>
+          </div>
+
+
+
 
         </div>
       </div>
@@ -140,6 +153,7 @@
     align-content: center;
     justify-content: center;
     align-items: center;
+    padding-top: 5px;
   }
 
   .textOne{
@@ -159,11 +173,10 @@
     display: flex;
   }
   .box_two{
-    width: 350px;
-    height: 400px;
-    z-index: 627;
+    width: 240px;
+    height: 360px;
     border: 1px dotted rgb(78, 128, 248);
-    margin-top: -20px;
+    margin-top: -6px;
     margin-left: 10px;
     display: flex;
     flex-flow: wrap;
@@ -197,5 +210,118 @@
     width: 100%;
     margin-top: 10px;
   }
+#materialBalance .layout .layout_left img.arror4{
+  width: 54px;
+  height: 18px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  margin-top: 250px;
+}
+.luzi2{
+  background: url(../../assets/img/luzi2.png);
+  width: 720px;
+  height: 680px;
+  background-size: 100% 100%;
+  margin-left: -220px;
+  margin-top: -20px;
+  position: relative;
+}
+
+.luzi2 .ebo2Box{
+  background: url(../../assets/img/ebo2.png);
+  width: 77px;
+  height: 49px;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 8px;
+  left: 220px;
+  font-size: 18px;
+  color: rgb(178, 201, 255);
+  padding-top: 17px;
+}
+
+#materialBalance .layout .layout_left img.luzi2-img1{
+  width: 33px;
+  height: 168px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 50px;
+  left: 240px;
+}
+#materialBalance .layout .layout_left img.luzi2-img2{
+  width: 104px;
+  height: 122px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 100px;
+  left: 270px;
+}
+
+#materialBalance .layout .layout_left img.luzi2-img3{
+  position: absolute;
+  top: 100px;
+  left: 570px;
+  margin-top: 0;
+}
+
+@keyframes move { 
+	  0% {left: -50%;	 opacity: 0; }
+	  60% { left: 10%; opacity: 1 }
+	  100% {left: 50%;opacity: 0;}
+	}		 
+	.move{
+    -webkit-animation-name:move;
+    animation-name:move;
+    position:relative;
+  }
+
+@keyframes move2 { 
+	  0% { opacity: 0; }
+    25% { opacity: 0.5;}
+	  50% { opacity: 1 }
+    75% { opacity: 0.5 }
+	  100% {opacity: 0;}
+	}		 
+	.move2{
+    -webkit-animation-name:move2;
+    animation-name:move2;
+  }
+
+
+@keyframes move3 { 
+	  0% {left: 530px;	 opacity: 0; }
+	  50% { left: 550px; opacity: 1 }
+	  100% {left: 570px;opacity: 0;}
+	}		 
+	.move3{
+    -webkit-animation-name:move3;
+    animation-name:move3;
+  }
+
+
+
+
+	.ar-animated{
+    -webkit-animation-duration:1.5s;
+    animation-duration:1.5s;
+    -webkit-animation-fill-mode:both;
+    animation-fill-mode:both;
+    animation-iteration-count:infinite;
+    -webkit-animation-iteration-count:infinite;
+    font-style:inherit;
+    -webkit-animation-timing-function:linear;
+    animation-timing-function:linear;}
+	.ar-delay-1s{animation-delay:0.1s;}
+	.ar-delay-2s{animation-delay:0.2s;}
+	.ar-delay-3s{animation-delay:0.3s;}
+	.ar-delay-4s{animation-delay:0.4s;}
+	.ar-delay-5s{animation-delay:0.5s;}
+	.ar-delay-6s{animation-delay:0.6s;}
+	.ar-delay-7s{animation-delay:0.7s;}
+	.ar-delay-8s{animation-delay:0.8s;}
+	.ar-delay-9s{animation-delay:0.9s;}
+	.ar-delay-10s{animation-delay:0.10s;}
 
 </style>