allocatr/application/admin/view/orderplan/index.html

<div class="mycontainer">

    <!-- 时间筛选 -->
<!--    <div class="row">-->
<!--        <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('order/addAbnormal')}">-->
<!--            <div class="col-md-12">-->
<!--                <div class="form-group">-->
<!--                    <label for="startDate" class="col-md-2 control-label">选择时间范围：</label>-->
<!--                    <div class="col-md-5">-->
<!--                        <input type="text" class="form-control datetimepicker" id="startDate" placeholder="开始时间" />-->
<!--                    </div>-->
<!--                    <div class="col-md-5">-->
<!--                        <input type="text" class="form-control datetimepicker" id="endDate" placeholder="结束时间" />-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->

    <div class="row" style="margin-bottom: 10px">
        <!-- 卡片 1: 总用户数 -->
        <div class="col-md-4">
            <div class="myplan">
                <div class="myplan-title">
                    <span style="color: red" class="fa fa-line-chart fa-fw"></span>
                    <span>订单量</span>
                </div>
                <div class="myplan-num">
                    1,240
                </div>
            </div>
        </div>

        <!-- 卡片 1: 总用户数 -->
        <div class="col-md-4">
            <div class="myplan">
                <div class="myplan-title">
                    <span style="color: #43cb34" class="fa fa-list-alt fa-fw"></span>
                    <span>总业绩</span>
                </div>
                <div class="myplan-num">
                    1,240
                </div>
            </div>
        </div>

        <!-- 卡片 1: 总用户数 -->
        <div class="col-md-4">
            <div class="myplan">
                <div class="myplan-title">
                    <span style="color: #b3d4fc" class="fa fa-group fa-fw"></span>
                    <span>师傅总数</span>
                </div>
                <div class="myplan-num">
                    1,240
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="col-md-6">
            <div class="todo-plan" style="color: #55d2fe">
                <div  class="todo-plan-title">
                    <div style="font-size: 32px" class="fa fa-warning"></div>
                    <div class="todo-plan-title-text" style="flex: 1">
                        <p>报错</p>
                        <p>单位/笔</p>
                    </div>
                    <div>
                        <a href="#">详情></a>
                    </div>
                </div>
                <div class="todo-plan-num text-center">
                    1,240
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="todo-plan" style="color: #86a7ff">
                <div  class="todo-plan-title">
                    <div style="font-size: 32px" class="fa fa-gear"></div>
                    <div class="todo-plan-title-text" style="flex: 1">
                        <p>待配置</p>
                        <p>单位/笔</p>
                    </div>
                    <div>
                        <a href="#">详情></a>
                    </div>
                </div>
                <div class="todo-plan-num text-center">
                    1,240
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="todo-plan" style="color: #4de171">
                <div  class="todo-plan-title">
                    <div style="font-size: 32px" class="fa fa-envelope-open"></div>
                    <div class="todo-plan-title-text" style="flex: 1">
                        <p>待审核</p>
                        <p>单位/笔</p>
                    </div>
                    <div>
                        <a href="#">详情></a>
                    </div>
                </div>
                <div class="todo-plan-num text-center">
                    1,240
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="todo-plan" style="color: #b896ff">
                <div  class="todo-plan-title">
                    <div style="font-size: 32px" class="fa fa-pencil"></div>
                    <div class="todo-plan-title-text" style="flex: 1">
                        <p>待回访</p>
                        <p>单位/笔</p>
                    </div>
                    <div>
                        <a href="#">详情></a>
                    </div>
                </div>
                <div class="todo-plan-num text-center">
                    1,240
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="todo-plan" style="color: #f8bf18">
                <div  class="todo-plan-title">
                    <div style="font-size: 32px" class="fa fa-leaf"></div>
                    <div class="todo-plan-title-text" style="flex: 1">
                        <p>待售后</p>
                        <p>单位/笔</p>
                    </div>
                    <div>
                        <a href="#">详情></a>
                    </div>
                </div>
                <div class="todo-plan-num text-center">
                    1,240
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="todo-plan" style="color: #f58164">
                <div  class="todo-plan-title">
                    <div style="font-size: 32px" class="fa fa-file-text-o"></div>
                    <div class="todo-plan-title-text" style="flex: 1">
                        <p>开票</p>
                        <p>单位/笔</p>
                    </div>
                    <div>
                        <a href="#">详情></a>
                    </div>
                </div>
                <div class="todo-plan-num text-center">
                    1,240
                </div>
            </div>
        </div>
    </div>



    <div class="row">
        <!-- 额外的内容行可以继续添加 -->
    </div>
</div>

<style>
    .mycontainer{
        min-height: 100vh;
        background-color: white;
        padding-top: 10px;
    }
    .myplan{
        box-shadow: 0 2px 6px rgba(12,72,128,.1);
        height: 90px;
        padding: 12px 16px;
        border-radius: 4px;
    }
    .myplan-title{
        margin-bottom: 8px;
    }
    .myplan-num{
        color: #434343;
        font-weight: 500;
        font-size: 32px;
        font-style: normal;
        line-height: 38px;
    }
    .row{
        margin: 0;
    }
    .todo-plan{
        padding: 15px;
        /*height: 100px;*/
        box-shadow: 0 2px 6px rgba(12,72,128,.1);
        border-radius: 4px;
        margin: 10px;
    }
    .todo-plan-num {
        line-height: 40px;
        font-size: 24px;
    }
    .todo-plan-title{
        display: flex;
    }
    .todo-plan-title-text{
        margin-left: 5px;
    }
    .todo-plan-title-text > p{
        margin: 0;
        font-size: 12px;
    }
    .todo-plan  a{
        font-size: 12px;
    }
</style>