MeetMateApp/pages/chat/message.scss

page {
	background-color: #161616;
	width: 100%;
	height: 100%;
}
.page {
	background-color: #161616;
	width: 100%;
	height:100vh;
}
.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 750rpx;height: 320rpx;
	padding-top: calc(var(--status-bar-height) + 0rpx);
	background: url('../../static/home/top_bg.png');
	background-size: 100% 100%;
	.left {
		display: flex;flex-direction: row;height:160rpx;
		justify-content: center;
		padding-left:30rpx;
		image {
			width:84rpx;height:52rpx;
		}
	}
	.right {
		display: flex;flex-direction: row;height:160rpx;
		justify-content: center;
		padding-right:30rpx;
		image {
			width:48rpx;height:48rpx;
		}
	}
}
.thread {
	height: 20rpx;
}
.thread2 {
	height: 60rpx;
}
.pop_more {
	position: fixed;right:26rpx;top:calc(var(--status-bar-height) + 220rpx);
	width:232rpx;height:266rpx;
	background: url('../../static/sms/more_bg.png');
	background-size: 100% 100%;z-index: 9999;
	image {
		width:40rpx;height:40rpx;margin-right: 16rpx;
	}
	display: flex;flex-direction: column;justify-content: space-around;align-items: center;padding-top:30rpx;padding-bottom: 30rpx;
	.item {
		display: flex;flex-direction: row;justify-content: space-around;align-items: center;color:#fff;font-size: 28rpx;
	}
	.line {
		width: 168rpx;height: 2rpx;
		background: rgba(255,255,255,0.28);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
}
.tab_list {
	width:750rpx;display: flex;flex-direction: row;justify-content: space-around;align-items: center;margin-top:-120rpx;
	padding:0 50rpx;
	.item {
		display: flex;flex-direction: column;justify-content: center;align-items: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		.yuan {
			width: 96rpx;height: 96rpx;border-radius: 48rpx;
			border: 2rpx solid #404040;
			display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom:10rpx;
		}
		.icon {
			width:64rpx;height:64rpx;
		}
	}
	.active {
		display: flex;flex-direction: column;justify-content: center;align-items: center;
		.yuan {
			background: linear-gradient( 180deg, #3E223E 0%, #857283 100%);
		}
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}
.no-content {
	display: flex;flex-direction: column;justify-content: center;align-items: center;
	image {
		width:276rpx;height:276rpx;
	}
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
}


	.page-message {
		width:750rpx;height:100vh;
		.cl-topbar {
			height: 100rpx;
			padding-left: 30rpx;

			.content {
				font-size: 36rpx;
				font-weight: bold;
				display: inline-block;
			}

			image {
				position: absolute;
				right: 60rpx;
				height: 40rpx;
				width: 40rpx;
			}
		}

		.list {
			padding: 35rpx 30rpx;
			padding-top:80rpx;
			
			.list-content{
				height: 130rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #ebebeb;
				position: relative;
			}
			.list-content:before{
				content:'';
				width: 120rpx;
				height: 10rpx;
				background-color: #161616;
				position: absolute;
				bottom: -6rpx;
			}
			.item {
				display: flex;
				margin-right: 20rpx;
				.avatar {
					position: relative;
					width: 90rpx;
					height: 90rpx;
					margin-right: 30rpx;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.avatorImg {
						width: 90rpx;
						height: 90rpx;
						background-color: #0492fe;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-weight: bold;
						font-size: 40rpx;
					}

					.avatorImg2 {
						width: 90rpx;
						height: 90rpx;
						background-color: #d4237a;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-weight: bold;
						font-size: 40rpx;
					}

					.number {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						top: -36rpx;
						right: -24rpx;
						width: 36rpx;
						height: 36rpx;
						background-color: #fe6d73;
						border-radius: 50% 50% 50% 0;
						font-size: 20rpx;
						font-weight: 400;
						color: #ffffff;
					}
				}

				.content {
					display: flex;
					// padding-bottom: 25rpx;
					// border-bottom: 2rpx solid #ebebeb;
					flex: 1;

					.info {
						flex: 1;

						.name {
							display: block;
							margin-bottom: 14rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #fff;
						}

						.last {
							font-size: 24rpx;
							font-weight: 400;
							color: #bbbbbb;
						}
					}

					.time {
						font-size: 24rpx;
						font-weight: 400;
						color: #bbbbbb;
					}
				}
			}
		}

		.kongbai {
			position: fixed;
			top: 0rpx;
			bottom: 0rpx;
			left: 0rpx;
			right: 0rpx;
			text-align: center;
			padding-top: 200rpx;
			font-size: 24rpx;

			image {
				width: 500rpx;
			}
		}
	}
.listSys {
	display: flex;flex-direction: column;justify-content: center;width:750rpx;padding:30rpx;
	.item {
		display: flex;flex-direction: row;justify-content: center;color:#fff;
		width:690rpx;margin: 0 auto;height:162rpx;
		.img {
			width:138rpx;
			display: flex;flex-direction: row;justify-content: center;align-items: center;
			.bg {
				width: 80rpx;height: 80rpx;border-radius: 40rpx;
				background: linear-gradient( 180deg, #293744 0%, #6C7C7F 100%);
				display: flex;flex-direction: row;justify-content: center;align-items: center;
				.icon {
					width:56rpx;height:56rpx;
				}
			}
		}
		.content {
			width:552rpx;
			display: flex;flex-direction: column;justify-content: center;align-items: flex-start;
			border-bottom: solid 1px #393939;
			.title {
				font-size: 28rpx;color:#fff;
			}
			.time {
				font-size: 24rpx;color:#999;padding-top:8rpx;
			}
		}
	}
}
	.PopMain {
		// padding: 4rpx 50rpx;
		line-height: 80rpx;
		text-align: center;
		color: #8e8e8e;
		background-color: #fff;
		border-radius: 12rpx;
	}