{extend name="../admin/common/base" /}
{block name="body"}
<style>
    .ui_trendgrid {
        table-layout: fixed;
        position: relative;
        width: 100%;
        margin: 20px 0px;
    }

    .ui_trendgrid td {

        border-right: 1px solid rgb(231, 231, 235);
    }

    .ui_trendgrid td.last {
        border-right: 0px none;
    }

    .ui_trendgrid dl {
        display: inline-block;
        margin-top: 0px;
        padding: 0px;
        text-align: left;
        position: relative;
        z-index: 2;
    }

    .ui_trendgrid dt {
        padding-bottom: 12px;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
    }

    .ui_trendgrid dd {
        margin-top: 2px;
        font-size: 14px;
        line-height: 18px;
        white-space: nowrap;
    }

    .ui_trendgrid dd.ui_trendgrid_number {
        text-align: center;
        color: rgb(103, 103, 103);
        font-size: 30px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    .ui_trendgrid dd.ui_trendgrid_number strong {
        font-weight: 400;
        font-style: normal;
    }

    .ui_trendgrid .icon_down, .ui_trendgrid .icon_up, .ui_trendgrid .icon_down_grey {
        margin-left: 10px;
        position: relative;
        top: -2px;
        margin-right: 3px;
        display: inline-block;
        width: 10px;
        height: 9px;
        vertical-align: middle;
    }

    .ui_trendgrid .icon_down {
        background-position: -10px 0px;
    }

    .ui_trendgrid_item {
        height: 100%;
        position: relative;
        overflow: hidden;
        text-align: center;
    }

    .ui_trendgrid_item b {
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
    }

    .ui_trendgrid_chart {
        width: 100%;
        position: absolute;
        bottom: 0px;
        left: 1px;
    }

    .ui_trendgrid_unit {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 400;
        font-style: normal;
    }

    .step_inner::after {
        content: "​";
        display: block;
        height: 0px;
        clear: both;
    }

    .tab_navs::after {
        content: "​";
        display: block;
        height: 0px;
        clear: both;
    }

    .info_box {
        margin-bottom: 20px;
    }

    .info_box .inner {
        border: 1px solid rgb(231, 231, 235);
    }

    .info_box .info_hd {
        line-height: 38px;
        height: 38px;
        padding: 0px 20px;
        background-color: rgb(244, 245, 249);
        border-bottom: 1px solid rgb(231, 231, 235);
    }

    .info_box .info_hd::after {
        content: "​";
        display: block;
        height: 0px;
        clear: both;
    }

    .info_box .info_hd .ext_info {
        float: right;
    }

    .info_box .info_hd h4 {
        font-weight: 400;
        font-size: 14px;
    }

    .inner {
        position: relative;
    }

    .page_msg.top {
        margin-top: 6px;
        margin-bottom: 20px;
    }

    .wrp_overview {
        padding: 0px 30px 40px;
        position: relative;
        margin-top: 20px;
    }

    .info_hd.append_ask {
        position: relative;
        z-index: 10;
    }

    .info_hd.append_ask .help {
        right: 10px;
        top: 0px;
    }

    .info_bd {
        position: relative;
        z-index: 9;
    }

    .page_user .help .help_content {
        top: -9px;
    }

    .page_user_stat.mini {
        padding: 20px 15px 0px;
    }

    .page_user_stat.mini .inner {
        padding-left: 15px;
        background-color: transparent;
    }

    .page_user_stat.mini .inner.stat_info {
        background-color: rgb(224, 234, 246);
    }

    .table .table_action.arrow::after {
        content: "";
        position: relative;
        top: 13px;
        border-width: 5px;
        border-style: solid;
        border-color: rgb(198, 198, 198) transparent transparent;
        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        border-image: none;
    }

    .tr_chosen .table_action.arrow::after {
        top: -11px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent rgb(198, 198, 198);
        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        border-image: none;
    }
</style>

<div class="info_box" style="padding: 10px;">
    <div class="inner">
        <div class="info_hd append_ask"><h4>今日关键指标</h4>
        </div>
        <div class="info_bd">
            <div class="content" id="js_keydata">
                <table class="ui_trendgrid ui_trendgrid_3">
                    <tbody>
                    <tr>
                        <td class="first">
                            <div class="ui_trendgrid_item">
                                <div class="ui_trendgrid_chart"></div>
                                <dl>
                                    <dt><b>新关注人数</b></dt>
                                    <dd class="ui_trendgrid_number"><strong>{$report.subscribe.today}</strong><em
                                            class="ui_trendgrid_unit"></em></dd>
                                    <dd>昨天 <i class="icon_down"></i>{$report.subscribe.yesterday}</dd>
                                    <dd>本周 <i class="icon_up" ></i>{$report.subscribe.week}</dd>
                                    <dd>上周 <i class="icon_up"></i>{$report.subscribe.lastweek}</dd>
                                    <dd>本月 <i class="icon_up"></i>{$report.subscribe.month}</dd>
                                    <dd>上月 <i class="icon_up"></i>{$report.subscribe.lastmonth}</dd>
                                    <dd>本年 <i class="icon_up"></i>{$report.subscribe.year}</dd>
                                    <dd>去年 <i class="icon_up"></i>{$report.subscribe.lastyear}</dd>
                                </dl>
                            </div>
                        </td>
                        <td>
                            <div class="ui_trendgrid_item">
                                <div class="ui_trendgrid_chart"></div>
                                <dl>
                                    <dt><b>取消关注人数</b></dt>
                                    <dd class="ui_trendgrid_number"><strong>{$report.unsubscribe.today}</strong><em
                                            class="ui_trendgrid_unit"></em></dd>
                                    <dd>昨天 <i class="icon_down"></i>{$report.unsubscribe.yesterday}</dd>
                                    <dd>本周 <i class="icon_up" ></i>{$report.unsubscribe.week}</dd>
                                    <dd>上周 <i class="icon_up"></i>{$report.unsubscribe.lastweek}</dd>
                                    <dd>本月 <i class="icon_up"></i>{$report.unsubscribe.month}</dd>
                                    <dd>上月 <i class="icon_up"></i>{$report.unsubscribe.lastmonth}</dd>
                                    <dd>本年 <i class="icon_up"></i>{$report.unsubscribe.year}</dd>
                                    <dd>去年 <i class="icon_up"></i>{$report.unsubscribe.lastyear}</dd>
                                </dl>
                            </div>
                        </td>
                        <td>
                            <div class="ui_trendgrid_item">
                                <div class="ui_trendgrid_chart"></div>
                                <dl>
                                    <dt><b>净增关注人数</b></dt>
                                    <dd class="ui_trendgrid_number"><strong>{$report.subscribe.today-$report.unsubscribe.today}</strong><em
                                            class="ui_trendgrid_unit"></em></dd>
                                    <dd>昨天 <i class="icon_down"></i>{$report.subscribe.yesterday-$report.unsubscribe.yesterday}</dd>
                                    <dd>本周 <i class="icon_up" ></i>{$report.subscribe.week-$report.unsubscribe.week}</dd>
                                    <dd>上周 <i class="icon_up"></i>{$report.subscribe.lastweek-$report.unsubscribe.lastweek}</dd>
                                    <dd>本月 <i class="icon_up"></i>{$report.subscribe.month-$report.unsubscribe.month}</dd>
                                    <dd>上月 <i class="icon_up"></i>{$report.subscribe.lastmonth-$report.unsubscribe.lastmonth}</dd>
                                    <dd>本年 <i class="icon_up"></i>{$report.subscribe.year-$report.unsubscribe.year}</dd>
                                    <dd>去年 <i class="icon_up"></i>{$report.subscribe.lastyear-$report.unsubscribe.lastyear}</dd>
                                </dl>
                            </div>
                        </td>
                        <td class="last">
                            <div class="ui_trendgrid_item">
                                <div class="ui_trendgrid_chart"></div>
                                <dl>
                                    <dt><b>当前关注人数</b></dt>
                                    <dd class="ui_trendgrid_number"><strong>{$report.total.subscribe_total}</strong><em
                                            class="ui_trendgrid_unit"></em></dd>
                                    <dd>累积关注 <i class="icon_up"></i>{$report.total.total}</dd>
                                    <dd>累积取关 <i class="icon_down"></i>{$report.total.unsubscribe_total}</dd>
                                </dl>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <p class="tip_for_p" style="margin-top: 7px;">
        注：以上数据以接入平台后产生的数据为准，若公众号已认证请先同步粉丝。
    </p>
        <div class="layui-row" style="padding:10px 0px 10px 0px;">
            <div class="layui-col-md6" style="padding-right: 5px;">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">风向标</h2>
                        <div class="layui-colla-content layui-show">
                            <ul>
                                {volist name="data_by_api" id="vo" empty="暂时没有数据" }
                                <li><a href="{$vo.link}" target="_blank">{$vo.title}</a> </li>
                                {/volist}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6" style="padding-left: 5px;">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">热门应用</h2>
                        <div class="layui-colla-content layui-show">
                            <ul class="rha_app_list">
                            {volist name="app_by_api" id="vo" empty="暂时没有数据" }
                                <li><a href="{$vo.link}" target="_blank" title="{$vo.name}"><img src="{$vo.logo}" ><span>{$vo.name}</span></a> </li>
                            {/volist}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>


</div>

{/block}