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

/* 技能培训---课程详细 */
page {
	background-color: #f2f2f2;
	font-family: 'PingFangSC-Regular, PingFang SC';
	
	.details {
		
		&-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;
					.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;
				}
			}
		}
	}
}