classroom-instruments/src/views/classList/index.module.less

@img: '../setting/images';
@currentimg './images'

.listWrap {
  padding: 32px;
  background-color: #fff;
  border-radius: 20px;


}

.infoListWrap {
  min-height: calc(100vh - 150px) !important
}

.addBtnIcon {
  width: 13Px !important;
  height: 14Px !important;
}

.addBtn {
  margin-bottom: 30px;
  // height: 34Px !important;
  background: #198cfe !important;
  border-radius: 7Px !important;
  // line-height: 21Px !important;
  padding: 0 18Px !important;
  // font-size: 13Px !important;
  font-weight: 600 !important;
}

.btnGroup {
  padding: 40px 0;

  :global {
    .n-button {
      height: 47px;
      min-width: 156px;
    }
  }
}

.resetStudentWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;

  .studentTransfer {
    position: relative;

    .showGradeSection {
      display: flex;
      align-items: center;
    }

    .smallArrow {
      right: 166px;
      // top: 15px;
      // position: absolute;
      width: 12px;
      height: 12px;
      cursor: pointer;
      z-index: 1000;
    }

    :global {
      .n-legacy-transfer {
        width: 634px;
        min-height: 340px;

        .n-legacy-transfer-list {
          &:nth-child(1) {
            .n-legacy-transfer-list-header__header {
              &::after {
                content: '（当前班级）';
                font-size: 12px;
                color: #777;
                font-weight: 400;
              }
            }
          }
        }
      }

      .n-legacy-transfer-list-item {
        &:hover {
          background-color: #fff !important;
        }
      }

      .n-legacy-transfer-list__border {
        border: none;
      }

      .n-legacy-transfer-list-header__extra {
        display: none;
      }

      .n-legacy-transfer-list-header {
        display: flex;
        flex-direction: column;
        background: #e8f2ff;
        align-items: flex-start;
        height: auto;
      }

      .n-legacy-transfer-list-header__checkbox {
        order: 2;
        padding: 0 !important;

        &::after {
          content: '全选';
          margin-left: 5px;
        }

        margin-top: 8px;
      }

      .n-legacy-transfer-list-header__header {
        width: 100%;
        padding: 14px 0;
        font-size: 16px;
        font-weight: 600 !important;
        color: #131415;
        line-height: 22px;
        order: 1;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      }

      .n-legacy-transfer-list {
        padding: 0 16px;
        min-height: 340px;
        background: #e8f2ff;
        border-radius: 16px 16px 0 0;
        width: 277px;

        .n-legacy-transfer-filter {
          background: #e8f2ff;
          padding: 8px 0px 0px;
          border-bottom: none;
        }

        .n-input {
          border-radius: 8px;

          .n-input-wrapper {
            .n-input__border {
              border-radius: 8px;
            }

            .n-input__input-el {
              height: 41px;
              line-height: 41px;
              background: #ffffff;
            }
          }
        }
      }

      // .n-legacy-transfer-gap {
      //   width: 80px;
      //   .n-button {
      //     width: 34px;
      //     height: 34px;
      //     border-radius: 8px;
      //     .n-button__state-border {
      //       border: none !important;
      //     }
      //     &:nth-child(1) {
      //       transform: rotate(180deg);
      //       position: relative;
      //       &:hover {
      //         &::after {
      //           background: url('@{currentimg}/transArrowActive.png') no-repeat;
      //           top: 0;
      //           left: 0;

      //           background-size: 34px 34px;
      //         }
      //       }
      //       &::after {
      //         position: absolute;
      //         content: '';
      //         width: 34px;
      //         height: 34px;
      //         background-color: black;
      //         top: 0;
      //         left: 0;
      //         background: url('@{currentimg}/transArrrow.png') no-repeat;
      //         background-size: 34px 34px;
      //         z-index: 100;
      //       }
      //     }
      //     &:nth-child(2) {
      //       position: relative;
      //       &:hover {
      //         &::after {
      //           background: url('@{currentimg}/transArrowActive.png') no-repeat;
      //           top: 0;
      //           left: 0;

      //           background-size: 34px 34px;
      //         }
      //       }
      //       &::after {
      //         position: absolute;
      //         content: '';
      //         width: 100%;
      //         height: 100%;
      //         background-color: black;
      //         top: 0;
      //         left: 0;
      //         background: url('@{img}/transArrrow.png') no-repeat;
      //         background-size: 34px 34px;
      //         z-index: 100;
      //       }
      //     }
      //   }
      // }
    }

    .studentTransferBottom {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .bottom {
        padding: 0 16px;

        width: 277px;
        background-color: #e8f2ff;

        border-radius: 0 0 8px 8px;

        .bottomWrap {
          padding: 14px 0;
          border-top: 1px solid rgba(0, 0, 0, 0.06);
        }
      }
    }
  }
}

.studentTransferList {
  display: flex;
  flex-direction: row;
  align-items: center;

  .listCore {
    .searchInput {
      --n-border: 0 !important;
    }
  }

  .studentLeft,
  .studentRight {
    padding: 14px 16px;
    width: 277px;

    background: #e8f2ff;
    border-radius: 16px;

    .listTop {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      font-size: max(16px, 13Px);
      font-weight: 600;
      color: #131415;
      line-height: 22px;

      span {
        color: #777;
        font-weight: 400;
        font-size: max(12px, 12Px);
      }
    }

    .chioseCheckBox {
      padding: 4px 2px;
      font-size: 16px;
      font-weight: 400;
      color: #131415;
    }
  }

  .studentLeft {
    background-color: #F5F6FA;
  }

  .chioseBox {
    width: 80px;
    height: 389px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .chioseBtn {
      cursor: pointer;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: url('./images/transArrrow.png') no-repeat;
      background-size: 34px 34px;

      &:hover {
        background: url('./images/transArrowActive.png') no-repeat;
        background-size: 34px 34px;
      }
    }

    .chioseBtnRight {
      transform: rotate(180deg);
      margin-bottom: 23px;
    }
  }

  .chioseCheckAllBox {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
  }

  .bottom {
    padding-top: max(12px, 12Px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
}

.addClass {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
}

.listWrap {
  min-height: 100%;
  padding: 32px;
  background-color: #fff;
  border-radius: 20px;

  .customTabs {
    :global {
      .n-tabs-tab--active {
        font-size: max(18px, 14Px) !important;

        font-weight: 600 !important;
        color: #131415 !important;
      }

      .n-tabs-tab {
        font-size: max(18px, 14Px) !important;
        padding: 8px 0 !important;
        font-weight: 400;
        min-width: 50px;
        color: #8b8d98;

        &:hover {
          color: #198cfe !important;
        }
      }

      .n-tabs-bar {
        // background-color: red !important;
        width: 50px !important;
        height: 5px !important;
        background: url('@{img}/barIcon.png') no-repeat;
        background-size: 50px 5px;
      }

      .n-tab-pane {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
  }

  :global {
    .n-cascader {
      width: 100% !important;
      min-width: 180px !important;
    }
  }
}

.indDot,
.endDot {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.indDot {
  span {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: #198cfe;
    margin-right: 8px;
  }
}

.endDot {
  opacity: 0.7;
  color: #aaaaaa;

  span {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: #aaaaaa;
    margin-right: 8px;
  }
}

.attendClassModal {
  width: 1100px;

  :global {
    .n-select-menu {
      --n-height: calc(var(--n-option-height) * 5.6) !important;
    }
  }
}

.teacherList {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 32px;

  .teacherHeader {
    width: 100px;
    height: 100px;
    padding: 4px;
    border-radius: 99px;
    background: linear-gradient(228deg,
        rgba(2, 186, 255, 1),
        rgba(0, 122, 254, 1));
    margin-right: 20px;

    .teacherHeaderBorder {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 99px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 4px;
    }
  }

  .teacherHeaderImg {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
  }

  .workafterInfo {
    h4 {
      font-size: 22px;
      line-height: 30px;
      font-weight: 600;
      color: #131415;
      margin-bottom: 12px;
    }

    p {
      font-size: max(16px, 12Px);
      line-height: 22px;
      color: #777;

      span {
        color: #ea4132;
      }
    }
  }
}

.isok {
  font-weight: 600;
  color: #333333;
}

.ison {
  font-weight: 600;
  color: #ea4132;
}

.nosub {
  font-weight: 600;
  color: #aaa;
}

.TrainDataItem {
  margin-bottom: 20px;

  .TrainDataItemTitle {
    text-align: left;
    font-size: max(13px, 11Px);
    font-weight: 400;
    color: #131415;
    line-height: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;

    span {
      font-family: 'DINA';
      font-size: max(26px, 18Px);
      font-weight: 600;
      color: #131415;
      line-height: 28px;
    }
  }

  .TrainDataItemsubTitle {
    margin-top: 4px;
    text-align: left;
    font-size: max(14px, 11Px);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #777777;
    line-height: 18px;
  }
}

.studentGender {
  display: flex;
  flex-direction: row;
  align-items: center;

  img {
    margin-left: 11px;
    width: 10px;
    height: 20px;
  }
}

.chioseModel {
  width: 413px;

  :global {
    .n-select {
      width: 100%;
      min-width: 180px;

      .n-base-selection-label {
        height: 43px;
        line-height: 43px;
      }

      .n-base-selection__border {
        border-radius: 8px;
        overflow: hidden;
      }

      .n-base-selection__state-border {
        border-radius: 8px;
        overflow: hidden;
      }
    }

    .n-card-header {
      position: relative;
      padding: 20px 18px;
      text-align: center;
      // background: #F5F6FA;
      font-size: 22px;
      font-weight: 600;
      color: #131415;
      line-height: 30px;
    }

    .n-card-header__close {
      position: absolute;
      right: 18px;
    }

    .n-card__content {
      // padding: 28px;
      padding: 30px;
    }
  }

  .updateBtnGroup {
    padding: 0;
    justify-content: center !important;

    :global {
      .n-button {
        height: 48px !important;
        min-width: 156px;
      }
    }
  }
}

.wordDetailModel {
  width: 1012px;
}

.trainingDetails {
  padding: 24px 0 32px;

  .studentList {
    display: flex;
    flex-direction: row;
    align-items: center;
    // margin-bottom: 24px;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f2;
    // padding-bottom: 18px;
    padding: 0 0 18px;
    margin: 0 32px 20px;

    .studentHeaderWrap {
      display: flex;
      flex-direction: row;
      align-items: center;

      .studentHeader {
        width: 66px;
        height: 66px;
        padding: 2px;
        border-radius: 99px;
        background: linear-gradient(228deg,
            rgba(2, 186, 255, 1),
            rgba(0, 122, 254, 1));
        margin-right: 16px;

        .studentHeaderBorder {
          width: 100%;
          height: 100%;
          background: #fff;
          border-radius: 99px;
          overflow: hidden;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 4px;
        }
      }
    }

    .workStatus {
      width: 87px;
      height: 87px;
    }

    .studentHeaderImg {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      overflow: hidden;
    }

    .workafterInfo {
      padding-right: 24px;

      h4 {
        font-size: max(22px, 16Px);
        line-height: 30px;
        line-height: 30px;
        font-weight: 600;
        color: #131415;
        margin-bottom: 6px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .workafterInfoDot {
          width: 52px;
          height: 22px;
          background: #ff8a32;
          border-radius: 13px 4px 13px 4px;
          font-size: max(14px, 11Px);
          font-weight: 600;
          color: #ffffff;
          line-height: 22px;
          text-align: center;
          margin-left: 8px;
        }

        .workafterInfoDot.workafterTeacherInfoDot {
          background: #198cfe;
        }
      }

      p {
        font-size: max(16px, 12Px);
        line-height: 22px;
        color: #777;

        span {
          color: #ea4132;
        }
      }
    }
  }

  .commentBtnGroup {
    background-color: #E8F4FF !important;
    margin-left: 32px;
    margin-bottom: 20px;
    --n-border: 1px solid #198CFE !important;
    --n-height: max(38px, 32Px) !important;
    border-radius: 8px !important;

    .text {
      display: flex;
      align-items: center;
      color: #198cfe;

      i {
        width: 18px;
        height: 18px;
        display: inline-block;
        background: url('./images/icon-pen.png') no-repeat center;
        background-size: contain;
        margin-right: 6px;

        &.look {
          background: url('./images/icon-menu.png') no-repeat center;
          background-size: contain;
        }
      }
    }
  }

  .expireDateTip {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    margin: 0 32px 0;
    background: #E6F4FF;
    border-radius: 7px;
    // width: 100%;

    .expireDateIcon {
      width: max(13px, 12Px);
      height: max(13px, 12Px);
      display: inline-block;
      background: url('../prepare-lessons/images/icon-expiredate.svg') no-repeat center;
      background-size: contain;
      margin-right: 7px;

    }

    span {
      font-size: 12Px;
      color: #1677FF;
    }
  }

  .workList {
    display: flex;
    flex-direction: row;
    // align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 20px 32px 0;
    // min-height: 360px;
    gap: 0 20px;

    &>div {
      width: calc(33.33% - 20px);
    }
  }

  .allTotal {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: max(16px, 13Px);
    font-weight: 400;
    color: #8b8b8b;
  }

  .btnGroups {
    padding: 40px 0;

    :global {
      .n-button {
        height: 47px;
        min-width: 96px;
        border-radius: 8px;
      }
    }
  }


  .commentSection {
    margin: 0 32px;
    padding: 16px;
    background: #E8F4FF;
    border-radius: 10px;

    .iconComment {
      width: 22px;
      height: 22px;
      display: inline-block;
      background: url('./images/icon-comment.png') no-repeat center;
      background-size: contain;
      margin-right: 6px;
    }

    .myText {
      width: 72px;
      height: 17px;
      display: inline-block;
      background: url('./images/my-title.png') no-repeat center;
      background-size: contain;
    }

    h3 {
      display: flex;
      align-items: center;
    }

    .commentContent {
      padding-top: 11px;
      font-size: max(16px, 13Px);
      font-weight: 500;
      color: #333333;
      line-height: 26px;
    }
  }

}


.studentVisible {
  width: 714px;
}

.removeVisiable {
  width: 432px;

  :global {
    .n-card-header {
      font-size: max(22px, 16Px);
    }
  }

  .studentRemove {
    padding: 0 40px;

    p {
      font-size: max(18px, 14Px);
      color: #777777;
      line-height: 30px;

      span {
        color: #EA4132;
      }
    }
  }

  .btnGroup {
    padding: 32px 0;

    :global {
      .n-button {
        height: 47px;
        min-width: 156px;
      }
    }
  }
}



.nextWrap {
  padding: 30px 32px 0 !important;
}

.updateStudent {
  width: 480px;
}