{extend name="public/base"/}
{block name="style"}
<style>
    .tabli {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .tabli-li {
        width: 49.5%;
        height: 149px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
    }

    .tabli-li-tit {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
    }

    .tabli-li-tit p {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        margin-left: 10px;
    }

    .tabli-li-z {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #ccc;
    }

    .tabli-li-z .first {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        margin-left: 10px;
        flex-wrap: wrap;
        font-size: 1.7rem;
    }

    .tabli-li-x {
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: space-between;
        font-size: 1.3rem;
    }

    .tabli-li-x-left {
        margin-top: 20px;
        margin-left: 10px;
    }

    .tabli-li-x-rt {
        margin-top: 20px;
        margin-right: 10px;
    }

    .from-so {
        width: 100%;
        margin-top: 20px;
    }

    .from-so .form-control {
        width: 200px;
        float: left;
        margin-right:20px;
    }

    .sobin {
        margin-left: 20px;
    }

    .tables-s th {
        text-align: center;
        font-size: 12px;
    }

    .tables-xs td {
        text-align: center;
    }

    .table tbody>tr>td {
        font-size: 14px;
        vertical-align: middle;
        border-top: 1px solid #e7ebee;
        padding: 12px 8px;
        font-weight: 400;
        color: #333333;
    }

    .table tbody>tr>td:first-child {
        font-size: 14px;
        vertical-align: middle;
        border-top: 1px solid #e7ebee;
        padding: 12px 8px;
        font-weight: 400;
        color: #333333;
    }

    .demo {
        width:100%;
    }

    .nav-tabs {
        font-size: 18px;
        color: #000;
    }

    .nav-tabs .active {
        font-weight: bold;
    }

    .nav-tabs>li>a {
        font-size: 13.5px;
        color: #000;
    }

    .nav-tabs>li.active>a {
        font-weight: bold;
        color: #000;
    }
    .colo{
        color:#C90D0D;
    }
    .pagexian{
        width: 100%;
        border-top: 1px solid #eee;
        padding-top:5px;
    }
</style>
{/block}
{block name="body"}
<div class="main-box no-header clearfix">
    <div class="main-box-body clearfix">
        <div style="float:right;margin-bottom:10px;">
            <form action="">
                <input type="text" class="text-center" placeholder="姓名" name="name" style="width:90px;">
                <input type="submit" class="btn btn-info" value="搜索">
            </form>
        </div>
        <div class="panel panel-default col-sm-12" id="order-daily-stats-panel">
            <table class="table table-bordered table-striped"
                data-bind="visible: !loading()">
                <thead>
                    <tr>
                        <th>账号</th>
                        <th class="text-center">姓名</th>
                        <th class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: stats">
                    {volist name="user" id="vo" key="k"}
                    <tr>
                        <td class="text-center">
                            <span>{$vo.username}</span>
                        </td>
                        <td class="text-center">
                            <span>{if $vo.nickname==''}未填写{else}{$vo.nickname}{/if}</span>
                        </td>
                        <td class="text-center">
                            <a href="/admin/channelstatistics/index?uid={$vo.uid}" class="btn btn-info">详情</a>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
            <div class="pagexian">
                {$page}
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/public/js/colResizable-1.6.min.js"></script>
<!-- datepicker statr -->
<link href="/public/plugs/datepicker/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
<script src="/public/plugs/datepicker/js/foundation-datepicker.js"></script>
<script src="/public/plugs/datepicker/js/foundation-datepicker.zh-CN.js"></script>
<script>
    $(function () {
        //此处实现表格可拖放属性
        $("#table").colResizable({
            liveDrag: true,//实现实时拖动，可看见拖动轨迹
            draggingClass: "dragging", //防止拖动出险虚标线
        });
    });
    $('#startdata').fdatepicker({
        clearBtn: true,
        todayBtn: true,
        format: 'yyyy-mm-dd h:i',
        pickTime: true
    });
    $('#enddata').fdatepicker({
        clearBtn: true,
        todayBtn: true,
        format: 'yyyy-mm-dd h:i',
        pickTime: true
    });

</script>
{/block}