XEH-miniProgram/pages/self/couponCenter.vue

<template>
	<view class="page-wrap">
		<view class="coupon-panel">
			<view class="item">
				<view class="name">
					<view class="price">38</view>
					<view class="text">三八女神节特惠券</view>
				</view>
				<view class="desc time">有效日期：至 2023-12-31</view>
				<view class="desc">所有产品品类通用</view>
				<view class="desc">满100元可用</view>
				<view class="side">
					<text class="number">仅剩\n17张</text>
					<button class="btn">可领2张</button>
				</view>
			</view>
			<view class="item disabled">
				<view class="name">
					<view class="price">38</view>
					<view class="text">三八女神节特惠券</view>
				</view>
				<view class="desc time">有效日期：至 2023-12-31</view>
				<view class="desc">所有产品品类通用</view>
				<view class="desc">满100元可用</view>
				<view class="side">
					<view class="over">已领完</view>
					<text>持续发放中\n下次再领</text>
				</view>
			</view>
			<view class="item">
				<view class="name">
					<view class="price">38</view>
					<view class="text">三八女神节特惠券</view>
				</view>
				<view class="desc time">有效日期：至 2023-12-31</view>
				<view class="desc">所有产品品类通用</view>
				<view class="desc">满100元可用</view>
				<view class="side">
					<text class="number">仅剩\n17张</text>
					<button class="btn">可领2张</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.coupon-panel {
	padding: 13.74rpx 0;
	.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: #00bdef;
			-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;
		text-align: center;
	}
	.price {
		font-size: 68.68rpx;
		&:before {
			content: '￥';
			font-size: 38.46rpx;
		}
	}
	.number {
		font-size: 27.47rpx;
		line-height: 38.46rpx;
	}
	.over{
		font-size: 30.22rpx;
		margin: 13.74rpx 0 20.6rpx;
	}
	.time{
		color: #000;
	}
	.btn{
		width: 164.84rpx;
		height: 49.45rpx;
		background: #fff;
		border-radius: 8.24rpx;
		color: #00BDEF;
		font-size: 24.73rpx;
		line-height: 49.45rpx;
		padding: 0;
		margin-top: 13.74rpx;
	}
}
.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;
	}
}
</style>