SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>云配送-投诉处理</title>
</head>
<body>
    <div class="header">
        <div>投诉处理</div>
        <div class="nav">
          <span>
        投诉时间
        </span>
           
          <input type="date">
        <span>
        到    
        </span>   
        <input type="date">


        <button class="button" type="button">
        查询
        </button>

         <button class="button" type="button">
        投诉处理
        </button>

         <button class="button" type="button">
        导出Excel
        </button>

         <button class="button" type="button">
        高级查询
        </button>

         <button class="button" type="button">
        微信回复
        </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><input type="checkbox"></th>
                        <th>天族</th>
                        <th>2020/12/22</th>
                        <th>许褚</th>
                        <th>三国魏国都城许都皇宫36栋</th>
                        <th>19145685234</th>
                        <th>煤气不够用</th>
                        <th>19145685234</th>
                        <th>气不足</th>
                        <th>驳回</th>
                        <th>详细讲解使用知识</th>
                        <th>司马懿</th>
                        <th>流动车</th>
                        <th>莽夫胆敢诓我</th>
                        <th>2020/12/22</th>
                     
                    </tr>

                </thead>

            </table>

        </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>

/* 分页样式 */

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;
}