欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序红色优惠券使用状态列表页设计制作开发教程(2)

    2018-08-10 09:52 来源/作者:懒人模板 分类:小程序教程  « »
     
    二、wxss样式文件代码如下:
    /* couponNousedMember.wxss */
    .top{
    background-color:#ffffff;
    font-weight: bold;
    display:flex;
    justify-content:center;
    
    }
    .noused{
    padding:20px 30px;
    width:33.3%;
    color: #f82f4a;
    border-bottom: 1px solid #f82f4a;
    }
    .count{
    
    }
    .used{
    width:33.3%;
    padding:20px 30px;
    color: #828282;
    border-bottom: 1px solid #828282;
    
    }
    .expire{
      width:33.3%;
    padding:20px 30px;
    color: #828282;
    border-bottom: 1px solid #828282;
    }
    .coupon{
    padding:20px;
    
    }
    .outwrap{
    background-color:#ffffff;
    display:flex;
    flex-flow:row wrap;
    border-radius: 5px;
    margin-bottom:10px;
    
    
    
    }
    .left8{
    width:80%;
    position:relative;
    overflow:hidden;
    
    
    
    }
    .right2{
    width:20%;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    text-align: center;
    
    
    
    }
    .img{
    
    width:50px;
    height:60px;
    
    
    
    
    
    }
    .word{
      position: absolute;
      z-index: 2;
    color:#ffffff;
    display:flex;
    flex-flow:column wrap;
    text-align:center;
    width:100%;
    height:100%;
    padding:10px 0;
    
    }
    .coupon-name{
    font-size:18px;
    
     
    
    }
    .coupon-during{
    margin-top:8px;
    font-size:12px;
    
    }
    .back{
    height:100%;
    width:100%;
    z-index:1;
    position: absolute;
    
    
    }

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议