SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>云配送-门店派单</title>
</head>
<body>
    <div class="header">
        <div>派工处理</div>
        <div class="nav">
          <button class="button" type="button">
              <i class="icon ion-search"></i>
            查询
          </button>
           
          <button class="button" type="button">
              <i class="icon ion-refresh"></i>
            刷新派工单
          </button>

          <button class="button" type="button">
             <i class="icon ion-pricetags"></i>
            点击查看总数
          </button>

          <button class="button" type="button">
              <i class="icon ion-alert-circled"></i>
            订单一键报错
          </button>

          <button class="button" type="button">
             <i class="icon ion-play"></i>
            导出Excel
          </button>

        </div>

    </div>

    <div class="context">
        <div>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>订单编号</th>
                        <th>客户编号</th>
                        <th>客户名称</th>
                        <th>客户来源</th>
                        <th>订单时间</th>
                        <th>备注</th>
                        <th>客户地址</th>
                        <th>客户电话</th>
                        <th>销售类型</th>
                        <th>配送门店</th>
                        <th>总瓶数</th>
                        <th>总金额</th>
                        <th>预约时间</th>
                        <th>制单人</th>
                    </tr>

                    <tr>
                        <th><a href="">点击派工</a></th>
                        <th>2020/12/15</th>
                        <th>00001</th>
                        <th>曹孟德</th>
                        <th>三国</th>
                        <th>2020/12/15</th>
                        <th>送快一点</th>
                        <th>三国魏国</th>
                        <th>6866546</th>
                        <th>瓶价</th>
                        <th>一组</th>
                        <th>2</th>
                        <th>240</th>
                        <th>2020/12/15</th>
                        <th>郭嘉</th>

                    </tr>

                </thead>

            </table>
        </div>

    </div>

    <div></div>
    



    <div class="footer">
       <ul class="page">
            <li><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a class="active" href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">下一页</a></li>

       </ul>
    </div>


</body>
</html>

.button{
    width: 120px;
    height: 50px;
    /* float: left; */
    margin: 15px;
    padding: 10PX;
    cursor: pointer;


}




.footer{
    padding-top: 60px;
}


a{
    text-decoration: none;
}



/* 分页样式 */

ul.page {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.page li {
    display: inline;
    }

ul.page li a {
    color: black;
    float: left;
    padding: 8px 15px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 4px;
}

ul.page li a.active {
    background-color: darkcyan;
    color: white;
    border: 1px solid darkcyan;
}

ul.page li a:hover:not(.active) {
    background-color: #ddd;
}