book_admin/application/admin/view/user/collect/index.html

<style>
    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .bg-blue {
        background-color: #0073b7 !important;
    }
    *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .fontcolor{
        color: #FFCC00;
    }
	@media (max-width: 767px){
		.col-xs-6 {
			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-inner{
		text-align: left;
	}

	.tooltip.right{
		top: 20px!important;
	}
	.tooltip.right .tooltip-arrow{
		top: 10px!important;
	}
</style>
<div class="panel panel-default panel-intro">
    <!--
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <li><a href="/admin/collect/index" >订单统计</a></li>
            <li class="active"><a href="/admin/user/collect/index"  >用户统计</a></li>
            <li><a href="/admin/book/collect/index" >小说统计</a></li>
        </ul>
    </div>
    -->
    <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="row" style="margin-top:15px;">
                        <div class="col-xs-6 col-md-3">
                            <div class="panel bg-blue">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        {if $backend_group != 8}
                                        <span class="label label-success pull-right flush">60秒后刷新</span>
                                        {else /}
                                        <a class="btn btn-primary btn-refresh pull-right flush">刷新</a>
                                        {/if}
                                        <h5>今日新增 <i class="fa fa-question-circle" data-toggle="tooltip"
                                                    data-placement="right"
                                                    data-original-title="非实时，延迟一分钟左右<br />
                                                    今日新增：当天新用户的访问数<br />
                                                    主号关注：当天新关注的用户数<br />
                                                    <!--导粉关注：导粉号当天的新关注用户数<br />-->
                                                    主号取关：主公众号当天的取消关注数<br />
                                                    新增用户的充值金额：当天新增用户的充值总额<br />
                                                    新增用户的充值人数：当天新增用户的付费人数<br />
                                                    净关注：主号今日实际的关注人数（主号今日关注-主号今日取关）"></i></h5>

                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins" id="increase">{$todayData.increase}</h1>
                                        <small>新增用户的充值金额:</small><span class="fontcolor" id="new_user_recharge" >{$todayData.day_recharge_user_money}</span><br/>
                                        <small>新增用户的充值人数:</small><span class="fontcolor" id="day_recharge_user_count">{$todayData.day_recharge_user_count}</span><br/>

                                        <span class="fontcolor" id="increase_m">{$todayData.increase_m}</span>&nbsp;男性,<span class="fontcolor" id="increase_f">{$todayData.increase_f}</span>&nbsp;女性<br/>

                                        <small>主号关注:</small><span class="fontcolor" id="increase_fllow">{$todayData.increase_fllow}</span><br/>
                                        <small>主号取关:</small><span class="fontcolor" id="unfollow_num" >{$todayData.unfollow_num}</span><br/>
                                        <small>净关注:</small><span class="fontcolor" id="net_follow_num" >{$todayData.net_follow_num}</span><br/>
                                        <small>已付费:</small><span class="fontcolor" id="increase_recharge">{$todayData.increase_recharge}</span>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-md-3">
                            <div class="panel bg-aqua-gradient">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <span class="label label-success pull-right"></span>
                                        <h5>昨日新增</h5>
                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins">{$yesterdayData.increase}</h1>

                                        <small>新增用户的充值金额:</small><span class="fontcolor" id="yestday_new_user_recharge" >{$yesterdayData.day_recharge_user_money}</span><br/>

                                        <small>新增用户的充值人数:</small><span class="fontcolor">{$yesterdayData.day_recharge_user_count}</span><br/>
                                        <span class="fontcolor">{$yesterdayData.increase_m}</span>&nbsp;男性,<span class="fontcolor">{$yesterdayData.increase_f}</span>&nbsp;女性<br/>
                                        <small>主号关注:</small><span class="fontcolor">{$yesterdayData.increase_fllow}</span><br/>
                                        <small>主号取关:</small><span class="fontcolor">{$yesterdayData.unfollow_num}</span><br/>
                                        <small>净关注:</small><span class="fontcolor">{$yesterdayData.net_follow_num}</span><br/>
                                        <small>已付费:</small><span class="fontcolor">{$yesterdayData.increase_recharge}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-6 col-md-3">
                            <div class="panel bg-purple-gradient">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <span class="label label-success pull-right" >不含当日</span>
                                        <h5>本月新增 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="right" data-original-title="不含当日，非实时，每天凌晨2:30左右更新"></i></h5>
                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins">{$monthData.increase}</h1>
                                        <div class="stat-percent font-bold text-gray"><span style="visibility:hidden;"><small>已付费:</small><span class="fontcolor">{$monthData.increase_recharge |default=0}</span></span></div>
                                        <small>新增用户的充值人数:</small><span class="fontcolor">{$monthData.day_recharge_user_count |default=0}</span><br/>
                                        <span class="fontcolor">{$monthData.increase_m}</span>&nbsp;男性,<span class="fontcolor">{$monthData.increase_f}</span>&nbsp;女性<br/>
                                        <small>主号关注:</small><span class="fontcolor">{$monthData.increase_fllow}</span><br/>
                                        <small>主号取关:</small><span class="fontcolor">{$monthData.unfollow_num}</span><br/>
                                        <small>净关注:</small><span class="fontcolor">{$monthData.net_follow_num}</span><br/>
                                        <small>已付费:</small><span class="fontcolor">{$monthData.increase_recharge |default=0}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-md-3">
                            <div class="panel bg-green-gradient">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <span class="label label-success pull-right">不含当日</span>
                                        <h5>总用户 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="right" data-original-title="不含当日，非实时，每天凌晨2:30左右更新"></i></h5>
                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins">{$totalData.increase |default=0}</h1>
                                        <div class="stat-percent font-bold text-gray"><span style="visibility:hidden;"><small>已付费:</small><span class="fontcolor">{$totalData.increase_recharge |default=0}</span></span></div>
                                        <small>新增用户的充值人数:</small><span class="fontcolor">{$totalData.day_recharge_user_count |default=0}</span><br/>
                                        <span class="fontcolor">{$totalData.increase_m |default=0}</span>&nbsp;男性,<span class="fontcolor">{$totalData.increase_f |default=0}</span>&nbsp;女性<br/>
                                        <small>主号关注:</small><span class="fontcolor">{$totalData.increase_fllow |default=0}</span><br/>
                                        <small>主号取关:</small><span class="fontcolor">{$totalData.unfollow_num}</span><br/>
                                        <small>净关注:</small><span class="fontcolor">{$totalData.net_follow_num}</span><br/>
                                        <small>已付费:</small><span class="fontcolor">{$totalData.increase_recharge |default=0}</span><br/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--头部数据统计-->
                    <div>近30日数据统计(<i class="text-danger">不含当日</i>)</div>
                    <div class="panel-heading">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#first" data-toggle="tab">近30天汇总</a></li>
                            <li><a href="#second" data-toggle="tab">新增用户充值分析</a></li>
                        </ul>
                    </div>
                    <div class="panel-body tab-content">
                        <div class="tab-pane fade active in" id="first">
                            <table id="table1" 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>
</div>