小程序优惠券样式

效果：

wxml代码

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122

<!--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代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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