大屏页面全部代码

ui/src/views/front/materialBalance.vue

@@ -127,18 +127,46 @@
                   <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 class="xixian">
+                      <img src="@/assets/img/luzi2-img-arror1.png" class="luzi2-img1">
+                      <img src="@/assets/img/sanjiao.png" class="sanjiao1 move8 ar-animated">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror6.png" class="arror6">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao2 move9 ar-animated1">
+                  </div>
+                  
+                  <div class="xixian">
+                    <img src="@/assets/img/arror7.png" class="arror7">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao3 move10 ar-animated1">
+                  </div>
+
+                     <img src="@/assets/img/arror8.png" class="arror8">
+                    
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror9.png" class="arror9">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao4 move11 ar-animated">
+                  </div>
+                  
+                   <div class="xixian">
+                    <img src="@/assets/img/arror9.png" class="arror10">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao5 move12 ar-animated">
+                  </div>
+                   <div class="xixian">
+                    <img src="@/assets/img/arror9.png" class="arror11">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao6 move13 ar-animated">
+                  </div>
+                   <div class="xixian">
+                    <img src="@/assets/img/arror9.png" class="arror12">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao7 move14 ar-animated">
+                  </div>
+
+                   <div class="xixian">
+                    <img src="@/assets/img/arror10.png" class="arror13">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao8 move15 ar-animated">
+                  </div>
                 </div> 
 
                 <div class="wordBox">
@@ -168,6 +196,21 @@
                     <div class="box_one elementItem"><span>BTX product</span></div>
                     <div class="box_one elementItem">C9</div>
 
+
+                    <div class="sekuaiBox">
+                      <span class="item blue pos1">
+                         61
+                      </span>
+                      <span class="item red pos2">
+                         266
+                      </span>
+                      <span class="item yellow pos3">
+                         2871
+                      </span>
+                      <span class="item blue pos4">
+                         61
+                      </span>
+                    </div>
                 </div>
 
 
@@ -184,6 +227,120 @@
                     <div class="box_one elementItem">Xylene</div>
                     <div class="box_one elementItem">C6-C8 NA</div>
 
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror14">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao9 move16 ar-animated3">
+                  </div>
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror15">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao10 move16 ar-animated3">
+                  </div>
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror16">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao11 move16 ar-animated3">
+                  </div>
+
+                   <div class="xixian">
+                    <img src="@/assets/img/arror12.png" class="arror17">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao12 move17 ar-animated1">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror18">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao13 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror19">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao14 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror14.png" class="arror20">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao15 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror21">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao16 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror22">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao17 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror13.png" class="arror23">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao18 move16 ar-animated3">
+                  </div>
+
+
+                  <div class="sekuaiBox">
+                      <span class="item blue pos5">
+                         26
+                      </span>
+                      <span class="item yellow pos6">
+                         2246
+                      </span>
+                      <span class="item blue pos7">
+                         71
+                      </span>
+                      <span class="item red pos8">
+                         1159
+                      </span>
+                      <span class="item yellow pos9">
+                         788
+                      </span>
+                      <span class="item blue pos10">
+                         1149
+                      </span>
+                      <span class="item red pos11">
+                         762
+                      </span>
+                      <span class="item blue pos12">
+                         409
+                      </span>
+                      <span class="item yellow pos13">
+                         299
+                      </span>
+                      <span class="item bule pos14">
+                         177
+                      </span>
+                      <span class="item red pos15">
+                         196
+                      </span>
+                  </div>
+
+                </div>
+
+                <div class="elementBox elementBoxLoc4">
+                    <div class="dizuo dizuoelementItem">TM</div>
+                    <div class="dizuo dizuoelementItem">TS</div>
+                    <div class="dizuo dizuoelementItem">EO/EG</div>
+                    <div class="dizuo dizuoelementItem">OXO</div>
+                    <div class="dizuo dizuoelementItem">YBS</div>
+                    <div class="dizuo dizuoelementItem">TM</div>
+
+
+                    <div class="dizuo dizuoelementItem">AA/AE</div>
+                    <div class="dizuo dizuoelementItem">GAA</div>
+                    <div class="dizuo dizuoelementItem">OXO</div>
+                    <div class="dizuo dizuoelementItem">YPC</div>
+                    <div class="dizuo dizuoelementItem">Logistic</div>
+                    <div class="dizuo dizuoelementItem">BD</div>
+
+                </div>
+
+                <div class="elementBox elementBoxLoc5"> 
+
+                  <img src="@/assets/img/arror15.png" class="arror24">
+
+                  <img src="@/assets/img/arror16.png" class="arror25">
+
+                  <img src="@/assets/img/arror17.png" class="arror26">
+
                 </div>
                 
             </div>
@@ -309,14 +466,206 @@
 }
 
 #materialBalance .layout .layout_left img.luzi2-img1{
-  width: 33px;
+  width: 36px;
   height: 168px;
   padding-bottom: 0;
   margin-bottom: 0;
   position: absolute;
-  top: 50px;
+  top: 55px;
+  left: 238px;
+}
+
+#materialBalance .layout .layout_left img.sanjiao1{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 55px;
   left: 240px;
 }
+#materialBalance .layout .layout_left img.sanjiao2{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 444px;
+  left: 390px;
+  transform: rotate(-90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao3{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 444px;
+  left: 520px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao4{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 498px;
+  left: 130px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao5{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 550px;
+  left: 130px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao6{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 600px;
+  left: 130px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao7{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 650px;
+  left: 130px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao8{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 596px;
+  left: 346px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao9{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 12px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao10{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 76px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao11{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 140px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao12{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 150px;
+  left: -150px;
+  transform: rotate(-180deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao13{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 260px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao14{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 320px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao15{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 440px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao16{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 500px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao17{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 560px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao18{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 630px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
 #materialBalance .layout .layout_left img.luzi2-img2{
   width: 104px;
   height: 122px;
@@ -394,8 +743,8 @@
 }
 
 #materialBalance .layout .layout_left img.arror6{
-  width: 597px;
-  height: 80px;
+  width: 581px;
+  height: 60px;
   padding-bottom: 0;
   margin-bottom: 0;
   position: absolute;
@@ -409,8 +758,8 @@
   padding-bottom: 0;
   margin-bottom: 0;
   position: absolute;
-  top: 378px;
-  left: 530px;
+  top: 398px;
+  left: 537px;
 }
 
 #materialBalance .layout .layout_left img.arror8{
@@ -458,6 +807,144 @@
   top: 650px;
   left: 130px;
 }
+
+#materialBalance .layout .layout_left img.arror13{
+  width: 260px;
+  height: 34px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 596px;
+  left: 346px;
+}
+
+#materialBalance .layout .layout_left img.arror14{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 12px;
+  left: -90px;
+}
+
+
+#materialBalance .layout .layout_left img.arror15{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 76px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror16{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 140px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror17{
+  width: 129px;
+  height: 57px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 176px;
+  left: -136px;
+}
+
+#materialBalance .layout .layout_left img.arror18{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 260px;
+  left: -90px;
+}
+
+#materialBalance .layout .layout_left img.arror19{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 320px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror20{
+  width: 152px;
+  height: 69px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 440px;
+  left: -160px;
+}
+#materialBalance .layout .layout_left img.arror21{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 500px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror22{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 560px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror23{
+  width: 166px;
+  height: 34px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 630px;
+  left: -172px;
+}
+
+
+
+#materialBalance .layout .layout_left img.arror24{
+  width: 98px;
+  height: 264px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 32px;
+  left: -93px;
+}
+
+#materialBalance .layout .layout_left img.arror25{
+  width: 98px;
+  height: 244px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 327px;
+  left: -93px;
+}
+
+#materialBalance .layout .layout_left img.arror26{
+  width: 70px;
+  height: 251px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 387px;
+  left: -66px;
+}
+
 .wordBox{
   width: 100%;
   height: 100%;
@@ -503,7 +990,7 @@
 }
 
 .wordBox .location.loc8{
-    top: 650px;
+    top: 665px;
     left: 630px;
 }
 
@@ -535,9 +1022,18 @@
   left: 250px; 
 }
 .elementBox.elementBoxLoc3{
-  top: 0px;
+  top: 14px;
   left: 820px; 
 }
+.elementBox.elementBoxLoc4{
+  top: 14px;
+  left: 1030px; 
+}
+
+.elementBox.elementBoxLoc5{
+  top: 14px;
+  left: 1020px; 
+}
 
 .elementBox .elementItem span{
   transform: scale(.8,.8);
@@ -553,6 +1049,114 @@
   padding-top: 0;
 }
 
+.sekuaiBox .item{
+  font-size: 16px;
+  font-weight: bold;
+  position: absolute;
+  &::after{
+    content: '';
+    display: block;
+    width: 40px;
+    height: 7px;
+
+  }
+}
+
+.sekuaiBox .item.pos1{
+  left: 100px;
+  top: 5px;
+}
+.sekuaiBox .item.pos2{
+  left: 100px;
+  top: 60px;
+}
+.sekuaiBox .item.pos3{
+  left: 100px;
+  top: 120px;
+}
+.sekuaiBox .item.pos4{
+  left: 100px;
+  top: 170px;
+}
+
+
+.sekuaiBox .item.pos5{
+  left: 95px;
+  top: 8px;
+}
+
+.sekuaiBox .item.pos6{
+  left: 95px;
+  top: 68px;
+}
+.sekuaiBox .item.pos7{
+  left: 95px;
+  top: 128px;
+}
+.sekuaiBox .item.pos8{
+  left: 95px;
+  top: 188px;
+}
+.sekuaiBox .item.pos9{
+  left: 95px;
+  top: 248px;
+}
+.sekuaiBox .item.pos10{
+  left: 95px;
+  top: 308px;
+}
+.sekuaiBox .item.pos11{
+  left: 95px;
+  top: 368px;
+}
+.sekuaiBox .item.pos12{
+  left: 95px;
+  top: 428px;
+}
+.sekuaiBox .item.pos13{
+  left: 95px;
+  top: 488px;
+}
+.sekuaiBox .item.pos14{
+  left: 95px;
+  top: 548px;
+}
+
+.sekuaiBox .item.pos15{
+  left: 95px;
+  top: 608px;
+}
+
+.sekuaiBox .item.blue{
+  color: rgb(32, 99, 255);
+  &::after{
+    background-color: rgb(32, 99, 255);
+  }
+}
+
+.sekuaiBox .item.red{
+  color: #f74f4e;
+  &::after{
+    background-color: #f74f4e;
+  }
+}
+
+.sekuaiBox .item.yellow{
+  color: #ffdb34;
+  &::after{
+    background-color: #ffdb34;
+  }
+}
+
+.dizuo{
+  width: 58px;
+  height: 36px;
+  background: url(../../assets/img/dizuo.png);
+  background-size: 100% 100%;
+  padding-top: 10px;
+  margin-bottom: 20px;
+}
+
 @keyframes move { 
 	  0% {left: -50%;	 opacity: 0; }
 	  60% { left: 10%; opacity: 1 }
@@ -632,6 +1236,120 @@
     animation-name:move7;
   }
 
+@keyframes move8 { 
+	  0% {top: 200px;	 opacity: 0; }
+    25% { top: 170px; opacity: .3; }
+	  50% { top: 140px; opacity: .5; }
+    75% { top: 110px; opacity: .7; }
+	  100% {top: 55px;opacity: 1;}
+	}		 
+  
+	.move8{
+    -webkit-animation-name:move8;
+    animation-name:move8;
+  }
+
+  @keyframes move9 { 
+	  0% {left: 390px;	 opacity: 0; }
+    75% { left: -170px;top: 444px; opacity: .7; transform: rotate(-180deg);}
+	  100% {left: -170px;top:490px; opacity: 1;transform: rotate(-180deg);}
+	}		 
+  
+	.move9{
+    -webkit-animation-name:move9;
+    animation-name:move9;
+  }
+
+  @keyframes move10 { 
+	  0% {left: 520px;	top:465px; opacity: 0; }
+    25% {left: 556px; top: 465px;	 opacity: .3; transform: rotate(0deg);}
+    50% { left: 556px;top: 398px; opacity: .7; transform: rotate(90deg);}
+	  100% {left: 768px;top:398px; opacity: 1;transform: rotate(90deg);}
+	}		 
+  
+	.move10{
+    -webkit-animation-name:move10;
+    animation-name:move10;
+  }
+
+@keyframes move11 { 
+	  0% {top: 498px;left: 130px;	 opacity: 0; }
+	  100% {left: 215px; opacity: 1;}
+	}		 
+  
+	.move11{
+    -webkit-animation-name:move11;
+    animation-name:move11;
+  }
+
+
+@keyframes move12 { 
+	  0% {top: 550px;left: 130px;	 opacity: 0; }
+	  100% {left: 215px; opacity: 1;}
+	}		 
+  
+	.move12{
+    -webkit-animation-name:move12;
+    animation-name:move12;
+  }
+
+
+@keyframes move13 { 
+	  0% {top: 600px;left: 130px;	 opacity: 0; }
+	  100% {left: 215px; opacity: 1;}
+	}		 
+  
+	.move13{
+    -webkit-animation-name:move13;
+    animation-name:move13;
+  }
+
+
+@keyframes move14 { 
+	  0% {top: 650px;left: 130px;	 opacity: 0; }
+	  100% {left: 215px; opacity: 1;}
+	}		 
+  
+	.move14{
+    -webkit-animation-name:move14;
+    animation-name:move14;
+  }
+
+
+
+
+@keyframes move15 { 
+	  0% {top: 596px;left: 346px;	 opacity: 0; }
+	  100% {left: 570px; opacity: 1;}
+	}		 
+  
+	.move15{
+    -webkit-animation-name:move15;
+    animation-name:move15;
+  }
+@keyframes move16 { 
+	  0% {left: -90px;	 opacity: 0; }
+	  100% {left: -50px; opacity: 1;}
+	}		 
+  
+	.move16{
+    -webkit-animation-name:move16;
+    animation-name:move16;
+  }
+
+  @keyframes move17 { 
+	  0% {top:150px;left:-150px;transform: rotate(-180deg); opacity: 0;}
+    25%{top:175px;left:-150px;transform: rotate(-270deg);}
+    50%{top:175px;left:-105px;transform: rotate(-180deg);}
+    75%{top:200px;left:-105px;transform: rotate(-270deg);}
+	  100% {top:200px;left:-40px;transform: rotate(-270deg);opacity: 1;}
+	}		 
+  
+	.move17{
+    -webkit-animation-name:move17;
+    animation-name:move17;
+  }
+
 
 	.ar-animated{
     -webkit-animation-duration:1.5s;
@@ -642,6 +1360,31 @@
     -webkit-animation-iteration-count:infinite;
     font-style:inherit;
     -webkit-animation-timing-function:linear;
+    animation-timing-function:linear;}
+
+  .ar-animated1{
+    -webkit-animation-duration:3s;
+    animation-duration:3s;
+    -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-animated3{
+    -webkit-animation-duration:1s;
+    animation-duration:1s;
+    -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;}