OnSen UI結合AngularJs打造」美團"APP"訂單」頁面 --Hybrid App

一、頁面效果圖：

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

二、核心代碼

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>

三、項目相關的文件下載

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