<view class="nopay_header"> <view class="mb30 flex orderInfo"> <view>订单:<text class="ml10">80225155656</text></view> <view>金额:<text class="color_red ml10">201.00元</text></view> </view> <view> <view class="">倒计时:<text class="ml10" id="timeCounter">00:30:00</text></view> </view> </view> <view class="ma_beizhu cl"> <text class="z">备注:</text> <input class="ma_beizhu_txt z" type="text" placeholder="请输入你对菜品的要求" /> </view> <scroll-view class="cart-list ma_pay_list" scroll-y="true" scroll-x="false"> <view class="sub-cart-list"> <view class="sub-cart-img"> <view class="sub-cart-img-inner"> <image src="/images/food.jpg"></image> </view> </view> <view class="sub-cart-middle w4"> <view class="sub-cart-title"> <view>挪威深海三文鱼</view> <view class="fs20 tr">x1</view> <view class="tr fs20">¥181.00</view> </view> </view> </view> <view class="sub-cart-list"> <view class="sub-cart-img"> <view class="sub-cart-img-inner"> <image src="/images/food.jpg"></image> </view> </view> <view class="sub-cart-middle w4"> <view class="sub-cart-title"> <view>挪威深海三文鱼</view> <view class="fs20 tr">x1</view> <view class="tr fs20">¥181.00</view> </view> </view> </view> <view class="sub-cart-list"> <view class="sub-cart-img"> <view class="sub-cart-img-inner"> <image src="/images/food.jpg"></image> </view> </view> <view class="sub-cart-middle w4"> <view class="sub-cart-title"> <view>挪威深海三文鱼</view> <view class="fs20 tr">x1</view> <view class="tr fs20">¥181.00</view> </view> </view> </view> <view class="sub-cart-list"> <view class="sub-cart-img"> <view class="sub-cart-img-inner"> <image src="/images/food.jpg"></image> </view> </view> <view class="sub-cart-middle w4"> <view class="sub-cart-title"> <view>挪威深海三文鱼</view> <view class="fs20 tr">x1</view> <view class="tr fs20">¥181.00</view> </view> </view> </view> <view class="sub-cart-list"> <view class="sub-cart-img"> <view class="sub-cart-img-inner"> <image src="/images/food.jpg"></image> </view> </view> <view class="sub-cart-middle w4"> <view class="sub-cart-title"> <view>挪威深海三文鱼</view> <view class="fs20 tr">x1</view> <view class="tr fs20">¥181.00</view> </view> </view> </view> <view class="sub-cart-list"> <view class="sub-cart-img"> <view class="sub-cart-img-inner"> <image src="/images/food.jpg"></image> </view> </view> <view class="sub-cart-middle w4"> <view class="sub-cart-title"> <view>挪威深海三文鱼</view> <view class="fs20 tr">x1</view> <view class="tr fs20">¥181.00</view> </view> </view> </view> </scroll-view> <view class="ma_pay_btn"> <button type="default">微信支付</button> </view> |
.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%; } |
// pages/nopay/nopay.js Page({ data:{}, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) |
模板简介:该模板名称为【微信小程序订餐类红色订单支付页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。