页面修改

ui/src/router/index.js

@@ -605,7 +605,7 @@ export const constantRoutes = [
       {
         path: 'materialChild1',
         component: (resolve) => require(['@/views/monitor/materialChild/materialChild1.vue'], resolve),
-        name: 'model1',
+        name: 'materialChild1',
         hidden: true,
         meta: { title: '工艺流程图' }
       },

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

@@ -20,9 +20,143 @@
     <img src="@/assets/materialImg/node.png" alt="" class="nodeImg2">
     <!-- 文字 -->
     <div class="label label_p1">石脑油进料</div>
-    <div class="label label_p2">石脑油进料</div>
+    <div class="label label_p2">高压锅炉给水</div>
     <div class="label label_p3">900A/B/C</div>
+    <div class="label label_p4">TO SHP HEADER</div>
+    <div class="label label_p5">过热超高压蒸汽</div>
+    <div class="label label_p6">TO 320-C-210</div>
+    <div class="label label_p7">裂解气</div>
+    <div class="label label_p8">FROM 320-E-270</div>
+    <div class="label label_p9">急冷油</div>
+    <div class="label label_p10">TO 320-C-210</div>
+    <div class="label label_p11">裂解气</div>
+
+    <div class="label label_p12">310-E-109A</div>
+    <div class="label label_p13">FROM SLE</div>
+    <div class="label label_p14">310-E-109F/G/H</div>
+
+
+    <div class="label label_p15">310-K-109</div>
+    <div class="label label_p16">310-E-109E</div>
+
+
+    <div class="label label_p17">FROM 320-E-275</div>
+    <div class="label label_p18">稀释蒸汽</div>
+
+    <!-- 特殊文字 -->
+    <div class="label2 label2_p1">310-V-109</div>
+
+    <div class="label2 label2_p2">裂解炉</div>
+    <!-- 标题文字 -->
+    <div class="title_label title_p1">X-112</div>
+    <div class="title_label title_p2">FROM9390-P-</div>
+    <div class="title_label title_p3">X-911</div>
+    <div class="title_label title_p4">X-211</div>
+    <div class="title_label title_p5">X-211</div>
+    <div class="title_label title_p6">X-211</div>
+    <div class="title_label title_p7">310-Z-109A</div>
+    <div class="title_label title_p8">X-212</div>
     <!-- 流程线及动效 -->
+    <div class="line l_1">
+      <img src="@/assets/materialImg/arrow1.png" style="width:745px;height:12px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan1"> -->
+    </div>
+
+    <div class="line l_2">
+      <img src="@/assets/materialImg/arrow2.png" style="width:20px;height:162px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan2"> -->
+    </div>
+
+    <div class="line l_3">
+      <img src="@/assets/materialImg/arrow3.png" style="width:56px;height:150px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan3"> -->
+    </div>
+
+    <div class="line l_4">
+      <img src="@/assets/materialImg/arrow4.png" style="width:853px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan4"> -->
+    </div>
+
+    <div class="line l_5">
+      <img src="@/assets/materialImg/arrow5.png" style="width:626px;height:34px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan5"> -->
+    </div>
+
+
+    <div class="line l_6">
+      <img src="@/assets/materialImg/arrow6.png" style="width:140px;height:254px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan6"> -->
+    </div>
+
+    <div class="line l_7">
+      <img src="@/assets/materialImg/arrow7.png" style="width:65px;height:254px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan7"> -->
+    </div>
+
+    <div class="line l_8">
+      <img src="@/assets/materialImg/arrow8.png" style="width:562px;height:34px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan8"> -->
+    </div>
+
+    <div class="line l_12">
+      <img src="@/assets/materialImg/arrow12.png" style="width:217px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan12"> -->
+    </div>
+
+    <div class="line l_9">
+      <img src="@/assets/materialImg/arrow9.png" style="width:307px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan9"> -->
+    </div>
+
+    <div class="line l_10">
+      <img src="@/assets/materialImg/arrow10.png" style="width:331px;height:102px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan10"> -->
+    </div>
+
+    <div class="line l_13">
+      <img src="@/assets/materialImg/arrow13.png" style="width:20px;height:26px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan13"> -->
+    </div>
+
+    <div class="line l_11">
+      <img src="@/assets/materialImg/arrow11.png" style="width:846px;height:26px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan11"> -->
+    </div>
+
+    <div class="line l_15">
+      <img src="@/assets/materialImg/arrow15.png" style="width:20px;height:589px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15"> -->
+    </div>
+    <div class="line l_16">
+      <img src="@/assets/materialImg/arrow16.png" style="width:20px;height:564px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan16"> -->
+    </div>
+    <div class="line l_17">
+      <img src="@/assets/materialImg/arrow17.png" style="width:20px;height:191px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan17"> -->
+    </div>
+    <div class="line l_18">
+      <img src="@/assets/materialImg/arrow18.png" style="width:20px;height:125px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan18"> -->
+    </div>
+    <div class="line l_19">
+      <img src="@/assets/materialImg/arrow19.png" style="width:295px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan19"> -->
+    </div>
+    <div class="line l_20">
+      <img src="@/assets/materialImg/arrow20.png" style="width:260px;height:12px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan20"> -->
+    </div>
+    <div class="line l_21">
+      <img src="@/assets/materialImg/arrow21.png" style="width:20px;height:131px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan21"> -->
+    </div>
+    <div class="line l_22">
+      <img src="@/assets/materialImg/arrow22.png" style="width:299px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan22"> -->
+    </div>
+
+
   </div>
 </template>
 
@@ -59,7 +193,9 @@ export default {
 
   .stoveImg {
     position: absolute;
-    top: 132px;
+    width: 312px;
+    height: 770px;
+    top: 136px;
     left: 1058px;
   }
 
@@ -131,5 +267,990 @@ export default {
     top: 374px;
     left: 246px;
   }
+
+  .label_p4 {
+    top: 449px;
+    left: 315px;
+  }
+
+  .label_p5 {
+    top: 496px;
+    left: 315px;
+  }
+
+  .label_p6 {
+    top: 607px;
+    left: 314px;
+  }
+
+  .label_p7 {
+    top: 644px;
+    left: 337px;
+  }
+
+  .label_p8 {
+    top: 791px;
+    left: 296px;
+  }
+
+  .label_p9 {
+    top: 828px;
+    left: 323px;
+  }
+
+  .label_p10 {
+    top: 914px;
+    left: 314px;
+  }
+
+  .label_p11 {
+    top: 951px;
+    left: 337px;
+  }
+
+  .label_p12 {
+    top: 670px;
+    left: 880px;
+  }
+
+  .label_p13 {
+    top: 1003px;
+    left: 882px;
+  }
+
+  .label_p14 {
+    top: 1022px;
+    left: 882px;
+  }
+
+  .label_p15 {
+    top: 156px;
+    left: 1245px;
+  }
+
+  .label_p16 {
+    left: 1374px;
+    top: 602px;
+  }
+
+  .label_p17 {
+    left: 1549px;
+    top: 161px;
+  }
+
+  .label_p18 {
+    left: 1576px;
+    top: 205px;
+  }
+
+
+  .label2 {
+    position: absolute;
+    font-family: 'Source Han Sans CN';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 27px;
+    color: #002063;
+    background: rgba(255, 255, 255, 0.5);
+    border: 1px solid #3E5A94;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 4px 16px;
+  }
+
+  .label2_p1 {
+    top: 389px;
+    left: 574px;
+  }
+
+  .label2_p2 {
+    top: 591px;
+    left: 1171px;
+  }
+
+  .title_label {
+    position: absolute;
+    font-family: 'Source Han Sans CN';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 33px;
+    text-align: right;
+    color: #002063;
+    text-shadow: 0px 4px 4px rgba(127, 130, 136, 0.5);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .title_p1 {
+    width: 93px;
+    height: 40px;
+    padding-right: 16px;
+    top: 278px;
+    left: 202px;
+    background: url('../../../assets/materialImg/title_b1.png') no-repeat 30%;
+  }
+
+  .title_p2 {
+    width: 180px;
+    height: 40px;
+    padding-right: 16px;
+    top: 330px;
+    left: 202px;
+    background: url('../../../assets/materialImg/title_b2.png') no-repeat 30%;
+  }
+
+  .title_p3 {
+    width: 93px;
+    height: 40px;
+    padding-left: 16px;
+    top: 465px;
+    left: 202px;
+    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
+  }
+
+  .title_p4 {
+    width: 93px;
+    height: 40px;
+    padding-left: 16px;
+    top: 620px;
+    left: 202px;
+    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
+  }
+
+  .title_p5 {
+    width: 93px;
+    height: 40px;
+    padding-right: 16px;
+    top: 803px;
+    left: 202px;
+    background: url('../../../assets/materialImg/title_b1.png') no-repeat 30%;
+  }
+
+  .title_p6 {
+    width: 93px;
+    height: 40px;
+    padding-left: 16px;
+    top: 925px;
+    left: 202px;
+    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
+  }
+
+  .title_p7 {
+    top: 572px;
+    left: 550px;
+  }
+
+  .title_p8 {
+    width: 93px;
+    height: 40px;
+    padding-left: 16px;
+    top: 174px;
+    left: 1697px;
+    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
+  }
+
+  .line {
+    position: absolute;
+
+    &.l_1 {
+      left: 601px;
+      top: 139px;
+
+      .aniMovelan1 {
+        -webkit-animation-name: aniMovelan1;
+        animation-name: aniMovelan1;
+        -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 aniMovelan1 {
+        0% {
+          left: 0;
+          opacity: 0;
+        }
+
+        100% {
+          left: 740px;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_2 {
+      left: 592px;
+      top: 143px;
+
+      .aniMovelan2 {
+        -webkit-animation-name: aniMovelan2;
+        animation-name: aniMovelan2;
+        -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 aniMovelan2 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_3 {
+      left: 1294px;
+      top: 145px;
+
+      .aniMovelan3 {
+        -webkit-animation-name: aniMovelan3;
+        animation-name: aniMovelan3;
+        -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 aniMovelan3 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_4 {
+      left: 289px;
+      top: 290px;
+
+      .aniMovelan4 {
+        -webkit-animation-name: aniMovelan4;
+        animation-name: aniMovelan4;
+        -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 aniMovelan4 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_5 {
+      left: 1077px;
+      top: 178px;
+
+      .aniMovelan5 {
+        -webkit-animation-name: aniMovelan5;
+        animation-name: aniMovelan5;
+        -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 aniMovelan5 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+
+    &.l_6 {
+      left: 1290px;
+      top: 191px;
+
+      .aniMovelan6 {
+        -webkit-animation-name: aniMovelan6;
+        animation-name: aniMovelan6;
+        -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 aniMovelan6 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_7 {
+      left: 1077px;
+      top: 192px;
+
+      .aniMovelan7 {
+        -webkit-animation-name: aniMovelan7;
+        animation-name: aniMovelan7;
+        -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 aniMovelan7 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+
+    &.l_8 {
+      left: 376px;
+      top: 334px;
+
+      .aniMovelan8 {
+        -webkit-animation-name: aniMovelan8;
+        animation-name: aniMovelan8;
+        -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 aniMovelan8 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_12 {
+      left: 925px;
+      top: 341px;
+
+      .aniMovelan12 {
+        -webkit-animation-name: aniMovelan12;
+        animation-name: aniMovelan12;
+        -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 aniMovelan12 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+    &.l_9 {
+      left: 837px;
+      top: 398px;
+
+      .aniMovelan9 {
+        -webkit-animation-name: aniMovelan9;
+        animation-name: aniMovelan9;
+        -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 aniMovelan9 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+
+    &.l_10 {
+      left: 811px;
+      top: 371px;
+
+      .aniMovelan10 {
+        -webkit-animation-name: aniMovelan10;
+        animation-name: aniMovelan10;
+        -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 aniMovelan10 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_13 {
+      left: 804px;
+      top: 371px;
+
+      .aniMovelan13 {
+        -webkit-animation-name: aniMovelan13;
+        animation-name: aniMovelan13;
+        -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 aniMovelan13 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+
+    &.l_11 {
+      left: 295px;
+      top: 472px;
+
+      .aniMovelan11 {
+        -webkit-animation-name: aniMovelan11;
+        animation-name: aniMovelan11;
+        -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 aniMovelan11 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+    &.l_15 {
+      left: 728px;
+      top: 419px;
+
+      .aniMovelan15 {
+        -webkit-animation-name: aniMovelan15;
+        animation-name: aniMovelan15;
+        -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 aniMovelan15 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_16 {
+      left: 750px;
+      top: 420px;
+
+      .aniMovelan16 {
+        -webkit-animation-name: aniMovelan16;
+        animation-name: aniMovelan16;
+        -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 aniMovelan16 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_17 {
+      left: 773px;
+      top: 420px;
+
+      .aniMovelan17 {
+        -webkit-animation-name: aniMovelan17;
+        animation-name: aniMovelan17;
+        -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 aniMovelan17 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_18 {
+      left: 796px;
+      top: 419px;
+
+      .aniMovelan18 {
+        -webkit-animation-name: aniMovelan18;
+        animation-name: aniMovelan18;
+        -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 aniMovelan18 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_19 {
+      left: 825px;
+      top: 513px;
+
+      .aniMovelan19 {
+        -webkit-animation-name: aniMovelan19;
+        animation-name: aniMovelan19;
+        -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 aniMovelan19 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_20 {
+      left: 806px;
+      top: 530px;
+
+      .aniMovelan20 {
+        -webkit-animation-name: aniMovelan20;
+        animation-name: aniMovelan20;
+        -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 aniMovelan20 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_21 {
+      left: 821px;
+      top: 518px;
+
+      .aniMovelan21 {
+        -webkit-animation-name: aniMovelan21;
+        animation-name: aniMovelan21;
+        -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 aniMovelan21 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_22 {
+      left: 778px;
+      top: 595px;
+
+      .aniMovelan22 {
+        -webkit-animation-name: aniMovelan22;
+        animation-name: aniMovelan22;
+        -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 aniMovelan22 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_23 {
+      left: 295px;
+      top: 472px;
+
+      .aniMovelan23 {
+        -webkit-animation-name: aniMovelan23;
+        animation-name: aniMovelan23;
+        -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 aniMovelan23 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+  }
 }
 </style>