请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 106|回复: 0

小程序优惠券样式

[复制链接]
  • TA的每日心情
    开心
    2019-5-30 08:42
  • 签到天数: 10 天

    [LV.3]偶尔看看II

    493

    主题

    498

    帖子

    2293

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    2293
    admin实名认证 发表于 2019-8-2 17:38:10 | 显示全部楼层 |阅读模式
    wxml代码:
    1. <!--pages/coupon/index.wxml-->
    2. <import src="../public/wxml/menu.wxml"/>

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

    119. <!-- 浮窗 底部-->
    120. <template is="menu-footer" data="{{nav: footNav}}"/>
    复制代码
    o_xcxyouhuiquan.png
    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. .coupon-left{position: relative}
    6. .coupon-left .t{position: absolute; color: #fff}
    7. .coupon-left .t1{left: 10rpx; top: 110rpx}
    8. .coupon-left .t2{left: 30rpx; top: 50rpx; font-size: 80rpx; font-weight: bold }
    9. .coupon-left .t3{left: 220rpx; top: 50rpx; width: 200rpx; font-size: 30rpx;}
    10. .coupon-left .t4{left: 10rpx; top:180rpx}

    11. .coupon-rig .t{text-align: center}
    12. .coupon-rig .t1{font-size: 40rpx; padding: 30rpx 0 10rpx 0;}
    13. .coupon-rig .t3{padding-top:20rpx}
    14. .coupon-rig .t3 text{background: #fff; color: #333; border-radius: 7rpx; padding: 10rpx 40rpx}


    15. .note{background: #faeab7}


    16. .stamp{width:700rpx; height: 250rpx;margin-bottom:50rpx;position:relative;overflow:hidden}
    17. .stamp i{position: absolute;left: 20%;top: 90rpx;height: 500rpx;width: 700rpx;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);
    18. }
    19. .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}
    20. .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}
    21. .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 }
    22. .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 }
    23. .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}
    24. .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. }
    复制代码


    maomivip@mail.com
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|赢创志诚服务网 ( 鲁ICP备19000917号 )

    GMT+8, 2019-8-20 13:13 , Processed in 0.091569 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表