// work-manage

// work-overview
.overview {
  &-head {
    height: 138px;
    background: rgba(78, 87, 170, 1);
    border-radius: 20px;
    color: @white;
    position: relative;
    padding: 31px 320px 0 220px;
    margin-bottom: 32px;

    &::before {
      content: "";
      position: absolute;
      width: 95px;
      height: 138px;
      left: 0;
      top: 0;
      background-image: url(../images/bg-left-leaf.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      z-index: 7;
    }
    &::after {
      content: "";
      position: absolute;
      width: 97px;
      height: 138px;
      right: 0;
      top: 0;
      background-image: url(../images/bg-right-leaf.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      z-index: 7;
    }
  }
  &-bg-person {
    position: absolute;
    width: 135px;
    height: 165px;
    left: 40px;
    bottom: 0;
    background-image: url(../images/bg-penson.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 8;
  }
  &-title {
    font-size: 32px;
    line-height: 44px;
  }
  &-actions {
    position: absolute;
    z-index: 9;
    right: 20px;
    top: 51px;
  }
  &-body {
    margin: 0 -16px;
    font-size: 0;
  }

  &-infos {
    font-size: 0;
    margin-top: 11px;
    color: rgba(255, 255, 255, 0.5);
    > li {
      display: inline-block;
      vertical-align: middle;
      font-size: @font-size-base;
      &:not(:last-child) {
        margin-right: 30px;
      }
      span:first-child {
        margin-right: 5px;
      }
    }
  }
  &-subject {
    font-size: @font-size-base;
    display: inline-block;
    vertical-align: top;
    width: 33.33%;
    padding: 0 16px;
  }

  .subject {
    &-content {
      text-align: center;
      background-color: @white;
      border-radius: @box-border-radius;
      padding: 20px;
    }
    &-name {
      color: @title-color;
      font-size: 40px;
      line-height: 56px;
      margin-top: 12px;
    }
    &-infos {
      margin: 20px 0 32px;
      color: @dark-color-light;
      li {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 105px;

        &:not(:last-child)::before {
          content: "";
          position: absolute;
          width: 13px;
          height: 22px;
          top: 50%;
          right: -6px;
          margin-top: -11px;
          background-image: url(../images/icon-split.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
      p {
        line-height: 20px;
        margin-bottom: 5px;
        &:last-child {
          font-size: 18px;
          font-weight: 600;
        }
      }
    }
    &-actions {
      height: 116px;
      padding: 32px 20px;
      margin-bottom: 32px;
      background: rgba(231, 234, 241, 1);
      position: relative;
      border-radius: @box-border-radius;
      text-align: left;

      &::after {
        content: "";
        position: absolute;
        width: 78px;
        height: 100%;
        top: 0;
        right: 0;
        background-image: url(../images/bg-leaf-gray.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: 8;
      }

      > p:first-child {
        color: @dark-color-light;
        margin-bottom: 4px;
      }
      > p:nth-of-type(2) {
        color: @dark-color;
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
      }

      &-detail {
        position: absolute;
        right: 20px;
        top: 40px;
        z-index: 9;
      }
    }
  }
}

// image-action-list
// image-view
.image-view {
  display: inline-block;
  vertical-align: top;
  font-size: @font-size-base;
  padding: 10px;
  width: 310px;
  text-align: center;
  &-act {
    img {
      // box-shadow: 0px 10px 20px 0px rgba(34, 192, 255, 0.5);
      box-shadow: 0 0 20px rgba(34, 192, 255, 0.6);
    }
  }

  &-container {
    padding: 20px 25px;
    border-radius: @box-border-radius;
    background-color: @white;
  }

  &-title {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 20px;
  }
  &-contain {
    position: relative;
    height: 0;
    padding-bottom: 100%;

    > img {
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      cursor: pointer;
    }
  }
  &-actions {
    margin-top: 20px;
  }
}
.image-view-list {
  font-size: 0;
  margin: -10px;
  .image-view {
    width: 20%;
  }

  &-6 {
    .image-view {
      width: 16.66%;
    }
  }
  &-5 {
    .image-view {
      width: 20%;
    }
  }
  &-4 {
    .image-view {
      width: 25%;
    }
  }
  &-3 {
    .image-view {
      width: 33.33%;
    }
  }
  &-2 {
    .image-view {
      width: 50%;
    }
  }
}

/* paper-carousel */
.paper-carousel {
  position: relative;
  min-height: 40px;

  .carousel-none {
    color: @dark-color-lighter;
    font-size: @font-size-base;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 8;
    > i {
      font-size: 30px;
    }
  }
  .carousel-btn {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    z-index: 9;
    margin-top: -20px;
    text-align: center;
    line-height: 40px;
    font-size: 36px;
    color: #ccc;
    cursor: pointer;

    &:hover {
      color: @main-color;
    }

    &-left {
      left: 0;
    }
    &-right {
      right: 0;
    }
  }
}

/* client-set */
// set-navs
.set-navs {
  margin-bottom: 20px;
  &-item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 8px 20px;
    color: @dark-color-light;
    background-color: @white;
    border-radius: @box-border-radius;
    margin-right: 10px;
    cursor: pointer;

    &:hover {
      color: @info-color;
    }

    &-act {
      background-color: @info-color;
      color: @white!important;
      box-shadow: 0px 10px 10px 0px rgba(34, 192, 255, 0.3);

      &::before {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 50%;
        margin-left: -10px;
        width: 20px;
        height: 4px;
        background-image: url(../images/bg-switch-arrow.png);
        background-size: 100% 100%;
      }
    }
  }
}
// client-account-set
.client-account-set {
  position: relative;
  .account-add-btn {
    position: absolute;
    top: -56px;
    right: 0;
    z-index: 9;
  }
}
// client-param-set
.client-param {
  &-set {
    .part-box {
      height: 100%;
    }
  }
  &-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 40px;
  }
}

// grading-level-set
.grading-level-set {
  position: relative;
  .level-add-btn {
    position: absolute;
    top: -56px;
    right: 0;
    z-index: 9;
  }
  .grading-table {
    .ivu-input-wrapper,
    .ivu-input-number {
      min-width: 100px;
    }
    th,
    td {
      padding: 8px 18px;
    }
  }
}

// export-paper
.export-paper {
  .part-box {
    height: 100%;
    padding: 32px 32px 100px;
    position: relative;
  }
  .export-paper-btn {
    position: absolute;
    left: 32px;
    bottom: 32px;
    width: 80px;
  }
}

// student-score
.student-score-content {
  min-height: 200px;
  border-radius: @box-border-radius;
  background-color: @white;
  .score-content {
    &-head {
      padding: 16px 20px;
      height: 60px;
      line-height: 28px;
      border-bottom: 1px solid #f3f3f3;
      color: @dark-color-light;
      font-size: 16px;
      font-weight: 600;
    }
    &-title {
      float: left;
      color: @dark-color;
      font-size: 20px;
      font-weight: 600;
    }
    &-info {
      float: left;
      margin-left: 20px;
    }
    &-tscore {
      float: right;
      > span {
        display: inline-block;
        vertical-align: middle;
      }
      > span:last-child {
        color: @error-color;
        font-size: 24px;
      }
    }
    &-score {
      color: @error-color;
    }
    &-body {
      padding: 20px;
      text-align: center;
      .table {
        text-align: center;
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
}

// inspection-grading
.check-grade {
  &-body {
    padding: 20px;
    margin-right: 300px;
  }
  &-list {
    min-height: 500px;
    .image-view-list {
      margin: 0;
    }
  }
  &-action {
    float: right;
    width: 280px;
    padding: 32px;
    min-height: 540px;
    background-color: @white;
    border-radius: @box-border-radius;
    overflow-x: hidden;
    overflow-y: auto;

    &-fullscreen {
      position: fixed;
      width: 290px;
      top: 64px;
      right: 0;
      bottom: 0;
      border-radius: 0;
      min-height: auto;
      z-index: 98;
    }
  }
  .action-paper-info {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 32px;
    color: @dark-color-light;
    line-height: 25px;
    text-align: left;

    p {
      margin-bottom: 4px;
    }

    span:last-child {
      color: @dark-color;
      font-size: 18px;
    }
  }

  .action-grade-info {
    margin-bottom: 32px;
    background-color: #e7eaf1;
    color: @dark-color-light;
    padding: 20px;
    font-size: 20px;
    border-radius: @box-border-radius;
    line-height: 28px;

    > p:first-child {
      margin-bottom: 10px;
    }
  }
  .action-grade-result {
    text-align: center;
    padding: 16px;
    line-height: 28px;
    font-size: 20px;
    font-weight: 600;
    background: rgba(247, 247, 250, 1);
    border-radius: 20px;
    color: rgba(194, 199, 213, 1);
    border-radius: @box-border-radius;

    &-error {
      background: rgba(255, 112, 129, 0.1);
      color: @error-color;
    }
  }

  &-none {
    padding-top: 200px;
    text-align: center;
    font-size: 24px;
    color: @dark-color-lighter;
  }

  &-image-preview {
    .ivu-modal-mask,
    .ivu-modal-wrap {
      left: 0;
      bottom: 0;
      top: 64px;
      right: 290px;
    }
  }
}

// exam-paper-view
.exam-paper-view {
  .exam-paper-item {
    padding: 20px;
    overflow: hidden;
    background-color: @white;
    border-radius: @box-border-radius;
    margin: 5px 0;
  }
  .exam-paper-area {
    float: left;
    font-size: 20px;
    font-weight: 600;
    line-height: 36px;
  }
  .exam-paper-subjects {
    float: right;
    button {
      width: 80px;
    }
  }
}
