.boxWrap {
  width: vw(1280);
  height: vh(438);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .opGradeBox {
    width: vw(340);
    height: 100%;

    header {
      height: vh(48);
      background-image: url("@/assets/img/pageMonitor/headerLine.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;

      div {
        width: vw(200);
        height: vh(40);
        background-image: url("@/assets/img/pageMonitor/headerBg.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: vw(12);
        display: flex;
        align-items: center;

        p {
          color: #444444;
          font-size: vw(22);
          padding-left: vw(32);
        }
      }
    }
  }

  .asaGradeBox {
    width: vw(340);
    height: 100%;

    header {
      height: vh(48);
      background-image: url("@/assets/img/pageMonitor/headerLine.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;

      div {
        width: vw(200);
        height: vh(40);
        background-image: url("@/assets/img/pageMonitor/headerBg.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: vw(12);
        display: flex;
        align-items: center;

        p {
          color: #444444;
          font-size: vw(22);
          padding-left: vw(32);
        }
      }
    }
  }

  .opstatisticBox {
    width: vw(552);
    height: 100%;

    header {
      height: vh(48);
      background-image: url("@/assets/img/pageMonitor/headerLine.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;

      div {
        width: vw(300);
        height: vh(40);
        background-image: url("@/assets/img/pageMonitor/headerBg.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: vw(12);
        display: flex;
        align-items: center;

        p {
          color: #444444;
          font-size: vw(22);
          padding-left: vw(32);
        }
      }
    }

    .sidebar {
      position: absolute;
      right: -1px;
      top: 16%;

      >div {
        width: vw(40);
        height: vh(70);
        background: #E9E4FF;
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 10;

        span {
          color: rgba(90, 73, 173, 0.5);
          font-size: vw(16);

        }

        &:first-of-type {
          transform: skewY(-30deg);

          span {
            transform: skewY(30deg);
            line-height: vh(60);
          }
        }

        &:last-of-type {
          margin-top: vw(-24);
          transform: skewY(30deg);

          span {
            transform: skewY(-30deg);
            line-height: vh(90);
          }
        }

        &.active {
          background: #5C4BAD;
          z-index: 1;
          height: vh(82);

          span {
            color: #fff;
          }
        }
      }
    }
  }

  .box {
    box-sizing: border-box;
    border: 2px solid #DFE0F3;
    box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
    background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
    border-radius: vw(8);
    padding: vh(16) vw(8);
    position: relative;
  }

  main {
    height: vh(350);
  }
}
