newcpms/ui/src/views/front/steamBalance.vue

<template>
  <div id="steamBalance">
    <!--<div class="bg-color-black">-->
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">蒸汽平衡表</span>
        </div>
      </div>

      <div style="text-align: center; background-color: rgba($color: #ffffff, $alpha: 0.3);
        height: 100%;position: relative;">
        <div class="line1">
          <img src="@/assets/steamImg/line1.png" style="width:1px;height:635px">
        </div>

         <div class="line2">
          <img src="@/assets/steamImg/line1.png" style="width:1px;height:635px">
        </div>

        <div class="lu1-1">
          <img src="@/assets/steamImg/1.png" style="width:80px;height:86px">
          <p class="word1-1">Furnace</p>
        </div>

        <div class="lu1-2">
          <img src="@/assets/steamImg/2.png" style="width:170px;height:40px">
          <p class="word1-1">E-481</p>
        </div>

        <div class="lu1-3">
          <img src="@/assets/steamImg/3.png" style="width:130px;height:86px">
          <p class="word1-1">K300</p>
        </div>

        <div class="lu2-1">
          <img src="@/assets/steamImg/4.png" style="width:80px;height:90px">
          <p class="word1-1">SUB</p>
        </div>

        <div class="lu2-2">
          <img src="@/assets/steamImg/4.png" style="width:80px;height:90px">
          <p class="word1-1">AEU/PGE</p>
        </div>

        <div class="lu2-3">
          <img src="@/assets/steamImg/2.png" style="width:145px;height:35px">
          <p class="word1-1">E-372</p>
        </div>

        <div class="lu2-4">
          <img src="@/assets/steamImg/2.png" style="width:145px;height:35px">
          <p class="word1-1">H520/C230</p>
        </div>

         <div class="lu2-5">
          <img src="@/assets/steamImg/5.png" style="width:70px;height:50px">
          <p class="word1-1">PH2</p>
        </div>

         <div class="lu2-6">
          <img src="@/assets/steamImg/5.png" style="width:70px;height:50px">
          <p class="word1-1">PH1</p>
        </div>

        <div class="lu2-7">
          <img src="@/assets/steamImg/3.png" style="width:130px;height:86px">
          <p class="word1-1">K600</p>
        </div>

         <div class="lu2-8">
          <img src="@/assets/steamImg/3.png" style="width:130px;height:86px">
          <p class="word1-1">K650</p>
        </div>

        <div class="lu2-9">
          <img src="@/assets/steamImg/6.png" style="width:20px;height:140px">
          <p class="word1-1">Flare</p>
        </div>

        <div class="lu2-10">
          <img src="@/assets/steamImg/4.png" style="width:80px;height:90px">
          <p class="word1-1">SCTU</p>
        </div>

        <div class="lu2-11">
          <img src="@/assets/steamImg/2.png" style="width:145px;height:35px">
          <p class="word1-1">E275/285</p>
        </div>

        <div class="lu2-12">
          <img src="@/assets/steamImg/7.png" style="width:100px;height:60px">
          <p class="word1-1">vacuum ejectors</p>
        </div>

        <div class="lu3-1">
          <img src="@/assets/steamImg/2.png" style="width:145px;height:35px">
        </div>

        <!-- 管道 -->
        <div class="guan1">
          <img src="@/assets/steamImg/8.png" style="width:1065px;height:29px">
          <img src="@/assets/steamImg/aniimg1.png" style="width:6px;height:12px" class="aniMove">
        </div>
        <!-- 管道 -->
        <div class="guan2">
          <img src="@/assets/steamImg/9.png" style="width:1174px;height:30px">
          <img src="@/assets/steamImg/aniimg2.png" style="width:6px;height:12px" class="aniMove">
        </div>

        <!-- 管道 -->
        <div class="guan3">
          <img src="@/assets/steamImg/10.png" style="width:864px;height:30px">
          <img src="@/assets/steamImg/aniimg3.png" style="width:6px;height:12px" class="aniMove">
        </div>

         <!-- 管道 -->
        <div class="guan4">
          <img src="@/assets/steamImg/11.png" style="width:1174px;height:30px">
          <img src="@/assets/steamImg/aniimg4.png" style="width:6px;height:12px" class="aniMove">
        </div>


        <!-- 箭头 -->
        <div class="jiantou1">
          <img src="@/assets/steamImg/jiantou1.png" style="width:72px;height:44px">
          <p class="num">{{ dashboarddata.steamSsinfur }}</p>
        </div>

        <div class="jiantou2">
          <img src="@/assets/steamImg/jiantou2.png" style="width:8px;height:172px">
           <p class="num">{{ dashboarddata.steamSsoutaeu }}</p>
        </div>

        <div class="jiantou3">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
          <p class="num">{{ dashboarddata.steamSsoutlet }}</p>
        </div>

        <div class="jiantou4">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
          <p class="num">{{ dashboarddata.steamSsoutesi }}</p>
        </div>

        <div class="jiantou5">
          <img src="@/assets/steamImg/jiantou4.png" style="width:8px;height:139px">
          <p class="num">{{ dashboarddata.steamHsoutpjiu }}</p>
        </div>

        <div class="jiantou6">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:59px">
          <p class="num">{{ dashboarddata.steamHsoutlet }}</p>
        </div>

        <div class="jiantou7">
          <img src="@/assets/steamImg/jiantou5.png" style="width:8px;height:34px">
          <p class="num">{{ dashboarddata.steamHsoutesan }}</p>
        </div>

        <div class="jiantou8">
          <img src="@/assets/steamImg/jiantou5.png" style="width:8px;height:34px">
           <p class="num">{{ dashboarddata.steamHsouthwu }}</p>
        </div>

        <div class="jiantou9">
          <img src="@/assets/steamImg/jiantou6.png" style="width:31px;height:116px">
           <p class="num">{{ dashboarddata.steamHsoutpher }}</p>
        </div>

        <div class="jiantou10">
          <img src="@/assets/steamImg/jiantou7.png" style="width:39px;height:116px">
          <p class="num">{{ dashboarddata.steamHsoutphyi }}</p>
        </div>

        <div class="jiantou11">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:39px">
          <p class="num">{{ dashboarddata.steamHsoutklz }}</p>
        </div>

        <div class="jiantou12">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:39px">
          <p class="num">{{ dashboarddata.steamHsoutkliu }}</p>
        </div>

        <div class="jiantou13">
          <img src="@/assets/steamImg/jiantou8.png" style="width:54px;height:39px">
          <p class="num">{{ dashboarddata.steamHhpsub }}</p>
        </div>

        <div class="jiantou14">
          <img src="@/assets/steamImg/jiantou9.png" style="width:38px;height:48px">
        </div>

        <div class="jiantou15">
          <img src="@/assets/steamImg/jiantou10.png" style="width:41px;height:62px">
          <p class="num">{{ dashboarddata.steamMsoutaeu }}</p>
        </div>

        <div class="jiantou16">
          <img src="@/assets/steamImg/jiantou11.png" style="width:77px;height:40px">
          <p class="num">{{ dashboarddata.steamMsoutflare }}</p>
        </div>

        <div class="jiantou17">
          <img src="@/assets/steamImg/jiantou12.png" style="width:22px;height:69px">
          <p class="num">{{ dashboarddata.steamMsoutsctu }}</p>
        </div>


        <div class="jiantou18">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
          <p class="num">{{ dashboarddata.steamMsouteer }}</p>
        </div>

        <div class="jiantou19">
          <img src="@/assets/steamImg/jiantou14.png" style="width:8px;height:210px">
          <p class="num">{{ dashboarddata.steamLsinpher }}</p>
        </div>

        <div class="jiantou20">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
          <p class="num">{{ dashboarddata.steamMsoutfur }}</p>
        </div>

        <div class="jiantou21">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
          <p class="num">{{ dashboarddata.steamMsoutva }}</p>
        </div>

        <div class="jiantou22">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
          <p class="num">{{ dashboarddata.steamMsouttracing }}</p>
        </div>

        <div class="jiantou23">
          <img src="@/assets/steamImg/jiantou13.png" style="width:111px;height:33px">
           <!-- <p class="num">41</p> -->
        </div>

        <div class="jiantou24">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
          <p class="num">{{ dashboarddata.steamLsoutvjiu }}</p>
        </div>

        <div class="jiantou25">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
          <p class="num">{{ dashboarddata.steamLsouttracing }}</p>
        </div>

        <div class="jiantou26">
          <p class="num">{{ dashboarddata.steamSsoutksan }}</p>
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
        </div>
        <div class="jiantou27">
          <img src="@/assets/steamImg/jiantou15.png" style="width:30px;height:76px">
          <p class="num">{{ dashboarddata.steamHsoutaeu }}</p>
        </div>

        <div class="jiantou28">
          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
        </div>

        <div class="kuang pos-1">
            <p>Letdown</p>
        </div>

        <div class="kuang pos-2">
            <p>P900</p>
        </div>

        <div class="kuang pos-3">
            <p>Letdown</p>
        </div>

        <div class="kuang pos-4">
            <p>Furnace</p>
        </div>

        <div class="kuang pos-5">
            <p>Steam Tracing</p>
        </div>
        <div class="kuang pos-6">
            <p>V900</p>
        </div>
        <div class="kuang pos-7">
            <p>V303</p>
        </div>
        <div class="kuang pos-8">
            <p>Steam Tracing</p>
        </div>

        <div class="jiantoulan pos-1">
          <p class="text1">BFW</p>
          <img src="@/assets/steamImg/jiantoulan1.png" style="width:75px;height:31px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan1">
        </div>
        <div class="jiantoulan pos-2">
          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan2">
          <p class="num2">{{ dashboarddata.steamHsinlet }}</p>
        </div>
        <div class="jiantoulan pos-3">
          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan3">
           <p class="num2">{{ dashboarddata.steamHsinksan }}</p>
        </div>
        <div class="jiantoulan pos-4">
          <img src="@/assets/steamImg/jiantoulan1.png" style="width:100px;height:31px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan4">
          <p class="num2">{{ dashboarddata.steamSsoutsc }}</p>
          <p class="name">SC</p>
        </div>
        <div class="jiantoulan pos-5">
          <img src="@/assets/steamImg/jiantoulan3.png" style="width:80px;height:347px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan5">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan5-2">
          <p class="num2">{{ dashboarddata.steamHsinsub }}</p>
          <p class="num3">{{ dashboarddata.steamLsinsub }}</p>
        </div>
        <div class="jiantoulan pos-6">
          <img src="@/assets/steamImg/jiantoulan4.png" style="width:31px;height:150px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan6">
          <p class="num2">{{ dashboarddata.steamLsinpjiu }}</p>
        </div>
        <div class="jiantoulan pos-7">
          <img src="@/assets/steamImg/jiantoulan5.png" style="width:45px;height:251px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan7">
          <p class="num2">{{ dashboarddata.steamLsinaeu }}</p>
        </div>
         <div class="jiantoulan pos-8">
          <img src="@/assets/steamImg/jiantoulan6.png" style="width:34px;height:89px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan8">
          <p class="num2">{{ dashboarddata.steamMsinaeu }}</p>
        </div>
        <div class="jiantoulan pos-9">
          <img src="@/assets/steamImg/jiantoulan11.png" style="width:31px;height:75px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan9">
          <p class="num2">{{ dashboarddata.steamMsinlet }}</p>
        </div>
        <div class="jiantoulan pos-10">
          <img src="@/assets/steamImg/jiantoulan7.png" style="width:30px;height:46px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan10">
          <p class="num2">{{ dashboarddata.steamLsoutsctu }}</p>
        </div>
        <div class="jiantoulan pos-11">
          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan11">
          <p class="num2">{{ dashboarddata.steamLsineer }}</p>
        </div>
        <div class="jiantoulan pos-12">
          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan12">
          <p class="num2">{{ dashboarddata.steamMsinphyi }}</p>
        </div>
        <div class="jiantoulan pos-13">
          <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan13">
          <p class="num2">{{ dashboarddata.steamMsinkliu }}</p>
        </div>
        <div class="jiantoulan pos-14">
          <img src="@/assets/steamImg/jiantoulan10.png" style="width:201px;height:64px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan14-1">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan14-2">
          <p class="num2">{{ dashboarddata.steamHsoutsc }}</p>
          <p class="num3">{{ dashboarddata.steamHsoutkliu }}</p>
          <p class="name">SC</p>
        </div>
        <div class="jiantoulan pos-15">
          <img src="@/assets/steamImg/jiantoulan9.png" style="width:114px;height:127px">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-1">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-2">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-3">
          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-4">
           <p class="num2">{{ dashboarddata.steamLsoutesan }}</p>
           <p class="num3">{{ dashboarddata.steamLsoutewuliu }}</p>
           <p class="num4">{{ dashboarddata.steamLsoutesi }}</p>
           <p class="num5">{{ dashboarddata.steamLsoutother }}</p>

           <div class="pos15-word-box wordpos-1">
              E363
           </div>
           <div class="pos15-word-box wordpos-2">
              E560
           </div>
           <div class="pos15-word-box wordpos-3">
              E470/E475
           </div>
           <div class="pos15-word-box wordpos-4">
              E120/344/903/930
           </div>
        </div>

      </div>
  </div>
</template>

<script>
  import { selectLast } from "@/api/aspen/dashboarddata";

  export default {
    name: "steamBalance",
    props: ['dashboarddata'],
    data () {
      return {
        // 查询参数
        queryParams: {},
      }
    },
    created() {
    },
    methods: {
      /** 查询dashboard抓取数据列表 */
      // getList()
      // {
      //   selectLast(this.queryParams).then(response => {
      //     this.dashboarddata = response.data;
      //   });
      // }
    }
  }
</script>

<style lang="scss">
#steamBalance{
  width: 1270px;
  height: 750px;
  .line1{
    position: absolute;
    top: 0;
    left: 160px;
  }
  .line2{
    position: absolute;
    top: 0;
    left: 430px;
  }
  .jiantoulan{
      position: absolute;
      &.pos-1{
        top: 110px;
        left: 460px;
        .text1{
          position: absolute;
          left: 20px;
        }
        .aniMovelan1{
          -webkit-animation-name:aniMovelan1;
            animation-name:aniMovelan1;
            -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 aniMovelan1 {
            0% {left: 0; opacity: 0;}
            100% {left:40px;opacity: 1;}
          }
      }
      &.pos-2{
        top: 130px;
        left: 560px;
        .num2{
          top: 20px;
          left: 20px;
          color: #3659ab;
          position: absolute;
        }

        .aniMovelan2{
          -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;
            transform: rotate(90deg);
          }
          @keyframes aniMovelan2 {
            0% {top: 0; opacity: 0;}
            100% {top:40px;opacity: 1;}
          }
      }
      &.pos-3{
        top: 130px;
        left: 1030px;
        .num2{
          top: 20px;
          left: 20px;
          color: #3659ab;
          position: absolute;
        }
        .aniMovelan3{
          -webkit-animation-name:aniMovelan3;
            animation-name:aniMovelan3;
            -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;
            transform: rotate(90deg);
          }
          @keyframes aniMovelan3 {
            0% {top: 0; opacity: 0;}
            100% {top:40px;opacity: 1;}
          }
      }
      &.pos-4{
        top: 80px;
        left: 1090px;
         .num2{
          top: 0;
          left: 35px;
          color: #3659ab;
          position: absolute;
        }
         .name{
          top: -10px;
          left: 70px;
          color: #fff;
          position: absolute;
        }

         .aniMovelan4{
          -webkit-animation-name:aniMovelan4;
            animation-name:aniMovelan4;
            -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 aniMovelan4 {
            0% {left: 0; opacity: 0;}
            100% {left:50px;opacity: 1;}
          }
      }
      &.pos-5{
        top: 200px;
        left: 52px;
        .num2{
          top: 50px;
          left: 20px;
          color: #3659ab;
          position: absolute;
        }
        .num3{
          top: 280px;
          left: 70px;
          color: #3659ab;
          position: absolute;
        }
         .aniMovelan5{
            -webkit-animation-name:aniMovelan5;
              animation-name:aniMovelan5;
              -webkit-animation-duration:3s;
              animation-duration:3s;
              -webkit-animation-fill-mode:both;
              animation-fill-mode:both;
              animation-iteration-count:infinite;
              -webkit-animation-iteration-count:infinite;
              font-style:inherit;
              -webkit-animation-timing-function:linear;
              animation-timing-function:linear;
              position: absolute;
              top: 72px;
              left: 0px;
            }
            @keyframes aniMovelan5 {
              0% {left: 10px;top: 72px; opacity: 0;}
              25%{left: 47px;top: 72px; opacity: 1;transform: rotate(90deg);}
              100% {left: 47px; top:314px;opacity: 0;transform: rotate(90deg);}
            }

          .aniMovelan5-2{
            -webkit-animation-name:aniMovelan5-2;
              animation-name:aniMovelan5-2;
              -webkit-animation-duration:2s;
              animation-duration:2s;
              -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: 72px;
              left: 0px;
              transform: rotate(-90deg);
            }
            @keyframes aniMovelan5-2 {
              0% {top: 72px; opacity: 0;}
              100% {top:0;opacity: 1;}
            }
      }
      &.pos-6{
        top: 400px;
        left: 190px;
        .num2{
          top: 50px;
          left: 20px;
          color: #3659ab;
          position: absolute;
        }

        .aniMovelan6{
          -webkit-animation-name:aniMovelan6;
            animation-name:aniMovelan6;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: -1px;
            transform: rotate(90deg);
          }
          @keyframes aniMovelan6 {
            0% {top: 0; opacity: 0;}
            100% {top:118px;opacity: 1;}
          }
      }
      &.pos-7{
        top: 300px;
        left: 240px;
        .num2{
          top: 103px;
          right: 32px;
          color: #3659ab;
          position: absolute;
        }

        .aniMovelan7{
          -webkit-animation-name:aniMovelan7;
            animation-name:aniMovelan7;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: -1px;
            transform: rotate(90deg);
          }
          @keyframes aniMovelan7 {
            0% {top: 0; opacity: 0;}
            100% {top:215px;opacity: 1;}
          }
      }
      &.pos-8{
        top: 300px;
        left: 370px;
        .num2{
          top: 30px;
          left: 25px;
          color: #3659ab;
          position: absolute;
        }

         .aniMovelan8{
          -webkit-animation-name:aniMovelan8;
            animation-name:aniMovelan8;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: 0; opacity: 0;}
            100% {top:60px;opacity: 1;}
          }
      }
      &.pos-9{
        top: 300px;
        left: 470px;
        .num2{
          top: 20px;
          left: 20px;
          color: #3659ab;
          position: absolute;
        }

         .aniMovelan9{
          -webkit-animation-name:aniMovelan9;
            animation-name:aniMovelan9;
            -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;
            transform: rotate(90deg);
          }
          @keyframes aniMovelan9 {
            0% {top: 0; opacity: 0;}
            100% {top:40px;opacity: 1;}
          }
      }
      &.pos-10{
        top: 510px;
        left: 330px;
         .num2{
          top: 27px;
          left: 20px;
          color: #3659ab;
          position: absolute;
        }
         .aniMovelan10{
          -webkit-animation-name:aniMovelan10;
            animation-name:aniMovelan10;
            -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: 26px;
            left: -2px;
            transform: rotate(-90deg);
          }
          @keyframes aniMovelan10 {
            0% {top: 26px; opacity: 0;}
            100% {top: 0;opacity: 1;}
          }
      }
      &.pos-11{
        top: 500px;
        left: 520px;
         .num2{
          top: 14px;
          left: 20px;
          color: #3659ab;
          position: absolute;
        }

        .aniMovelan11{
          -webkit-animation-name:aniMovelan11;
            animation-name:aniMovelan11;
            -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;
            transform: rotate(90deg);
          }
          @keyframes aniMovelan11 {
            0% {top: 0; opacity: 0;}
            100% {top: 26px;opacity: 1;}
          }
      }
      &.pos-12{
        top: 340px;
        left: 780px;
        .num2{
          top: 14px;
          left: 20px;
          color: #3659ab;
          position: absolute;
        }

        .aniMovelan12{
          -webkit-animation-name:aniMovelan12;
            animation-name:aniMovelan12;
            -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;
            transform: rotate(90deg);
          }
          @keyframes aniMovelan12 {
            0% {top: 0; opacity: 0;}
            100% {top: 26px;opacity: 1;}
          }
      }
      &.pos-13{
        top: 340px;
        left: 940px;
        .num2{
          top: 8px;
          left: 20px;
          color: #3659ab;
          position: absolute;
        }

         .aniMovelan13{
          -webkit-animation-name:aniMovelan13;
            animation-name:aniMovelan13;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: -15px;
            left: -2px;
            transform: rotate(90deg);
          }
          @keyframes aniMovelan13 {
            0% {top: -15px; opacity: 0;}
            100% {top: 26px;opacity: 1;}
          }
      }
      &.pos-14{
        top: 300px;
        left: 1020px;
        .num2{
          top: 30px;
          left: 10px;
          color: #3659ab;
          position: absolute;
        }
        .num3{
          top: 27px;
          left: 110px;
          color: #3659ab;
          position: absolute;
        }
        .name{
          top: 30px;
          left: 173px;
          color: #fff;
          position: absolute;
        }

        .aniMovelan14-1{
          -webkit-animation-name:aniMovelan14-1;
            animation-name:aniMovelan14-1;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: 34px;
            left: 0px;
            // transform: rotate(90deg);
          }
          @keyframes aniMovelan14-1 {
            0% {left:0 ; opacity: 0;}
            100% {left: 166px;opacity: 1;}
          }

          .aniMovelan14-2{
          -webkit-animation-name:aniMovelan14-2;
            animation-name:aniMovelan14-2;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: 10px;
            left: 80px;
            transform: rotate(90deg);
          }
          @keyframes aniMovelan14-2 {
            0% {top:10px ; opacity: 0;}
            100% {top: 30px;opacity: 1;}
          }
      }
      &.pos-15{
        top: 580px;
        left: 820px;
        .num2{
          top: 0px;
          left: 50px;
          color: #3659ab;
          position: absolute;
        }
        .num3{
          top: 32px;
          left: 46px;
          color: #3659ab;
          position: absolute;
        }
        .num4{
          top: 62px;
          left: 46px;
          color: #3659ab;
          position: absolute;
        }
        .num5{
          top: 94px;
          left: 46px;
          color: #3659ab;
          position: absolute;
        }
        .pos15-word-box{
          background: url(../../assets/steamImg/12.png);
          width: 150px;
          height: 30px;
          line-height: 30px;
          background-size: 100% 100%;
          position: absolute;
          &.wordpos-1{
            top: -2px;
            left: 110px;
          }
          &.wordpos-2{
            top: 32px;
            left: 110px;
          }
          &.wordpos-3{
            top: 67px;
            left: 110px;
          }
          &.wordpos-4{
            top: 101px;
            left: 110px;
          }
        }

        .aniMovelan15-1{
          -webkit-animation-name:aniMovelan15-1;
            animation-name:aniMovelan15-1;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: 0px;
            left: -12px;
          }
          @keyframes aniMovelan15-1 {
            0% {left:0 ; opacity: 0;}
            100% {left: 80px;opacity: 1;}
          }

          .aniMovelan15-2{
          -webkit-animation-name:aniMovelan15-2;
            animation-name:aniMovelan15-2;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: 34px;
            left: 15px;
          }
          @keyframes aniMovelan15-2 {
            0% {left:15px ; opacity: 0;}
            100% {left: 80px;opacity: 1;}
          }

          .aniMovelan15-3{
          -webkit-animation-name:aniMovelan15-3;
            animation-name:aniMovelan15-3;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: 62px;
            left: 15px;
          }
          @keyframes aniMovelan15-3 {
            0% {left:15px ; opacity: 0;}
            100% {left: 80px;opacity: 1;}
          }

          .aniMovelan15-4{
          -webkit-animation-name:aniMovelan15-4;
            animation-name:aniMovelan15-4;
            -webkit-animation-duration:2s;
            animation-duration:2s;
            -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: 96px;
            left: -12px;
          }
          @keyframes aniMovelan15-4 {
            0% {left:-12px ; opacity: 0;}
            100% {left: 80px;opacity: 1;}
          }

      }
  }
  .kuang{
    background: url(../../assets/steamImg/kuang.png);
    width: 92px;
    height: 47px;
    background-size: 100% 100%;
    position: absolute;
    font-size: 18px;
    color: rgb(178, 201, 255);
    line-height: 47px;
    &.pos-1{
     top: 100px;
      left: 530px;
    }
    &.pos-2{
     top: 340px;
     left: 160px;
    }
    &.pos-3{
      top: 245px;
      left: 440px;
    }
    &.pos-4{
    top: 450px;
    left: 710px;
    }
    &.pos-5{
      top: 450px;
      left: 1060px;
      width: 120px;
      p{
        transform: scale(.8,.8);
      }
    }
    &.pos-6{
      top: 640px;
      left: 190px;
    }
    &.pos-7{
      top: 640px;
      left: 290px;
    }
    &.pos-8{
        top: 640px;
        left: 480px;
        width: 120px;
         p{
          transform: scale(.8,.8);
        }
    }
  }
  .lu1-1{
    position: absolute;
    top: 60px;
    left: 40px;
    .word1-1{
        bottom: -20px;
        left: 20px;
    }
  }
  .lu1-2{
    position: absolute;
    top: 90px;
    left: 680px;
    .word1-1{
      left: 60px;
      top: 30px;
    }
  }

  .lu1-3{
    position: absolute;
    top: 70px;
    left: 960px;
    .word1-1{
      left: 80px;
      top: 50px;
    }
  }
  .lu2-1{
    position: absolute;
    top: 330px;
    left: 30px;
    .word1-1{
      top: 75px;
      left: 8px;
    }
  }
  .lu2-2{
    position: absolute;
    top: 220px;
    left: 260px;
  }
  .lu2-3{
    position: absolute;
    top: 220px;
    left: 560px;
    .word1-1{
      left: 50px;
      bottom: -13px;
    }
  }
  .lu2-4{
    position: absolute;
    top: 220px;
    left: 740px;
    .word1-1{
      left: 40px;
      bottom: -15px;
    }
  }
  .lu2-5{
    position: absolute;
    top: 300px;
    left: 610px;
    .word1-1{
      bottom: -7px;
    }
  }
  .lu2-6{
    position: absolute;
    top: 300px;
    left: 760px;
    .word1-1{
      bottom: -7px;
    }
  }

  .lu2-7{
    position: absolute;
    top: 240px;
    left: 900px;
    .word1-1{
      left: 70px;
      top: 53px;
    }
  }

  .lu2-8{
    position: absolute;
    top: 240px;
    left: 1060px;
    .word1-1{
      left: 100px;
      top: 53px;
    }
  }
  .lu2-9{
    position: absolute;
    top: 380px;
    left: 272px;
    .word1-1{
      bottom: -18px;
      left: -6px;
    }
  }

  .lu2-10{
    position: absolute;
    top: 430px;
    left: 330px;
    .word1-1{
      left: 30px;
      bottom: -14px;
    }
  }

  .lu2-11{
    position: absolute;
    top: 450px;
    left: 460px;
    .word1-1{
      left: 35px;
      bottom: -14px;
    }
  }

  .lu2-12{
    position: absolute;
    top: 450px;
    left: 900px;
    .word1-1{
      left: -50px;
      width: 200%;
    }
  }

  .lu3-1{
    position: absolute;
    top: 630px;
    left: 700px;
  }

  .num1-1{
    color: #3993ae;
    padding-bottom: 15px;
    position: absolute;
  }
  .word1-1{
    color: #afc8ff;
    font-size: 16px;
    padding-top: 7px;
    position: absolute;
  }

  .guan1{
    position: absolute;
    top: 20px;
    left: 130px;
    .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: 7px;
        left: 10px;
      }
      @keyframes aniMove {
        0% {left: 10px; }
        100% {left: 1050px;}
     }
  }

  .guan2{
    position: absolute;
    top: 170px;
    left: 20px;
     .aniMove{
      -webkit-animation-name:aniMove2;
        animation-name:aniMove2;
        -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: 9px;
        left: 10px;
      }
      @keyframes aniMove2 {
        0% {left: 10px; }
        100% {left: 1160px;}
     }
  }

  .guan3{
    position: absolute;
    top: 380px;
    left: 330px;
     .aniMove{
      -webkit-animation-name:aniMove3;
        animation-name:aniMove3;
        -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: 7px;
        left: 10px;
      }
      @keyframes aniMove3 {
        0% {left: 10px; }
        100% {left: 850px;}
     }
  }

  .guan4{
    position: absolute;
    top: 550px;
    left: 20px;
    .aniMove{
      -webkit-animation-name:aniMove4;
        animation-name:aniMove4;
        -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: 9px;
        left: 10px;
      }
      @keyframes aniMove4 {
        0% {left: 10px; }
        100% {left: 1160px;}
     }
  }
  .jiantou1{
    position: absolute;
    top: 10px;
    left: 80px;
    .num{
      color: #3694b0;
      position: absolute;
      left: -26px;
      top: 20px;
    }
    // img{
    //     -webkit-animation-name:jiantou1-img;
    //     animation-name:jiantou1-img;
    //     -webkit-animation-duration:3s;
    //     animation-duration:3s;
    //     -webkit-animation-fill-mode:both;
    //     animation-fill-mode:both;
    //     animation-iteration-count:infinite;
    //     -webkit-animation-iteration-count:infinite;
    //     font-style:inherit;
    //     -webkit-animation-timing-function:linear;
    //     animation-timing-function:linear;
    // }
    // @keyframes jiantou1-img {
    //     0% {opacity: 0;}
    //     50% {opacity: 1;}
    //     100% {opacity: 0;}
    // }
  }
  .jiantou2{
    position: absolute;
    top: 55px;
    left: 280px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 60px;
    }
  }
  .jiantou3{
    position: absolute;
    top: 50px;
    left: 570px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 20px;
    }
  }
  .jiantou4{
    position: absolute;
    top: 40px;
    left: 750px;
     .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 20px;
    }
  }
  .jiantou5{
    position: absolute;
    top: 200px;
    left: 200px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 50px;
    }
  }
   .jiantou6{
    position: absolute;
    top: 180px;
    left: 480px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 28px;
    }
  }

  .jiantou7{
    position: absolute;
    top: 190px;
    left: 630px;
     .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 10px;
    }
  }

  .jiantou8{
    position: absolute;
    top: 190px;
    left: 800px;
    .num{
      color: #3694b0;
      position: absolute;
      left: -20px;
      top: 10px;
      width: 100px;
    }
    .num2{
      color: #3694b0;
      position: absolute;
      left: -22px;
      top: 20px;
      width: 100px;
    }
  }

  .jiantou9{
    position: absolute;
    top: 200px;
    left: 685px;
     .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 70px;
    }
  }

  .jiantou10{
    position: absolute;
    top: 200px;
    left: 725px;
     .num{
      color: #3694b0;
      position: absolute;
      left: 7px;
      top: 70px;
    }
  }

  .jiantou11{
    position: absolute;
    top: 200px;
    left: 950px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 7px;
      top: 10px;
    }
  }

  .jiantou12{
    position: absolute;
    top: 200px;
    left: 1100px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 7px;
      top: 10px;
    }
  }

  .jiantou13{
    position: absolute;
    top: 430px;
    left: 10px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 20px;
      top: 20px;
    }
  }
  .jiantou14{
    position: absolute;
    top: 420px;
    left: 75px;
  }

  .jiantou15{
    position: absolute;
    top: 350px;
    left: 320px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 5px;
      top: 10px;
      width: 100%;
    }
  }

  .jiantou16{
    position: absolute;
    top: 390px;
    left: 300px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 80px;
      top: 15px;
    }
  }

  .jiantou17{
    position: absolute;
    top: 400px;
    left: 400px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 35px;
      top: 15px;
    }
  }

  .jiantou18{
    position: absolute;
    top: 400px;
    left: 540px;
    .num{
      color: #3694b0;
      position: absolute;
      left: -20px;
      top: 20px;
      width: 100px;
    }
  }

  .jiantou19{
    position: absolute;
    top: 348px;
    left: 658px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 90px;
    }
  }

  .jiantou20{
    position: absolute;
    top: 400px;
    left: 750px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 20px;
    }
  }

  .jiantou21{
    position: absolute;
    top: 400px;
    left: 940px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 20px;
    }
  }

  .jiantou22{
    position: absolute;
    top: 400px;
    left: 1100px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 20px;
    }
  }

  .jiantou23{
    position: absolute;
    top: 600px;
    left: 240px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 7px;
    }
  }

  .jiantou24{
    position: absolute;
    top: 585px;
    left: 330px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 0;
    }
  }

  .jiantou25{
    position: absolute;
    top: 585px;
    left: 520px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 20px;
    }
  }

  .jiantou26{
    position: absolute;
    top: 40px;
    left: 970px;
     .num{
      color: #3694b0;
      position: absolute;
      left: 10px;
      top: 20px;
    }
  }

  .jiantou27{
    position: absolute;
    top: 180px;
    left: 340px;
    .num{
      color: #3694b0;
      position: absolute;
      left: 33px;
      top: 33px;
      width: 140%;
    }
    .num2{
      color: #3694b0;
      position: absolute;
      left: 40px;
      top: 50px;
      width: 130%;
    }
  }
  .jiantou28{
    position: absolute;
    top: 577px;
    left: 770px;
  }
}

</style>