MoeNovaClient/pages/my/job.scss

page {
	background-color: #fff;
}

.page {
	background-color: #fff;
	position: relative;
}

// 顶部黄色背景
.top-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200rpx;
	background-color: #90d369;
	z-index: 0;
}

// 内容区域
.content-area {
	position: relative;
	z-index: 1;
	padding: 30rpx;
}

.topbg {
}

.topBody {
	width:750rpx;
}

.header {
	display: flex;flex-direction: row;justify-content: space-between;align-items: center;color:$title;

	.title {
		font-size: 34rpx;
	}
}

.thread {
	height:210rpx;
	padding:50rpx;font-size: 52rpx;color:#6E6A6A;padding-top: 80rpx;
}

.mainInfo {
	width: 690rpx;
	margin:30rpx 30rpx 60rpx;
	display:flex;flex-direction: column;justify-content: space-around;
	align-items: center;
	// background: #FFFFFF;
	
	
	.idList {
		display: flex;flex-direction: row;justify-content: space-between;align-items: center;
		// position: relative;
		width: 610rpx;
		height: 84rpx;
		background: #282828;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-top: 48rpx;
		.left {
			display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
			padding-left:24rpx;


		}
		.right{
			display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
			padding-right:24rpx;


		}

	}
	
	.reCheckBtn{
		width: 610rpx;
		height: 96rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 2rpx solid #404040;
		display:flex;flex-direction: column;justify-content: space-around;
		align-items: center;
		margin-top: 74rpx;
	}
	
}

.blankHeight {
	height:100rpx;
}

// 彩豆余额展示区
.bean-balance {
	width: 690rpx;
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
	
	.balance-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		.title-area {
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.yellow-dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #90d369;
				margin-right: 10rpx;
			}
			
			.my-bean-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
		
		.exchange-btn {
			width: 120rpx;
			height: 60rpx;
			background-color: #90d369;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #fff;
			font-weight: bold;
		}
	}
	
	.bean-number {
		font-size: 80rpx;
		font-weight: bold;
		color: #333;
		margin-top: 20rpx;
	}
}

// 星愿打卡区域
.sign-cards {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 30rpx;
	
	.card {
		width: 330rpx;
		height: 240rpx;
		border-radius: 24rpx;
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.card-title {
			font-size: 34rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-bottom: 10rpx;
		}
		
		.card-desc {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 30rpx;
		}
		
		.card-reward {
			font-size: 30rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
		
		.card-progress {
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-top: auto;
		}
		
		.sign-btn {
			width: 180rpx;
			height: 70rpx;
			background-color: #FFFFFF;
			border-radius: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin-top: auto;
		}
	}
	
	.purple-card {
		background-color: #9C27B0;
	}
	
	.yellow-card {
		background-color: #90d369;
	}
}

// 任务列表
.task-list {
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
	
	.task-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
		
		.task-title {
			font-size: 34rpx;
			color: #333;
			font-weight: bold;
			margin-right: 20rpx;
		}
		
		.task-subtitle {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.task-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #F0F0F0;
		
		.task-info {
			flex: 1;
			
			.task-name {
				font-size: 30rpx;
				color: #333;
				margin-bottom: 6rpx;
			}
			
			.task-desc {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.task-reward {
			font-size: 30rpx;
			color: #90d369;
			font-weight: bold;
			margin-right: 20rpx;
		}
		
		.task-btn {
			width: 120rpx;
			height: 60rpx;
			background-color: #90d369;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #fff;
			font-weight: bold;
		}
		
		.task-completed {
			background-color: #F0F0F0;
			color: #999;
		}
	}
}

// 彩豆兑换弹窗
.exchange-popup {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	
	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.popup-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #F5F5F5;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: 50rpx;
		
		.popup-header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			
			.available-balance {
				font-size: 28rpx;
				color: #333;
			}
			
			.exchange-title {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
		}
		
		.exchange-area {
			background-color: #FFFFFF;
			margin: 0 30rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			
			.exchange-title-area {
				margin-bottom: 40rpx;
				
				.exchange-main-title {
					font-size: 34rpx;
					color: #333;
					font-weight: bold;
					display: block;
					margin-bottom: 10rpx;
				}
				
				.exchange-subtitle {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.input-area {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1px solid #F0F0F0;
				margin-bottom: 50rpx;
				
				.bean-icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background-color: #FFE156;
					margin-right: 20rpx;
				}
				
				.exchange-input {
					flex: 1;
					height: 60rpx;
					font-size: 30rpx;
				}
			}
			
			.action-area {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.exchange-btn-large {
					width: 100%;
					height: 90rpx;
					background-color: #90d369;
					border-radius: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
					color: #fff;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				
				.tips-text {
					font-size: 24rpx;
					color: #999;
					text-align: center;
				}
			}
		}
	}
}

// 签到弹窗
.sign-popup {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	
	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.sign-popup-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx;
		padding-bottom: 50rpx;
		
		.sign-popup-header {
			position: relative;
			padding-bottom: 30rpx;
			
			.sign-popup-title {
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
				margin-bottom: 30rpx;
				display: block;
			}
			
			.sign-notify-switch {
				display: flex;
				flex-direction: row;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				
				.sign-notify-text {
					font-size: 24rpx;
					color: #666666;
					margin-right: 10rpx;
				}
				
				.sign-switch {
					transform: scale(0.7);
				}
			}
			
			.sign-days-tag {
				display: inline-block;
				padding: 6rpx 20rpx;
				background-color: #FFD54F;
				border-radius: 24rpx;
				font-size: 24rpx;
				color: #333;
				font-weight: bold;
			}
		}
		
		.vip-area {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background-color: #F5F5F5;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;
			
			.vip-left {
				.vip-text {
					font-size: 26rpx;
					color: #333333;
				}
			}
			
			.vip-right {
				.vip-offer {
					font-size: 24rpx;
					color: #9C27B0;
				}
			}
		}
		
		.sign-grid {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: 0 -10rpx;
			margin-bottom: 40rpx;
			
			.sign-grid-item {
				width: calc(33.33% - 20rpx);
				background-color: #F5F5F5;
				border-radius: 12rpx;
				padding: 20rpx;
				margin: 10rpx;
				position: relative;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				
				.sign-day-num {
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 10rpx;
				}
				
				.sign-item-img {
					width: 70rpx;
					height: 70rpx;
					background-color: #DDDDDD;
					border-radius: 50%;
					margin: 10rpx auto;
				}
				
				.sign-item-name {
					font-size: 24rpx;
					color: #333333;
					text-align: center;
					margin-top: auto;
				}
				
				.sign-vip-tag {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					padding: 4rpx 10rpx;
					background-color: #9C27B0;
					border-radius: 10rpx;
					font-size: 20rpx;
					color: #FFFFFF;
				}
				
				.sign-received-mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.5);
					border-radius: 12rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.received-text {
						font-size: 28rpx;
						color: #FFFFFF;
						font-weight: bold;
					}
				}
			}
		}
		
		.sign-btn-large {
			width: 100%;
			height: 90rpx;
			background-color: #9C27B0;
			border-radius: 45rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;

			&.sign-btn-disabled {
				background-color: #CCCCCC;
				color: #999999;
			}
		}
	}
}