uniapp 小程序优惠劵样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 小程序优惠劵样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先看效果图

uniapp 小程序优惠劵样式,uni-app,小程序

上代码

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

			}

换一边文章来源地址https://www.toymoban.com/news/detail-721612.html

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

到了这里，关于uniapp 小程序优惠劵样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！