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

<template>
  <div id="frontTwo">
    <div class="bg-color-black">
      <div class="content-box">
        <!-- <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>
</template>

<script>
  export default {
    data() {
      return {
        equipmentType: 1,
      };
    },
    name: "materialBalance",
    components: {
    },
    methods: {
      changeType(val) {
        if (val === 1) {
          this.equipmentType = 1
        }else if (val === 2) {
          this.equipmentType = 2
        }else if (val === 3) {
          this.equipmentType = 3
        }
      }
    }
  }
</script>

<style lang="scss">
  #frontTwo {
    padding: 0.2rem;
    height: 11rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
      height: 11.5rem;
      border-radius: 0.125rem;
    }
    .text {
      color: #ffffff;
    }
    .chart-box {
      margin-top: 0.2rem;
      width: 2.125rem;
      height: 2.125rem;
      .active-ring-name {
        padding-top: 0.125rem;
      }
    }

    .bottom-data {
      .item-box {
        float: right;
        position: relative;
        width: 50%;
        color: #d3d6dd;
        // 金币
        .coin {
          position: absolute;
          left: 0.1rem;
          top: 0.2125rem;
          font-size: 0.25rem;
          color: #ffc107;
        }
        .colorYellow {
          color: yellowgreen;
        }
      }
    }

    .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>