小程序优惠券样式

效果：

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{ 710rpx; margin:  0 auto}
.coupon-list .item{ 710rpx; height: 250rpx; margin-bottom: 20rpx;}
.coupon-list .item .float-li{ 450rpx; height: 100%; border-right: 2rpx dashed rgba(255,255,255,.3)}
.coupon-list .item .float-li-rig{ 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;  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{700rpx; height: 250rpx;margin-bottom:50rpx;position:relative;overflow:hidden}
.stamp i{position: absolute;left: 20%;top: 90rpx;height: 500rpx; 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
}