SaaS-DataScreen/src/views/index/components/statistical/index.scss

@import "@/assets/css/function.scss";
@import "@/assets/css/mixin.scss";
.statistical{
  padding: halfH(26) halfW(20) 0;
  @include clearBox;
  display: flex;
  &>.item{
    margin-right: halfW(18);
    overflow: hidden;
    .item-label{
      padding-top: halfH(40);
      font-size:halfH(14);
      color: #01DFFC;
    }
    .item-txt{
      padding-top: halfH(14);
      font-size:halfH(28);
      color:#fff;
      // animation: bubble 10s infinite;
    }
    &:last-child{
      margin-right: 0;
    }
    &.mianzhi{
      .item-txt{
        animation-delay: 0;
      }
    }
    &.xiangmu{
      .item-txt{
        animation-delay: 8s;
      }
    }
    &.fangwu{
      .item-txt{
        animation-delay: 3s;
      }
    }
    &.zhuhu{
      .item-txt{
        animation-delay: 6s;
      }
    }
    &.cheliang{
      .item-txt{
        animation-delay: 8s;
      }
    }
  }
  @keyframes bubble {
    0% {
      transform: rotateY(0);
      // transform: scale3d(0.5, 0.5, 0.5);
    }
    50% {
      transform: rotateY(90deg);
      // transform: scale3d(1, 1, 1.5);
    }
    100% {
      transform: rotateY(0);
      // transform: scale3d(0.5, 0.5, 0.5);
    }
  }
}