MeetMateApp/pages/w3/tran.scss

page {
	background-color: #0F0F1D;
	width: 100%;
	height: 100vh;
}
.page {
	width: 750rpx;height:1624rpx;
	background: linear-gradient( 180deg, #24234B 0%, #0F0F1D 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	background-repeat: repeat-y;
}
.bodyMain {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	
	.bg {
		display: flex;flex-direction: column;
		width: 690rpx;height: 800rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/tran/bg_tran.png');
		background-size: 690rpx 800rpx;
		justify-content: center;
		.item {
			display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;
			.iconId {
				width:44rpx;height:44rpx;margin-left:40rpx;
			}
			.btn {
				width:610rpx;height:96rpx;margin:0 auto;margin-bottom: 20rpx;
				background: url('http://c.yujianmate.com/images/v1/w3/tran/btn.png');
				background-size: 610rpx 96rpx;
				display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
			}
		}
		.num1 {
			width:100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top:40rpx;
			.num {
				width:500rpx;height:60rpx;padding-left:40rpx;
				input {
					background: none;border:none;color:#fff;
				}
			}
			.all {
				width:190rpx;height:60rpx;font-weight: bold;text-align: right;padding-right: 40rpx;
				font-size: 28rpx;
				color: #FFFF4F;
			}
		}
		.num2 {
			width:100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;
			margin-top:20rpx;margin-bottom: 40rpx;
			.num {
				width:200rpx;height:60rpx;padding-left:40rpx;font-weight: 400;font-size: 28rpx;color: #FFFFFF;
			}
			.all {
				width:490rpx;height:60rpx;text-align: right;padding-right: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.line {
			width: 610rpx;height: 2rpx;margin-left:40rpx;
			background: #393939;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
		
	}
	.bg2 {
		display: flex;flex-direction: column;
		width: 690rpx;margin-top:20rpx;
		justify-content: center;
		.item {
			display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
			margin-top: 20rpx;
			margin-left: 50rpx;
			.iconId {
				width:314rpx;height:110rpx;margin-left:20rpx;
			}
		}
		.itemRule {
			display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
			width: 690rpx;height: 600rpx;
			// background: url('http://c.yujianmate.com/images/v1/w3/tran/bg_desc.png');
			// background-size: 690rpx 560rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
			.ruleItem {
				width:590rpx;height:56rpx;
				
				.line{
					width: 590rpx;
					height: 0rpx;
					border-bottom: 3rpx dashed #FFFFFF;
					opacity: 0.3;
					margin-top: 12rpx;
				}
				.info{
					display: flex;flex-direction: row;justify-content: space-between;align-items: center;
					width:590rpx;
					.left {
						display: flex;flex-direction: column;justify-content: center;
						// background: #ffffff;
						align-items: center;
						width:295rpx;
						
						
					}
					.right{
						// background: #393939;
						align-items: center;
						width:295rpx;
						display: flex;flex-direction: column;justify-content: center;


					}
				}
			}
		}
	}
}

.thread {
	height: 20rpx;
}

.thread2 {
	height: 60rpx;
}
.sigin {
	display: flex;flex-direction: row;justify-content:flex-end;align-items: center;
	width: 650rpx;height: 180rpx;margin:10rpx auto;
	background: url('http://c.yujianmate.com/images/v1/w3/signin.png');
	background-size: 650rpx 180rpx;
	.btn {
		width:152rpx;height:72rpx;border-radius: 20rpx;margin-right:30rpx;
		background-color: #fff;
		display: flex;flex-direction: row;justify-content: center;align-items: center;
	}
}

.list_r {
	width:750rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-top:20rpx;
	font-weight: bold;padding-left:40rpx;
	font-size: 32rpx;
	color: #FFFFFF;
	.item1 {
		width: 314rpx;height: 110rpx;margin-right:20rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/bg_c1_box.png');
		background-size: 314rpx 110rpx;
	}
	.item2 {
		width: 314rpx;height: 110rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/bg_c1_share.png');
		background-size: 314rpx 110rpx;
	}
	.item3 {
		width: 314rpx;height: 110rpx;margin-right:20rpx;margin-top:20rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/bg_c1_tran.png');
		background-size: 314rpx 110rpx;
	}
	.item4 {
		width: 314rpx;height: 110rpx;margin-top:20rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/bg_c1_x.png');
		background-size: 314rpx 110rpx;
	}

}

.list_item {
	width:690rpx;height:308rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
	background: url('http://c.yujianmate.com/images/v1/w3/bg_box.png');
	background-size: 690rpx 308rpx;margin:0 auto;
	.item1 {
		width:690rpx;height:70rpx;
		display: flex;flex-direction: row;justify-content: space-between;align-items: center;
		.left {
			font-weight: bold;padding-left:30rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.right {
			font-weight: 400;padding-right:30rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.item2 {
		width:690rpx;height:228rpx;
		display: flex;flex-direction: row;justify-content: space-between;align-items: center;
		.left {
			width:230rpx;
			display: flex;flex-direction: row;justify-content: center;align-items: center;
			image {
				width:168rpx;
			}
		}
		.right {
			width:460rpx;
			display: flex;flex-direction: column;justify-content: space-between;align-items: center;
			.content {
				font-weight: 400;font-size: 24rpx;color: #FFFFFF;
				padding-right:80rpx;
			}
			.act {
				width:100%;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;padding-right: 30rpx;padding-top:20rpx;
				image {
					width:100rpx;height:32rpx;
				}
			}
		}
	}
}