jsm-mall-h5-front/src/styles/common.scss

@mixin zj-card {
	background: #FFFFFF;
	border-radius: 20rpx;
	// box-shadow: -10rpx 12rpx 96rpx 2rpx rgba(31, 36, 99, 0.2);
	box-shadow: 18rpx 10rpx 16rpx 2rpx rgba(31, 36, 99, 0.1);
	overflow: hidden;
  position: relative;
}

@mixin flex_ac {
	display: flex;
	align-items: center;
}
@mixin flex_abc {
	display: flex;
	align-items: center;
	justify-content: center;
}
@mixin flex_abs {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer-btn-group {
	padding: 25rpx 30rpx;
	display: flex;
	align-items: center;
	::v-deep .u-button {
		flex-shrink: 0;
		font-size: 32rpx;
		margin-right: 30rpx;
		// border-radius: 20rpx !important;
		flex: 1;
		&:last-child {
			min-width: 360rpx !important;
			margin-right: 0;
		}
	}
}

.footer-btn-group-end {
  padding: 25rpx 30rpx;
  display: flex;
  justify-content: flex-end;
  ::v-deep .u-button {
    width: unset;
    margin: unset;
    margin-left: 20rpx;
  }
}

.goods-item {
  @include zj-card;
	display: flex;
	image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}
	.main {
		flex: 1;
		margin-left: 20rpx;
		.name {
			font-weight: 500;
			line-height: 36rpx;
		}
		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;
			.price {
				color: $minor-color;
				font-weight: 500;
				font-size: 32rpx;
				text {
					font-size: 24rpx;
				}
			}
		}
		::v-deep .u-number-box {
			.ctrl {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.minus {
				border: 1px solid $theme-color;
				box-sizing: border-box;
			}
			.plus {
				background-color: $theme-color;
			}
			.u-number-box__input {
				width: 60rpx !important;
				background: none !important;
			}
		}
	}
}

.goods-waterfall-list {
	padding: 20rpx 20rpx 0;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	.left, .right {
		display: flex;
		flex-direction: column;
	}
	.item {
    @include zj-card;
		width: 348rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		// box-shadow: -10rpx 12rpx 96rpx 2rpx rgba(31,36,99,0.05);
		.image {
			width: 348rpx;
			height: 348rpx;
			position: relative;
			.img {
				width: 348rpx;
				height: 348rpx;
				display: block;
			}
			.water {
				width: 348rpx;
				height: 348rpx;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}
		}
		.content {
			padding: 15rpx 20rpx;
			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 36rpx;
				font-weight: 600;
				max-height: 72rpx;
			}
			.tags {
				display: flex;
				flex-wrap: wrap;
				.it {
					height: 28rpx;
					padding: 0 10rpx;
					line-height: 28rpx;
					border-radius: 10rpx;
					background: #e8e8e8;
					font-size: 20rpx;
					color: #666666;
					margin-right: 10rpx;
					margin-top: 10rpx;
				}
			}
			.tags2 {
				display: flex;
				flex-wrap: wrap;
				.it {
					font-size: 20rpx;
					height: 30rpx;
					line-height: 30rpx;
					padding: 0 6rpx;
					margin-right: 10rpx;
					border: 1px solid #FE781F;
					color: #FE781F;
					box-sizing: border-box;
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					flex-direction: row;
					border-radius: 10rpx;
				}
			}
			.price {
				display: flex;
				align-items: flex-end;
				margin-top: 14rpx;
				.price-1 {
					font-size: 32rpx;
					color: $minor-color;
					line-height: 32rpx;
					font-weight: 500;
				}
				.price-2 {
					font-size: 26rpx;
					color: #666666;
					line-height: 26rpx;
					text-decoration: line-through;
					margin-left: 12rpx;
				}
			}
			.text {
				font-size: 24rpx;
				color: #999999;
				margin-top: 12rpx;
			}
		}
	}
}

.goods-row-list {
	padding: 20rpx 20rpx 0;
	box-sizing: border-box;
	.item {
    @include zj-card;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		margin-bottom: 20rpx;
		// box-shadow: -10rpx 12rpx 96rpx 2rpx rgba(31,36,99,0.05);
		.image {
			width: 240rpx;
			height: 240rpx;
			display: block;
			flex-shrink: 0;
			border-radius: 20rpx;
			position: relative;
			.img {
				width: 240rpx;
				height: 240rpx;
				display: block;
			}
			.water {
				width: 240rpx;
				height: 240rpx;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			.title {
				font-size: 30rpx;
				color: #333333;
				line-height: 36rpx;
				font-weight: 600;
				max-height: 72rpx;
			}
			.tags {
				display: flex;
				flex-wrap: wrap;
				.it {
					height: 28rpx;
					padding: 0 10rpx;
					line-height: 28rpx;
					border-radius: 10rpx;
					background: #e8e8e8;
					font-size: 20rpx;
					color: #666666;
					margin-right: 10rpx;
					margin-top: 10rpx;
				}
			}
			.tags2 {
				display: flex;
				flex-wrap: wrap;
				.it {
					font-size: 20rpx;
					height: 30rpx;
					line-height: 30rpx;
					padding: 0 6rpx;
					margin-right: 10rpx;
					border: 1px solid #FE781F;
					color: #FE781F;
					box-sizing: border-box;
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					flex-direction: row;
					border-radius: 10rpx;
				}
			}
			.bottom {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				.price {
					margin-top: 10rpx;
					display: flex;
					align-items: flex-end;
					.price-1 {
						font-size: 32rpx;
						color: $minor-color;
						line-height: 32rpx;
						font-weight: 500;
					}
					.price-2 {
						font-size: 26rpx;
						color: #666666;
						line-height: 26rpx;
						text-decoration: line-through;
						margin-left: 12rpx;
					}
				}
				.text {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
}

.global-mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		width: 100%;
		height: 100%;
		background: rgba($color: #000000, $alpha: 0.3);
	}
	.global-dialog {
		position: fixed;
		top: calc(50vh - 150rpx);
		left: 60rpx;
		z-index: 999;
		width: 630rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		overflow: hidden;
		.title {
			font-size: 36rpx;
			font-weight: 500;
			text-align: center;
			line-height: 100rpx;
			padding-bottom: 10rpx;
		}
		.content {
			.text {
				font-size: 32rpx;
				text-align: center;
				padding-bottom: 40rpx;
			}
			.form {
				padding: 0 40rpx;
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 40rpx;
					input {
						width: 340rpx;
						height: 60rpx;
						border: 1px solid #eaeaea;
						border-radius: 10rpx;
						padding: 0 20rpx;
					}
				}
			}
		}
		.btn {
			border-top: 1px solid #eaeaea;
			display: flex;
			&> view {
				flex: 1;
				text-align: center;
				line-height: 100rpx;
				font-size: 32rpx;
				&.left {
					color: #666666;
				}
				&.right {
					color: #FFFFFF;
					background: #FF3F42;
				}
			}
		}
	}