.topContent {
  padding: 8px 12px;
  margin: 16px 0;
  color: #1c50b3;
  font-size: 28px;
  .titleContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .time {
      // font-size: 20px;
      color: #6e6e6e;
    }
    .iconLeft {
      width: 38px;
      height: 38px;
      background: url('@/assets/smartOps/icon06.png') no-repeat center;
      background-size: 100% 100%;
    }
    .iconRight {
      .iconLeft;
      margin-left: 20px;
      background: url('@/assets/smartOps/icon07.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
  .middle {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .left {
      position: relative;
      .in {
        width: 212px;
        height: 212px;
        background: url('@/assets/smartOps/icon04.png') no-repeat center;
        background-size: 100% 100%;
        animation-name: scaleUp;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
      .out {
        position: absolute;
        left: 0;
        top: 0;
        width: 212px;
        height: 212px;
        background: url('@/assets/smartOps/icon05.png') no-repeat center;
        background-size: 100% 100%;
        animation-name: spin;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .item {
        width: 585px;
        height: 52px;
        white-space: nowrap;
        margin-bottom: 10px;
        background: url('@/assets/smartOps/icon01.png') no-repeat center;
        background-size: 100% 100%;
        line-height: 52px;
      }
      .item1 {
        .item;
        padding-left: 96px;
      }
      .item2 {
        .item;
        width: 527px;
        padding-left: 40px;
        background-image: url('@/assets/smartOps/icon02.png');
      }
      .item3 {
        .item;
        width: 527px;
        padding-left: 40px;
        background-image: url('@/assets/smartOps/icon03.png');
      }
      .item4 {
        .item;
        margin-bottom: 0;
        padding-left: 96px;
        background-image: url('@/assets/smartOps/icon08.png');
      }
    }
  }
  .text {
    padding: 8px 20px;
    line-height: 24px;
    font-size: 24px;
    color: #4a90e2;
    // text-align: center;
  }
}

.anaBtn {
  font-size: 12px !important;
  padding: 6px;
  line-height: 12px;
  height: auto !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
@keyframes scaleUp {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(0px, -5px);
  }
  75% {
    transform: translate(0px, 5px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.marginBottom {
  margin-bottom: 20px;
}
.marginLeft {
  margin-left: 20px;
}
.marginRight {
  margin-right: 20px;
}
.searchContent {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: #4a4a4a;
  font-size: 24px;
  white-space: nowrap;
  margin-top: 40px;
  :global {
    .ant-select {
      margin: 0 40px 0 10px;
      // background-color: #284e83;
    }
  }
}
.timePicker {
  // background-color: #284e83;
}

.form {
  width: calc(100% - 35px);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tableSelect {
  background: rgba(145, 192, 238, 0.16) !important;
}
.tabContent {
  :global {
    .ant-table-tbody > tr:nth-child(even) {
      background: inherit;
    }
  }
}