<template>
  <div class="funcs-wrapper" @click.stop="toHomeIndex">
    <div class="rotate-wrapper">
      <div class="mod1 mod">隐患排查治理</div>
      <div class="mod2 mod">安全教育培训</div>
      <div class="mod3 mod">风险分级管控</div>
      <div class="mod4 mod">行业信息预警</div>
      <div class="mod5 mod"><span>重要工作部署</span></div>
      <div class="mod6 mod"><span>危险作业备案</span></div>
      <div class="mod7 mod">企业证书管理</div>
      <div class="mod8 mod"><span>特种设备管理</span></div>
      <div class="mod9 mod"><span>数据统计分析</span></div>
    </div>
    <div class="funcs-title">安全生产管理平台</div>
  </div>
</template>
<script>
export default {
  methods: {
    toHomeIndex() {
      this.$router.push({ path: "/home/index" });
    }
  }
};
</script>

<style lang="scss">
@keyframes myRotate1 {
  0% {
    top: 97px;
    left: 839px;
  }
  11% {
    top: 144px;
    left: 475px;
  }
  22% {
    top: 276px;
    left: 138px;
  }
  33% {
    top: 585px;
    left: 217px;
  }
  44% {
    top: 673px;
    left: 577px;
  }
  55% {
    top: 670px;
    left: 988px;
  }
  66% {
    top: 584px;
    right: 1373px;
  }
  77% {
    top: 289px;
    left: 1564px;
  }
  88% {
    top: 147px;
    left: 1247px;
  }
  99% {
    top: 97px;
    left: 839px;
  }
}
.funcs-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  /* background: red; */
  background-image: url("../assets/home/bgggggg.png");
  background-repeat: no-repeat;
  background-position: center;
  .funcs-title {
    position: absolute;
    top: 38.17%;
    left: 50%;
    transform: translateX(-50%);
    font-family: "SourceHanSansCN-Regular";
    color: #2bf7f0;
    font-size: 60px;
  }
  .rotate-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    .mod {
      width: 252px;
      height: 322px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 70px;
      font-family: "SourceHanSansCN-Regular";
      color: #ffffff;
      font-size: 36.08px;
      background-position-y: top;
    }
    .mod1 {
      position: absolute;
      top: 155px;
      left: 466px;
      background-image: url("../assets/home/风险分级.png");
      background-image: url("../assets/home/重要工作部署.png");
      background-image: url("../assets/home/隐患排查-1.png");
      background-position: center;
      background-repeat: no-repeat;
    }
    .mod2 {
      position: absolute;
      top: 97px;
      left: 839px;
      background-image: url("../assets/home/行业信息预警.png");
      background-image: url("../assets/home/风险分级.png");
      background-image: url("../assets/home/证书管理.png");
      background-image: url("../assets/home/安全教育培训.png");
      background-position: center;
      background-repeat: no-repeat;
      transform-origin: 121px 443px;
      // animation: myRotate1 18s infinite linear;
    }
    .mod3 {
      position: absolute;
      top: 299px;
      left: 108px;
      background-image: url("../assets/home/隐患排查-1.png");
      background-image: url("../assets/home/安全教育培训.png");
      background-image: url("../assets/home/风险分级.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 96%;
    }
    .mod4 {
      position: absolute;
      top: 264px;
      left: 1564px;
      background-image: url("../assets/home/证书管理.png");
      background-image: url("../assets/home/行业信息预警.png");
      background-position: center;
      background-repeat: no-repeat;
    }
    .mod5 {
      position: absolute;
      top: 585px;
      left: 281px;
      background-image: url("../assets/home/数据统计分析.png");
      background-image: url("../assets/home/隐患排查-1.png");
      background-image: url("../assets/home/重要工作部署.png");
      background-position: center;
      background-repeat: no-repeat;
      background-position-y: top;
      background-size: 100% 90%;
      span {
        position: relative;
        top: 15px
      }
    }
    .mod6 {
      position: absolute;
      top: 577px;
      left: 1379px;
      background-image: url("../assets/home/特种设备.png");
      background-image: url("../assets/home/行业信息预警.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 95%;
      span {
        position: relative;
        top: 30px;
      }
    }
    .mod7 {
      position: absolute;
      top: 695px;
      left: 652px;
      background-image: url("../assets/home/行业信息预警.png");
      background-image: url("../assets/home/安全教育培训.png");
      background-image: url("../assets/home/证书管理.png");
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: top;
      background-size: 100% 90%;
    }
    .mod8 {
      position: absolute;
      top: 695px;
      left: 1021px;
      background-image: url("../assets/home/特殊作业审批.png");
      background-image: url("../assets/home/数据统计分析.png");
      background-image: url("../assets/home/特种设备.png");
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: top;
      background-size: 100% 90%;
      /* transform: scale(0.9);
      span {
        position: relative;
        top: 5px;
      } */
    }
    .mod9 {
      position: absolute;
      top: 165px;
      left: 1207px;
      background-image: url("../assets/home/重要工作部署.png");
      background-image: url("../assets/home/特种设备.png");
      background-image: url("../assets/home/数据统计分析.png");
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: top;
      background-size: 100% 90%;
      span {
        position: relative;
        top: -14px;
      }
    }
  }
}
</style>
