uni-bbc/src/popup.scss

/* 弹窗背景 */
.popup {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 750rpx;
	margin: auto;
	z-index: 210;
	.popup-mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.5);
	}
	.popup-con-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		transform: translateY(100%);
		transition: all .3s;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 80%;
		min-height: 40%;
	}
	.popup-tit {
		position: relative;
		padding: 30rpx;
		text-align: center;
		height: 38rpx;
		line-height: 38rpx;
		z-index: 1;
		.tit-text {
			font-size: 28rpx;
			font-weight: 600;
		}
		.close {
			width: 34rpx;
			height: 34rpx;
			position: absolute;
			top: 32rpx;
			right: 30rpx;
			border-radius: 50%;
			background: #f5f5f5;
			font-size: 0;
			image {
				width: 14rpx;
				height: 14rpx;
				margin: 10rpx auto;
			}
		}
	}
	.con-box {
		position: absolute;
		top: 98rpx;
		bottom: env(safe-area-inset-bottom);
		bottom: constant(safe-area-inset-bottom);
		left: 30rpx;
		right: 30rpx;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		&::after {
			min-height: calc(100% + 2rpx);
		}
	}
	.con-box-min {
		position: absolute;
		top: 98rpx;
		bottom: env(safe-area-inset-bottom);
		bottom: constant(safe-area-inset-bottom);
		left: 30rpx;
		right: 30rpx;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		bottom: calc(110rpx + env(safe-area-inset-bottom));
		bottom: calc(110rpx + constant(safe-area-inset-bottom));
		&::after {
			min-height: calc(100% + 2rpx);
		}
	}
	.btn-box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 110rpx;
    box-sizing: border-box;
    padding: 20rpx 30rpx;
    justify-content: space-between;
    display: none;
    margin-bottom: env(safe-area-inset-bottom);
    margin-bottom: constant(safe-area-inset-bottom);
		.btn {
			flex: 1;
			height: 70rpx;
			line-height: 70rpx;
			background: var(--mall4j-color-primary);
			color: #fff;
			text-align: center;
			border-radius: 70rpx;
			font-size: 26rpx;
			font-weight: 600;
		}
		.gray {
			background: #dddddd;
		}
	}
	.btn-box.btn-box-gray {
		.btn {
			background: #dddddd;
		}
	}
	.check-coupon {
		height: 80%;
		.con-box {
			left: 0;
			right: 0;
			background: #f2f3f7;
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 100%;
			padding-bottom: 200rpx;
			.coupon-tit {
				margin-top: 40rpx;
				.tit-text {
					font-weight: 600;
				}
				.tit-des {
					color: #999;
					font-size: 20rpx;
					margin-left: -6rpx;
				}
			}
		}
	}
	.check-discount {
		height: 50%;
    min-height: 35vh;
		.discount-item {
			display: flex;
			align-self: center;
			padding-bottom: 30rpx;
			&:first-child {
				padding-top: 20rpx;
			}
			.discount-icon {
				padding: 6rpx;
				background: var(--mall4j-color-primary);
				border-radius: 4rpx;
				color: #fff;
				font-size: 18rpx;
				display: inline-block;
				margin-right: 12rpx;
				height: 24rpx;
				line-height: 24rpx;
			}
			.text {
				flex: 1;
				margin-left: 20rpx;
				line-height: 36rpx;
				word-break: break-word;
				margin-left: auto;
			}
		}
		.discount-item.cart-discount-pop {
			.text {
				margin-left: 20rpx;
			}
		}
	}
	.check-sku {
		height: 60%;
		.goods-box {
			padding: 30rpx;
			display: flex;
			.img {
				width: 160rpx;
				height: 160rpx;
				font-size: 0;
			}
			.info {
				flex: 1;
				margin: 0 30rpx 0 20rpx;
				.name {
					height: 80rpx;
					line-height: 40rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-word;
					line-break: anywhere;
				}
				.price {
					margin-top: 20rpx;
				}
			}
			.close {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				background: #f5f5f5;
				font-size: 0;
				image {
					display: block;
					width: 14rpx;
					height: 14rpx;
					margin: 10rpx auto;
				}
			}
		}
		.con-box {
			top: 220rpx;
			bottom: calc(110rpx + env(safe-area-inset-bottom));
			bottom: calc(110rpx + constant(safe-area-inset-bottom));
			.prod-number {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.number-box {
					display: flex;
					align-items: center;
					font-family: PingFangSC-Medium, tahoma;
					font-weight: 600;
					text-align: center;
				}
			}
			.item-tit {
				margin-top: 10px;
				font-weight: 600;
			}
			.number-box {
				.minus {
					background: #f2f2f2;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 50%;
					position: relative;
					&::after {
						position: absolute;
						left: 50%;
						top: 45%;
						display: block;
						transform: translate(-50%,-50%);
						font-size: 26rpx;
						content: "-";
					}
				}
				.plus {
					background: #f2f2f2;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 50%;
					position: relative;
					&::after {
						position: absolute;
						left: 50%;
						top: 45%;
						display: block;
						transform: translate(-50%,-50%);
						font-size: 28rpx;
						content: "+";
					}
				}
				.limit {
					opacity: 0.7;
					&::after {
						color: #ccc;
					}
				}
				.number {
					width: 70rpx;
					padding: 0 10rpx;
				}
			}
		}
		.sku-item {
			margin-top: 30rpx;
			&:first-child {
				margin-top: 20rpx;
			}
			.item-tit {
				font-size: 12px;
				color: #999;
				margin: 0 10px;
				height: 30px;
				line-height: 20px;
			}
			.item-box {
				display: flex;
				flex-wrap: wrap;
				.item-item {
					padding: 8rpx 30rpx;
					line-height: 32rpx;
					background: #f3f3f3;
					margin-bottom: 20rpx;
					margin-right: 10rpx;
					box-sizing: border-box;
					border-radius: 60rpx;
					border: 2rpx solid #f3f3f3;
					&:last-child {
						margin-right: 0;
					}
				}
				.sku-choose-item {
					display: inline-block;
					min-width: 100rpx;
					max-width: 540rpx;
					padding: 0 10rpx;
					overflow: hidden;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					margin-left: 10px;
					margin-bottom: 10px;
					border-radius: 30rpx;
					color: #333;
					background-color: #f7f7f7;
					font-size: 14px;
					border: 1px solid #aaa;
					&.active {
						background-color: var(--mall4j-color-primary);
						color: #fff;
						border: 1px solid var(--mall4j-color-primary) !important;
					}

					&.gray {
						background-color: #f9f9f9;
						color: #ddd;
					}
					&.dashed {
						border: 1px dashed #ccc;
					}
}
				.item-item.active {
					border: 2rpx solid var(--mall4j-color-primary);
					color: #fff ;
					background: var(--mall4j-color-primary);
				}
				.item-item.cannot {
					border: 2rpx dashed #ddd;
					background: #fff;
				}
				.item-item.active.cannot {
					border: 2rpx dashed var(--mall4j-color-primary);
				}
			}
		}
	}
}
.popup.show {
	top: 0;
	.popup-con-bottom {
		transform: translateY(0);
	}
	.btn-box {
		display: flex;
		z-index: 9999;
		background-color: #ffffff;
		.add-cart-btn {
			background-color: #ffbb0d;
			margin-right: 24rpx;
		}
		&.btn-box-gray{
			.add-cart-btn{
				background-color: #dddddd;
			}
		}
	}
}
.popup-min {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 100%;
	right: 0;
	max-width: 750rpx;
	margin: auto;
	z-index: 210;
	.popup-mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.5);

	}
	.popup-con-middle {
		position: absolute;
		top: 50%;
		left: 50rpx;
		right: 50rpx;
		transform: translateY(-50%) scale(0);
		transition: all .3s;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		text-align: center;
		.big-text {
			font-size: 28rpx;
			font-weight: 600;
			margin-top: 20rpx;
		}
		.small-text {
			margin-top: 30rpx;
		}
		.btns {
			margin-top: 50rpx;
			margin-bottom: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.btn {
				padding: 0 70rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				color: var(--mall4j-color-primary);
				border-radius: 56rpx;
				border: 2rpx solid var(--mall4j-color-primary);
				box-sizing: border-box;
			}
			.btn.btn-r {
				background: var(--mall4j-color-primary);
				color: #fff;
				margin-left: 30rpx;
			}
		}
	}
}
.popup-min.show {
	left: 0;
	.popup-con-middle {
		transform: translateY(-50%) scale(1);
	}
}

// 优惠劵样式
.coupon-item {
	margin: 30rpx 0;
	display: flex;
	position: relative;
	&::before {
		position: absolute;
		left: 212rpx;
		display: block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #f2f3f7;
		content: " ";
		font-size: 0;
		z-index: 5;
		top: -10rpx;
		box-shadow: 0 -2rpx 2rpx rgba(0,0,0,.06) inset;
	}
	&::after {
		position: absolute;
		left: 212rpx;
		display: block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #f2f3f7;
		content: " ";
		font-size: 0;
		z-index: 5;
		bottom: -10rpx;
		box-shadow: 0 2rpx 2rpx rgba(0,0,0,.06) inset;
	}
	.c-price {
		padding: 20rpx;
		color: #fff;
		width: 184rpx;
		border-radius: 10rpx 0 0 10rpx;
		box-shadow: 0 0 6rpx rgba(0,0,0,.05);
		background: linear-gradient(to right, #5695d6, #6779da);
		display: flex;
		align-items: center;
		justify-content: center;
		.price-box {
			width: 100%;
		}
		.price {
			justify-content: center;
			font-weight: 600;
			color: #fff;
			.big {
				font-size: 48rpx;
			}
			.small {
				font-size: 24rpx;
				margin-right: 6rpx;
			}
		}
		.c-condition {
			margin-top: 4rpx;
			text-align: center;
			word-break: break-word;
		}
	}
	.text-box {
		flex: 1;
		padding: 20rpx;
		background: #fff;
		box-shadow: 0 0 6rpx rgba(0,0,0,.05);
		border-left: 2rpx dashed #6779da;
		border-radius: 0 10rpx 10rpx 0;
		.c-des {
			height: 72rpx;
			line-height: 36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			.c-style {
				display: inline-block;
				vertical-align: top;
				margin-top: 4rpx;
				background: #6779da;
				color: #fff;
				height: 28rpx;
				line-height: 28rpx;
				padding: 0 10rpx;
				font-size: 18rpx;
				border-radius: 28rpx;
			}
			.text {
				margin-left: 10rpx;
				font-weight: 600;
			}
		}
		.c-time {
			display: flex;
			align-items: center;
			margin-top: 16rpx;
			margin-bottom: 4rpx;
			.time {
				flex: 1;
				font-size: 20rpx;
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.btn {
				padding: 4rpx 14rpx;
				font-size: 20rpx;
				border: 2rpx solid #6779da;
				background: #6779da;
				color: #fff;
				border-radius: 40rpx;
				box-sizing: border-box;
			}
			.btn.get {
				background: #fff;
				color: #6779da;
			}
		}
	}
}
.coupon-item.general {
	.c-price {
		background: linear-gradient(to right,var(--mall4j-color-primary-light-1), var(--mall4j-color-primary));
	}
	.text-box {
		border-left: 2rpx dashed var(--mall4j-color-primary);
		.c-des {
			.c-style {
				background: var(--mall4j-color-primary);
			}
		}
		.c-time {
			.btn {
				border: 2rpx solid var(--mall4j-color-primary);
				background: var(--mall4j-color-primary);
			}
			.btn.get {
				background: #fff;
				color: var(--mall4j-color-primary);
			}
		}
	}
}
.coupon-item.unavailable {
	.c-price {
		background: #ccc;
	}
	.text-box {
		border-left: 2rpx dashed #ccc;
		.c-des {
			.c-style {
				background: #ccc;
			}
		}
	}
}