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;}}