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

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

    2018-05-31 09:42 来源/作者:懒人模板 分类:小程序教程  « »
    制作好以后效果图如下:
    一、wxml页面代码如下:
    <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>

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