Girls don't frown,...
[小程序]两种漂亮的优惠券demo。
  • xiele-淡墨
  • 2018-12-10
  • 前端
  • 效果图:

          

            优惠券 ( 1 )(可左右滑动)                                                 优惠券( 2 )



    优惠券1 WXML:

    <view class='coupon'>
    <scroll-view scroll-x='true' class='couponwscroll'>
    <view class='coupon-flex'>
    <view class='coupon-item10'>
    <i class="coupon-before"></i>
    <view class='coupon-item-left'>
    <view class='coupon-money'>¥10</view>
    <view class='coupon-text'>满100.00可用</view>
    </view>
    <view class='coupon-item-right'>
    <view>立即</view>
    <view>领取</view>
    </view>
    </view>
    <view class='coupon-item20'>
    <i class="coupon-before"></i>
    <view class='coupon-item-left'>
    <view class='coupon-money'>¥10</view>
    <view class='coupon-text'>满100.00可用</view>
    </view>
    <view class='coupon-item-right'>
    <view>立即</view>
    <view>领取</view>
    </view>
    </view>
    <view class='coupon-item10'>
    <i class="coupon-before"></i>
    <view class='coupon-item-left'>
    <view class='coupon-money'>¥10</view>
    <view class='coupon-text'>满100.00可用</view>
    </view>
    <view class='coupon-item-right'>
    <view>立即</view>
    <view>领取</view>
    </view>
    </view>
    </view>
    </scroll-view>
    </view>


    优惠券1 WXSS:  

    /*优惠券*/
    .couponwscroll{
    height: 150rpx;
    padding: 10rpx;
    overflow:hidden;
    white-space:nowrap;
    background: #fff
    }
    /*红色*/
    .coupon-item20{
    height: 150rpx;
    width: 400rpx;
    background: linear-gradient(-128deg, #ff6d6d, #ff3636);
    display: flex;
    margin-right: 15rpx;
    position: relative
    }
    /*蓝色*/
    .coupon-item10{
    height: 150rpx;
    width: 400rpx;
    background: linear-gradient(-125deg, #57bdbf, #2f9de2);
    display: flex;
    margin-right: 15rpx;
    position: relative
    }
    /*紫色*/
    .coupon-item30{
    height: 150rpx;
    width: 400rpx;
    background: linear-gradient(-113deg, #ef86ff, #b66ff5);
    display: flex;
    margin-right: 15rpx;
    position: relative
    }
    /*黄色*/
    .coupon-item40{
    height: 150rpx;
    width: 400rpx;
    background: linear-gradient(-141deg, #f7d059, #fdb054);
    display: flex;
    margin-right: 15rpx;
    position: relative
    }
    .coupon-item-left{
    width: 100%;
    height: 150rpx;
    padding: 0px 40rpx 0px 0px;
    }
    .coupon-item-right{
    width: 100%;
    height: 150rpx;
    background: #4e4e4e;
    color: #fff;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    flex-direction:column;
    justify-content: center;
    text-align: center;
    padding: 0px 30rpx;
    }
    .coupon-money{
    color: #fff;
    font-size: 18px;
    padding: 10px 0px 0px 20px;
    }
    .coupon-text{
    font-size:12px;
    color: #fff;
    padding: 5px 0px 5px 10px;
    }
    .coupon-flex{
    display: flex;
    flex-wrap: nowrap;
    }
    .coupon-before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 1.2rem;
    height: 1.2rem;
    top: 50%;
    left: -.8rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-border-radius: 80%;
    border-radius: 80%;
    background-color: #fff;
    }



    优惠券2 WXML:

    <view wx:if="{{voucher !=''}}" style='padding-bottom:50px;'>
    <view wx:for="{{voucher[1]}}" wx:key="id" wx:for-item="voucher">
    <view class="coupon se{{voucher.color}}" bindtap='getvoucher' data-id="{{voucher.id}}" data-index="{{index}}">
    <view class="coupon-left">
    <view class="coupon-inner">
    <view class="coupon-money-name">
    {{voucher.name}}
    </view>
    <view class='coupon-least'>满{{voucher.least}}元可用</view>
    <view wx:if="{{voucher.expired_type ==2}}">
    <view class='qdate'>{{voucher.expired_start}} ~ {{voucher.expired_time}}</view>
    </view>
    <view wx:else>
    <view class='qdate'>领取后 {{voucher.expired_day}} 天有效</view>
    </view>
    </view>
    </view>
    <view class="coupon-right">
    <view class="coupon-inner">
    <view class="coupon-time">
    <span>¥</span>
    <span class="sum">{{voucher.total}}</span>
    <view class='lingqu{{voucher.color}}'>立即领取</view>
    </view>
    <i class="coupon-circle top"></i>
    <i class="coupon-circle bottom"></i>
    </view>
    </view>
    <view class="coupon-light"></view>
    </view>
    </view>
    <!--已领取-->
    <view wx:for="{{voucher[0]}}" wx:key="id" wx:for-item="voucher">
    <view class="coupon coupon-diabled">
    <view class="coupon-left">
    <view class="coupon-inner">
    <view class="coupon-money-name">
    {{voucher.name}}
    </view>
    <view class='coupon-least'>满{{voucher.least}}元可用</view>
    <view wx:if="{{voucher.expired_type ==2}}">
    <view class='qdate'>{{voucher.expired_start}} ~ {{voucher.expired_time}}</view>
    </view>
    <view wx:else>
    <view class='qdate'>领取后 {{voucher.expired_day}} 天有效</view>
    </view>
    </view>
    </view>
    <view class="coupon-right">
    <view class="coupon-inner">
    <view class="coupon-time">
    <span>¥</span>
    <span class="sum">{{voucher.total}}</span>
    <view class='ylingqu'>已领取</view>
    </view>
    <i class="coupon-circle top"></i>
    <i class="coupon-circle bottom"></i>
    </view>
    </view>
    <view class="coupon-light"></view>
    </view>
    </view>
    </view>


    优惠券2 WXSS:

    /*优惠券*/
    .coupon{position:relative;background:#d51d27;color:#fff;width:100%;height:95px;line-height:25px;overflow:hidden;margin-top:15px; border-radius: 5px;}
    .coupon-diabled{background:#c3c3c3;color:#666;}
    .coupon:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
    .sum{font-size:28px;}
    .coupon-left{float:left;text-align:left;width:60%;font-size:12px;}
    .coupon-right{float:right;text-align: center;width:40%;font-size:14px;}
    .coupon-inner{padding:20rpx 25rpx;height:75px;position: relative;}
    .coupon-right .coupon-inner{border-left:2px dashed rgba(255,255,255,.5);}
    .coupon-money,.coupon-time{margin-top:12px;}
    .coupon-money-name{font-size: 18px;margin-bottom: 5px;margin-top: 10px;}
    .coupon-circle{display:inline-block;width:16px;height:16px;background:#fff;position: absolute;left:-9px;border-radius:50%}
    .coupon-circle.top{top:-8px;}
    .coupon-circle.bottom{bottom:-8px;}
    .coupon-light{position:absolute;top:20px;left:20%;height:150px;width:100%;background:rgba(255,255,255,.2);transform: rotate(-30deg);-webkit-transform: rotate(-30deg);-moz-transform: rotate(-30deg);}
    .coupon-least{font-size: 12px;margin-bottom: -10px;margin-top: -8px;padding-left: 10rpx;}
    /*领取*/
    .lingqu20{
    background: #ff495e;
    border-radius: 20px;
    }
    /*已领取*/
    .ylingqu{
    background: #c3c3c3;
    border-radius: 20px;
    }
    .jiezhi{
    margin-top: -2px;
    font-size: 12px;
    }
    .qdate{
    font-size: 12px;
    padding-left: 10rpx;
    }
    .flow-btn-min {
    background: #fff;
    border: 1rpx solid #ccc;
    height: 30px;
    line-height: 30px;
    font-size: 28rpx;
    width: 200rpx;
    margin: 0 auto;
    border-radius: 5px;
    text-align: center;
    color: #777;
    margin-top: 25rpx;
    }
    /*蓝色*/
    .se10{
    background: #01AAED;
    }
    .lingqu10{
    background: #000099;
    border-radius: 20px;
    }
    /*紫色*/
    .se30{
    background: #660099;
    }
    .lingqu30{
    background: #CC00FF;
    border-radius: 20px;
    }
    /*黄色*/
    .se40{
    background: #FFB800;
    }
    .lingqu40{
    background: #FF6600;
    border-radius: 20px;
    }
    /*灰色*/
    .se50{
    background: #c3c3c3;
    color:#666;
    }
    .lingqu50{background:#c3c3c3;color:#666;}


    emmmmm....优惠券2的代码自己根据自己的需要修改一下下吧,很简单的。。。[污]


    评论