veterans_H5/h5_web/pages/skillsTraining/courseDetailed/courseDetailed.scss

/* 技能培训---课程详细 */
page {
	background-color: #f2f2f2;
	font-family: 'PingFangSC-Regular, PingFang SC';
	
	.details {
		
		&-video {
			
			&-con {
				width: 100%;
				height: 400rpx;
			}
		}
		
		&-content {
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin-top: -6rpx;
			border-radius: 0 0 18rpx 18rpx;
			
			&-title {
				color: #424242;
				font-size: 42rpx;
				font-weight: 600;
			}
			
			&-progress {
				padding: 26rpx 0;
				color: #EF651F;
				font-size: 28rpx;
			}
			
			&-teacher {
				font-size: 36rpx;
				color: #424242;
				margin-bottom: 22rpx;
			}
			
			&-info {
				color: #545454;
				font-size: 28rpx;
				line-height: 44rpx;
			}
		}
		
		&-classes {
			background-color: #fff;
			border-radius: 18rpx 18rpx 0 0;
			padding: 42rpx 30rpx;
			margin-top: 26rpx;
			&-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #424242;
				font-size: 38rpx;
				view {
					&:last-child {
						color: #A3A3A3;
						font-size: 28rpx;
					}
				}
			}
			&-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
				&-item {
					margin-right: 20rpx;
					view {
						&:first-child {
							padding: 20rpx 34rpx;
							background-color: #C4C4C4;
							color: #fff;
							font-size: 40rpx;
							border-radius: 16rpx;
						}
						&:last-child {
							text-align: center;
							margin-top: 10rpx;
							color: #525252;
							font-size: 26rpx;
						}
					}
				}
				.active {
					view {
						&:first-child {
							background: linear-gradient(168deg, #A5C8AC 0%, #709078 100%);
						}
						&:last-child {
							color: #525252;
						}
					}
				}
			}
		}
		
		&-line {
			height: 1px;
			width: 100%;
			background-color: #fff;
			padding: 0 30rpx;
			view {
				height: 1px;
				width: 100%;
				background-color: #CDCDCD;
			}
		}
		
		&-comment {
			background-color: #fff;
			border-radius: 0 0 18rpx 18rpx;
			padding: 30rpx;
			&-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				view {
					&:first-child {
						font-size: 38rpx;
						color: #424242;
					}
					&:last-child {
						color: #8D8D8D;
						font-size: 28rpx;
					}
				}
			}
			&-list {
				&-item {
					margin-bottom: 60rpx;
					display: flex;
					align-items: center;
					// &:last-child {
					// 	padding-bottom: 60rpx;
					// 	margin-bottom: 20rpx;
					// 	border-bottom: solid 1px #DBDBDB;
					// }
					.left {
						margin-right: 24rpx;
					}
					.right {
						view {
							line-height: 40rpx;
							&:first-child {
								color: #3D3D3D;
								font-size: 32rpx;
							}
							&:nth-child(2) {
								font-size: 28rpx;
								color: #A5A5A5;
								text {
									margin-left: 10rpx;
								}
							}
							&:last-child {
								font-size: 28rpx;
								color: #6C6C6C;
							}
						}
					}
				}
			}
			&-page {
				border-bottom: solid 1px #DBDBDB;
				padding-bottom: 10rpx;
			}
			&-mine {
				margin-top: 46rpx;
				font-size: 36rpx;
				color: #000000;
				margin-bottom: 20rpx;
			}
			&-conent {
				&-star {
					margin-bottom: 22rpx;
				}
				&-textarea {
					background-color: #F5F5F5;
				}
				&-button {
					height: 80rpx;
					line-height: 80rpx;
					background-color: #709078;
					text-align: center;
					color: #fff;
					font-size: 30rpx;
					margin-top: 52rpx;
				}
			}
		}
	}
}

.video-control {
	background-color: rgba(0, 0, 0, 0.1);
	height: 90rpx;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 997;
}
.video-wrap {
	position: relative;
}
.multi-list.full-screen.vertical {
	height: 100vh !important;
	padding: 8vh 0;
}
.multi-list.full-screen.horizontal {
	height: 100vw !important;
	padding: 8vw 0;
}
.multi {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	z-index: 998;
	width: 100rpx;
	color: #fff;
	padding: 10rpx 0;
	text-align: center;
	transition: color ease 0.3s;
}
.multi.rate {
	right: 30rpx;
}
.multi-list {
	position: absolute;
	height: 100%;
	width: 0;
	background-color: rgba(0, 0, 0, 0.65);
	top: 0;
	right: 0;
	transition: width 0.3s ease;
	z-index: 999;
	box-sizing: border-box;
	padding: 20rpx 0;
}
.multi-list.rate {
	padding: 25rpx 0;
}
.multi-list.active {
	width: 200rpx;
}
.multi-item {
	text-align: center;
	color: #fff;
	line-height: 80rpx;
	transition: color ease 0.3s;
}
.multi-item.rate {
	line-height: 70rpx;
}
.multi-item:hover,
.multi:hover {
	color: #00d8ff;
}
.multi-item.active {
	color: #00d8ff;
}
.mask-loading {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}