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

.container {
	width: 100%;
	height: 100%;
	
	& > view {
		width: 100%;
		height: 100%;
	}
}

.payment-wrap {
	.header {
		height: .66rem;
		display: flex;
		align-items: center;
		border-bottom: .01rem solid #E6E6E6;
	}
	
	.body {
		flex: 1;
		height: 0;
		padding: .15rem 0;
		box-sizing: border-box;
		display: flex;
	}
	
	.info-wrap {
		flex: 1;
		width: 0;
		margin-right: .15rem;
		display: flex;
		flex-direction: column;
		
		.info {
			flex: 1;
			height: 0;
			background-color: #F7F8FA;
			padding-bottom: .15rem;
			box-sizing: border-box;
			
			/deep/ .uni-scroll-view-content {
				margin: 0 .15rem;
				width: calc(100% - .3rem);
				box-sizing: border-box;
			}
			
			.payment-money {
				text-align: right;
				font-size: .2rem;
				border-bottom: .01rem solid #E6E6E6;
				line-height: .6rem;
			}
			
			.title {
				line-height: .6rem;
				font-size: .16rem;
			}
			
			.uni-flex {
				flex-wrap: wrap;
			}
			
			.type-item {
				padding: .2rem .10rem;
				background: #fff;
				border: .01rem solid #e6e6e6;
				display: flex;
				align-items: center;
				font-size: .16rem;
				margin: 0 .1rem .1rem 0;
				width: calc((100% - 0.86rem) / 3);
				line-height: 1;
				cursor: pointer;
				position: relative;
				border-radius: .02rem;
				
				.name {
					flex: 1;
					width: 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				&:nth-child(3n+3){
					margin-right: 0;
				}
				
				.iconfont {
					color: $primary-color;
					font-size: .3rem;
					margin-right: .1rem;
				}
				
				.text {
					color: #FE2278;
					margin-left: .05rem;
				}
				
				.iconxuanzhong {
					position: absolute;
					display: none;
				}
				
				&.active {
					border-color: $primary-color;
					.iconxuanzhong {
						display: block;
						right: -.11rem;
						bottom: -.01rem;
					}
				}
				
				&.disabled {
					background: #f5f5f5;
					cursor: not-allowed;
				}
			}
			
			.pay-type {
				.type-item {
					padding: .15rem .1rem;
				}
				
				.pay-icon {
					color: #fff;
					background: #F0F0F0;
					width: .3rem;
					height: .3rem;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: .16rem;
					border-radius: .05rem;
				}
			}
		}
		
		.button-wrap {
			padding-top: .15rem;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			
			.scancode {
				color: $primary-color;
			}
			
			button {
				margin: 0 0 0 .1rem;
				min-width: 1rem;
			}
			
			.print-ticket {
				flex: 1;
				width: 0;
				display: flex;
				align-items: center;
			}
		}
	}
	
	.bill-wrap {
		width: 3rem;
		border: .01rem solid #E6E6E6;
		
		.title {
			text-align: center;
			font-size: .2rem;
			border-bottom: .01rem solid #E6E6E6;
			line-height: .6rem;
		}
		
		.body {
			padding: 0;
			margin: 0 .15rem;
			display: block;
			height: auto;
			
			.block-title {
				position: relative;
				text-align: center;
				width: 100%;
				height: .35rem;
				margin-top: .2rem;
				
				text {
					padding: 0 .2rem;
					background: #fff;
					position: absolute;
					left: 50%;
					top: 50%;
					z-index: 1;
					transform: translate(-50%, -50%);
					font-size: .16rem;
				}
				
				&::before{
					content: "";
					position: absolute;
					width: 100%;
					top: 50%;
					left: 0;
					border-top: .01rem dashed #E6E6E6;
				}
			}
			
			.bill-info {
				display: flex;
				justify-content: space-between;
				line-height: 1;
				align-items: center;
				margin-top: .20rem;		
					
				.text {
					color: #FE2278;
				}
			}
			
		}
	}
	
	.remark-info {
		padding: 0.1rem;
		background-color: rgba($color: $primary-color, $alpha: 0.1);
		color: $primary-color;
		margin-top: 0.1rem;
		font-size: 0.12rem;
	}
}

.pay-result {
	.body {
		flex: 1;
		height: 0;
		text-align: center;
	
		&.status {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			
			.iconfont {
				font-size: 1rem;
				color: $primary-color;
			}
			
			.msg {
				margin-top: 0.1rem;
				font-size: .16rem;
				color: $uni-color-primary;
			}
		}
	}
	
	.footer {
		height: .66rem;
		display: flex;
		align-items: center;
		border-top: .01rem solid #E6E6E6;
		justify-content: center;
		
		button {
			margin: 0 0 0 .15rem;
			width: auto;
			min-width: 1.6rem;
			height: .45rem;
			line-height: .45rem;
		}
	}
}

.money-wrap {
	background: #fff;
	border-radius: .05rem;
	
	.head {
		height: .6rem;
		line-height: .6rem;
		text-align: center;
		font-weight: bold;
		position: relative;
		
		text {
			font-size: .16rem;
		}
		
		.iconguanbi1 {
			position: absolute;
			right: .15rem;
			font-size: .22rem;
			cursor: pointer;
		}
	}
	
	.content-wrap {
		display: flex;
		border: .01rem solid #e6e6e6;
		height: .6rem;
		align-items: center;
		margin: 0 .2rem;
		padding: 0 .15rem;
		
		.unit {
			font-size: .25rem;
		}
		
		.money {
			margin-left: .05rem;
			font-size: .2rem;
		}
	}
	
	.keyboard-wrap {
		width: 4rem;
		padding: 0 .2rem .3rem .2rem;
		margin-top: .1rem;
	}
}

.coupon-wrap {
	background: #fff;
	width: 6rem;
	border-radius: .05rem;
	
	.head {
		height: .6rem;
		line-height: .6rem;
		text-align: center;
		font-weight: bold;
		position: relative;
		
		text {
			font-size: .16rem;
		}
		
		.iconguanbi1 {
			position: absolute;
			right: .15rem;
			font-size: .22rem;
			cursor: pointer;
		}
	}
	
	.body {
		height: 3rem;
	} 
	
	.list {
		display: flex;
		padding: .1rem .15rem;
		flex-wrap: wrap;
		
		.item {
			margin: 0 .1rem .1rem 0;
			padding: .1rem 0;
			border: .01rem solid #E6E6E6;
			width: calc((100% - .14rem) / 2);
			cursor: pointer;
			display: flex;
			position: relative;
			
			.iconxuanzhong {
				position: absolute;
				display: none;
				right: -.01rem;
				bottom: -.01rem;
				font-size: .3rem;
			}
			
			&.active {
				border-color: $primary-color;
				.iconxuanzhong {
					display: block;
					color: $primary-color;
				}
			}
			
			&:nth-child(2n+2) {
				margin-right: 0;
			}
			
			.money {
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: .6rem;
				min-width: 1rem;
				font-size: .2rem;
				line-height: 1;
				
				.unit {
					font-size: .16rem;
					margin-top: .05rem;
					font-weight: bold;
				}
			}
			
			.info {
				padding: 0 .1rem;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				.title {
					font-weight: bold;
				}
				.time,.limit {
					font-size: .12rem;
					color: #999;
					line-height: 1;
					margin-top: .05rem;
				}
			}
		}
	}
}

.safe-verify-popup {
	width: 4rem;
	height: 3.1rem;
	background-color: #fff;
	border-radius: .1rem;
	
	.header {
		height: .6rem;
		line-height: .6rem;
		text-align: center;
		position: relative;
		
		.type-wrap {
			display: flex;
			
			.item {
				margin-left: .15rem;
				font-size: .16rem;
				cursor: pointer;
				
				&.active {
					font-size: .18rem;
					color: $primary-color;
					font-weight: bold;
				}
			}
		}
		
		.iconguanbi1 {
			position: absolute;
			right: .15rem;
			top: 0;
			font-size: .22rem;
			cursor: pointer;
			font-weight: bold;
		}
	}
	
	.content {
		padding: 0 .3rem;
		margin-top: .2rem;
	}
	
	.tips {
		color: #999;
	}
	
	.mobile {
		font-size: .25rem;
		font-weight: bold;
		margin-top: .05rem;
	}
	
	.sms-code {
		display: flex;
		align-items: center;
		margin-top: .15rem;
		border-bottom: .01rem solid #eee;
		padding: .15rem 0;
		
		input {
			flex: 1;
			margin: 0 .1rem 0 0;
			padding: 0;
			border-bottom: none;
			font-size: .14rem;
		}
		
		.send-tip {
			color: $primary-color;
			font-size: .13rem;
			cursor: pointer;
			
			&.disabled {
				color: #999;
				cursor: not-allowed;
			}
		}
	}
	
	.placeholder {
		font-size: .14rem;
	}
	
	.primary-btn {
		margin-top: .3rem;
		line-height: .4rem;
	}
	
	.scancode-wrap {
		text-align: center;
		
		.input-wrap {
			display: flex;
			
			input {
				width: 0;
				flex: 1;
				height: 0.5rem;
				border: 0.01rem solid #cccccc;
				text-align: center;
				padding: 0 .1rem;
				box-sizing: border-box;
				transition: all .3s;
				&.focus {
					border-color: $primary-color;
					box-shadow: 0 0 .02rem .02rem rgba($primary-color, .3);
				}
			}
			
			.primary-btn {
				margin: 0 0 0 .1rem;
				line-height: .5rem;
				width: .7rem;
			}
		}
		image {
			width: 3rem;
			padding: .2rem .4rem;
			box-sizing: border-box;
		}
	}
}

.third-popup {
	width: 4rem;
	height: 5rem;
	background-color: #fff;
	border-radius: .1rem;
	display: flex;
	flex-direction: column;
	
	&.member {
		height: 3.3rem;
	}
	
	.head {
		height: .8rem;
		line-height: .8rem;
		text-align: center;
		position: relative;
		
		text {
			font-size: .25rem;
		}
		
		.iconguanbi1 {
			position: absolute;
			right: .15rem;
			font-size: .22rem;
			cursor: pointer;
			font-weight: bold;
		}
	}
	
	.money {
		text-align: center;
		font-size: .18rem;
		color: $primary-color;
	}
	
	.scan-code-type {
		display: flex;
		width: 100%;
		margin-top: .2rem;
		background-color: #f5f5f5;
		
		.type-item {
			flex: 1;
			text-align: center;
			line-height: .5rem;
			font-size: .16rem;
			cursor: pointer;
			border-bottom: .03rem solid #f5f5f5;
			position: relative;
			
			&.active {
				border-bottom: .03rem solid $primary-color;
			}
			
			&:last-child::after {
				content: " ";
				position: absolute;
				left: 0;
				top: 20%;
				width: .01rem;
				height: 60%;
				background: #ddd;
			}
		}
	}
	
	.content-wrap  {
		flex: 1;
		height: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.qrcode-wrap {
			display: flex;
			justify-content: center;
			
			.empty {
				padding: 1rem 0;
				text-align: center;
			}
			
			.qrcode-item {
				height: 1.3rem;
				width: 1.3rem;
				padding: .1rem;
				box-shadow: 0 .02rem .1rem 0 rgba(0,0,0,.1);
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				
				.qrcode {
					width: 100%;
				}
				.logo {
					width: .25rem;
					position: absolute !important;
					z-index: 5;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
				&:nth-child(2){
					margin-left: .2rem;
				}
			}
		}
		
		.scancode-wrap {
			input {
				width: 3rem;
				height: 0.5rem;
				border: 0.01rem solid #cccccc;
				text-align: center;
				padding: 0 .1rem;
				box-sizing: border-box;
				transition: all .3s;
				&.focus {
					border-color: $primary-color;
					box-shadow: 0 0 .02rem .02rem rgba($primary-color, .3);
				}
			}
			image {
				width: 3rem;
				padding: .2rem .4rem;
				box-sizing: border-box;
			}
		}
	}
	
}

.remark-wrap {
	width: 6rem;
	background-color: #fff;
	border-radius: 0.04rem;
	box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);

	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.15rem;
		height: 0.45rem;
		line-height: .45rem;
		border-bottom: 0.01rem solid #e8eaec;
		.iconfont{
			font-size: $uni-font-size-lg;
		}
	}

	.body {
		padding: 0.15rem 0.15rem 0.1rem;

		textarea {
			border: 0.01rem solid #e6e6e6;
			width: 100%;
			padding: 0.1rem;
			box-sizing: border-box;
			font-size: 0.14rem;
		}

		.placeholder-class {
			font-size: 0.14rem;
		}
	}

	.footer {
		height: 0.5rem;
		padding-bottom: .05rem;
		display: flex;
		align-items: center;
		justify-content: center;
		button {
			width: 95%;
		}
	}	
}