gt_client_pad/src/pages/SmartOps/index.less

.topContent {
  padding: 0.08rem 0.12rem;
  margin: 0.16rem 0;
  color: #1c50b3;
  font-size: 0.28rem;
  .titleContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .time {
      // font-size: 0.2rem;
      color: #6e6e6e;
    }
    .iconLeft {
      width: 0.38rem;
      height: 0.38rem;
      background: url('@/assets/smartOps/icon06.png') no-repeat center;
      background-size: 100% 100%;
    }
    .iconRight {
      .iconLeft;
      margin-left: 0.2rem;
      background: url('@/assets/smartOps/icon07.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
  .middle {
    margin: 0.1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .left {
      position: relative;
      .in {
        width: 2.12rem;
        height: 2.12rem;
        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: 2.12rem;
        height: 2.12rem;
        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: 5.85rem;
        height: 0.52rem;
        white-space: nowrap;
        margin-bottom: 0.1rem;
        background: url('@/assets/smartOps/icon01.png') no-repeat center;
        background-size: 100% 100%;
        line-height: 0.52rem;
      }
      .item1 {
        .item;
        padding-left: 0.96rem;
      }
      .item2 {
        .item;
        width: 5.27rem;
        padding-left: 0.4rem;
        background-image: url('@/assets/smartOps/icon02.png');
      }
      .item3 {
        .item;
        width: 5.27rem;
        padding-left: 0.4rem;
        background-image: url('@/assets/smartOps/icon03.png');
      }
      .item4 {
        .item;
        margin-bottom: 0;
        padding-left: 0.96rem;
        background-image: url('@/assets/smartOps/icon08.png');
      }
    }
  }
  .text {
    padding: 0.08rem 0.2rem;
    line-height: 0.24rem;
    font-size: 0.24rem;
    color: #4a90e2;
    // text-align: center;
  }
}

.btnDate {
  margin-right: 0.2rem;
  font-size: 0.24rem;
  height: 0.5rem;
  background-color: #2f4d83;
}
.btnSelect {
  .btnDate;
  background-color: #329bfe;
}

.anaBtn {
  font-size: 0.12rem !important;
  padding: 0.06rem;
  line-height: 0.12rem;
  height: auto !important;
}

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

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

.marginBottom {
  margin-bottom: 0.2rem;
}
.marginLeft {
  margin-left: 0.2rem;
}
.marginRight {
  margin-right: 0.2rem;
}
.searchContent {
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
  color: #4a4a4a;
  font-size: 0.24rem;
  white-space: nowrap;
  :global {
    .ant-select {
      margin: 0 0.4rem 0 0.1rem;
      // background-color: #284e83;
    }
  }
}
.timePicker {
  // background-color: #284e83;
}

.form {
  width: 100%;
  margin-bottom: 0.14rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  :global {
    .ant-picker {
      background: #2f4d83;
      .ant-picker-input > input {
        color: #ffffff;
      }
      .ant-picker-separator {
        color: #ffffff;
      }
      .ant-picker-suffix {
        color: #ffffff;
      }
    }
  }
}

body .formDropDown :global {
  .ant-picker-range-arrow::after {
    background: #2f4d83;
  }
  .ant-picker-panel-container {
    background: #2f4d83;
  }
  .ant-picker-header {
    color: #ffffff;
  }
  table {
    background-color: #2f4d83;
  }
  .ant-picker-content th {
    color: white;
  }
  .ant-picker-cell {
    color: white;
  }
}

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