流程页面1添加完成

ui/src/views/monitor/materialChild/materialChild1.vue

@@ -207,16 +207,61 @@
       <img src="@/assets/materialImg/arrow34.png" style="width:91px;height:12px">
       <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan34"> -->
     </div>
-    <div class="line l_35">
-      <img src="@/assets/materialImg/arrow35.png" style="width:180px;height:26px">
-      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan35"> -->
-    </div>
+
     <div class="line l_36">
       <img src="@/assets/materialImg/arrow36.png" style="width:68px;height:20px">
       <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan36"> -->
     </div>
 
+    <div class="line l_37">
+      <img src="@/assets/materialImg/arrow37.png" style="width:180px;height:26px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan37"> -->
+    </div>
+    <div class="line l_38">
+      <img src="@/assets/materialImg/arrow38.png" style="width:20px;height:112px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan38"> -->
+    </div>
+    <div class="line l_39">
+      <img src="@/assets/materialImg/arrow39.png" style="width:710px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan39"> -->
+    </div>
+    <div class="line l_40">
+      <img src="@/assets/materialImg/arrow40.png" style="width:20px;height:502px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan40"> -->
+    </div>
+    <div class="line l_41">
+      <img src="@/assets/materialImg/arrow41.png" style="width:191px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan41"> -->
+    </div>
+    <div class="line l_42">
+      <img src="@/assets/materialImg/arrow42.png" style="width:121px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan42"> -->
+    </div>
+    <div class="line l_43">
+      <img src="@/assets/materialImg/arrow43.png" style="width:20px;height:425px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan43"> -->
+    </div>
+    <div class="line l_44">
+      <img src="@/assets/materialImg/arrow44.png" style="width:748px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan44"> -->
+    </div>
+    <div class="line l_45">
+      <img src="@/assets/materialImg/arrow45.png" style="width:698px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan45"> -->
+    </div>
+    <div class="line l_46">
+      <img src="@/assets/materialImg/arrow46.png" style="width:20px;height:344px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan46"> -->
+    </div>
+    <div class="line l_47">
+      <img src="@/assets/materialImg/arrow47.png" style="width:86px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan47"> -->
+    </div>
 
+    <div class="line l_48">
+      <img src="@/assets/materialImg/arrow28.png" style="width:20px;height:64px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan48"> -->
+    </div>
 
 
 
@@ -380,13 +425,13 @@ export default {
   }
 
   .label_p13 {
-    top: 1003px;
-    left: 882px;
+    top: 1000px;
+    left: 898px;
   }
 
   .label_p14 {
-    top: 1022px;
-    left: 882px;
+    top: 1021px;
+    left: 898px;
   }
 
   .label_p15 {
@@ -1715,14 +1760,49 @@ export default {
       }
     }
 
+    &.l_36 {
+      left: 822px;
+      top: 1012px;
 
-    &.l_35 {
-      left: 295px;
-      top: 472px;
+      .aniMovelan36 {
+        -webkit-animation-name: aniMovelan36;
+        animation-name: aniMovelan36;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan36 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
 
-      .aniMovelan35 {
-        -webkit-animation-name: aniMovelan35;
-        animation-name: aniMovelan35;
+
+    &.l_37 {
+      left: 646px;
+      top: 934px;
+
+      .aniMovelan37 {
+        -webkit-animation-name: aniMovelan37;
+        animation-name: aniMovelan37;
         -webkit-animation-duration: 4s;
         animation-duration: 4s;
         -webkit-animation-fill-mode: both;
@@ -1738,7 +1818,7 @@ export default {
         transform: rotate(90deg);
       }
 
-      @keyframes aniMovelan35 {
+      @keyframes aniMovelan37 {
         0% {
           top: 154px;
           opacity: 0;
@@ -1752,13 +1832,338 @@ export default {
     }
 
 
-    &.l_36 {
+    &.l_38 {
+      left: 815px;
+      top: 945px;
+
+      .aniMovelan38 {
+        -webkit-animation-name: aniMovelan38;
+        animation-name: aniMovelan38;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan38 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_39 {
+      left: 822px;
+      top: 1044px;
+
+      .aniMovelan39 {
+        -webkit-animation-name: aniMovelan39;
+        animation-name: aniMovelan39;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan39 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_40 {
+      left: 1518px;
+      top: 556px;
+
+      .aniMovelan40 {
+        -webkit-animation-name: aniMovelan40;
+        animation-name: aniMovelan40;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan40 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_41 {
+      left: 1337px;
+      top: 554px;
+
+      .aniMovelan41 {
+        -webkit-animation-name: aniMovelan41;
+        animation-name: aniMovelan41;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan41 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_42 {
+      left: 1360px;
+      top: 584px;
+
+
+      .aniMovelan42 {
+        -webkit-animation-name: aniMovelan42;
+        animation-name: aniMovelan42;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan42 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_43 {
+      left: 1469px;
+      top: 583px;
+
+      .aniMovelan43 {
+        -webkit-animation-name: aniMovelan43;
+        animation-name: aniMovelan43;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan43 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_44 {
+      left: 734px;
+      top: 992px;
+
+      .aniMovelan44 {
+        -webkit-animation-name: aniMovelan44;
+        animation-name: aniMovelan44;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan44 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_45 {
+      left: 754px;
+      top: 969px;
+
+      .aniMovelan45 {
+        -webkit-animation-name: aniMovelan45;
+        animation-name: aniMovelan45;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan45 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_46 {
+      left: 1436px;
+      top: 641px;
+
+      .aniMovelan46 {
+        -webkit-animation-name: aniMovelan46;
+        animation-name: aniMovelan46;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -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;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan46 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_47 {
       left: 1364px;
-      top: 633px;
+      top: 636px;
 
-      .aniMovelan36 {
-        -webkit-animation-name: aniMovelan36;
-        animation-name: aniMovelan36;
+      .aniMovelan47 {
+        -webkit-animation-name: aniMovelan47;
+        animation-name: aniMovelan47;
         -webkit-animation-duration: 4s;
         animation-duration: 4s;
         -webkit-animation-fill-mode: both;
@@ -1774,7 +2179,7 @@ export default {
         transform: rotate(90deg);
       }
 
-      @keyframes aniMovelan36 {
+      @keyframes aniMovelan47 {
         0% {
           top: 154px;
           opacity: 0;
@@ -1788,13 +2193,13 @@ export default {
     }
 
 
-    &.l_37 {
-      left: 295px;
-      top: 472px;
+    &.l_48 {
+      left: 1276px;
+      top: 733px;
 
-      .aniMovelan37 {
-        -webkit-animation-name: aniMovelan37;
-        animation-name: aniMovelan37;
+      .aniMovelan48 {
+        -webkit-animation-name: aniMovelan48;
+        animation-name: aniMovelan48;
         -webkit-animation-duration: 4s;
         animation-duration: 4s;
         -webkit-animation-fill-mode: both;
@@ -1810,7 +2215,7 @@ export default {
         transform: rotate(90deg);
       }
 
-      @keyframes aniMovelan37 {
+      @keyframes aniMovelan48 {
         0% {
           top: 154px;
           opacity: 0;
@@ -1822,6 +2227,7 @@ export default {
         }
       }
     }
+
   }
 }
 </style>