demo-sps-web/src/components/Overview/index.less

:global {
  @overview-prefix: overview;

  .@{overview-prefix} {
    height          : 100%;
    position        : absolute;
    top             : 0;
    background-image: linear-gradient(to right, rgba(196, 196, 196, 0), rgba(0, 0, 0, 0.6));
    z-index         : 10;
    transition      : all .2s ease;

    @media screen and (max-width: 1366px) {
      width: 280px;
      right: -280px;
    }

    @media screen and (min-width: 1367px) and (max-width: 1600px) {
      width: 352px;
      right: -352px;
    }

    @media screen and (min-width: 1601px) {
      width: 400px;
      right: -400px;
    }

    &.visible {
      right: 0;
    }

    &__content {
      width           : 400px;
      padding         : 20px 12px 0 12px;
      transform-origin: top left;

      @media screen and (max-width: 1366px) {
        transform: scale(0.7);
      }

      @media screen and (min-width: 1367px) and (max-width: 1600px) {
        transform: scale(0.88);
      }

      @media screen and (min-width: 1601px) {
        transform: scale(1);
      }
    }


    &__lineheight1 {
      line-height: 1;
    }

    &__flexrow {
      display        : flex;
      flex-direction : row;
      justify-content: flex-start;
      align-items    : center;
    }

    &__flexrowCC {
      display        : flex;
      flex-direction : row;
      justify-content: center;
      align-items    : center;
    }

    &__flexrowSB {
      display        : flex;
      flex-direction : row;
      justify-content: space-between;
      align-items    : center;
    }

    &__flexcolumn {
      display        : flex;
      flex           : 1;
      flex-direction : column;
      justify-content: space-between;
      align-items    : flex-start;
    }

    &__title {
      font-size              : 28px;
      line-height            : 38px;
      font-weight            : bold;
      color                  : transparent;
      background-clip        : text;
      -webkit-background-clip: text;

      &-consume {
        background-image: linear-gradient(to bottom, rgba(0, 124, 230, 1), rgba(0, 240, 253, 1));
      }

      &-normal {
        color: #00FFF0;
      }

      &-img {
        width      : 28px;
        height     : 28px;
        margin-left: 8px;
      }
    }

    &__text {
      font-size  : 18px;
      line-height: 1;
      color      : #ffffff;
      font-family: serif;
    }

    &__value {
      font-size  : 36px;
      font-weight: bold;
      font-family: 'DIGITAL-GO';
      color      : #00FFFF;
      margin-left: 4px;
    }

    &__unit {
      font-size   : 20px;
      color       : #ffffff;
      margin-right: 16px;
    }

    &__carousel {
      &-consume.slick-slider {
        height: 90px;

        .slick-slider {
          height: 90px;
        }
      }

      &-monitor.slick-slider {
        height: 72px;

        .slick-slider {
          height: 72px;
        }
      }
    }

    &__box,
    &__textbox {
      width : 220px;
      height: 44px;
    }

    &__box,
    &__box-small {
      background-color: rgba(3, 31, 87, 0.6);
      border          : 1px solid #00FFF0;
    }

    &__box {
      margin-right: 10px;
      line-height : 1;
    }

    &__box-middle,
    &__box-large {
      background-image: url('../../assets/home/dash-border.png');
      background-size : 100% 100%;
    }

    &__box-middle {
      width : 376px;
      height: 124px;
    }

    &__box-large {
      width   : 376px;
      height  : 178px;
      overflow: hidden;
    }

    &__divide {
      width           : 80px;
      height          : 10px;
      margin          : 0 10px;
      background-image: linear-gradient(to right, rgba(0, 255, 240, 0), rgba(0, 255, 240, 1));

      &.revert {
        background-image: linear-gradient(to right, rgba(0, 255, 240, 1), rgba(0, 255, 240, 0));
      }
    }

    &__consumeZone {
      // scale 的时候，在小屏幕上会出现上一个滚动块的一小块边框，所以这边做微调
      position: relative;
      top     : -1px;
    }

    &__monitor {
      padding: 6px 12px;
    }

    &__img {
      width       : 60px;
      height      : 60px;
      margin-right: 16px;
    }

    &__img-aside {
      height: 60px;
    }

    &__equipment {
      font-size  : 26px;
      font-weight: bold;
      color      : #00FFFF;
    }

    &__online {
      font-size   : 20px;
      color       : #00FF66;
      margin-right: 40px;
    }

    &__total {
      font-size: 20px;
      color    : #39C4FF;
    }

    &__table {
      width  : 100%;
      padding: 4px 2px 4px 12px;

      .th {
        color        : #00FFFF;
        margin-bottom: 12px;

        .row {
          height     : 20px;
          line-height: 20px;
        }
      }

      .td {
        height       : 20px;
        color        : #ffffff;
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }

        .row {
          height     : 20px;
          line-height: 20px;
        }
      }

      .th,
      .td {
        width   : 100%;
        overflow: hidden;

        .row {
          float        : left;
          text-align   : center;
          font-size    : 14px;
          white-space  : nowrap;
          overflow     : hidden;
          text-overflow: ellipsis;
          cursor       : pointer;

          .ant-progress-text {
            color: #ffffff;
          }

          &:nth-child(1) {
            width: 12%;
          }

          &:nth-child(2) {
            width: 28%;
          }

          &:nth-child(3) {
            width: 25%;
          }

          &:nth-child(4) {
            width: 23%;
          }

          &:nth-child(5) {
            width: 10%;
          }
        }
      }
    }

    &__expand {
      display         : flex;
      justify-content : center;
      align-items     : center;
      width           : 24px;
      height          : 84px;
      background-image: url('../../assets/home/expand-icon.png');
      background-size : contain;
      position        : absolute;
      top             : 50%;
      left            : -24px;
      transform       : translateY(-50%);
      cursor          : pointer;

      &-icon {
        font-size: 24px;
        color    : #ffffff;
      }
    }
  }

  .ant-carousel .slick-vertical .slick-slide {
    border: none;
  }
}