zhongshen_project/addon/cashier---/source/os/components/nc-member/nc-member.scss

.container {
	height: 100%;
}

.header {
	height: 0.66rem;
	line-height: 0.66rem;
	text-align: left;
	border-bottom: 0.01rem solid #e6e6e6;
	color: #303133;
	font-size: 0.14rem;
}

.search-wrap {
	.search-box {
		padding-top: 2rem;
		display: flex;
		align-items: center;
		height: calc(100% - 0.86rem);
		flex-direction: column;
		justify-content: center;
		.search-title {
			font-size: 0.18rem;
			color: #303133;
		}
		.search-content {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 0.3rem;
			input {
				height: 0.5rem;
				width: 45%;
				max-width: 5rem;
				background: #ffffff;
				padding-left: 0.2rem;
				border: 0.01rem solid #cccccc;
				box-sizing: border-box;
				font-size: 0.18rem;
			}
			button {
				margin: 0;
				width: 1.2rem;
				height: 0.5rem;
				font-size: 0.18rem;
				text-align: center;
				line-height: 0.5rem;
				margin-right: 0.15rem;
			}
		}
		.search-desc {
			color: #909399;
			font-size: 0.14rem;
			margin-top: 0.3rem;
		}
		.search-tips {
			color: $primary-color;
			font-size: 0.14rem;
			margin-top: 0.15rem;
		}
	}
}

.info-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;

	.headimg-content {
		display: flex;
		align-items: center;
		margin-top: 0.2rem;
		.headimg {
			width: 0.7rem;
			height: 0.7rem;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.header-info {
			margin-left: 0.15rem;
			width: calc(100% - 0.85rem);
			.name {
				font-size: 0.16rem;
				color: #303133;
				text {
					background: #ffffff;
					border: 0.01rem solid $primary-color;
					border-radius: 0.02rem;
					font-size: 0.12rem;
					color: $primary-color;
					margin-left: 0.15rem;
					padding: 0.01rem 0.04rem;
				}
			}
			.header-info-item {
				display: flex;
				align-items: center;
				margin-top: 0.1rem;
				justify-content: space-between;
				view {
					text-align: left;
					font-size: 0.14rem;
					color: #303133;
					opacity: 0.9;
				}
			}
		}
	}

	.content-data {
		display: flex;
		align-items: flex-start;
		justify-content: space-around;
		margin-top: 0.2rem;
		border: 0.01rem solid #e6e6e6;
		padding: 0.25rem 0.3rem;
		.content-data-item {
			width: 25%;
			.item-title {
				font-size: 0.14rem;
				font-weight: 400;
				color: #303133;
				opacity: 0.9;
			}
			.item-value {
				font-size: 0.2rem;
				color: #303133;
				margin-top: 0.1rem;
			}
			.item-btn {
				font-size: 0.14rem;
				color: $primary-color;
				margin-top: 0.05rem;
				cursor: pointer;
			}
		}
	}

	.table-data-list {
		padding: 0 0.15rem;
		margin-top: 0.2rem;
	}
}

// 优惠券
.coupon-box {
	position: relative;
	padding-top: 0.3rem;
	.iconfont {
		position: absolute;
		right: 0.2rem;
		top: 0.2rem;
		font-size: 0.24rem;
		cursor: pointer;
	}
	.content-list {
		padding: 0.2rem 0rem;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		.content-item {
			width: calc((100% - 0.2rem) / 3);
			position: relative;
			background-color: #fff;
			box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			align-items: baseline;
			border-radius: 0.05rem;
			border: 0.01rem solid #eee !important;
			margin-right: 0.1rem;
			box-sizing: border-box;
			margin-bottom: 0.1rem;
			.item-title {
				color: #000;
				font-size: 0.15rem;
				padding: 0.15rem 0 0 0.15rem;
			}
			.item-content {
				color: #fe2278;
				font-size: 0.24rem;
				padding: 0.15rem 0.1rem;
				width: 100%;
				text-align: center;
				box-sizing: border-box;
				font-weight: 600;
			}
			.item-line {
				height: 0.01rem;
				width: 100%;
				border-top: 0.01rem dashed rgba(0, 0, 0, 0.2);
				position: relative;
			}
			.item-line:before {
				content: ' ';
				position: absolute;
				top: -0.13rem;
				left: -0.01rem;
				box-sizing: border-box;
				height: 0;
				width: 0;
				border-bottom: solid 0.12rem transparent;
				border-top: solid 0.12rem transparent;
				border-left: solid 0.08rem #f2f2f2;
			}
			.item-line:after {
				content: ' ';
				position: absolute;
				top: -0.13rem;
				right: -0.01rem;
				box-sizing: border-box;
				height: 0;
				width: 0;
				border-bottom: solid 0.12rem transparent;
				border-top: solid 0.12rem transparent;
				border-right: solid 0.08rem #f2f2f2;
			}
			.item-bottom {
				width: 100%;
				padding: 0.05rem 0.15rem;
				color: #999;
				font-size: 0.12rem;
				box-sizing: border-box;
			}
		}
		.content-item:nth-child(3n) {
			margin-right: 0;
		}
	}
}
.empty {
	text-align: center;
	padding-top: 1.2rem;
	margin: 0 auto;
	image {
		width: 2rem;
	}

	.tips {
		color: #999;
		margin-top: 0.15rem;
	}
}

// 录入会员
.form-box {
	.form-content {
		margin-top: 0.2rem;

		.form-item {
			margin-bottom: 0.1rem;
			display: flex;
			.form-label {
				width: 1.3rem;
				text-align: right;
				padding-right: 0.1rem;
				box-sizing: border-box;
				height: 0.32rem;
				line-height: 0.32rem;
				.required {
					color: red;
					margin-right: 0.03rem;
				}
			}
			.form-inline {
				width: 2.4rem;
				line-height: 0.32rem;
				margin-right: 0.1rem;
				box-sizing: border-box;
				.form-input {
					border-width: 0.01rem;
					border-style: solid;
					background-color: #fff;
					color: rgba(0, 0, 0, 0.85);
					border-radius: 0.02rem;
					padding-left: 0.1rem;
					height: 0.32rem;
					line-height: 0.32rem;
					font-size: 0.14rem;
					border-color: #e6e6e6;
					border-radius: 0.02rem;
				}
				.form-textarea {
					border-width: 0.01rem;
					border-style: solid;
					background-color: #fff;
					color: rgba(0, 0, 0, 0.85);
					border-radius: 0.02rem;
					padding-left: 0.1rem;
					line-height: 0.32rem;
					font-size: 0.14rem;
					border-color: #e6e6e6;
					height: 1rem;
				}
				button {
					width: calc(50% - 0.05rem);
					display: inline-block;
					margin-right: 0.1rem;
					&:nth-child(2) {
						margin-right: 0;
					}
				}
				.upload-box {
					width: 0.7rem;
					height: 0.7rem;
					cursor: pointer;
					.upload-img {
						width: 100%;
						height: 100%;
						border: 0.01rem solid #e6e6e6;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.upload-icon {
						width: 100%;
						height: 100%;
						border: 0.01rem solid #e6e6e6;
						align-items: center;
						text-align: center;
						line-height: 1.2;
						display: flex;
						flex-direction: column;
						justify-content: center;
						color: #999;
						.iconfont {
							font-size: 0.3rem;
						}
						view {
							font-size: 0.12rem;
						}
					}
				}
			}
			.search-wrap {
				position: relative;
				i {
					position: absolute;
					top: 50%;
					right: 0.1rem;
					transform: translateY(-50%);
					border-left: 0.01rem solid #e6e6e6;
					line-height: 0.3rem;
					padding-left: 0.1rem;
					cursor: pointer;
				}
			}
			.label-list {
				width: calc(100% - 1.35rem);
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.label-item {
					border: 0.01rem solid #e6e6e6;
					padding: 0.07rem 0.1rem;
					line-height: 1;
					margin-right: 0.1rem;
					border-radius: 0.03rem;
					cursor: pointer;
					position: relative;
					margin-bottom: 0.1rem;
					i {
						position: absolute;
						right: -0.01rem;
						bottom: -0.01rem;
						color: $primary-color;
						display: none;
					}
					&.active {
						border-color: $primary-color;
						i {
							display: block;
						}
					}
				}
			}
		}
	}
}

.member-card-wrap {
	flex: 1;
	margin-top: 0.2rem;
	height: 0;
	display: flex;
	flex-direction: column;

	.common-tab-wrap {
		padding: 0;
	}

	.card-wrap {
		flex: 1;
		height: 0;
		display: flex;
		padding: 0.2rem 0;
	}

	.card-list {
		width: 3rem;
		border: 0.01rem solid #e6e6e6;
		margin-right: 0.2rem;
		padding-top: 0.1rem;

		.card-item {
			width: calc(100% - 0.2rem);
			height: 1.3rem;
			background-color: #fff;
			border: 0.01rem solid $primary-color;
			margin: 0 0.1rem 0.1rem 0.1rem;
			box-sizing: border-box;
			border-radius: 0.05rem;
			cursor: pointer;
			padding: 0.15rem 0.1rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background-color: rgba($primary-color, $alpha: 0.1);

			&.active {
				background-color: $primary-color;
				color: #fff;

				.card-name {
					color: #fff;
				}

				.info {
					color: #fff;
				}
			}

			.card-name {
				font-weight: bold;
			}

			.info {
				display: flex;
				justify-content: space-between;
				color: #999;

				& > view {
					font-size: 0.13rem;
				}
			}
		}
	}

	.item-list {
		flex: 1;
		border: 0.01rem solid #e6e6e6;
		display: flex;
		flex-direction: column;
		width: 0;

		.empty {
			padding-top: 0.8rem;
		}

		.title {
			line-height: 0.3rem;
			padding: 0.1rem;
			display: flex;
			justify-content: space-between;

			.num {
				color: $primary-color;
				margin: 0 0.02rem;
			}
		}

		.button-wrap {
			display: flex;
			background-color: #fff;
			height: 0.5rem;
			line-height: 0.5rem;
			align-items: center;
			justify-content: flex-end;
			box-shadow: 0 0.04rem 0.12rem 0 rgba(0, 0, 0, 0.1);
			padding: 0.1rem 0;

			button {
				height: 0.4rem;
				line-height: 0.4rem;
				margin: 0 0.1rem 0 0;
			}
		}

		.item-wrap {
			flex: 1;
			height: 0;
			display: flex;

			.uni-flex {
				flex-wrap: wrap;
			}
		}

		.card-item {
			display: flex;
			width: 100%;
			padding: 0.1rem;
			border: 0.01rem solid #eee;
			margin: 0 0.1rem 0.1rem 0.1rem;
			border-radius: 0.03rem;
			cursor: pointer;
			transition: all 0.3s;

			&.item-mum-2 {
				width: calc((100% - 0.8rem) / 2);
				margin-right: 0;
			}

			&.item-mum-3 {
				width: calc((100% - 1.1rem) / 3);
				margin-right: 0;
			}

			.image {
				width: 0.7rem;
				height: 0.7rem;
				margin-right: 0.1rem;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 0;

				.num {
					margin-top: 0.05rem;
					color: #999;
					font-size: 0.12rem;
				}

				.price {
					font-size: 0.14rem;
					color: #fe2278;
					line-height: 1;

					.util {
						font-size: 0.12rem;
					}
				}

				.name {
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1.5;

					.tag {
						border-radius: 0.02rem;
						padding: 0.01rem 0.05rem;
						color: #fff;
						background-color: rgba($primary-color, $alpha: 0.1);
						color: #8558fa;
						font-size: 0.12rem;
						margin-right: 0.05rem;
					}
				}
			}
		}

		.operation-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 0.12rem;
			margin-top: 0.05rem;
			height: 0.25rem;
		}

		.number-wrap {
			display: none;
			height: 0.25rem;
			border: 0.01rem solid #e6e6e6;
			border-radius: 0.02rem;
			overflow: hidden;

			input {
				height: 0.25rem;
				line-height: 0.25rem;
				width: 0.25rem;
				border: 0 0.01rem 0 0.01rem solid #e6e6e6;
				text-align: center;
				background: #fff;
				font-size: 0.12rem;
			}

			.iconfont {
				height: 0.25rem;
				width: 0.25rem;
				text-align: center;
				line-height: 0.25rem;
				background: #f5f5f5;
			}
		}

		.card-item.active {
			background-color: rgba($primary-color, $alpha: 0.8);

			.num {
				color: #fff;
			}

			.price {
				color: #fff;
			}

			.name {
				color: #fff;

				.tag {
					background-color: #fff;
				}
			}

			.number-wrap {
				display: flex;
			}
		}

		.not-select {
			background: #eee;
			cursor: not-allowed;
		}
	}
}