fastadmin_tailored/application/admin/view/commission/order/index.html

<style>
    .dashboard-content {
        padding: 20px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
        border: 1px solid #e9ecef;
    }

    .dashboard-item {
        text-align: center;
        margin-bottom: 15px;
        padding: 10px;
        background: #fff;
        border-radius: 6px;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .dashboard-item:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-color: #007bff;
    }

    .dashboard-top {
        line-height: 28px;
        font-size: 24px;
        font-weight: 500;
        color: #495057;
        margin-bottom: 5px;
    }

    .dashboard-unit {
        font-size: 14px;
        margin-left: 4px;
        color: #6c757d;
        font-weight: 400;
    }

    .dashboard-bottom {
        line-height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: #868e96;
    }

    /* 响应式优化 */
    @media (max-width: 767px) {
        .dashboard-content {
            padding: 15px;
        }
        
        .dashboard-item {
            margin-bottom: 10px;
        }
        
        .dashboard-top {
            font-size: 20px;
        }
    }
</style>

<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <!-- 统计信息 -->
                <div class="dashboard-content" id="commission-stats" style="margin-bottom: 20px;">
                    <div class="row">
                        <div class="col-xs-6 col-sm-6 col-md-2 col-lg">
                            <div class="dashboard-item">
                                <div class="dashboard-top">
                                    <span id="total-count">0</span>
                                    <span class="dashboard-unit">单</span>
                                </div>
                                <div class="dashboard-bottom">商品总订单数</div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-2 col-lg">
                            <div class="dashboard-item">
                                <div class="dashboard-top">
                                    <span id="total-amount">0.00</span>
                                    <span class="dashboard-unit">元</span>
                                </div>
                                <div class="dashboard-bottom">商品结算总金额</div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-2 col-lg">
                            <div class="dashboard-item">
                                <div class="dashboard-top">
                                    <span id="total-commission">0.00</span>
                                    <span class="dashboard-unit">元</span>
                                </div>
                                <div class="dashboard-bottom">分佣总金额</div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-2 col-lg">
                            <div class="dashboard-item">
                                <div class="dashboard-top">
                                    <span id="total-pending">0.00</span>
                                    <span class="dashboard-unit">元</span>
                                </div>
                                <div class="dashboard-bottom">未结算佣金</div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-2 col-lg">
                            <div class="dashboard-item">
                                <div class="dashboard-top">
                                    <span id="total-accounted">0.00</span>
                                    <span class="dashboard-unit">元</span>
                                </div>
                                <div class="dashboard-bottom">已结算佣金</div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-2 col-lg">
                            <div class="dashboard-item">
                                <div class="dashboard-top">
                                    <span id="total-back">0.00</span>
                                    <span class="dashboard-unit">元</span>
                                </div>
                                <div class="dashboard-bottom">已退回佣金</div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-2 col-lg">
                            <div class="dashboard-item">
                                <div class="dashboard-top">
                                    <span id="total-cancel">0.00</span>
                                    <span class="dashboard-unit">元</span>
                                </div>
                                <div class="dashboard-bottom">已取消佣金</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('commission/order/edit')}"
                           data-operate-del="{:$auth->check('commission/order/del')}"
                           data-operate-detail="{:$auth->check('commission/order/detail')}"
                           data-operate-detail="{:$auth->check('commission/order/detail')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>