.icon {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  &-notice {
    background-image: url(../images/student/icon-notice.png);
    width: 0.43rem;
    height: 0.43rem;
  }
  &-users {
    background-image: url(../images/student/icon-users.png);
    width: 0.85rem;
    height: 0.85rem;
  }
  &-creating {
    background-image: url(../images/student/icon-creating.png);
    width: 0.85rem;
    height: 0.85rem;
  }
  &-diagnosis {
    background-image: url(../images/student/icon-diagnosis.png);
    width: 0.64rem;
    height: 0.64rem;
  }
  &-compare {
    background-image: url(../images/student/icon-compare.png);
    width: 0.64rem;
    height: 0.64rem;
  }
  &-star {
    background-image: url(../images/student/icon-star.png);
    width: 0.64rem;
    height: 0.64rem;
  }
  &-down {
    background-image: url(../images/student/icon-down.png);
    width: 0.64rem;
    height: 0.64rem;
  }
  &-run {
    background-image: url(../images/student/icon-run.png);
    width: 0.83rem;
    height: 0.64rem;
  }
  &-overall {
    background-image: url(../images/student/icon-overall.png);
    width: 0.43rem;
    height: 0.43rem;
  }
  &-file {
    background-image: url(../images/student/icon-file.png);
    width: 0.37rem;
    height: 0.43rem;
  }
  &-suggest {
    background-image: url(../images/student/icon-suggest.png);
    width: 0.43rem;
    height: 0.43rem;
  }
  &-smile {
    background-image: url(../images/student/icon-smile.png);
    width: 1.07rem;
    height: 1.28rem;
  }
  &-cry {
    background-image: url(../images/student/icon-cry.png);
    width: 1.07rem;
    height: 1.28rem;
  }
  &-angle {
    background-image: url(../images/student/icon-angle.png);
    width: 0.21rem;
    height: 0.21rem;
  }
  &-report {
    background-image: url(../images/student/icon-report.png);
    width: 0.36rem;
    height: 0.36rem;
  }
  &-calendar {
    background-image: url(../images/student/icon-calendar.png);
    width: 0.36rem;
    height: 0.36rem;
  }
  &-triangle-right {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.1rem 0.2rem;
    border-color: transparent transparent transparent #1cd1a1;
  }
}

// level-chart
.level-chart {
  position: relative;
  width: 8rem;
  height: 4rem;
  margin: 0 auto;
  z-index: 8;
  &-back {
    position: relative;
    z-index: auto;
    overflow: hidden;
    height: 100%;
    .back-item {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(238, 238, 246, 1);
      border-radius: 4rem 4rem 0 0;
      transform-origin: center bottom;

      &-act {
        background-color: #1cd1a1;
      }

      &:nth-of-type(1) {
        z-index: 7;
        transform: rotate(-144deg);
      }
      &:nth-of-type(2) {
        z-index: 6;
        transform: rotate(-108deg);
      }
      &:nth-of-type(3) {
        z-index: 5;
        transform: rotate(-72deg);
      }
      &:nth-of-type(4) {
        z-index: 4;
        transform: rotate(-36deg);
      }
      &:nth-of-type(5) {
        z-index: 3;
      }
    }
  }
  &-empit {
    position: absolute;
    width: 5.2rem;
    height: 5.2rem;
    top: 1.4rem;
    left: 1.4rem;
    background-color: #fff;
    border-radius: 50%;
    z-index: 199;
  }
  &-split {
    .split-item {
      position: absolute;
      width: 0.1rem;
      height: 4rem;
      left: 50%;
      top: 0;
      margin-left: -0.05rem;
      z-index: 198;
      background-color: #fff;
      transform-origin: center bottom;

      &:nth-of-type(1) {
        transform: rotate(-54deg);
      }
      &:nth-of-type(2) {
        transform: rotate(-18deg);
      }
      &:nth-of-type(3) {
        transform: rotate(18deg);
      }
      &:nth-of-type(4) {
        transform: rotate(54deg);
      }
    }
  }
  &-label {
    .label-item {
      position: absolute;
      width: 0.8rem;
      height: 3.6rem;
      left: 50%;
      bottom: 0;
      z-index: 200;
      margin-left: -0.4rem;
      font-size: 0.6rem;
      color: #d0d0dc;
      text-align: center;
      transform-origin: center bottom;

      &-act {
        color: #fff;

        &::before {
          content: "";
          position: absolute;
          width: 0.32rem;
          height: 0.37rem;
          top: -0.6rem;
          left: 50%;
          margin-left: -0.16rem;
          background-image: url(../images/student/icon-angle-border.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      &:nth-of-type(1) {
        transform: rotate(-72deg);
      }
      &:nth-of-type(2) {
        transform: rotate(-36deg);
      }
      &:nth-of-type(4) {
        transform: rotate(36deg);
      }
      &:nth-of-type(5) {
        transform: rotate(72deg);
      }
    }
  }
  &-tips {
    position: absolute;
    width: 1.3rem;
    height: 2.16rem;
    bottom: 0;
    left: 50%;
    margin-left: -0.65rem;
    z-index: 202;
    text-align: center;

    > h4 {
      font-size: 1.64rem;
      font-weight: bold;
      color: #1cd1a1;
      line-height: 1.7rem;
    }
  }
}

.student-report {
  font-weight: normal;
  font-size: 0.32rem;
  background-color: #2a1e52;
  padding: 0.5rem 0.27rem 0.27rem;
  color: #6f6c7b;
  .back-guide {
    position: fixed;
    left: 0;
    bottom: 1rem;
    width: 1.2rem;
    padding: 0.1rem;
    z-index: 99;
    border-bottom-right-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    background-color: rgba(82, 216, 187, 0.5);

    p {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      padding: 0.2rem 0;
      background-color: #1cd1a1;
      font-size: 0.3rem;
      line-height: 1;
      text-align: center;
      color: #fff;
      cursor: pointer;

      &:hover {
        background-color: #10c3b6;
      }
    }
  }

  .report-part {
    padding: 0.53rem;
    border-radius: 0.43rem;
    background-color: #fff;
    margin-bottom: 0.27rem;
    &-title {
      font-size: 0.43rem;
      font-weight: 600;
      color: #151026;
      line-height: 0.64rem;
      margin-bottom: 0.53rem;

      .icon {
        margin-right: 0.27rem;
      }
    }
    &-intro {
      line-height: 0.53rem;
      &-title {
        font-size: 0.37rem;
        font-weight: 600;
        color: #151026;
        margin-bottom: 0.16rem;
        .icon {
          margin-right: 0.21rem;
        }
      }
      &-content {
        margin-left: 0.64rem;

        b {
          color: #151026;
        }
      }
    }
  }
  // cover
  .student-cover {
    position: relative;
    overflow: hidden;
    margin-bottom: 0.3rem;
    z-index: auto;
    .cover-body {
      margin: 0.26rem;
      padding: 0.8rem 0.8rem 3.5rem;
      position: relative;
      z-index: 8;
      h1 {
        font-size: 0.45rem;
        font-weight: 600;
        color: #151026;
        line-height: 0.67rem;
        margin-bottom: 0.5rem;
        text-align: center;
      }
    }
    .cover-menu {
      margin-bottom: 0.5rem;
    }
    .menu-title {
      overflow: hidden;
      margin-bottom: 0.15rem;
      h3 {
        float: left;
        font-size: 0.37rem;
        color: #151026;

        &:nth-child(2) {
          float: right;
          cursor: pointer;
        }
      }
      .icon {
        margin-right: 0.1rem;
        margin-top: -2px;
      }
    }
    .menu-list {
      min-height: 1rem;
    }
    .menu-none {
      text-align: center;
      line-height: 1rem;
    }
    .menu-item {
      padding: 0.23rem;
      background-color: rgba(82, 216, 187, 0.1);
      border-radius: 0.12rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0.1rem 0;
      cursor: pointer;

      &-right {
        flex-shrink: 0;
        flex-basis: 1rem;
        text-align: right;
      }

      &-absent {
        background-color: #eeeef6;
        color: #aaa;
        cursor: auto;
      }
    }
    .cover-content {
      &-info {
        min-height: 6rem;
      }
      h2 {
        font-size: 0.48rem;
        font-weight: 600;
        color: #151026;
        line-height: 0.67rem;
        margin-bottom: 0.29rem;
      }
      p {
        font-size: 0.35rem;
        font-weight: 400;
        color: #85828e;
        line-height: 0.69rem;
        text-indent: 0.7rem;

        span {
          color: #1cd1a1;
        }
      }
    }
    .cover-back1 {
      position: absolute;
      width: 100%;
      height: 6.24rem;
      bottom: 0;
      left: 0;
      z-index: 6;
      background-color: #fef3df;
      border-radius: 0.43rem;
    }
    .cover-back2 {
      position: absolute;
      width: 100%;
      height: 3.23rem;
      bottom: 0;
      left: 0;
      z-index: 9;
      background-image: url(../images/student/bg-cover.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .cover-btn {
      position: absolute;
      bottom: 0.56rem;
      left: 50%;
      width: 4.8rem;
      height: 1.07rem;
      z-index: 19;
      padding: 0.21rem;
      margin-left: -2.4rem;
      text-align: center;
      background: linear-gradient(90deg, #10c3b6 0%, #27d992 100%);
      border-radius: 0.53rem;
      color: #fff;
      font-weight: 600;
      line-height: 0.64rem;
      letter-spacing: 2px;

      > .icon {
        margin-right: 0.27rem;
      }
    }
    .cover-person {
      position: absolute;
      width: 1.44rem;
      height: 1.44rem;
      right: 1.07rem;
      bottom: 2.45rem;
      z-index: 19;

      background-image: url(../images/student/bg-girl.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  &-body {
    position: relative;
    z-index: auto;
  }
  // info
  .student-info {
    &-name {
      overflow: hidden;
      margin-bottom: 0.27rem;
      h3 {
        font-size: 0.64rem;
        font-weight: 600;
        color: #151026;
        line-height: 0.85rem;
        float: left;
      }
      p {
        font-size: 0.32rem;
        font-weight: 400;
        color: #6f6c7b;
        line-height: 0.85rem;
        float: right;
      }
    }
    &-tags {
      .tag-item {
        display: inline-block;
        vertical-align: top;
        border-radius: 0.32rem;
        border: 0.03rem solid #eeeef6;
        padding: 0.13rem 0.27rem;
        line-height: 0.37rem;
        margin-right: 0.11rem;
        margin-bottom: 0.11rem;
      }
    }
    &-level {
      margin: 0.53rem 0 0.64rem;
      height: 4.78rem;
      position: relative;
      padding-top: 0.86rem;

      .course-name {
        position: absolute;
        width: 100%;
        height: 0.43rem;
        top: 0;
        left: 0;
        z-index: 9;
        font-size: 0.37rem;
        font-weight: 600;
        color: #151026;
        line-height: 0.43rem;
        text-align: center;
      }
    }
    &-intro {
      > h5 {
        color: #1cd1a1;
      }
      p {
        margin: 0;
      }
    }
  }

  // summary
  // .student-summary {}
  .summary-top {
    font-size: 0;
    margin: 0.53rem -0.13rem;
    &-item {
      display: inline-block;
      vertical-align: top;
      width: 50%;
      padding: 0 0.13rem;
      font-size: 0.32rem;
      &:last-child {
        .summary-top-body {
          background-color: rgba(252, 195, 95, 0.1);
        }
      }
    }
    &-body {
      background-color: rgba(82, 216, 187, 0.1);
      border-radius: 0.27rem;
      padding: 0.43rem 0.43rem 0.43rem 1.55rem;
      position: relative;

      > .icon {
        position: absolute;
        width: 0.85rem;
        height: 0.85rem;
        left: 0.43rem;
        top: 50%;
        transform: translateY(-50%);
      }

      p {
        &:nth-of-type(1) {
          font-size: 0.58rem;
          color: #151026;
          line-height: 0.64rem;
        }
        &:nth-of-type(2) {
          font-weight: 400;
          line-height: 0.48rem;
        }
      }
    }
  }
  .summary-progress {
    padding-top: 0.53rem;
    border-top: 0.03rem dashed #eeeef6;
    .progress-item {
      height: 0.48rem;
      line-height: 0.48rem;
      &:not(:last-child) {
        margin-bottom: 0.32rem;
      }

      span {
        display: block;
        float: left;
        &:nth-of-type(2) {
          float: right;
          color: #151026;
          font-weight: bold;
        }
      }
    }

    .progress-line {
      margin: 0 1.04rem 0 1.87rem;
      padding: 0.13rem 0;
      &-body {
        position: relative;
        height: 0.21rem;
        background: #eeeef6;
        border-radius: 0.13rem;
      }
      &-progress {
        width: 30%;
        height: 100%;
        border-radius: 0.13rem;
        background: #52d8bb;
      }
      &-mark {
        position: absolute;
        width: 0.6rem;
        height: 0.64rem;
        top: -0.58rem;
        z-index: 9;
        .icon {
          margin-left: -0.23rem;
        }
      }
    }
    .progress-user {
      .progress-line-progress {
        background-color: #feb840;
      }
      span {
        color: #151026;
        font-weight: 500;
      }
    }
  }
  // result
  .result-content {
    position: relative;
    padding: 0.43rem 0.43rem 0.43rem 2.03rem;
    background: rgba(82, 216, 187, 0.1);
    border-radius: 0.27rem;
    margin-bottom: 0.53rem;

    .icon {
      position: absolute;
      top: 0.43rem;
      left: 0.53rem;
    }
    p:nth-of-type(1) {
      font-size: 0.53rem;
      font-weight: 600;
      color: #1cd1a1;
      line-height: 0.75rem;
    }
    p:nth-of-type(2) {
      line-height: 0.53rem;
    }

    &-error {
      background: rgba(252, 149, 144, 0.1);

      p:nth-of-type(1) {
        color: #f85f62;
      }
    }
  }
  .result-menu {
    &-item {
      display: inline-block;
      vertical-align: top;
      padding: 0.13rem 0.43rem;
      background: #eeeef6;
      border-radius: 0.43rem;
      margin-right: 0.21rem;
      line-height: 0.48rem;
      color: #9694a2;

      &-act {
        background-color: #9486ff;
        color: #fff;
      }
    }
  }
  .result-chart {
    height: 8.35rem;
    margin: 0 -0.53rem;
  }
  // module
  .knowledge-result {
    padding: 0.11rem 0 0.64rem;
    border-bottom: 0.03rem dashed #eeeef6;
    text-align: center;

    .knowledge-progress {
      display: inline-block;
      vertical-align: top;
      width: 3.2rem;
      height: 4.27rem;
    }
    .knowledge-nums {
      display: inline-block;
      vertical-align: top;
      padding-left: 0.53rem;
      font-weight: 500;
      color: #6f6c7b;
      line-height: 0.45rem;
      text-align: left;
    }
    .knowledge-nums-hide {
      p:nth-of-type(2),
      .knowledge-score,
      .knowledge-full {
        visibility: hidden;
      }
    }
    .knowledge-score {
      font-size: 1rem;
      color: #151026;
      line-height: 1.1rem;

      span {
        font-size: 0.43rem;
        font-weight: 600;
        line-height: 0.59rem;
        margin-left: 0.1rem;
      }
    }
    .knowledge-rate {
      margin-top: 0.27rem;
      font-size: 1rem;
      color: #151026;
      line-height: 1.1rem;
    }
    .knowledge-full {
      margin-top: 0.45rem;
      position: relative;
      .icon {
        position: absolute;
        left: -0.37rem;
        top: 0.11rem;
      }
    }
  }
  .knowledge-legend {
    padding: 0.43rem 0.3rem;
    background: #f6f6fa;
    border-radius: 0rem 0.43rem 0.43rem 0.43rem;
    margin-bottom: 0.59rem;
    &-row {
      overflow: hidden;
    }
    &-item {
      width: 50%;
      float: left;
      padding: 0.05rem 0.13rem;
      line-height: 0.48rem;

      span {
        display: block;
      }
    }
    &-tag {
      width: 0.58rem;
      height: 0.48rem;
      border-radius: 0.05rem;
      background: rgba(82, 216, 187, 1);
      color: #151026;
      text-align: center;
      float: left;

      &-B {
        background: rgba(82, 216, 187, 0.4);
      }
      &-C {
        background: rgba(254, 184, 64, 1);
      }
      &-D {
        background: rgba(254, 184, 64, 0.4);
      }
      &-E {
        background: rgba(252, 149, 144, 1);
      }
    }
    &-cont {
      margin-left: 0.65rem;
    }
  }
  .knowledge-chart {
    height: 7.34rem;
  }
  .knowledge-intro {
    p {
      &::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0.21rem;
        height: 0.21rem;
        margin-right: 0.27rem;
        border-radius: 50%;
        background-color: rgba(82, 216, 187, 1);
      }

      // &:nth-of-type(2)::before {
      //   background-color: rgba(254, 184, 64, 1);
      // }
      // &:nth-of-type(3)::before {
      //   background-color: rgba(252, 149, 144, 1);
      // }
      &:nth-of-type(2)::before {
        background-color: rgba(82, 216, 187, 0.4);
      }
      &:nth-of-type(3)::before {
        background-color: rgba(254, 184, 64, 1);
      }
      &:nth-of-type(4)::before {
        background-color: rgba(254, 184, 64, 0.4);
      }
      &:nth-of-type(5)::before {
        background-color: rgba(252, 149, 144, 1);
      }
    }
  }

  // suggest
  // .student-suggest {}
  .suggest-part {
    position: relative;
    margin-left: 0.43rem;
    padding: 0.43rem 0.43rem 0.43rem 0.85rem;
    background: #f6f6fa;
    border-radius: 0rem 0.43rem 0.43rem 0.43rem;

    &:not(:last-child) {
      margin-bottom: 0.27rem;
    }

    &-tag {
      position: absolute;
      top: -0.08rem;
      left: -0.51rem;
      border: 0.08rem solid #fff;
      z-index: 9;
      border-radius: 50%;
    }
    &-tag-body {
      width: 0.85rem;
      height: 0.85rem;
      background-color: #feb840;
      text-align: center;
      line-height: 0.8rem;
      border-radius: 50%;
    }

    > h4 {
      font-size: 0.43rem;
      font-weight: 600;
      color: #151026;
      line-height: 0.59rem;
      margin-bottom: 0.21rem;
    }
    p {
      font-weight: 400;
      line-height: 0.53rem;
    }

    &:nth-of-type(1) {
      span {
        color: #ffa100;
      }
    }
    &:nth-of-type(2) {
      .suggest-part-tag-body {
        background-color: #1cd1a1;
      }
      span {
        color: #1cd1a1;
        font-weight: 600;
      }
    }

    &:nth-of-type(3) {
      .suggest-part-tag-body {
        background-color: #5b94fa;
      }
      span {
        color: #5b94fa;
        font-weight: 600;
      }
    }
  }
}

// select exam
.exam-list {
  .exam-item {
    padding: 0.23rem;
    background-color: rgba(82, 216, 187, 0.1);
    border-radius: 0.12rem;
    margin: 0.1rem 0;
    cursor: pointer;

    &-act {
      background-color: rgba(82, 216, 187, 1);
      color: #fff;
    }
  }
}

.el-popup-parent--hidden {
  padding: 0 !important;
}
