zc_saas_h5/pages/learn/index.scss

@mixin threeDot {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contents {
  width: 100%;
  // .diatance{
  // 	width: 100%;
  // 	height: 85rpx;
  // 	background-color: #007AFF;
  // 	display: flex;
  // 	align-items: center;
  // 	margin-top: 8rpx;
  // 	.clock {
  // 		width: 44rpx;
  // 		height: 41rpx;
  // 		margin: 0rpx 22rpx 0rpx 65rpx;
  // 	}
  // 	>text {
  // 		color: #fff;
  // 		font-size: 28rpx;
  // 	}
  // }
}
.had_courses {
  width: 100%;
  padding: 0 24rpx 31rpx;
}
.lives {
  width: 100%;
  padding-top: 20rpx;
  .live_item {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 150rpx;
    border-radius: 16rpx;
    padding: 14rpx 0rpx 0rpx 43rpx;
    margin-bottom: 15rpx;
    .my_bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .live_con {
      position: relative;
      z-index: 10;
    }
    .live_status {
      display: flex;
      align-items: center;
      .liv_icon {
        width: 32rpx;
        height: 23rpx;
        margin-right: 14rpx;
      }
      .status_s {
        font-size: 24rpx;
        font-weight: 500;
        color: #dbe3ff;
        width: 160rpx;
        margin-right: 20rpx;
      }
      .look_bt {
        height: 37rpx;
        line-height: 37rpx;
        font-size: 24rpx;
        padding: 0rpx 18rpx;
        text-align: center;
        color: #fff;
        border-radius: 19rpx;
      }
      .living {
        color: #9356de;
        background-color: #fff;
      }
      .curring {
        background-color: #ffb102;
      }
      .futuring {
        background-color: #007aff;
      }
    }
    .liv_time {
      font-size: 20rpx;
      color: #fff;
      margin-top: 17rpx;
      .timeR {
        margin-right: 15rpx;
      }
    }
    .liv_title {
      font-size: 28rpx;
      color: #fff;
      font-weight: bold;
      width: 100%;
      @include threeDot();
    }
  }
}
.my_courses {
  .titles {
    font-size: 32rpx;
    color: #333333;
    margin: 44rpx 0rpx 24rpx 43rpx;
    font-weight: bold;
    display: block;
  }
  .course_item {
    width: 100%;
    // height: 278rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1, 99, 235, 0.1);
    border-radius: 24rpx;
    padding: 29rpx 29rpx 20rpx 24rpx;
    margin-bottom: 20rpx;
    .course_item_info {
      border-radius: 16rpx;
      background: #f8f8f8;
      padding: 24rpx 24rpx 10rpx;
      margin-top: 24rpx;
      & > view {
        margin-bottom: 10rpx;
      }
      view {
        text {
          font-size: 24rpx;
          &:nth-of-type(1) {
            color: #969696;
          }
          &:nth-of-type(2) {
            color: #4b4b4b;
          }
        }
        .eb {
          color: #eb5757 !important;
        }
      }
    }
    .titlews {
      padding-bottom: 24rpx;
    }
    .cou_titles {
      color: #222222;
      font-size: 28rpx;
      font-weight: bold;
      width: 100%;
    }
    .learn_ranges {
      color: #666;
      font-size: 24rpx;
      .l_range {
        width: 20rpx;
        height: 24rpx;
        margin-right: 9rpx;
      }
      .l_time {
        color: #333;
      }
    }
    .c_downs {
      display: flex;
      align-items: center;
      padding-top: 24rpx;
    }
    // 状态
    .all_status {
      width: 654rpx;
      background: #f8f8f8;
      border-radius: 16rpx;
    }
    .class-warm {
      display: flex;
      align-items: flex-start;

      &__icon {
        margin-right: 10rpx;
      }

      &__text {
        .date {
          color: #ff3b30;
          font-size: 22rpx;
          font-weight: 400;
        }
      }
    }
    .box_progress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      // .disabled {
      // 	opacity: 0.6;
      // }
    }
    .study_tips {
      color: #eb5757;
      font-size: 24rpx;
      margin-top: 20rpx;
    }
    .study_btns {
      width: 100%;
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .exam_btns {
        // width: 64%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
    .box_appoint {
      // width: 35%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .img {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
    .exam_word {
      font-size: 24rpx;
      font-weight: 500;
      width: 144rpx;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      background: #ffffff;
      border-radius: 66rpx;
      margin-left: 32rpx;
    }
    .ones {
      color: #484848;
      border: 2rpx solid #b9b9b9;
    }
    .intos {
      color: #498afe;
      border: 2rpx solid #498afe;
    }
  }
  .lefts {
    width: 204rpx;
    height: 120rpx;
    border-radius: 12rpx;
    margin-right: 26rpx;
    position: relative;
    top: 0;
    left: 0;
    .lefet_img {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 16rpx;
    }
    .live_icon {
      width: 65rpx;
      height: 35rpx;
      line-height: 35rpx;
      border-radius: 12rpx 0rpx 12rpx 0rpx;
      background-color: #ffb102;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .rights {
    width: 400rpx;
    height: 120rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .learn_progress {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .progress_up {
      width: 100%;
      .classHour {
        padding-top: 16rpx;
        font-size: 24rpx;
        color: #666666;
      }
      .scheduling {
        display: flex;
        align-items: center;
      }
      .sche_bar {
        font-size: 24rpx;
        color: #999999;
        margin-right: 20rpx;
      }
      .progress_bar {
        flex: 1;
      }
    }
    .progress_down {
      // width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .enter_into {
      width: 144rpx;
      height: 52rpx;
      line-height: 52rpx;
      background: #ffb102;
      border-radius: 16rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
    }
  }
  // 收藏集，做题记录
  .bottoms {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32rpx;
    .item {
      width: 335rpx;
      &.collect {
        position: relative;
        font-size: 32rpx;
        color: #ffffff;
        height: 240rpx;
        border-radius: 24rpx;
        padding: 32rpx;

        .text {
          position: relative;
          z-index: 10;
          font-size: 32rpx;
          font-weight: bold;
          color: #ffffff;
        }

        .img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }

      &.list {
        .list-in {
          position: relative;
          width: 335rpx;
          height: 112rpx;
          background: #007aff;
          border-radius: 24rpx;
          display: flex;
          align-items: center;
          font-size: 32rpx;
          color: #fff;

          &:first-of-type {
            margin-bottom: 16rpx;
          }

          .text {
            padding-left: 91rpx;
            position: relative;
            z-index: 10;
            font-size: 32rpx;
            font-weight: bold;
            color: #ffffff;
          }

          .img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.no_datas {
  margin-top: 70rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .courses {
    width: 360rpx;
    height: 349rpx;
  }
  .no_learns {
    font-size: 32rpx;
    color: #999;
    margin: 46rpx 0rpx 56rpx;
  }
  .choose {
    width: 280rpx;
    height: 64rpx;
    line-height: 62rpx;
    border-radius: 32rpx;
    background-color: #007aff;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
  }
}
// 弹窗
.popup_box {
  height: 700rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  border-radius: 32rpx 32rpx 0rpx 0rpx;

  .line1 {
    width: 80rpx;
    height: 8rpx;
    background: #999999;
    border-radius: 4rpx;
    margin: 0 auto;
    margin-top: 15rpx;
  }

  .grade {
    height: 23rpx;
    font-size: 24rpx;
    color: #999999;
    margin: 0 auto;
    margin-top: 15rpx;
    text-align: center;
  }

  .confrim-btn {
    height: 98rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .okBtn {
      width: 200rpx;
      height: 64rpx;
      background: linear-gradient(0deg, #015eea, #00c0fa);
      border-radius: 32rpx;
      color: #ffffff;
      text-align: center;
      line-height: 64rpx;
    }
  }
}
.slot-content {
  padding: 0 20rpx;
}

.confirm-modal {
  .slot-content {
    padding: 0 20rpx;
    .content {
      color: red;

      .msg-list {
        .item {
          padding: 20rpx 0;

          &__left {
            color: #666;
            margin-right: 20rpx;
          }

          &__right {
            color: #333;
          }
        }
      }
    }
  }
}

// 预约考试弹窗
.popuptest_box {
  width: 100%;
  height: 938rpx;
  padding: 56rpx 56rpx 0rpx;
  .check_head {
    height: 140rpx;
    border-bottom: 2rpx solid #f0f0f0;
  }
  .headers {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .grade {
      font-size: 40rpx;
      font-weight: bold;
      color: #222222;
    }
  }
  .course_items {
    width: 100%;
    padding: 24rpx 0rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #f0f0f0;
    .course_lefts {
      width: 510rpx;
    }
    .course_title {
      font-size: 28rpx;
      font-weight: 500;
      color: #303030;
    }
    //   .course_pros {
    //     font-size: 22rpx;
    //     color: #969696;
    //     margin-top: 16rpx;
    //     >text {
    //       color: #4B4B4B;
    //     }
    //   }
    .course_rights {
      display: flex;
      flex-direction: column;
      align-items: center;
      // .cicles {
      //   width: 32rpx;
      //   height: 32rpx;
      //   line-height: 26rpx;
      //   text-align: center;
      //   border-radius: 50%;
      //   background-color: #D5E4FF;
      // }
      .intoStudy {
        width: 108rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        background: #d5e4ff;
        border-radius: 66rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #498afe;
      }
    }
  }
}