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

    微信小程序订餐类红色订单支付页面样式模板制作设计下载(2)

    2018-05-31 09:42 来源/作者:懒人模板 分类:小程序教程  « »
     
    二、wxss样式文件代码如下:
    .sub-cart-list {
      height: 190rpx;
      width: 100%;
      position: relative;
      border-bottom: 1px solid #9aa6c3;
      overflow: hidden;
    }
    
    .sub-cart-img {
      float: left;
      margin-left: 60rpx;
    }
    
    .sub-cart-middle {
      float: left;
      width: 400rpx;
    }
    
    .sub-cart-title {
      margin: 40rpx 0 40rpx 25rpx;
      color: #2f3649;
    }
    
    .sub-cart-title span {
      font-size: 28rpx;
      font-weight: bold;
      margin-right: 26rpx;
    }
    
    .sub-cart-num {
      margin-left: 25rpx;
      display: flex;
      flex-direction: row;
      height: 50rpx;
      line-height: 50rpx;
      width: 340rpx;
    }
    
    .num {
      width: 92rpx;
      display: inline-block;
      text-align: center;
    }
    
    .cart-del {
      position: absolute;
      top: 50%;
      right: 28rpx;
      margin-top: -31rpx;
    }
    
    .sub-cart-img image {
      width: 226rpx;
      height: 152rpx;
      vertical-align: middle;
    }
    
    .sub-cart-img-inner {
      height: 190rpx;
      width: 226rpx;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    
    .cart-del image {
      width: 62rpx;
      height: 62rpx;
    }
    
    .plus, .add {
      display: inline-block;
      width: 48rpx;
      height: 48rpx;
    }
    
    .plus image, .add image {
      width: 44rpx;
      height: 44rpx;
      vertical-align: top;
    }
    
    .fs20 {
      font-size: 26rpx;
    }
    
    .cart_total {
      background: rgba(53, 59, 76, 0.8);
      width: 100%;
      height: 170rpx;
      position: fixed;
      left: 0;
      bottom: 97rpx;
    }
    
    .total {
      color: #fff;
      font-size: 30rpx;
    }
    
    .ml10 {
      margin-left: 10rpx;
    }
    
    .settle {
      width: 180rpx;
      height: 50rpx;
      text-align: center;
      color: #fff;
      font-weight: bold;
      border-radius: 40rpx;
      -webkit-border-radius: 40rpx;
      float: right;
      background-color: #de3120;
      font-size: 30rpx;
      line-height: 50rpx;
    }
    
    .cart_total_inner {
      width: 90%;
      margin: 50rpx auto 0;
    }
    
    .cart-num {
      display: inline-block;
      width: 44rpx;
      height: 44rpx;
      color: #000;
      text-align: center;
      line-height: 44rpx;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      font-size: 24rpx;
      background-color: #fff;
      position: absolute;
      top: -10rpx;
      right: -10rpx;
    }
    
    .z {
      float: left;
    }
    
    .y {
      float: right;
    }
    
    .tr {
      text-align: right;
    }
    
    .psr {
      position: relative;
    }
    
    .nopay_header {
      padding: 27rpx 50rpx;
      border-bottom: 10rpx solid #edeff1;
      font-size: 36rpx;
    }
    
    .mb30 {
      margin-bottom: 30rpx;
    }
    
    .nopay_header .mb30 {
      margin-bottom: 17rpx;
    }
    
    .orderInfo {
      flex-direction: row;
      justify-content: space-between;
    }
    
    .color_red {
      color: #de3120;
    }
    
    .ma_beizhu {
      font-size: 30rpx;
      height: 80rpx;
      border-bottom: 10rpx solid #edeff1;
    }
    
    .ma_beizhu text {
      width: 98rpx;
      padding-left: 50rpx;
      line-height: 87rpx;
    }
    
    .ma_beizhu_txt {
      width: 602rpx;
      height: 47rpx;
      border: 0;
      background: #fff;
      font-size: 30rpx;
      line-height: 47rpx;
      position: relative;
      top: 20rpx;
    }
    
    .ma_pay_btn {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 149rpx;
      padding: 31rpx 71rpx 0 71rpx;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-align: center;
    }
    
    .ma_pay_btn button {
      display: block;
      width: 100%;
      height: 86rpx;
      line-height: 86rpx;
      background: #de3120;
      border: 0;
      font-size: 30rpx;
      color: #fff;
      border-radius: 86rpx;
    }
    
    .ma_pay_list {
      height: 800rpx;
      width: 100%;
    }

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