.page-member {
  background: #f2f3f7;

	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	.member-info {
		padding: 40rpx 30rpx;
		position: relative;
		.member-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 314rpx;
			background: linear-gradient(180deg, #443E3C 0%, #151515 100%);
			opacity: 1;
			image {
				position: absolute;
				right: 80rpx;
				top: 0;
				width: 500rpx;
				height: 300rpx;
			}
		}
		.user-box {
			display: flex;
			align-items: center;
			position: relative;
			.sculpture {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				font-size: 0;
			}
			.text-box {
				flex: 1;
				margin: 0 20rpx;
				.name-level {
					display: flex;
					align-items: center;
					.name {
						max-width: 280rpx;
						height: 36rpx;
						line-height: 36rpx;
						font-size: 36rpx;
						font-weight: 600;
						color: #fff;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.level {
						display: flex;
						align-items: center;
						padding: 0 12rpx;
						border-radius: 36rpx;
						margin-left: 10rpx;
						height: 36rpx;
						.img {
							width: 24rpx;
							height: 24rpx;
							font-size: 0;
							opacity: .7;
						}
						.text {
							color: #fff;
							opacity: .8;
							font-size: 20rpx;
							height: 24rpx;
							line-height: 24rpx;
							margin-top: 4rpx;
							margin-left: 6rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
				.due {
					color: #fff;
					margin-top: 16rpx;
					.type {
						display: inline-block;
						width: 70rpx;
						height: 30rpx;
						text-align: center;
						background: #F3EEEA;
						opacity: 1;
						border-radius: 16rpx 16rpx 16rpx 0rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 28rpx;
						color: #9F6943;
						opacity: 1;
					}
					.type-name {
						display: inline-block;
						padding: 0 8rpx;
						text-align: center;
						height: 30rpx;
						margin-left: 8rpx;
						background: linear-gradient(270deg, #DCB092 0%, #F1D9C3 100%);
						opacity: 2;
						border-radius: 16rpx 16rpx 16rpx 0rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 28rpx;
						color: #955835;
					}
				}
			}
			.buy-btn {
				width: 160rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				font-weight: 600;
				border-radius: 56rpx;
			}
		}
		.user-assets {
			position: relative;
			margin-top: 30rpx;
			display: flex;
			margin-left: 30rpx;
			.item {
				margin-right: 30rpx;
				flex: 1;
				max-width: 190rpx;
				&:last-child {
					text-align: center;
					.number {
						justify-content: center;
					}
				}
				.text-arrow {
					display: inline-block;
					color: #fff;
					&::after {
						border-top: 2rpx solid #fff;
						border-right: 2rpx solid #fff;
					}
				}
				.number {
					color: #fff;
					font-size: 30rpx;
					font-weight: 600;
					font-family: PingFangSC-Medium, tahoma;
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					.text {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.target {
						opacity: .5;
					}
				}
			}
		}
	}
	.open-paid {
		display: flex;
		justify-content: space-between;
		position: relative;
		margin: 0 30rpx 26rpx 30rpx;
		padding: 32rpx 32rpx 30rpx 32rpx;
		background: linear-gradient(88deg, #F6E5D0 0%, #EFD7BE 100%);
		opacity: 1;
		border-radius: 16rpx;
		.paid-membership {
			.paid-title {
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 52rpx;
				color: #32312E;
				opacity: 1;
				.point {
					display: inline-block;
					width: 8rpx;
					height: 8rpx;
					margin: 8rpx 14rpx;
					background: #32312E;
					border-radius: 50%;
					opacity: 1;
				}
			}
			.lower-bar {
				width: 158rpx;
				height: 6rpx;
				margin: 8rpx 0 20rpx 0;
				background: linear-gradient(270deg, rgba(244, 224, 202, 0) 0%, #E3C09D 100%);
				opacity: 1;
			}
			.paid-pay-money {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 550;
				line-height: 40rpx;
				color: #32312E;
				opacity: 1;
			}
		}
		.open-paid-btn {
			width: 184rpx;
			height: 62rpx;
			margin: auto 0;
			background: linear-gradient(266deg, #242424 0%, #3C3634 100%);
			box-shadow: 0rpx 6rpx 16rpx rgba(194, 140, 97, 0.39);
			opacity: 1;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			text-align: center;
			line-height: 62rpx;
			color: #F8D9BA;
			opacity: 1;
		}
	}
	.benefits {
		position: relative;
		margin: 0 30rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx 10rpx 36rpx;
		.tit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			.text {
				font-size: 28rpx;
				font-weight: 600;
			}
			.text-arrow {
				color: #999;
				&::after {
					border-top: 2rpx solid #999;
					border-right: 2rpx solid #999;
				}
			}
		}
		.con-box {
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			flex-wrap: wrap;
			.no-data {
				padding: 5px 10px 0;
				color: #999;
			}
			.item {
				margin-top: 30rpx;
				width: 25%;
				.img {
					margin: auto;
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					font-size: 0;
					image {
						width: 50rpx;
						height: 50rpx;
						margin: 20rpx;
					}
				}
				.text {
					margin-top: 16rpx;
				}
			}
			.item.default {
				.img {
					background: #999 !important;
				}
				.text {
					color: #999 !important;
				}
			}
		}
	}
	.growth {
		margin: 30rpx 30rpx 0;
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		.tit {
			font-size: 28rpx;
			font-weight: 600;
		}
		.con-box {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			margin: 30rpx 20rpx 0;
			position: relative;
			padding-top: 20rpx;
			&::after {
				position: absolute;
				bottom: 54rpx;
				left: 0;
				right: 0;
				display: block;
				height: 4rpx;
				content: " ";
				font-size: 0;
			}
			.bg {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				.line {
					width: 100%;
					height: 58rpx;
					border-top: 2rpx dashed #e5e9f8;
					&:last-child {
						border-bottom: 2rpx dashed #e5e9f8;
					}
				}
			}
			.item {
				width: 25%;
				text-align: center;
				position: relative;
				.des {
					font-size: 20rpx;
					height: 20rpx;
					line-height: 20rpx;
				}
				.column {
					width: 80rpx;
					margin: 20rpx auto 20rpx;
					position: relative;
					background: #fff;
					&::after {
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						display: block;
						content: " ";
					}
				}
				.column.vip1 {
					height: 80rpx;
					&::after {
						opacity: .5;
					}
				}
				.column.vip2 {
					height: 140rpx;
					&::after {
						opacity: .7;
					}
				}
				.column.vip3 {
					height: 200rpx;
					&::after {
						opacity: .8;
					}
				}
				.column.vip4 {
					height: 260rpx;
					&::after {
						opacity: 1;
					}
				}
				.column.vip5 {
					height: 320rpx;
				}
				.text {
					font-weight: 600;
					margin-bottom: 4rpx;
				}
			}
		}
		.remark {
			padding: 30rpx 30rpx 10rpx;
			color: #999;
		}
	}
	.upgrade {
		margin: 30rpx 30rpx 0;
		padding: 30rpx;
		padding-bottom: 40rpx;
		border-radius: 10rpx;
		background: #fff;
		.tit {
			font-size: 28rpx;
			font-weight: 600;
		}
		.item {
			margin-top: 30rpx;
			padding: 24rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f9f9f9;
			background: linear-gradient(89deg, #FFFFFF 0%, #FDF8F1 100%);
			opacity: 1;
			.upgrade-images {
				width: 84rpx;
				height: 84rpx;
			}
			&:last-child {
				border: 0;
			}
			.text-box {
				margin-right: 20rpx;
				.text {
					font-weight: 600;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 34rpx;
					color: #333333;
					opacity: 1;
				}
				.add {
					height: 28rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 28rpx;
					color: #999999;
					opacity: 1;
					margin-top: 6rpx;
				}
			}
			.btn {
				height: 56rpx;
				line-height: 56rpx;
				padding: 0 30rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
				background: #E13E2D;
				opacity: 1;
				border-radius: 28rpx;
			}
		}
	}
	.popup {
		.open-membership {
			position: absolute;
			top: 324rpx;
			width: 100%;
			transform: translateY(100%);
			transition: all .3s;
		}
	}
	.popup.show {
		.open-membership {
			transform: translateY(0);
		}
	}
	.open-membership {
		.vip-box {
			height: 732rpx;
			.vip-item {
				margin: 0 15rpx;
				.item-up {
					position: relative;
					border-radius: 16rpx 16rpx 0 0;
					padding: 0 40rpx;
					height: 160rpx;
					padding-bottom: 10rpx;
					display: flex;
					align-items: center;
					.bg {
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						width: 500rpx;
						font-size: 0;
					}
					.text-box {
						position: relative;
						.name {
							display: flex;
							height: 40rpx;
							align-items: center;
							.text {
								font-size: 36rpx;
								font-weight: 600;
								color: #fff;
							}
							.cur-level {
								height: 36rpx;
								line-height: 36rpx;
								border-radius: 36rpx;
								padding: 0 12rpx;
								font-size: 20rpx;
								margin-left: 10rpx;
								font-weight: 600;
							}
						}
						.des {
							color: #fff;
							opacity: .4;
							margin-top: 12rpx;
						}
					}
				}
				.item-box {
					background: #fff;
					border-radius: 10rpx 10rpx 0 0;
					padding: 50rpx 30rpx 0;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-top: -10rpx;
					position: relative;
					.item {
						width: 25%;
						text-align: center;
						margin-bottom: 40rpx;
						.img {
							margin: auto;
							width: 80rpx;
							height: 80rpx;
							font-size: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 50%;
							image {
								width: 44rpx;
								height: 44rpx;
							}
						}
						.text {
							margin-top: 16rpx;
						}
						.des {
							color: #999;
							font-size: 20rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							margin-top: 10rpx;
						}
					}
					.item.default {
						.img {
							background: #ddd !important;
						}
						.text {
							color: #999;
						}
					}
				}
				.item-btn {
					background: #fff;
					border-radius: 0 0 16rpx 16rpx;
					padding: 6rpx 0 40rpx;
					.btn {
						width: 540rpx;
						height: 70rpx;
						line-height: 70rpx;
						border-radius: 70rpx;
						margin: 0 auto;
						text-align: center;
						font-size: 26rpx;
						font-weight: 600;
					}
					.des {
						height: 70rpx;
						line-height: 70rpx;
						color: #999;
						text-align: center;
					}
				}
				.item-btn.default {
					.btn {
						display: none;
					}
				}
			}
			.vip-item.vip1 {
				.item-up {
					background: linear-gradient(to right, #c68a5c, #e6bfa0);
					.text-box {
						.name {
							.cur-level {
								background: linear-gradient(to right, #eab880, #fce7c8);
							}
						}
					}
				}
				.item-box {
					.item {
						.img {
							background: linear-gradient(to right, #d19668, #f3c693);
							color: #fff;
						}
					}
				}
				.item-btn {
					.btn {
						background: linear-gradient(to right, #d19668, #f3c693);
						color: #fff;
					}
				}
			}
			.vip-item.vip2 {
				.item-up {
					background: linear-gradient(to right, #635775, #9f93b0);
					.text-box {
						.name {
							.cur-level {
								background: linear-gradient(to right, #9f96ad, #e8e0f5);
							}
						}
					}
				}
				.item-box {
					.item {
						.img {
							background: linear-gradient(to right, #635775, #9f96ad);
							color: #fff;
						}
					}
				}
				.item-btn {
					.btn {
						background: linear-gradient(to right, #635775, #9f96ad);
						color: #fff;
					}
				}
			}
			.vip-item.vip3 {
				.item-up {
					background: linear-gradient(to right, #345799, #628ac6);
					.text-box {
						.name {
							.cur-level {
								background: linear-gradient(to right, #345799, #6f91c7);
								color: #fff;
							}
						}
					}
				}
				.item-box {
					.item {
						.img {
							background: linear-gradient(to right, #345799, #6f91c7);
							color: #fff;
						}
					}
				}
				.item-btn {
					.btn {
						background: linear-gradient(to right, #345799, #6f91c7);
						color: #fff;
					}
				}
			}
			.vip-item.vip4 {
				.item-up {
					background: linear-gradient(to right, #080c1c, #151b33);
					.text-box {
						.name {
							.cur-level {
								background: linear-gradient(to right, #000, #272e48);
								color: #fff;
							}
						}
					}
				}
				.item-box {
					.item {
						.img {
							background: linear-gradient(to right, #262d47, #111628);
							color: #fff;
						}
					}
				}
				.item-btn {
					.btn {
						background: linear-gradient(to right, #262d47, #111628);
						color: #fff;
					}
				}
			}
		}
		.close {
			margin: 0 auto;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background: rgba(255,255,255,.75);
			font-size: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 18rpx;
				height: 18rpx;
			}
		}
	}
	.prods {
		.prod-item {
			&:nth-child(2n) {
				margin-left: 18rpx;
			}
		}
	}
}
.page-member.vip1 {
	.member-info {
		.user-box {
			.text-box {
				.name-level {
					.level {
						background: #c68a5c;
					}
				}
			}
			.buy-btn {
				background: linear-gradient(to right, #d19668, #daab86);
				color: #fff;
			}
		}
	}
	.benefits {
		.con-box {
			.item {
				.img {
					background: linear-gradient(to right, #d19668, #f3c693);
				}
			}
		}
	}
	.growth {
		.con-box {
			&::after {
				background: linear-gradient(to right, #ddb99d, #c68a5c);
			}
			.item {
				.column {
					&::after {
						background: #d19668;
					}
				}
			}
		}
	}
}
.page-member.vip2 {
	.member-info {
		.user-box {
			.text-box {
				.name-level {
					.level {
						background: #635775;
					}
				}
			}
			.buy-btn {
				background: linear-gradient(to right, #635775, #827991);
				color: #fff;
			}
		}
	}
	.benefits {
		.con-box {
			.item {
				.img {
					background: linear-gradient(to right, #635775, #9f96ad);
				}
			}
		}
	}
	.growth {
		.con-box {
			&::after {
				background: linear-gradient(to right, #9f96ad, #635775);
			}
			.item {
				.column {
					&::after {
						background: #635775;
					}
				}
			}
		}
	}
}
.page-member.vip3 {
	.member-info {
		.user-box {
			.text-box {
				.name-level {
					.level {
						background: #345799;
					}
				}
			}
			.buy-btn {
				background: linear-gradient(to right, #345799, #5d79ad);
				color: #fff;
			}
		}
	}
	.benefits {
		.con-box {
			.item {
				.img {
					background: linear-gradient(to right, #345799, #6f91c7);
				}
			}
		}
	}
	.growth {
		.con-box {
			&::after {
				background: linear-gradient(to right, #859ac2, #345799);
			}
			.item {
				.column {
					&::after {
						background: #345799;
					}
				}
			}
		}
	}
}
.page-member.vip4 {
	.member-info {
		.user-box {
			.text-box {
				.name-level {
					.level {
						background: #181d30;
					}
					.level.vip {
						.text {
							color: #eed09e;
						}
					}
				}
			}
			.buy-btn {
				background: linear-gradient(to right, #eed09e, #e4bf85);
			}
		}
		.user-assets {
			.item {
				.text-arrow {
					color: #eed09e;
					&::after {
						border-top: 2rpx solid #eed09e;
						border-right: 2rpx solid #eed09e;
					}
				}
			}
		}
	}
	.benefits {
		.con-box {
			.item {
				.img {
					background: linear-gradient(to right, #262d47, #111628);
				}
			}
		}
	}
	.growth {
		.con-box {
			&::after {
				background: linear-gradient(to right, #6b6d77, #080c1c);
			}
			.item {
				.column {
					&::after {
						background: #1e193c;
					}
				}
			}
		}
	}
}
.page-member.vip5 {
	.growth {
		.con-box {
			.item {
				.column {
					&::after {
						background: #000000;
					}
				}
			}
		}
	}
}
.member-info {
	.user-growth-value {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.bottom-v {
			display: flex;
			margin-top: 14rpx;
			justify-content: space-between;
			align-items: center;
			font-size: 10px;
			-webkit-transform: scale(1.0);
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 14px;
			color: #FFFFFF;
			opacity: 0.5;
		}
		.progress-bar {
			position: relative;
			margin-right: 20rpx;
			flex: 1;
			height: 10rpx;
			background: rgba(243, 238, 234, 0.2);
			border-radius: 6rpx;
			.progress-baring {
				position: absolute;
				max-width: 100%;
				background: linear-gradient(270deg, #DEAE8D 0%, #F1D9C3 100%);
				height: 10rpx;
				border-radius: 6rpx;
			}
		}
		.growth-name {
			display: flex;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #FFFFFF;
			opacity: 1;
			margin-right: 20rpx;
			.number {
				position: relative;
			}
		}
	}
}
.integral-icon {
	width: 24rpx;
	height: 24rpx;
}
