小程序优惠券样式

admin

wxml代码：

1. <!--pages/coupon/index.wxml-->
   
2. <import src="../public/wxml/menu.wxml"/>
   
3. 
   
4. <view class="blank"></view>
   
5. <view class="coupon-list">
   
6.     <view class="item stamp stamp01 ">
   
7.         <!-- 左侧 -->
   
8.         <view class="float-li t1">
   
9.             <view class="coupon-left">
   
10.                 <view class="t t1">￥</view>
    
11.                 <view class="t t2">100</view>
    
12.                 <view class="t t3">新人专享全场满199减30</view>
    
13.                 <view class="t t4">优惠券编号：264669616164</view>
    
14.             </view>
    
15.         </view>
    
16.         <!-- 右侧 -->
    
17.         <view class="float-li-rig">
    
18.             <view class="coupon-rig">
    
19.                <view class="t1 t">优惠券</view>
    
20.                <view class="t2 t">2018-01-17</view>
    
21.                <view class="t2 t">2018-01-25</view>
    
22.                <view class="t3 t"><text>立即领取</text></view>
    
23.             </view>
    
24.         </view>
    
25.         <i></i>
    
26.     </view>
    
27.     <view class="item stamp stamp02 ">
    
28.         <!-- 左侧 -->
    
29.         <view class="float-li t1">
    
30.             <view class="coupon-left">
    
31.                 <view class="t t1">￥</view>
    
32.                 <view class="t t2">100</view>
    
33.                 <view class="t t3">新人专享全场满199减30</view>
    
34.                 <view class="t t4">优惠券编号：264669616164</view>
    
35.             </view>
    
36.         </view>
    
37.         <!-- 右侧 -->
    
38.         <view class="float-li-rig">
    
39.             <view class="coupon-rig">
    
40.                <view class="t1 t">优惠券</view>
    
41.                <view class="t2 t">2018-01-17</view>
    
42.                <view class="t2 t">2018-01-25</view>
    
43.                <view class="t3 t"><text>立即领取</text></view>
    
44.             </view>
    
45.         </view>
    
46.         <i></i>
    
47.     </view>
    
48.     <view class="item stamp stamp03 ">
    
49.         <!-- 左侧 -->
    
50.         <view class="float-li t1">
    
51.             <view class="coupon-left">
    
52.                 <view class="t t1">￥</view>
    
53.                 <view class="t t2">100</view>
    
54.                 <view class="t t3">新人专享全场满199减30</view>
    
55.                 <view class="t t4">优惠券编号：264669616164</view>
    
56.             </view>
    
57.         </view>
    
58.         <!-- 右侧 -->
    
59.         <view class="float-li-rig">
    
60.             <view class="coupon-rig">
    
61.                <view class="t1 t">优惠券</view>
    
62.                <view class="t2 t">2018-01-17</view>
    
63.                <view class="t2 t">2018-01-25</view>
    
64.                <view class="t3 t"><text>立即领取</text></view>
    
65.             </view>
    
66.         </view>
    
67.         <i></i>
    
68.     </view>
    
69.     <view class="item stamp stamp04 ">
    
70.         <!-- 左侧 -->
    
71.         <view class="float-li t1">
    
72.             <view class="coupon-left">
    
73.                 <view class="t t1">￥</view>
    
74.                 <view class="t t2">100</view>
    
75.                 <view class="t t3">新人专享全场满199减30</view>
    
76.                 <view class="t t4">优惠券编号：264669616164</view>
    
77.             </view>
    
78.         </view>
    
79.         <!-- 右侧 -->
    
80.         <view class="float-li-rig">
    
81.             <view class="coupon-rig">
    
82.                <view class="t1 t">优惠券</view>
    
83.                <view class="t2 t">2018-01-17</view>
    
84.                <view class="t2 t">2018-01-25</view>
    
85.                <view class="t3 t"><text>立即领取</text></view>
    
86.             </view>
    
87.         </view>
    
88.         <i></i>
    
89.     </view>
    
90.     <view class="item stamp stamp05 ">
    
91.         <!-- 左侧 -->
    
92.         <view class="float-li t1">
    
93.             <view class="coupon-left">
    
94.                 <view class="t t1">￥</view>
    
95.                 <view class="t t2">100</view>
    
96.                 <view class="t t3">新人专享全场满199减30</view>
    
97.                 <view class="t t4">优惠券编号：264669616164</view>
    
98.             </view>
    
99.         </view>
    
100.         <!-- 右侧 -->
     
101.         <view class="float-li-rig">
     
102.             <view class="coupon-rig">
     
103.                <view class="t1 t">优惠券</view>
     
104.                <view class="t2 t">2018-01-17</view>
     
105.                <view class="t2 t">2018-01-25</view>
     
106.                <view class="t3 t"><text>立即领取</text></view>
     
107.             </view>
     
108.         </view>
     
109.         <i></i>
     
110.     </view>
     
111. </view>
     
112. <view class="blank"></view>
     
113. <view class="box note">
     
114.     <view>优惠券使用方式：</view>
     
115.     <view>1、领取优惠券</view>
     
116.     <view>2、将购买的宝贝加入购物车</view>
     
117.     <view>3、点击结算时勾选使用优惠券</view>
     
118.     <view>4、提交订单、付款，订单完成</view>
     
119. </view>
     
120. 
     
121. <!-- 浮窗 底部-->
     
122. <template is="menu-footer" data="{{nav: footNav}}"/>

复制代码

wxcss样式代码：

1. .coupon-list{width: 710rpx; margin:  0 auto}
   
2. .coupon-list .item{width: 710rpx; height: 250rpx; margin-bottom: 20rpx;}
   
3. .coupon-list .item .float-li{width: 450rpx; height: 100%; border-right: 2rpx dashed rgba(255,255,255,.3)}
   
4. .coupon-list .item .float-li-rig{width: 220rpx; padding-right: 20rpx; height:100%; color: #fff}
   
5. 
   
6. 
   
7. .coupon-left{position: relative}
   
8. .coupon-left .t{position: absolute; color: #fff}
   
9. .coupon-left .t1{left: 10rpx; top: 110rpx}
   
10. .coupon-left .t2{left: 30rpx; top: 50rpx; font-size: 80rpx; font-weight: bold }
    
11. .coupon-left .t3{left: 220rpx; top: 50rpx; width: 200rpx; font-size: 30rpx;}
    
12. .coupon-left .t4{left: 10rpx; top:180rpx}
    
13. 
    
14. .coupon-rig .t{text-align: center}
    
15. .coupon-rig .t1{font-size: 40rpx; padding: 30rpx 0 10rpx 0;}
    
16. .coupon-rig .t3{padding-top:20rpx}
    
17. .coupon-rig .t3 text{background: #fff; color: #333; border-radius: 7rpx; padding: 10rpx 40rpx}
    
18. 
    
19. 
    
20. .note{background: #faeab7}
    
21. 
    
22. 
    
23. .stamp{width:700rpx; height: 250rpx;margin-bottom:50rpx;position:relative;overflow:hidden}
    
24. .stamp i{position: absolute;left: 20%;top: 90rpx;height: 500rpx;width: 700rpx;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);
    
25. }
    
26. .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}
    
27. .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}
    
28. .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 }
    
29. .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 }
    
30. .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}
    
31. .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}

复制代码

失效样式代码：

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

复制代码