book_admin/application/admin/view/collectstatement/index.html

<style>
    .panel-div{
        float:left;
        border:1px solid #ccc;
        width:32%;
        height:300px;
        margin-right: 1%;
    }
    @media (max-width: 1200px){

        .panel-div{
            width:49%;
            margin-bottom: 20px;
        }

    }
    .pannel-top{
        width:100%;
        height: 50px;
        border-bottom: 1px solid #ccc;
        font-size:1.8rem;
        position:relative;
        z-index: 1;
    }

    .pannel-middle{
        width:100%;
        height: 100px;
        border-bottom: 1px solid #ccc;
        position:relative;
        font-size:1.8rem;
    }

    .pannel-bottom{
        width:100%;
        height: 150px;
        font-size:1.8rem;
        position:relative;
    }
    .pannel-top > div{
        font-size: 14px;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-left: 10px;
        font-weight:bold;
        color: #333;
    }
    .pannel-top .tooltip-inner {
        padding: 3px 8px;
        color: #fff;
        font-size: 11px;
        width: 200px;
        text-align: left;
        background-color: #000;
        border-radius: 3px;
    }
    @media (max-width: 480px){
        .pannel-top .tooltip-inner {
            width: 160px;
        }

    }
    .pannel-top div.flush{
        position: absolute;
        font-size: 13px;
        color: #999;
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        right:10px;
        font-weight: normal;
    }
    .pannel-middle div{
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        width: auto;
    }
    .pannel-bottom div{
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size:1.3rem;
    }
    .pannel-middle div.first,.pannel-bottom div.first
    {
        left:10px;
    }
    .pannel-middle div.second,.pannel-bottom div.second
    {
        right:10px;
    }
    .pannel-middle div span,.pannel-bottom div span
    {
        color: #1581ff;
        margin-bottom: 20px;
    }
    .day{
        font-size: 1.5rem;
        padding:5px;
        margin: 5px;
    }
    @media (max-width: 767px){
        .panel-div {
            display: block;
            float: none;
            width: 100%;
            margin-bottom: 20px;
        }

    }
    .fixed-table-body .card-view .title{
        padding: 6px 10px;
        width: 40%;
        box-sizing: border-box;
        vertical-align: middle;
        line-height: 20px;
    }
    .fixed-table-body .card-view .value{
        padding: 6px 10px;
        display: inline-block;
        width: 60%;
        box-sizing: border-box;
        vertical-align: middle;
        line-height: 20px;
    }
    i{
        font-style: normal;
    }
    .card-view{
        background-color: #fff;
        margin-bottom: 1px;
    }
    .tooltip.right{
        top: 0!important;
    }
    .tooltip.right .tooltip-arrow{
        top: 10px!important;
    }
    .channelTitle{
        font-size:2rem;
        margin-bottom:10px;
    }
	.pvuv_box{
		padding-left: 10px;
		display: inline-block;
		*display: inline;
		*zoom:1;
		vertical-align: middle;
	}
	.pvuv_box span{
		display: block;
		font-size: 14px;
		color: #333;
		font-weight: normal;
		line-height: 18px;
	}
	.pannel_tody_box .tooltip.right{
		top: 6px !important;
	}
	.fa-question-circle{
		cursor: pointer;
	}
</style>

<div class="panel panel-default panel-intro">
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    {notempty name='channelTitle'}
                    <div class="channelTitle">
                        {$channelTitle}
                    </div>
                    {/notempty}
                    <div></div>
                    <!--今日开始-->
                    <div>
                        <div class="panel-div pannel_tody_box">
                            <div class="pannel-top">
                                <div style="z-index: 10;">今天 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="right" data-original-title="非实时，延迟一分钟左右<br />充值：今天0点之后，推广产生的充值金额<br />已支付：已支付的订单笔数<br />未支付：未支付的订单笔数<br />完成率：已支付/（已支付+未支付）<br />完成率中不包含活动充值"></i></div>
                            </div>
                            <div class="pannel-middle">
                                <div class="first">
                                    充值<br/>
                                    <span id="recharge_money">¥{$today.recharge_money| default=0}</span>
                                </div>
                            </div>
                            <div class="pannel-bottom">
                                <div class="first" id="normal_first">
                                    普通充值<br/>
                                    <span id = 'normal_recharge_money'>¥{$today.normal_recharge_money| default=0}</span><br/><br/>
                                    已支付:{$today.normal_recharge_orders| default=0}笔<br/>
                                    {notempty name='today'}
                                    未支付:{$today.normal_recharge_orders_count-$today.normal_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php
                                     $percent = 0;
                                     if (isset($today['kandian_recharge_orders_count']) && $today['kandian_recharge_orders_count']) {
                                     $percent = floor($today['kandian_recharge_orders']/$today['kandian_recharge_orders_count']*100);
                                     } elseif (isset($today['normal_recharge_orders_count']) && $today['normal_recharge_orders_count']) {
                                     $percent = floor($today['normal_recharge_orders']/$today['normal_recharge_orders_count']*100);
                                     } else {
                                     $percent = 0;
                                     }
                                     echo $percent;
                                   ?>%<br/>
                                </div>
                                <div class="second" id="vip_first">
                                    年费VIP会员<br/>
                                    <span>¥{$today.vip_recharge_money| default=0}</span><br/><br/>
                                    已支付:{$today.vip_recharge_orders| default=0}笔<br/>
                                    {notempty name='today'}
                                    未支付:{$today.vip_recharge_orders_count-$today.vip_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo isset($today['vip_recharge_orders_count']) && $today['vip_recharge_orders_count']? floor($today['vip_recharge_orders']/$today['vip_recharge_orders_count']*100) : 0;?>%<br/>
                                </div>
                            </div>
                        </div>
                        <!--昨日开始-->
                        <div class="panel-div">
                            <div class="pannel-top">
                                <div>昨天</div>
                            </div>
                            <div class="pannel-middle">
                                <div class="first">
                                    充值<br/>
                                    <span>¥{$yesterday.recharge_money| default=0}</span>
                                </div>
                            </div>
                            <div class="pannel-bottom">
                                <div class="first">
                                    普通充值<br/>
                                    <span>¥{$yesterday.normal_recharge_money| default=0}</span><br/><br/>
                                    已支付:{$yesterday.normal_recharge_orders| default=0}笔<br/>
                                    {notempty name='yesterday'}
                                    未支付:{$yesterday.normal_recharge_orders_count-$yesterday.normal_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php
                                     $percent = 0;
                                     if (isset($yesterday['kandian_recharge_orders_count']) && $yesterday['kandian_recharge_orders_count']) {
                                     $percent = floor($yesterday['kandian_recharge_orders']/$yesterday['kandian_recharge_orders_count']*100);
                                     } elseif (isset($yesterday['normal_recharge_orders_count']) && $yesterday['normal_recharge_orders_count']) {
                                     $percent = floor($yesterday['normal_recharge_orders']/$yesterday['normal_recharge_orders_count']*100);
                                     } else {
                                     $percent = 0;
                                     }
                                     echo $percent;
?>%<br/>
                                </div>
                                <div class="second">
                                    年费VIP会员<br/>
                                    <span>¥{$yesterday.vip_recharge_money| default=0}</span><br/><br/>
                                    已支付:{$yesterday.vip_recharge_orders| default=0}笔<br/>
                                    {notempty name='yesterday'}
                                    未支付:{$yesterday.vip_recharge_orders_count-$yesterday.vip_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo isset($yesterday['vip_recharge_orders_count']) && $yesterday['vip_recharge_orders_count']? floor($yesterday['vip_recharge_orders']/$yesterday['vip_recharge_orders_count']*100) : 0;?>%<br/>
                                </div>
                            </div>
                        </div>
                        <!--昨日结束,本月开始-->
                        <div class="panel-div">
                            <div class="pannel-top">
                                <div>本月(不含当日) <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="right" data-original-title="不含当日，非实时，每天凌晨2:30左右更新"></i></div>
                            </div>
                            <div class="pannel-middle">
                                <div class="first">
                                    充值<br/>
                                    <span>¥{$month.recharge_money| default=0}</span>
                                </div>
                            </div>
                            <div class="pannel-bottom">
                                <div class="first">
                                    普通充值<br/>
                                    <span>¥{$month.normal_recharge_money| default=0}</span><br/><br/>
                                    已支付:{$month.normal_recharge_orders| default=0}笔<br/>
                                    {notempty name='month'}
                                    未支付:{$month.normal_recharge_orders_count-$month.normal_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php
                                     $percent = 0;
                                     if (isset($month['kandian_recharge_orders_count']) && $month['kandian_recharge_orders_count']) {
                                     $percent = floor($month['kandian_recharge_orders']/$month['kandian_recharge_orders_count']*100);
                                     } elseif (isset($month['normal_recharge_orders_count']) && $month['normal_recharge_orders_count']) {
                                     $percent = floor($month['normal_recharge_orders']/$month['normal_recharge_orders_count']*100);
                                     } else {
                                     $percent = 0;
                                     }
                                     echo $percent;
                                  ?>%<br/>
                                </div>
                                <div class="second">
                                    年费VIP会员<br/>
                                    <span>¥{$month.vip_recharge_money| default=0}</span><br/><br/>
                                    已支付:{$month.vip_recharge_orders| default=0}笔<br/>
                                    {notempty name='month'}
                                    未支付:{$month.vip_recharge_orders_count-$month.vip_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo isset($month['vip_recharge_orders_count']) && $month['vip_recharge_orders_count']? floor($month['vip_recharge_orders']/$month['vip_recharge_orders_count']*100) : 0;?>%<br/>
                                </div>
                            </div>
                        </div>
                        <!--本月结束-->
                    </div>
                    <div style="clear: both">
                    <div class="day">近30日充值统计(<i class="text-danger">不含当日</i>)</div>
                    <div style="overflow: auto;">
                        <table id="table" class="table table-striped table-bordered table-hover" width="100%">
                        </table>
                    </div>
                </div>
            </div>

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