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;
		.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;
				// background-color: #FFB102;
				// color: #fff;
				background-color: #fff;
				// background-color: #007AFF;
				color: #9356DE;
				border-radius: 19rpx;
			}
		}
		.liv_time {
			font-size: 20rpx;
			color: #fff;
			margin-top: 17rpx;
		}
		.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;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.lefts {
		width: 202rpx;
		height: 223rpx;
		border-radius: 12rpx;
		margin-right: 35rpx;
		position: relative;
		top: 0;
		left: 0;
		.lefet_img {
			width: 100%;
			height: 100%;
			display: block;
		}
		.live_icon {
			width: 65rpx;
			height: 35rpx;
			line-height: 35rpx;
			border-radius: 22rpx 0rpx 22rpx 0rpx;
			background-color: #FFB102;
			color: #fff;
			font-size: 20rpx;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.rights {
		width: 400rpx;
		height: 223rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;;
		.cou_titles {
			margin-top: 14rpx;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
			width: 100%;
			@include threeDot();
		}
		.learn_ranges {
			color: #999;
			font-size: 24rpx;
			margin-top: 24rpx;
			.l_range {
				width: 20rpx;
				height: 24rpx;
				margin-right: 9rpx;
			}
			.l_time {
				color: #333;
			}
		}
		.learn_progress {
			width: 100%;
		}
		.progress_up {
			font-size: 24rpx;
			// font-weight: 400;
			color: #999999;
			display: flex;
			align-items: center;
			.wk_icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
		.progress_down {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.enter_into {
			width: 165rpx;
			height: 48rpx;
			line-height: 48rpx;
			background: #FFB102;
			border-radius: 0rpx 16rpx 16rpx 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			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;
	}
}