huazhiyu/pages/MyCoupon/MyCoupon.scss

.page {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
}

/* 优惠券tab */
.coupon-tab {
	position: fixed;
	left: 0;
	top: 0;
	/* #ifdef H5 */
	top: 88rpx;
	/* #endif */
	z-index: 10;
	display: flex;
	align-items: center;
	width: 100%;
	height: 80rpx;
	background-color:rgb(35, 96, 48);
	.tab {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 33%;
		height: 100%;
		
		text {
			font-size: 26rpx;
			color:#4D9A5E;
		}
	}
	.action {
		text {
			color: #ffffff;
			font-weight: bold;
		}
		.line {
			position: absolute;
			left: 50%;
			bottom: 2rpx;
			width: 30%;
			height: 6rpx;
			background: #ffffff;
			transform: translate(-50%, 0);
		}
	}
}

/* 优惠券 */
.coupon-list {
	padding: 20rpx 4%;
	margin: 120rpx auto 0;
	background-color: #ffffff;
	.list {
		position: relative;
		width: 100%;
		min-height: 200rpx;
		box-shadow: 0 0 14rpx rgba(0, 0, 0, 0.1);
		border-radius: 6rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		background: url('../../static/image/coupon-bg.png');
		background-size: cover;
		.list-data {
			display: flex;
			align-items: center;
			width: 100%;
			height: 200rpx;
			.coupon-price {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 30%;
				height: 100%;
				// background-color: $base;
				.discounts {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					.min {
						color: #343734;
						font-size: 32rpx;
						font-weight: bold;
					}
					.max {
						font-size: 56rpx;
						color: #343734;
						font-weight: bold;
					}
				}
				.full-reduction {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 60rpx;
					text {
						font-size: 26rpx;
						color: #343734;
					}
				}
				// .jag {
				// 	position: absolute;
				// 	top: 0;
				// 	left: -6rpx;
				// 	width: 6px;
				// 	height: 100%;
				// 	background-size: 10px 6px;
				// 	background-color: #fff;
				// 	background-position: 100% 35%;
				// 	background-image: linear-gradient(-45deg, $base 25%, transparent 25%, transparent), linear-gradient(-135deg, $base 25%, transparent 25%, transparent),
				// 		linear-gradient(-45deg, transparent 75%, $base 75%), linear-gradient(-135deg, transparent 75%, $base 75%);
				// }
			}
			.coupon-info {
				width: 70%;
				height: 90%;
				padding: 0 4%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.info-title {
					// display: flex;
					width: 100%;
					height: 60rpx;
					.tag {
						font-size: 34rpx;
						color: #343734;
						font-weight: 700;
						margin-bottom: 16rpx;
					
					}
					
				}
				.date-get {
					
					width: 100%;
					height: 80rpx;
					.title {
						text {
							font-size: 24rpx;
							color: #6e4936;
						}
					}
					.date {
						display: flex;
						align-items: center;
						text {
							font-size: 24rpx;
							color: #6e4936;
						}
					}
					
				}
				
			}
		}
		.coupon-lose{
			.coupon-price{
				background-color: #c0c0c0;
				.jag {
					position: absolute;
					top: 0;
					left: -6rpx;
					width: 6px;
					height: 100%;
					background-size: 10px 6px;
					background-color: #fff;
					background-position: 100% 35%;
					background-image: linear-gradient(-45deg, #c0c0c0 25%, transparent 25%, transparent), linear-gradient(-135deg, #c0c0c0 25%, transparent 25%, transparent),
						linear-gradient(-45deg, transparent 75%, #c0c0c0 75%), linear-gradient(-135deg, transparent 75%, #c0c0c0 75%);
				}
			}
			.coupon-info{
				.info-title{
					.tag{
						text{
							background-color: #c0c0c0;
						}
					}
					.title{
						text{
							color: #c0c0c0;
						}
					}
				}
				.date-get{
					.date{
						text{
							color: #c0c0c0;
						}
					}
				}
			}
		}
		.describe{
			display: flex;
			align-items: center;
			padding: 0 4%;
			height: 60rpx;
			background-color: #FFFFFF;
			box-shadow: 0 -10rpx 10rpx #F5F5F5;
			text{
				color: #CCCCCC;
				font-size: 24rpx;
			}
		}
		.use-status {
			position: absolute;
			right: -20rpx;
			top: -25rpx;
			z-index: 10;
			width: 100rpx;
			height: 100rpx;
			border: 2rpx solid #c0c0c0;
			border-radius: 100%;
			text {
				display: inline-block;
				color: #c0c0c0;
				font-size: 24rpx;
				transform: rotate(45deg);
				margin-top: 40rpx;
			}
		}
	}
}
.empty{
	text-align: center;
	width:80%;
	margin:0 auto;
	image{
		width:400rpx;
		height:auto;
	}
	.emptyText{
		text-align: center;
	}
}