• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序优惠券样式

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果:

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
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap