小程序优惠券样式

效果:

wxml代码

<!--pages/coupon/index.wxml--> <import src="../public/wxml/menu.wxml"/> <view class="blank"></view> <view class="coupon-list"> <view class="item stamp stamp01 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">¥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4">优惠券编号:264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018-01-17</view> <view class="t2 t">2018-01-25</view> <view class="t3 t"><text>立即领取</text></view> </view> </view> <i></i> </view> <view class="item stamp stamp02 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">¥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4">优惠券编号:264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018-01-17</view> <view class="t2 t">2018-01-25</view> <view class="t3 t"><text>立即领取</text></view> </view> </view> <i></i> </view> <view class="item stamp stamp03 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">¥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4">优惠券编号:264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018-01-17</view> <view class="t2 t">2018-01-25</view> <view class="t3 t"><text>立即领取</text></view> </view> </view> <i></i> </view> <view class="item stamp stamp04 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">¥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4">优惠券编号:264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018-01-17</view> <view class="t2 t">2018-01-25</view> <view class="t3 t"><text>立即领取</text></view> </view> </view> <i></i> </view> <view class="item stamp stamp05 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">¥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4">优惠券编号:264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018-01-17</view> <view class="t2 t">2018-01-25</view> <view class="t3 t"><text>立即领取</text></view> </view> </view> <i></i> </view> </view> <view class="blank"></view> <view class="box note"> <view>优惠券使用方式:</view> <view>1、领取优惠券</view> <view>2、将购买的宝贝加入购物车</view> <view>3、点击结算时勾选使用优惠券</view> <view>4、提交订单、付款,订单完成</view> </view> <!-- 浮窗 底部--> <template is="menu-footer" data="{{nav: footNav}}"/> 

wxss代码

.coupon-list{width: 710rpx; margin: 0 auto} .coupon-list .item{width: 710rpx; height: 250rpx; margin-bottom: 20rpx;} .coupon-list .item .float-li{width: 450rpx; height: 100%; border-right: 2rpx dashed rgba(255,255,255,.3)} .coupon-list .item .float-li-rig{width: 220rpx; padding-right: 20rpx; height:100%; color: #fff} .coupon-left{position: relative} .coupon-left .t{position: absolute; color: #fff} .coupon-left .t1{left: 10rpx; top: 110rpx} .coupon-left .t2{left: 30rpx; top: 50rpx; font-size: 80rpx; font-weight: bold } .coupon-left .t3{left: 220rpx; top: 50rpx; width: 200rpx; font-size: 30rpx;} .coupon-left .t4{left: 10rpx; top:180rpx} .coupon-rig .t{text-align: center} .coupon-rig .t1{font-size: 40rpx; padding: 30rpx 0 10rpx 0;} .coupon-rig .t3{padding-top:20rpx} .coupon-rig .t3 text{background: #fff; color: #333; border-radius: 7rpx; padding: 10rpx 40rpx} .note{background: #faeab7} .stamp{width:700rpx; height: 250rpx;margin-bottom:50rpx;position:relative;overflow:hidden} .stamp i{position: absolute;left: 20%;top: 90rpx;height: 500rpx;width: 700rpx;background-color: rgba(255,255,255,.15);transform: rotate(-30deg); } .stamp01{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #F39B00 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #F39B00} .stamp02{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #D24161} .stamp03{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #7EAB1E } .stamp04{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #50ADD3 } .stamp05{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #f0229b} .stamp05{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #f0229b} 

失效样式

.stamp06{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #e2e2e2 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #acacac
}

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

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

昵称

取消
昵称表情图片