uniapp 小程序优惠劵样式

先看效果图

上代码

<view class="coupon">
	<view class="tickets" v-for="(item,index) in 10" :key="item">
		<view class="l-tickets">
			<view class="name">10元优惠劵</view>
			<view class="effect">满120元可用</view>
			<view class="end-date">	有效期至：2023-10-30</view>
		</view>
		<view class="r-tickets">立即使用</view>
	</view>
</view>

.coupon {
				width: 100%;
				.tickets {
					display: flex;
					// padding: 20rpx;
					width: 100%;
					height: 220rpx;
					box-sizing: border-box;
					margin-bottom: 30rpx;
				}

				.l-tickets {
					width: 75%;
					height: 100%;
					position: relative;
					background: radial-gradient(circle at right top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,
						radial-gradient(circle at right bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;
					filter: drop-shadow(0px 8rpx 4rpx rgba(0, 0, 0, 0.05)) drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.05));
					padding: 20rpx;
					@include flex-sb;
					align-items: flex-start;
					flex-direction: column;
					.name{
						font-weight: bold;
					}
					.effect{
						font-size: 26rpx;
						color: #999;
					}
					.end-date{
						font-size: 24rpx;
						color: #999;
					}
				}

				.l-tickets::after {
					content: '';
					position: absolute;
					height: 100%;
					width: 8rpx;
					top: 0;
					left: -8rpx;
					background: radial-gradient(circle at left center, transparent 8rpx, #fff 0) left center / 8rpx 20rpx;
				}

				.r-tickets {
					flex: 1;
					background: #F3993A;
					position: relative;
					background: radial-gradient(circle at left top, transparent 16rpx, #F3993A 0) right top / 100% 50% no-repeat,
						radial-gradient(circle at left bottom, transparent 16rpx, #F3993A 0) right bottom / 100% 50% no-repeat;
					font-size: 36rpx;
					color: #fff;
					text-align: center;
					@include flex-center;
					font-weight: bold;
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}

				.r-tickets::after {
					content: '';
					width: 1rpx;
					background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
					position: absolute;
					left: 0;
					top: 16rpx;
					bottom: 16rpx;
				}

			}

换一边

<view class="coupon">
				<view class="tickets" v-for="(item,index) in 10" :key="item">
					<view class="l-tickets">
						
					</view>
					<view class="r-tickets">
						<view class="name">
							10元优惠劵
						</view>
						<view class="effect">
							满120元可用
						</view>
						<view class="end-date">
							有效期至：2023-10-30
						</view>
					</view>
				</view>
			</view>

.coupon {
				width: 100%;
				.tickets {
					display: flex;
					// padding: 20rpx;
					width: 100%;
					height: 220rpx;
					box-sizing: border-box;
					margin-bottom: 30rpx;
					filter: drop-shadow(0px 8rpx 4rpx rgba(0, 0, 0, 0.05)) drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.05));
				}
				.l-tickets {
					flex: 1;
					background: #F3993A;
					position: relative;
					background: radial-gradient(circle at right top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,
						radial-gradient(circle at right bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;
					font-size: 36rpx;
					color: #fff;
					text-align: center;
					@include flex-center;
					font-weight: bold;
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
				.l-tickets::after {
					content: '';
					position: absolute;
					height: 100%;
					width: 8rpx;
					top: 0;
					left: -8rpx;
					background: radial-gradient(circle at left center, transparent 8rpx, #fff 0) left center / 8rpx 20rpx;
				}
				.r-tickets {
					width: 75%;
					height: 100%;
					position: relative;
					background: radial-gradient(circle at left top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,
						radial-gradient(circle at left bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;
					padding: 20rpx;
					@include flex-sb;
					align-items: flex-start;
					flex-direction: column;
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					.name{
						font-weight: bold;
					}
					.effect{
						font-size: 26rpx;
						color: #999;
					}
					.end-date{
						font-size: 24rpx;
						color: #999;
					}
				}
				.r-tickets::after {
					content: '';
					width: 2rpx;
					background: linear-gradient(to top, #ddd 0%, #ddd 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
					position: absolute;
					left: 0;
					top: 16rpx;
					bottom: 16rpx;
					z-index: 999;
				}
				
			}