前端优惠券样式实现

男娘i 2022-11-13 04:07 227阅读 0赞

**实现效果**  
![实现效果][20210325111851394.png]  
**上代码，我是用uni-app写的 大家可以自行参照修改**  
**界面代码**

<view class="quan" v-for="(item,i) in couponList" :key="i">
    	<view class="quanInfo">
    		<text class="couponMpoey">￥20 <text class="couponMpoeyInfo">满300减20</text></text>
    		<text class="couponName">店铺优惠劵</text>
    		<text class="couponTime">2019.8.1 00:00-2019.8.123:59</text>
    	</view>
    	<view class="receiveBtn">
    		<view class="receive">使用</view>
    	</view>
    </view>

**CSS代码**

.quan{ 
    		margin: 22rpx 37rpx;
    		background-color: #FFF5F6;
    		border-radius: 10rpx;
    		display: flex;
    		font-family: PingFang SC;
    	}
    	.quanInfo{ 
    		background-image: radial-gradient(circle at right top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at right bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
    		border-right: 1px dashed #F64F51;
    		padding: 30rpx 50rpx;
    		width: 75%;
    	}
    	.couponMpoey{ 
    		font-size: 30rpx;
    		font-weight: 700;
    		color: #ff3600;
    		display: block;
    	}
    	.couponMpoeyInfo{ 
    		font-size: 26rpx;
    		padding-left: 10rpx;
    	}
    	.couponName{ 
    		font-size: 24rpx;
    		font-weight: 500;
    		color: #797979;
    		display: block;
    	}
    	.couponTime{ 
    		font-size: 20rpx;
    		font-family: PingFang SC;
    		font-weight: 500;
    		color: #797979;
    	}
    	.receiveBtn{ 
    		background-image: radial-gradient(circle at left top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at left bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		margin-left: -2rpx;
    	}
    	.receive{ 
    		border-radius: 23rpx;
    		background-color: #5FC484;
    		padding: 7rpx 31rpx;
    		text-align: center;
    		margin-left: 36rpx;
    		font-size: 24rpx;
    		font-family: PingFang SC;
    		font-weight: 500;
    		color: #ffffff;
    	}

[20210325111851394.png]: /images/20221022/9a88523e1a2a4a7d92777e2fabe63e5c.png