1、页面效果图：

演示链接地址：http://www.nxl123.cn/bokeyuan/meiTuanDemo_order/

2、核心代码

order.html：

<ons-page id="order">
    <!--toolbar开始-->
    <ons-toolbar>
        <div class="left">订单</div>
        <div class="center"></div>
        <div class="right">
            <ons-toolbar-button>
                <ons-icon icon="">
            </ons-toolbar-button>
        </div>
    </ons-toolbar>
    <!--toolbar结束-->

    <!--提示登录才能查看订单记录-begin-->
    <div id="loginTip">
        <div id="context">
            <div id="pic"><img src="imgs/bg_order_tab_signin.png" alt="img"></div>
            <p>登录后可以查看订单/收藏记录</p>
            <p>
                <button id="btn">登录</button>
            </p>
        </div>
    </div>
    <!--提示登录才能查看订单记录-begin-->
</ons-page>

3、项目相关的文件下载

http://www.nxl123.cn/files/meiTuanDemo_order.zip