saas_miniprogram/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: 39rpx 24rpx 31rpx;
}
.lives {
	width: 100%;
	.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;
		.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: space-between;
			margin-top: 24rpx;
		}
	}
	.lefts {
		width: 204rpx;
		height: 120rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
		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 {
			font-size: 24rpx;
			color: #999999;
			width: 50%;
			// .wk_icon {
			// 	width: 24rpx;
			// 	height: 24rpx;
			// 	margin-right: 8rpx;
			// }
			.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;
	}
}
// 弹窗
.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;
						}
						
					
				}
				
			}
		}
	}
}