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.1000);
		border-radius: 24rpx;
		padding: 29rpx 29rpx 20rpx 24rpx;
		margin-bottom: 20rpx;
		.titlews {
			padding-bottom: 24rpx;
		}
		.cou_titles {
			margin-bottom: 12rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			width: 100%;
			@include threeDot();
		}
		.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 {
			padding: 20rpx 24rpx;
			display: flex;
			align-items: flex-start;

			&__icon {
				margin-right: 10rpx;
			}

			&__text {

				.date {
					color: #FF3B30;
					font-size: 22rpx;
					font-weight: 400;
					// color: #969696;
					margin-bottom: 8rpx;
				}
			}
		}
		.box_progress {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			// .disabled {
			// 	opacity: 0.6;
			// }
		}
		.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 {
				font-size: 28rpx;
				font-weight: bold;
				color: #666666;
				margin-bottom: 16rpx;
			}
			.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;
        }
      }
    }
  }