<template>
  <div class="mt-5 mb-5 createAnimation">
    <div class="flex flex-center ml-5">
      <div class="block flex-center font-color">
        <div class="img1 p3 logo flex flex-center text-center">
          {{
            this.tagsList.length > 0 ? this.tagsList[1].name : '新冠病毒防控'
          }}
        </div>
        <div class="img2 p2 logo2 mt-20 flex flex-center text-center">
          {{ this.tagsList.length > 0 ? this.tagsList[2].name : '重点工程' }}
        </div>
        <div class="img1 p3 logo1 mb-10 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[3].name
              : '财政预算资金使用'
          }}
        </div>
      </div>
      <div class="block flex-center font-color">
        <div class="img1 p2 logo2 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[4].name
              : '财政预算资金使用'
          }}
        </div>
        <div class="img3 p4 logo3 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[5].name
              : '财政预算资金使用'
          }}
        </div>
        <div class="img1 p5 logo5 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[6].name
              : '财政预算资金使用'
          }}
        </div>
      </div>
      <div class="block flex-center-between font-color">
        <div class="img3 p3 logo6 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[7].name
              : '财政预算资金使用'
          }}
        </div>
        <div class="img5 p1 logo4 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[8].name
              : '财政预算资金使用'
          }}
        </div>
        <div class="img1 p1 logo1 mb-10 ml-20 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[9].name
              : '财政预算资金使用'
          }}
        </div>
      </div>
      <div class="block font-color">
        <div class="img1 p3 logo3 flex flex-center text-centerr">
          {{
            this.tagsList.length > 0
              ? this.tagsList[10].name
              : '财政预算资金使用'
          }}
        </div>
        <div class="img2 p2 logo2 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[11].name
              : '财政预算资金使用'
          }}
        </div>
        <div class="img3 p1 logo flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[12].name
              : '财政预算资金使用'
          }}
        </div>
      </div>
      <div class="block font-color">
        <div class="img2 p5 logo1 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[13].name
              : '财政预算资金使用'
          }}
        </div>
        <div class="img3 p1 logo5 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[14].name
              : '财政预算资金使用'
          }}
        </div>
        <div class="img2 p2 logo1 flex flex-center text-center">
          {{
            this.tagsList.length > 0
              ? this.tagsList[15].name
              : '财政预算资金使用'
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import crypto from '@/utils/crypto.js'

export default {
  data() {
    return {
      tagsList: []
    }
  },
  mounted() {
    this.getTagsList()
  },
  methods: {
    getTagsList() {
      const data = {
        current: 1,
        size: 20
      }
      this.$api.biz.getTagsList(data).then(res => {
        let result = JSON.parse(crypto.decryptDES(res, crypto.desKey))
        if (result.code === 200) {
          this.tagsList = result.data.records
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.font-color {
  color: #3caaff;
  background: rgb(246, 245, 245, 0);
}
.img1 {
  width: 50px;
  height: 50px;
  font-size: 8px;
  border-radius: 50px;
  background-size: 50px 50px;
}
.img2 {
  width: 70px;
  height: 70px;
  font-size: 12px;
  border-radius: 50px;
  background-size: 70px 70px;
}
.img3 {
  width: 90px;
  height: 90px;
  font-size: 14px;
  border-radius: 50px;
  background-size: 90px 90px;
}

.img4 {
  width: 100px;
  height: 100px;
  font-size: 18px;
  border-radius: 50px;
  background-size: 100px 100px;
}
.img5 {
  width: 110px;
  height: 110px;
  font-size: 25px;
  border-radius: 50px;
  background-size: 110px 110px;
}
.p1 {
  background-image: url('@/assets/biz-img/p1.png');
}
.p2 {
  background-image: url('@/assets/biz-img/p2.png');
}
.p3 {
  background-image: url('@/assets/biz-img/p3.png');
}
.p4 {
  background-image: url('@/assets/biz-img/p4.png');
}
.p5 {
  background-image: url('@/assets/biz-img/p5.png');
}
.createAnimation {
  width: 750rpx;
  height: 750rpx;
  display: flex;
  .logo {
    animation: huxi 1100ms ease-out infinite alternate;
  }
  .logo1 {
    animation: huxi 1300ms ease-out infinite alternate;
  }
  .logo2 {
    animation: huxi 1400ms ease-out infinite alternate;
  }
  .logo3 {
    animation: huxi 1700ms ease-out infinite alternate;
  }
  .logo4 {
    animation: huxi 1800ms ease-out infinite alternate;
  }
  .logo5 {
    animation: huxi 2200ms ease-out infinite alternate;
  }
  .logo6 {
    animation: huxi 2300ms ease-out infinite alternate;
  }
  @keyframes huxi {
    0% {
      opacity: 0.2;
      transform: scale(0.8);
      transform: translateY(10px);
      box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      transform: translateY(-10px);
    }
  }
}
</style>
