XEH-miniProgram/pages/self/coupon/index.scss

.page-wrap {
	padding: 82.42rpx 0 96.15rpx;
}
.tabs-panel {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	height: 82.42rpx;
	background: #fff;
	display: flex;
	padding: 0 41.21rpx;
	z-index: 1;

	&::before,
	&::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 1rpx;
		background: #e0e0e0;
	}

	&::before {
		top: 0;
	}

	&::after {
		bottom: 0;
	}

	.item {
		padding: 0 9.62rpx;
		text-align: center;
		font-size: 27.47rpx;
		color: #999;
		line-height: 82.42rpx;
		position: relative;

		& + .item {
			margin-left: 27.47rpx;
		}
	}

	.active {
		color: #00bcd2;

		&::after {
			content: '';
			position: absolute;
			left: 0%;
			right: 0%;
			bottom: 0%;
			height: 5.49rpx;
			background: #00bcd2;
			z-index: 1;
		}
	}
}
.coupon-panel {
	.item {
		width: 708.79rpx;
		height: 192.31rpx;
		border-radius: 8.24rpx;
		position: relative;
		overflow: hidden;
		padding: 27.47rpx 233.52rpx 27.47rpx 41.21rpx;
		box-sizing: border-box;
		margin: 13.74rpx auto;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: #fff;
			-webkit-mask-image: radial-gradient(circle at 13.74rpx 50%, transparent 13.74rpx, red 13.74rpx);
			-webkit-mask-position: -13.74rpx;
			z-index: -1;
		}
		&::after {
			content: '';
			position: absolute;
			right: -27.47rpx;
			top: 0;
			height: 100%;
			width: 239.01rpx;
			background: #fe6e6d;
			-webkit-mask-image: radial-gradient(circle at 5rpx, transparent 6rpx, red 6rpx);
			-webkit-mask-position: -6rpx;
			-webkit-mask-size: 100% 19rpx;
			z-index: -1;
		}
		&.disabled::after {
			background: #ccc;
		}
	}
	.name {
		font-size: 30.22rpx;
		height: 68.68rpx;
		display: flex;
		align-items: center;
		margin-top: -14rpx;
		.text {
			flex: 1;
			width: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.price {
			line-height: 1;
			margin: -14rpx 10rpx 0 0;
		}
	}
	.desc {
		font-size: 24.73rpx;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.3;
	}
	.side {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 211.54rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 21.98rpx;
		color: #fff;
		padding-top: 27.47rpx;
	}
	.price {
		font-size: 68.68rpx;
		&:before {
			content: '￥';
			font-size: 38.46rpx;
		}
	}
	.state-1 {
		width: 182.69rpx;
		height: 120.88rpx;
		margin-top: 13.74rpx;
	}
	.state-2 {
		width: 189.56rpx;
		height: 130.49rpx;
		margin-top: 8.24rpx;
	}
}
.foot-btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 96.15rpx;
	background: #fff;
	font-size: 30.22rpx;
	color: #00bcd2;
	line-height: 96.15rpx;
	border: none;
	border-radius: 0;
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1rpx;
		background: #e0e0e0;
	}
	&::after {
		display: none;
	}
}