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

@import '@/assets/css/function';
@import '@/assets/css/theme';

.record{
  color: #fff;
  padding-top: halfH(10);
  .list{
    display: flex;
    align-items: center;
    justify-content: space-around;
    .list-item{
      margin-right: halfW(20);
      text-align: center;
      flex: 1;
      position: relative;
      &:last-child{
        margin-right: 0;
      }
      .logoWrp{
        position: relative;
      }
      .list-item-logo{
        animation: bubble 20s linear infinite;
        margin: auto;
      }
      .list-item-icon{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: block;
      }
      .list-item-desc{
        background: $record-bg no-repeat;
        background-size: 100% 100%;
        width: halfW(196);
        height: halfH(45);
        line-height: halfH(45);
        margin: halfH(22) auto 0;
        font-size: halfH(20);
        color: $record-desc;
        font-weight: bold;
        .desc-tips{
          font-size: halfH(12);
          padding-left: halfH(8);
        }
      }
      .list-item-txt{
        font-size: halfH(16);
        color: $record-txt;
        padding-top: halfH(14);
        font-weight: bold;
      }
      &.shebei{
        .list-item-logo{
          animation-delay: 0;
        }
      }
      &.anfang{
        .list-item-logo{
          animation-delay: 1s;
        }
      }
      &.baojie{
        .list-item-logo{
          animation-delay: 3s;
        }
      }
      &.renwu{
        .list-item-logo{
          animation-delay: 5s;
        }
      }
    }
  }
  @keyframes bubble {
    0% {
      transform: rotate(0);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}