MeetMateApp/pages/w3/box.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;
}
.thread {
	height: 20rpx;
}

.thread2 {
	height: 60rpx;
}
.tabMain {
	display: flex;flex-direction: row;justify-content: space-between;align-items: center;
	width:710rpx;margin: 0rpx auto;padding-top:20rpx;
	.menu {
		width:334rpx;height:84rpx;
		background: url('http://c.yujianmate.com/images/v1/w3/rule/tab_bg.png');
		background-size: 334rpx 84rpx;margin:0 auto;
		display: flex;flex-direction: row;justify-content: center;align-items: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #999999;
	}
	.active {
		background: url('http://c.yujianmate.com/images/v1/w3/rule/tab_bg_sel.png');
		background-size: 334rpx 84rpx;
		background-repeat: no-repeat;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.active2 {
		background: url('http://c.yujianmate.com/images/v1/w3/rule/tab_bg2_sel.png');
		background-size: 334rpx 84rpx;
		background-repeat: no-repeat;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
}
.tabMain2 {
	display: flex;flex-direction: row;justify-content: space-around;align-items: center;
	width:690rpx;margin: 20rpx auto;
	.menu {
		width:230rpx;height:52rpx;margin:0 auto;
		display: flex;flex-direction: row;justify-content: center;align-items: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.active {
		background: url('http://c.yujianmate.com/images/v1/w3/rule/bg_blank.png');
		background-size: 78rpx 8rpx;
		background-repeat: no-repeat;
		background-position: bottom;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}

.empty{
		display: flex;flex-direction: column;justify-content: normal;align-items: center;
		width:690rpx;
		height: 560rpx;
		.bg {
			margin-top: 100rpx;
			width:434rpx;
			height: 234rpx;
			background: url('http://c.yujianmate.com/images/v1/w3/empty.png');
			background-size: 434rpx 234rpx;
		}
	}
.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;
	margin-top: 24rpx;
	.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 {
				width: 100%;
				height: 100rpx;
				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;
				}
				.state_name {
					font-weight: bold;
					font-size: 28rpx;
					color: #FF4655;margin-bottom: 16rpx;
				}
			}
		}
	}
}

.state12 {
	width:690rpx;height:388rpx;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 388rpx;margin:0rpx auto;margin-bottom: 20rpx;
	.item1 {
		.right {
			font-weight: bold;
			font-size: 28rpx;
			color: #FF4655;
		}
	}
	.item2 {
		width:690rpx;height:318rpx;
		.left {
			width:280rpx;height:318rpx;
		}
		.right {
			width:410rpx;
			display: flex;flex-direction: column;justify-content: space-between;align-items: center;
			.content {
				height:128rpx;
			}
			.act {
				width:100%;display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-end;padding-right: 30rpx;
				.state_name {
					font-weight: bold;
					font-size: 28rpx;
					color: #FF4655;margin-bottom: 16rpx;
				}
				.sign_name {
					font-weight: normal;
					font-size: 24rpx;
					color: #fff;margin-bottom: 16rpx;
				}
				image {
					height:32rpx;
				}
			}
		}
	}
}