MeetMateApp/pages/w3/levRule.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;
}
.top {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	width: 750rpx;
	.bgnum {
		width: 165rpx;height: 72rpx;margin-right:30rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/rule/bg_num.png');
		background-size: 165rpx 72rpx;
		display: flex;flex-direction: row;justify-content: center;align-items: center;padding-left: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}
.top2 {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 750rpx;height:200rpx;
	.guidao {
		width: 512rpx;height: 100rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/rule/guidao.png');
		background-size: 512rpx 100rpx;
		display: flex;flex-direction: column;justify-content: center;align-items: center;padding-left: 40rpx;
		position: relative;
		.left {
			width:68rpx;height:68rpx;position: absolute;left:8rpx;bottom:-8rpx;
		}
		.center {
			width:100rpx;height:100rpx;position: absolute;bottom:-50rpx;left:206rpx;
		}
		.right {
			width:68rpx;height:68rpx;position: absolute;right:8rpx;bottom:-8rpx;
		}
	}
}
.top3 {
	display: flex;flex-direction: row;justify-content: center;align-items: center;
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
}
.header {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 750rpx;height: 320rpx;
	
	.bg {
		display: flex;flex-direction: row;
		width: 650rpx;height: 320rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/w3_bg_2.png');
		background-size: 650rpx 320rpx;
		justify-content: center;
		padding-left:50rpx;
		position: relative;
		.left {
			width:650rpx;
			display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
			.name {
				.icon{
					width:128rpx;height:78rpx;
				}
				font-weight: bold;padding-top:36rpx;
				font-size: 64rpx;
				color: #F28700;
			}
			.prize {
				padding-top:30rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.desc {
				font-weight: 400;padding-top:12rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
		.right {
			width:300rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
			position: absolute;right:10rpx;
			.icon {
				width:296rpx;height:296rpx;
			}
		}
		
	}
}

.thread {
	height: 20rpx;
}

.thread2 {
	height: 60rpx;
}
.tbody {
	display: flex;flex-direction: column;justify-content:flex-start;align-items: flex-start;
	width: 650rpx;height: 532rpx;margin:10rpx auto;
	.title {
		width:100%;height:90rpx;font-weight: bold;font-size: 36rpx;color: #FFFFFF;
		display: flex;flex-direction: column;justify-content: center;align-items: flex-start;
		.icon {
			width:494rpx;height:84rpx;
		}
	}
	.item {
		width:100%;height:90rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;
		color:#fff;padding:20rpx 30rpx;margin-top:10rpx;
	}
	.num {
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFF4F;text-align: center;
	}
	.line{
		margin-left: 15rpx;
		width: 610rpx;
		height: 0rpx;
		border-bottom: 3rpx dashed #FFFFFF;
		opacity: 0.3;
		margin-top: 12rpx;
	}
}

.footer {
	width:690rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin:0 auto;
	.item {
		width:172rpx;
		.icon {
			width:172rpx;height:40rpx;
		}
		.icon2 {
			width:216rpx;height:52rpx;
		}
	}
	.item:nth-child(2){
		width:216rpx;
	}
}