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

<style>
    .clearfloat:after {
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .panel-div{
        float:left;
        border:1px solid #ccc;
        width:24%;
        height:320px;
        margin-right: 1%;
    }
    .panel-div-new{
        float:left;
        border:1px solid #ccc;
        width:49%;
        height:150px;
        margin-right: 1%;
    }
    @media (max-width: 1200px){
        .panel-div{
            width:48%;
            margin-bottom: 20px;
        }
    }
    .pannel-top{
        width:100%;
        height: 50px;
        border-bottom: 1px solid #ccc;
        font-size:1.8rem;
        position:relative;
        z-index: 1;
    }

    .righttext{
        position: absolute;
        right: 5px;
    }

    .pannel-middle{
        width:100%;
        height: 130px;
        border-bottom: 1px solid #ccc;
        position:relative;
        font-size:1.8rem;
    }
   .no-bottom{
       border-bottom: none;!important;
   }
    .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">
                    <!--<div class="channelTitle">-->
                    <!--</div>-->
                    <h2 style="text-align: center">帐号整体情况</h2>
                    <h4>常规数据分析</h4>
                    <div class="clearfloat">
                        <div class="panel-div-new">
                            <div class="pannel-top">
                                <div>今天</div>
                                <div class="righttext">1小时刷新一次</div>
                            </div>
                            <div class="pannel-middle no-bottom">
                                <div class="first">
                                    PV<br/>
                                    <span>{:$pvuv.pv ?? 0}</span>
                                </div>
                                <div class="second">
                                    UV<br/>
                                    <span>{:$pvuv.uv ?? 0}</span>
                                </div>
                            </div>
                        </div>
                        <div class="panel-div-new">
                            <div class="pannel-top">
                                <div>昨天</div>
                            </div>
                            <div class="pannel-middle no-bottom">
                                <div class="first">
                                    PV<br/>
                                    <span>{:$yesterday.pv ?? 0}</span>
                                </div>
                                <div class="second">
                                    UV<br/>
                                    <span>{:$yesterday.uv ?? 0}</span>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    <!--今日开始-->
                    <h4 style="margin-top: 20px">订单数据分析</h4>
                    <div class="clearfloat">
                        <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 />渠道商分成收益：今天0点之后，渠道商充值金额*渠道商抽成比例<br />已支付：已支付的订单笔数<br />未支付：未支付的订单笔数<br />完成率：已支付/（已支付+未支付）"></i>-->
                                </div>
                                <div class="flush btn btn-danger" style="color: #fff">刷新</div>
                            </div>
                            <div class="pannel-middle">
                                <div class="first">
                                    充值<br/>
                                    <span>¥{:$today.recharge_money ?? 0}</span>
                                    <br/><br/>
                                    代理商充值<br/>
                                    <span>¥{:$today.agent_recharge ?? 0}</span>
                                </div>
                                <div class="second">
                                    分成收益<br/>
                                    <span id = "recharge_money_benefit">¥{:$today.recharge_money_benefit ?? 0}</span>
                                    <br/><br/>
                                    代理商分成收益<br/>
                                    <span id="agent_benefit">¥{:$today.agent_recharge_benefit ?? 0}</span>
                                </div>
                            </div>
                            <div class="pannel-bottom">
                                <div class="first" id="normal_first">
                                    普通充值<br/>
                                    <span id = 'normal_recharge_money'>¥{:$today.normal_recharge_money ?? 0}</span><br/><br/>
                                    已支付:{:$today.normal_recharge_orders ?? 0}笔<br/>
                                    {notempty name='today'}
                                    未支付:{$today.normal_recharge_orders_count-$today.normal_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo $today['normal_recharge_orders_count']? round($today['normal_recharge_orders']/$today['normal_recharge_orders_count'],2)*100 : 0;?>%<br/>
                                </div>
                                <div class="second" id="vip_first">
                                    年费VIP会员<br/>
                                    <span>¥{:$today.vip_recharge_money ?? 0}</span><br/><br/>
                                    已支付:{:$today.vip_recharge_orders ?? 0}笔<br/>
                                    {notempty name='today'}
                                    未支付:{$today.vip_recharge_orders_count-$today.vip_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo $today['vip_recharge_orders_count']? round($today['vip_recharge_orders']/$today['vip_recharge_orders_count'],2)*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 ?? 0}</span>
                                    <br/><br/>
                                    代理商充值<br/>
                                    <span>¥{:$yesterday.agent_recharge ?? 0}</span>
                                </div>
                                <div class="second">
                                    分成收益<br/>
                                    <span>¥{:$yesterday.recharge_money_benefit ?? 0}</span>
                                    <br/><br/>
                                    代理商分成收益<br/>
                                    <span>¥{:$yesterday.agent_recharge_benefit ?? 0}</span>
                                </div>
                            </div>
                            <div class="pannel-bottom">
                                <div class="first">
                                    普通充值<br/>
                                    <span>¥{:$yesterday.normal_recharge_money ?? 0}</span><br/><br/>
                                    已支付:{:$yesterday.normal_recharge_orders ?? 0}笔<br/>
                                    {notempty name='yesterday'}
                                    未支付:{$yesterday.normal_recharge_orders_count-$yesterday.normal_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo $yesterday['normal_recharge_orders_count']? round($yesterday['normal_recharge_orders']/$yesterday['normal_recharge_orders_count'],2)*100 : 0;?>%<br/>
                                </div>
                                <div class="second">
                                    年费VIP会员<br/>
                                    <span>¥{:$yesterday.vip_recharge_money ?? 0}</span><br/><br/>
                                    已支付:{:$yesterday.vip_recharge_orders ?? 0}笔<br/>
                                    {notempty name='yesterday'}
                                    未支付:{$yesterday.vip_recharge_orders_count-$yesterday.vip_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo $yesterday['vip_recharge_orders_count']? round($yesterday['vip_recharge_orders']/$yesterday['vip_recharge_orders_count'],2)*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 id="recharge_money">¥{:$month.recharge_money ?? 0}</span>
                                    <br/><br/>
                                    代理商充值<br/>
                                    <span id="agent_recharge">¥{:$month.agent_recharge ?? 0}</span>
                                </div>
                                <div class="second">
                                    分成收益<br/>
                                    <span id = "recharge_money_benefit">¥{:$month.recharge_money_benefit ?? 0}</span>
                                    <br/><br/>
                                    代理商分成收益<br/>
                                    <span id="agent_benefit">¥{:$month.agent_recharge_benefit ?? 0}</span>
                                </div>
                            </div>
                            <div class="pannel-bottom">
                                <div class="first">
                                    普通充值<br/>
                                    <span>¥{:$month.normal_recharge_money ?? 0}</span><br/><br/>
                                    已支付:{:$month.normal_recharge_orders ?? 0}笔<br/>
                                    {notempty name='month'}
                                    未支付:{$month.normal_recharge_orders_count-$month.normal_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo $month['normal_recharge_orders_count']? round($month['normal_recharge_orders']/$month['normal_recharge_orders_count'],2)*100 : 0;?>%<br/>
                                </div>
                                <div class="second">
                                    年费VIP会员<br/>
                                    <span>¥{:$month.vip_recharge_money?? 0}</span><br/><br/>
                                    已支付:{:$month.vip_recharge_orders?? 0}笔<br/>
                                    {notempty name='month'}
                                    未支付:{$month.vip_recharge_orders_count-$month.vip_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo $month['vip_recharge_orders_count']? round($month['vip_recharge_orders']/$month['vip_recharge_orders_count'],2)*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 id="recharge_money">¥{:$all.recharge_money ?? 0}</span>
                                    <br/><br/>
                                    代理商充值<br/>
                                    <span id="agent_recharge">¥{:$all.agent_recharge ?? 0}</span>
                                </div>
                                <div class="second">
                                    分成收益<br/>
                                    <span id = "recharge_money_benefit">¥{:$all.recharge_money_benefit ?? 0}</span>
                                    <br/><br/>
                                    代理商分成收益<br/>
                                    <span id="agent_benefit">¥{:$all.agent_recharge_benefit ?? 0}</span>
                                </div>
                            </div>
                            <div class="pannel-bottom">
                                <div class="first">
                                    普通充值<br/>
                                    <span>¥{:$all.normal_recharge_money ?? 0}</span><br/><br/>
                                    已支付:{:$all.normal_recharge_orders ?? 0}笔<br/>
                                    {notempty name='all'}
                                    未支付:{$all.normal_recharge_orders_count-$all.normal_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo $all['normal_recharge_orders_count']? round($all['normal_recharge_orders']/$all['normal_recharge_orders_count'],2)*100 : 0;?>%<br/>
                                </div>
                                <div class="second">
                                    年费VIP会员<br/>
                                    <span>¥{:$all.vip_recharge_money ?? 0}</span><br/><br/>
                                    已支付:{:$all.vip_recharge_orders ?? 0}笔<br/>
                                    {notempty name='all'}
                                    未支付:{$all.vip_recharge_orders_count-$all.vip_recharge_orders}笔<br/>
                                    {else /}
                                    未支付:0笔<br/>
                                    {/notempty}
                                    完成率:<?php echo $all['vip_recharge_orders_count']? round($all['vip_recharge_orders']/$all['vip_recharge_orders_count'],2)*100 : 0;?>%<br/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="day">今日订单数据明细</div>-->
                <br>
                <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#first" data-toggle="tab">今日订单数据明细</a></li>
                        <li><a href="#second" data-toggle="tab">近30天订单数据明细</a></li>
                    </ul>
                </div>
                <div class="panel-body tab-content">
                    <div class="tab-pane fade active in" id="first">
                        <table id="table" class="table table-striped table-bordered table-hover" width="100%">
                        </table>
                    </div>
                    <div class="tab-pane fade" id="second">
                        <table id="table2" class="table table-striped table-bordered table-hover" width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>