前端优惠券样式实现

实现效果
实现效果
上代码,我是用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; } 

原文链接:https://blog.csdn.net/zhangluludeCSDN/article/details/115203056?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316782391827987%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316782391827987&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-29-115203056-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片