<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/css.css">
	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-2.4.0.js"></script>
    <title>Document</title>
</head> 
<body>
    <!-- navbar-default这个类是设置导航栏 -->
    <div class="navbar navbar-default">
        <div class="container">
            <!-- navbar-header用于设置内容横向显示 -->
            <div class="navbar-header">
                <a href="/index.html" class="navbar-brand"></a>
            </div>
            <!-- navbar-nav用来设置横向显示 -->
            <!-- navbar-right用来设置右浮动 -->
            <!-- hidden-xs用于当屏幕很小的情况下隐藏div里面的内容 -->
            <div class="hidden-xs">
                <ul class="nav navbar-nav">
                    <li class="dropdown">  <!--订单一览表-->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            订单一览表
                            <b class="caret"></b>
                        </a>
                        <ul class="nav dropdown-menu">
                            <li><a href="#">订单一览表</a></li>
                            <li><a href="#">已结案订单</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">  <!--月度产能评估表-->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            月度产能评估表
                            <b class="caret"></b>
                        </a>
                        <ul class="nav dropdown-menu">
                            <li><a href="#">汇总分析</a></li>
                            <li><a href="#">订单完成情况</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">  <!--月度主排程计划-->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            月度主排程计划
                            <b class="caret"></b>
                        </a>
                        <ul class="nav dropdown-menu">
                            <li><a href="#">计划主交期</a></li>
                            <li><a href="#">计划部门交期</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--搜索-->
    <div class="panel filter">
        <div class="container">
            这里是过滤
        </div>
    </div>
    <!-- container这个类是设置居中对齐 -->
    <div class="container">
        <!-- row这个类是用于设置取消内边距 -->
        <div class="row">
            <table class="table table-bordered table-hover table-striped">
                <thead>
                  <tr>
                    <th>产品</th>
                    <th>付款日期</th>
                    <th>状态</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <td>产品1</td>
                    <td>23/11/2013</td>
                    <td>待发货</td></tr>
                  <tr>
                    <td>产品2</td>
                    <td>10/11/2013</td>
                    <td>发货中</td></tr>
                  <tr>
                    <td>产品3</td>
                    <td>20/10/2013</td>
                    <td>待确认</td></tr>
                  <tr>
                    <td>产品4</td>
                    <td>20/10/2013</td>
                    <td>已退货</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="footer">
        这是分页
      </div>
    <script>
        //创建vue实际，得到View Model实例
        var vm  = new Vue({
            e1:'#app',
            data:{},
            metdods:{}
        });
    </script>
</body>
</html>