MeetMateApp/pages/w3/ucenter.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;
}
.header {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 750rpx;height: 320rpx;
	padding-top:30rpx;
	.bg {
		display: flex;flex-direction: row;
		width: 690rpx;height: 320rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/w3_bg_1.png');
		background-size: 690rpx 320rpx;

		// background: #211F33;
		// border-radius: 24rpx 24rpx 24rpx 24rpx;
		
		justify-content: center;
		padding-left:50rpx;
		.left {
			width:350rpx;
			display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
			.user {
				display: flex;flex-direction: row;justify-content: center;align-items: center;padding-top:44rpx;
				.avator {
					width:68rpx;height:68rpx;border-radius: 34rpx;
				}
				.iconV {
					width:78rpx;height:42rpx;
				}
				.nickname {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;padding-left: 8rpx;padding-right: 8rpx;
				}
			}
			.num {
				font-weight: bold;padding-top:64rpx;
				font-size: 64rpx;
				color: #FFFFFF;
			}
			.desc {
				font-weight: 400;padding-top:12rpx;
				font-size: 28rpx;
				color: #999999;
				display: flex;flex-direction: row;justify-content: center;align-items: center;
				image {
					width:36rpx;height:36rpx;
				}
			}
		}
		.right {
			width:300rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
			.icon {
				width:250rpx;height:250rpx;margin-top:4rpx;
			}
			.arrow {
				width:30rpx;
			}
			.desc {
				padding-top:0rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;flex-direction: row;justify-content: center;align-items: center;
				image {
					width:36rpx;height:36rpx;
				}
			}
		}
		
	}
}

.thread {
	height: 20rpx;
}

.thread2 {
	height: 60rpx;
}
.sigin {
	display: flex;flex-direction: row;justify-content:flex-end;align-items: center;
	width: 690rpx;height: 96rpx;margin:24rpx auto;
	background: url('http://c.yujianmate.com/images/v1/w3/signin.png');
	background-size: 690rpx 96rpx;
	
	.btn {
		width:152rpx;height:72rpx;border-radius: 20rpx;margin-right:40rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/signBtn.png');
		background-size: 152rpx 72rpx;
		display: flex;flex-direction: row;justify-content: center;align-items: center;
		color: #FFFFFF;
	}
	.gray {
		// background-color: rgba(255, 255, 255, 0.7);
		background:none;
	}
}

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

}

.list_item {
	width:690rpx;height:268rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
	background: url('http://c.yujianmate.com/images/v1/w3/bg_box2.png');
	background-size: 690rpx 268rpx;margin:0 auto;
	.item2 {
		width:690rpx;height:268rpx;
		display: flex;flex-direction: row;justify-content: space-between;align-items: center;
		.left {
			width:220rpx;height:268rpx;
			display: flex;flex-direction: column;justify-content: center;align-items: center;
			image {
				width:220rpx;
			}
			.price{
				width:220rpx;height:48rpx;
				background: #A785D6;
				border-radius: 0rpx 0rpx 24rpx 24rpx;
				background-size: 220rpx 48rpx;	
				font-size: 28rpx;
				text-align: center;
				color: #FFFFFF;
			}
			.name {
				font-weight: bold;margin-top: 14rpx;text-align: left;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.time {
				font-weight: 400;margin-top: 14rpx;text-align: left;
				font-size: 24rpx;
				color: #999999;
			}
		}
		.right {
			width:470rpx;
			display: flex;flex-direction: column;justify-content: space-around;align-items: center;
			.item1 {
				width:470rpx;height:32rpx;
				display: flex;flex-direction: row;justify-content: space-between;align-items: center;
				margin-top:24rpx;
				margin-bottom:24rpx;
				.left2 {
					font-weight: bold;padding-left:24rpx;
					font-size: 32rpx;
					color: #FFFFFF;
				}
				.right2 {
					font-weight: 400;padding-right:24rpx;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
			.content {
				font-weight: 400;font-size: 24rpx;color: #FFFFFF;
				padding-left:24rpx;padding-right:24rpx;
			}
			.act {
				width:100%;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;
				padding-right: 24rpx;padding-bottom:20rpx;
				.btn {
					width:136rpx;height:60rpx;border-radius: 20rpx;
					background: url('http://c.yujianmate.com/images/v1/w3/tansuo.png');
					// background: linear-gradient( 180deg, #24234B 0%, #0F0F1D 100%);
					background-size: 136rpx 60rpx;
					display: flex;flex-direction: row;justify-content: center;align-items: center;
					font-weight: bold;
					text-align: center;
					font-style: normal;
					color: #FFFFFF;
				}
				.sign_name {
					font-weight: normal;
					font-size: 24rpx;
					color: #fff;margin-bottom: 16rpx;
				}
			}
		}
	}
}