蒸汽图

ui/.env.development

@@ -2,8 +2,8 @@
 ENV = 'development'
 
 # CPMS管理系统/开发环境
-VUE_APP_BASE_API = '/dev-api'
-#VUE_APP_BASE_API = 'http://47.114.101.16:8090'
+#VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = 'http://47.114.101.16:8090'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

ui/src/views/monitor/elec/frontElecTwo.vue

@@ -2,11 +2,277 @@
   <div id="frontTwo">
     <div class="bg-color-black">
       <div class="content-box">
-        <div>
-        <img src="@/assets/image/elec/4-12.png" width="1880" height="920px">
+        <!-- <img src="@/assets/image/elec/4-12.png" width="1880" height="920px"> -->
+        <!-- 管道 -->
+        <div class="guan guan1">
+          <img src="@/assets/image/elec/4-5-1.png" style="width:88%;height:20px">
+          <img src="@/assets/image/elec/aniimg1.png" style="width:8px;height:20px" class="aniMove">
+        </div>
+        <!-- 管道 -->
+        <div class="guan guan2">
+          <img src="@/assets/image/elec/4-5-2.png" style="width:88%;height:20px">
+          <img src="@/assets/image/elec/aniimg2.png" style="width:8px;height:20px" class="aniMove">
+        </div>
+
+        <!-- 管道 -->
+        <div class="guan guan3">
+          <img src="@/assets/image/elec/4-5-3.png" style="width:88%;height:20px">
+          <img src="@/assets/image/elec/aniimg3.png" style="width:8px;height:20px" class="aniMove">
+        </div>
+
+         <!-- 管道 -->
+        <div class="guan guan4">
+          <img src="@/assets/image/elec/4-5-4.png" style="width:88%;height:20px">
+          <img src="@/assets/image/elec/aniimg4.png" style="width:8px;height:20px" class="aniMove">
+        </div>
+
+        <!-- 文字框 -->
+        <div class="kuangBox pos1-1">
+            <div class="kuang">7326</div>
+            <div class="word">PP HHP</div>
+        </div>
+
+         <div class="kuangBox pos1-2">
+            <div class="kuang">1232</div>
+            <div class="word">NCIP MP</div>
+        </div>
+
+         <div class="kuangBox pos1-3">
+            <div class="kuang">543</div>
+            <div class="word">PP MP</div>
+        </div>
+
+        <div class="kuangBox pos1-4">
+            <div class="kuang">859</div>
+            <div class="word">PP LP</div>
+        </div>
+
+        <div class="kuangBox pos1-5">
+            <div class="kuang">456</div>
+            <div class="word">LPG</div>
+        </div>
+
+        <div class="kuangBox pos1-6">
+            <div class="kuang">652</div>
+            <div class="word">P3802</div>
+        </div>
+
+        <div class="kuangBox pos1-7">
+            <div class="kuang">235</div>
+            <div class="word">SUB</div>
+        </div>
+
+        <div class="kuangBox pos1-8">
+            <div class="kuang">491</div>
+            <div class="word">LP放空</div>
+        </div>
+
+        <div class="kuangBox pos1-9">
+            <div class="kuang">J1501</div>
+            <div class="word">入： <span>123</span> 出：<span>324</span></div>
+            <img src="@/assets/image/elec/4-9.png" style="width:80px;height:40px" class="img">
+        </div>
+
+        <div class="kuangBox pos1-10">
+            <div class="kuang">BCC</div>
+        </div>
+
+         <div class="kuangBox pos1-11">
+            <div class="kuang">60</div>
+        </div>
+
+        <div class="kuangBox pos1-12">
+            <div class="kuang">235</div>
+            <div class="word">SYN</div>
+        </div>
+
+        <div class="kuangBox pos1-13">
+            <div class="kuang">345</div>
+            <div class="word">J1509</div>
+        </div>
+
+        <div class="kuangBox pos1-14">
+            <div class="kuang">345</div>
+            <div class="word">LDPE TS</div>
+        </div>
+
+        <div class="kuangBox pos1-15">
+            <div class="kuang">509</div>
+            <div class="word">YPC</div>
+        </div>
+
+        <div class="kuangBox pos1-16">
+            <div class="kuang">509</div>
+            <div class="word">J1503</div>
+        </div>
+
+        <div class="kuangBox pos1-17">
+            <div class="kuang">235</div>
+            <div class="word">LDPE TM</div>
+        </div>
+
+        <div class="kuangBox pos1-18">
+            <div class="kuang">165</div>
+        </div>
+
+        <div class="kuangBox pos1-19">
+            <div class="kuang">28</div>
+        </div>
+
+        <div class="kuangBox pos1-20">
+            <div class="kuang">111</div>
+            <div class="word">J1501</div>
+        </div>
+
+        <div class="kuangBox pos1-21">
+            <div class="kuang">29</div>
+            <div class="word">J1502</div>
+        </div>
+        <!-- 文字框end -->
+
+        <!-- 圆框 -->
+        <div class="kuangBox-yuan pos2-1">
+            <div class="kuang1">HHP</div>
+        </div>
+
+        <div class="kuangBox-yuan pos2-2">
+            <div class="kuang2">HP</div>
+        </div>
+
+        <div class="kuangBox-yuan pos2-3">
+            <div class="kuang3">MP</div>
+        </div>
+
+        <div class="kuangBox-yuan pos2-4">
+            <div class="kuang4">LP</div>
+        </div>
+        <!-- 圆框end -->
+
+        <!-- 多边形框 -->
+        <div class="kuangBox-duo pos3-1">
+            <div class="kuang1">897</div>
+            <div class="word2">HP用户</div>
+        </div>
+
+        <div class="kuangBox-duo pos3-2">
+            <div class="kuang2">1055</div>
+             <div class="word2">MP用户</div>
+        </div>
+
+        <div class="kuangBox-duo pos3-3">
+            <div class="kuang3">540</div>
+             <div class="word2">LP用户</div>
+        </div>
+
+        <!-- 多边形框end -->
+
+
+        <!-- 箭头 -->
+        <div class="jiantou pos1-1">
+            <img src="@/assets/image/elec/4-6-1.png" style="width:60px;height:40px">
+        </div>
+
+        <div class="jiantou pos1-2">
+            <img src="@/assets/image/elec/4-6-2.png" style="width:120px;height:250px">
+          <div class="word3 wordPos1-1">569</div>
+          <div class="word3 wordPos1-2">274</div>
+        </div>
+
+        <div class="jiantou pos1-3">
+            <img src="@/assets/image/elec/4-6-4.png" style="width:90px;height:40px">
+        </div>
+
+        <div class="jiantou pos1-4">
+            <img src="@/assets/image/elec/4-6-3.png" style="width:30px;height:140px">
+        </div>
+
+        <div class="jiantou pos1-5">
+            <img src="@/assets/image/elec/4-6-5.png" style="width:15px;height:70px">
+        </div>
+
+        <div class="jiantou pos1-6">
+            <img src="@/assets/image/elec/4-6-6.png" style="width:120px;height:16px">
+        </div>
+
+        <div class="jiantou pos1-7">
+            <img src="@/assets/image/elec/4-6-7.png" style="width:120px;height:16px">
+            <div class="word3 wordPos4-7-1">509</div>
+            <div class="word4 wordPos4-7-2">NG</div>
+        </div>
+
+        <div class="jiantou pos1-8">
+            <img src="@/assets/image/elec/4-6-8.png" style="width:210px;height:60px">
+            <div class="word">H2</div>
+        </div>
+
+        <div class="jiantou pos1-9">
+            <img src="@/assets/image/elec/4-6-9.png" style="width:16px;height:70px">
+        </div>
+
+        <div class="jiantou pos1-10">
+            <img src="@/assets/image/elec/4-6-9.png" style="width:16px;height:70px">
+        </div>
+
+
+        <div class="jiantou pos2-1">
+            <img src="@/assets/image/elec/4-7-1.png" style="width:30px;height:70px">
+            <div class="word">AA/AE</div>
+
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-2">
+            <img src="@/assets/image/elec/4-7-1.png" style="width:30px;height:70px">
+            <div class="word">GAA</div>
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-3">
+            <img src="@/assets/image/elec/4-7-6.png" style="width:30px;height:80px">
+            <div class="word">SYN</div>
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-4">
+            <img src="@/assets/image/elec/4-7-3.png" style="width:30px;height:150px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-5">
+            <img src="@/assets/image/elec/4-7-2.png" style="width:30px;height:260px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-6">
+            <img src="@/assets/image/elec/4-7-3.png" style="width:30px;height:150px">
+            <div class="word">P9801</div>
+            <div class="word2">出： <span>48</span></div>
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-7">
+            <img src="@/assets/image/elec/4-7-4.png" style="width:30px;height:330px">
+            <div class="word">入： <span>123</span></div>
+            <div class="word2">491</div>
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
 
+        <div class="jiantou pos2-8">
+            <img src="@/assets/image/elec/4-7-3.png" style="width:30px;height:170px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
         </div>
 
+        <div class="jiantou pos2-9">
+            <img src="@/assets/image/elec/4-7-3.png" style="width:30px;height:170px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-10">
+            <img src="@/assets/image/elec/4-7-5.png" style="width:100px;height:140px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+        <!-- 箭头end -->
+
       </div>
     </div>
   </div>
@@ -77,5 +343,760 @@
         }
       }
     }
+
+    .content-box{
+      position: relative;
+      width: 100%;
+      height: 100%;
+      .guan{
+        position: absolute;
+        width: 100%;
+        left: 200px;
+        &1{
+          top: 130px;
+        }
+        &2{
+          top: 270px;
+          .aniMove{
+              animation-delay:1s;
+              -webkit-animation-delay:1s; /* Safari 和 Chrome */
+            }
+        }
+        &3{
+           top: 530px;
+            .aniMove{
+                animation-delay:2s;
+              -webkit-animation-delay:2s; /* Safari 和 Chrome */
+              }
+        }
+        &4{
+           top: 720px;
+           .aniMove{
+              animation-delay:3s;
+            -webkit-animation-delay:3s; /* Safari 和 Chrome */
+            }
+        }
+      }
+        .aniMove{
+          -webkit-animation-name:aniMove;
+            animation-name:aniMove;
+            -webkit-animation-duration:10s;
+            animation-duration:10s;
+            -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: 10px;
+          }
+       @keyframes aniMove {
+            0% {left: 0%; }
+            100% {left: 88%;}
+        }
+
+        .word{
+            font-size: 18px;
+            color: rgb(78, 128, 248);
+            text-align: center;
+        }
+        @function kuangPosFun($args) {
+            @return ($args/1600)*100%;
+        }
+
+      .kuangBox{
+        position: absolute;
+         .kuang{
+            background: url(../../../assets/image/elec/4-2.png);
+            width: 1.3rem;
+            height: .7rem;
+            background-size: 100% 100%;
+            font-size: 24px;
+            color: rgb(178, 201, 255);
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        &.pos1{
+          &-1{
+              top: 70px;
+              left: kuangPosFun(50);
+          }
+
+          &-2{
+              top: 310px;
+              left: kuangPosFun(50);
+          }
+
+          &-3{
+              top: 510px;
+              left: kuangPosFun(50);
+          }
+
+          &-4{
+              top: 700px;
+              left: kuangPosFun(50);
+          }
+
+          &-5{
+              top: 350px;
+              left: kuangPosFun(420);
+          }
+
+          &-6{
+              top: 160px;
+              left: kuangPosFun(600);
+          }
+
+          &-7{
+              top: 350px;
+              left: kuangPosFun(650);
+          }
+
+          &-8{
+              top: 780px;
+              left: kuangPosFun(660);
+          }
+
+          &-9{
+              top: 200px;
+              left: kuangPosFun(930);
+              .word{
+                font-size: 18px;
+                  color: rgb(78, 128, 248);
+                  position: absolute;
+                  width: 200px;
+                  top: -30px;
+                  left: -40px;
+                  span{
+                     font-size: 24px;
+                     color: rgb(178, 201, 255);
+                     margin-right: 10px;
+                  }
+              }
+              .img{
+                position: absolute;
+                bottom: -44px;
+                left: 16px;
+              }
+          }
+
+          &-10{
+              top: 350px;
+              left: kuangPosFun(860);
+          }
+
+          &-11{
+              top: 20px;
+              left: kuangPosFun(1070);
+          }
+
+          &-12{
+              top: 420px;
+              left: kuangPosFun(1020);
+          }
+
+          &-13{
+              top: 600px;
+              left: kuangPosFun(1070);
+          }
+
+          &-14{
+              top: 790px;
+              left: kuangPosFun(1020);
+          }
+
+          &-15{
+              top: 350px;
+              left: kuangPosFun(1140);
+          }
+          &-16{
+              top: 600px;
+              left: kuangPosFun(1230);
+          }
+
+          &-17{
+              top: 790px;
+              left: kuangPosFun(1190);
+          }
+
+          &-18{
+              top: 20px;
+              left: kuangPosFun(1240);
+          }
+
+          &-19{
+              top: 20px;
+              left: kuangPosFun(1400);
+          }
+
+          &-20{
+              top: 170px;
+              left: kuangPosFun(1320);
+          }
+
+          &-21{
+              top: 370px;
+              left: kuangPosFun(1330);
+          }
+
+        }
+      }
+
+      .kuangBox-yuan{
+          position: absolute;
+        .kuang1{
+            background: url(../../../assets/image/elec/4-3-1.png);
+            width: .9rem;
+            height: .9rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            color: rgb(230, 198, 48);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .kuang2{
+            background: url(../../../assets/image/elec/4-3-2.png);
+            width: .9rem;
+            height: .9rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            color: rgb(68, 216, 174);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .kuang3{
+            background: url(../../../assets/image/elec/4-3-3.png);
+            width: .9rem;
+            height: .9rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            color: rgb(45, 194, 232);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .kuang4{
+            background: url(../../../assets/image/elec/4-3-4.png);
+            width: .9rem;
+            height: .9rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            color: rgb(194, 218, 223);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        &.pos2{
+          &-1{
+             top: 50px;
+             left: kuangPosFun(410);
+          }
+
+          &-2{
+             top: 190px;
+             left: kuangPosFun(410);
+          }
+
+          &-3{
+             top: 450px;
+             left: kuangPosFun(410);
+          }
+
+          &-4{
+             top: 640px;
+             left: kuangPosFun(410);
+          }
+        }
+      }
+
+      .kuangBox-duo{
+          position: absolute;
+
+        .kuang1{
+            background: url(../../../assets/image/elec/4-4-1.png);
+            width: 1rem;
+            height: 1rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            font-weight: bold;
+            color: rgb(68, 216, 174);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .kuang2{
+            background: url(../../../assets/image/elec/4-4-2.png);
+            width: 1rem;
+            height: 1rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            font-weight: bold;
+            color: rgb(44, 194, 231);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .kuang3{
+            background: url(../../../assets/image/elec/4-4-3.png);
+            width: 1rem;
+            height: 1rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            font-weight: bold;
+            color: rgb(193, 218, 222);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &.pos3{
+          &-1{
+             top: 320px;
+             left: kuangPosFun(1470);
+             .word2{
+                font-size: 18px;
+                color: rgb(68, 216, 174);
+                text-align: center;
+              }
+          }
+
+          &-2{
+             top: 570px;
+             left: kuangPosFun(1470);
+             .word2{
+                font-size: 18px;
+                color: rgb(44, 194, 231);
+                text-align: center;
+              }
+          }
+
+          &-3{
+             top: 750px;
+             left: kuangPosFun(1470);
+             .word2{
+                font-size: 18px;
+                color: rgb(193, 218, 222);
+                text-align: center;
+              }
+          }
+        }
+      }
+
+      .jiantou{
+        position: absolute;
+        &.pos1-{
+           &1{
+              top: 95px;
+              left: kuangPosFun(140);
+           }
+
+           &2{
+              top: 338px;
+              left: kuangPosFun(130);
+              .word3{
+                font-size: 24px;
+                color: rgb(178, 201, 255);
+                position: absolute;
+                &.wordPos1{
+                  &-1{
+                      top: 75px;
+                      left: 0;
+                  }
+                  &-2{
+                      top: 75px;
+                      right: -40px;
+                  }
+                }
+              }
+           }
+
+           &3{
+              top: 686px;
+              left: kuangPosFun(130);
+           }
+           &4{
+              top: 145px;
+              left: kuangPosFun(720);
+           }
+           &5{
+              top: 285px;
+              left: kuangPosFun(700);
+           }
+           &6{
+              top: 370px;
+              left: kuangPosFun(540);
+           }
+           &7{
+              top: 370px;
+              left: kuangPosFun(740);
+              .word3{
+                font-size: 24px;
+                color: rgb(178, 201, 255);
+                position: absolute;
+                &.wordPos4-7-{
+                  &1{
+                    top: -25px;
+                    left: 30px;
+                  }
+                }
+              }
+
+              .word4{
+                font-size: 18px;
+                color: rgb(78, 128, 248);
+                position: absolute;
+                &.wordPos4-7-{
+                  &2{
+                    top: 16px;
+                    left: 40px;
+                  }
+                }
+              }
+           }
+           &8{
+              top: 370px;
+              left: kuangPosFun(960);
+              .word{
+                font-size: 18px;
+                color: rgb(78, 128, 248);
+                position: absolute;
+                top: -20px;
+                left: 110px;
+              }
+           }
+           &9{
+              top: 732px;
+              left: kuangPosFun(1060);
+           }
+           &10{
+              top: 732px;
+              left: kuangPosFun(1230);
+           }
+        }
+        &.pos2-{
+           &1{
+              top: 65px;
+              left: kuangPosFun(1100);
+              .word{
+                  font-size: 18px;
+                 color: rgb(78, 128, 248);
+                 position: absolute;
+                 top: 24px;
+                 left: 30px;
+              }
+
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: -2px;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:40px;opacity: 1;}
+                }
+           }
+
+           &2{
+              top: 65px;
+              left: kuangPosFun(1270);
+              .word{
+                 font-size: 18px;
+                 color: rgb(78, 128, 248);
+                 position: absolute;
+                 top: 24px;
+                 left: 30px;
+              }
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: -2px;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:40px;opacity: 1;}
+                }
+           }
+           &3{
+              top: 65px;
+              left: kuangPosFun(1430);
+              .word{
+                 font-size: 18px;
+                 color: rgb(78, 128, 248);
+                 position: absolute;
+                 top: 24px;
+                 left: 30px;
+              }
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:40px;opacity: 1;}
+                }
+           }
+           &4{
+              top: 130px;
+              left: kuangPosFun(1280);
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &5{
+              top: 280px;
+              left: kuangPosFun(1300);
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &6{
+              top: 390px;
+              left: kuangPosFun(890);
+              .word{
+                 font-size: 18px;
+                 color: rgb(78, 128, 248);
+                 position: absolute;
+                 top: 50px;
+                 left: 30px;
+              }
+              .word2{
+                  font-size: 18px;
+                  color: rgb(78, 128, 248);
+                  position: absolute;
+                  width: 200px;
+                  top: 90px;
+                  left: 40px;
+                  span{
+                     font-size: 24px;
+                     color: rgb(178, 201, 255);
+                  }
+              }
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &7{
+              top: 400px;
+              left: kuangPosFun(830);
+              .word{
+                  font-size: 18px;
+                  color: rgb(78, 128, 248);
+                  position: absolute;
+                  width: 200px;
+                  top: 100px;
+                  left: -140px;
+                  span{
+                     font-size: 24px;
+                     color: rgb(178, 201, 255);
+                  }
+              }
+              .word2{
+                font-size: 24px;
+                color: rgb(178, 201, 255);
+                position: absolute;
+                top: 213px;
+                left: 30px;
+              }
+
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &8{
+              top: 560px;
+              left: kuangPosFun(1030);
+               .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &9{
+              top: 560px;
+              left: kuangPosFun(1200);
+               .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &10{
+              top: 720px;
+              left: kuangPosFun(750);
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan2;
+                  animation-name:aniMovelan2;
+                  -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;
+                  position: absolute;
+                  top: 0;
+                  left: -2px;
+                }
+                @keyframes aniMovelan2 {
+                  0% {top: 0; opacity: 0;}
+                  50% {top: 110px; left:0px; opacity: .5; transform: rotate(-90deg);}
+                  100% {top:110px; left:60px; opacity: 1;transform: rotate(-90deg)}
+                }
+           }
+        }
+      }
+    }
   }
 </style>