saas_miniprogram/pages/questionBank/index.scss

@mixin threeDot {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.had_courses{
	width: 100%;
	padding: 0rpx 24rpx 31rpx;
}

.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;
			// justify-content: flex-start;
			justify-content: space-between;
			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: 48rpx;
		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: 380rpx;
		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 {
			font-size: 24rpx;
			color: #999999;
			width: 100%;
			.progress_bar {
				margin-top: 16rpx;
			}
		}
		.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: 64rpx;
		border-radius: 32rpx;
		background-color: #007AFF;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}
}