Statistics 统计

使用说明

在网页中经常使用大型数字统计数据,本框架根据现实需要制作了各种布局的统计风格。如果需要等分且需要换行可以使用grid栅格布局(Grid用法),可追加ax-split-*类来适配手机端一行显示数量;如果不需要换行可使用layout弹性布局(Layout用法)。使用ax-statistics定义数据统计,使用ax-item定义数据块。ax-dot定义小点;ax-badge定义新增数字;ax-arrow定义文字角标。关于ax-dot和ax-badge的用法见:徽章

                             <div class="ax-grid ax-split-3 ax-statistics">
                                    <ul class="ax-grid-inner">
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-title">博士生(人)</span><span class="ax-text"><span class="ax-font-light" >65098</span><i class="ax-dot"></i></span></a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-title">硕士生(个)</span><span class="ax-text"><span class="ax-font-light" >98</span><i class="ax-badge">3</i></span></a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-title">本科生(个)</span><span class="ax-text"><span class="ax-font-light">6598</span></span></a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-title">大专生(个)</span><span class="ax-text"><span class="ax-font-light">650098</span><i class="ax-arrow">有新人</i></span></a>
                                        </li>
                                    </ul>
                             </div>
                        

颠倒数字文字

本例使用Layout布局,ax-row+ax-col结构,无论什么终端平台均一行显示,不换行。

                                <div class="ax-row ax-statistics">
                                    <div class="ax-col ax-col-6">
                                        <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">65098</span><i class="ax-dot"></i></span><span class="ax-title">博士生(人)</span></a>
                                    </div>
                                    <div class="ax-col ax-col-6">
                                        <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">98</span><i class="ax-badge">3</i></span><span class="ax-title">硕士生(个)</span></a>
                                    </div>
                                    <div class="ax-col ax-col-6">
                                        <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">6598</span></span><span class="ax-title">本科生(个)</span></a>
                                    </div>
                                    <div class="ax-col ax-col-6">
                                        <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">650098</span><i class="ax-arrow">有新人</i></span><span class="ax-title">大专生(个)</span></a>
                                    </div>
                                </div>
                        

使用图片

                                <div class="ax-grid ax-split-2 ax-statistics">
                                    <ul class="ax-grid-inner">
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-image" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"><i class="ax-dot"></i></span>
                                                <span class="ax-font01 ax-font-light">15</span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-image" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg)"><i class="ax-badge">2</i></span>
                                                <span class="ax-font01 ax-font-light">360</span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-image" style="background-image: url(https://src.axui.cn/examples/images/head03.jpg)"></span>
                                                <span class="ax-font01 ax-font-light">659</span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-image" style="background-image: url(https://src.axui.cn/examples/images/head04.jpg)"></span>
                                                <span class="ax-font01 ax-font-light">102</span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                </ul>
                        

多行文字

                               <div class="ax-grid ax-split-2 ax-statistics">
                                    <ul class="ax-grid-inner">
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-font01 ax-font-light">50</span>
                                                <span class="ax-font03">个博士生<br>加入博士点1部</span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-font01 ax-font-light">26<span class="ax-dot"></span></span>
                                                <span class="ax-font03">个硕士生<br>加入研究点2部</span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-font01 ax-font-light">68<i class="ax-badge">2</i></span>
                                                <span class="ax-font03">个本科生<br>加入技术部</span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-font01 ax-font-light">116</span>
                                                <span class="ax-font03">个大专生<br>加入销售部</span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                    </ul>
                               </div>
                        

使用图标

                              <div class="ax-grid ax-split-2 ax-statistics">
                                    <ul class="ax-grid-inner">
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-icon ax-iconfont  ax-icon-volume-up"><i class="ax-dot"></i></span>
                                                <span class="ax-font02"><span class="ax-row01 ax-font-light">5514</span><br><span class="ax-row02">次点击</span></span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-icon ax-iconfont  ax-icon-link"><i class="ax-badge">3</i></span>
                                                <span class="ax-font02"><span class="ax-row01 ax-font-light">1065</span><br><span class="ax-row02">个独立访客</span></span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-icon ax-iconfont  ax-icon-pie"></span>
                                                <span class="ax-font02"><span class="ax-row01 ax-font-light">6548</span><br><span class="ax-row02">个评论</span></span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item" style="width: 180px;">
                                                <span class="ax-icon ax-iconfont  ax-icon-global"></span>
                                                <span class="ax-font02"><span class="ax-row01 ax-font-light">1268</span><br><span class="ax-row02">个点赞</span></span>
                                                <div class="ax-clear"></div>
                                            </a>
                                        </li>
                                    </ul>
                              </div>
                        

变体一

                               <div class="ax-grid ax-split-3 ax-statistics">
                                    <ul class="ax-grid-inner">
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">65098</span><em>人</em><i class="ax-dot"></i></span><span class="ax-title">博士生</span></a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">6598</span><em>人</em></span><span class="ax-title">本科生</span></a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">98</span><em>人</em><i class="ax-badge">3</i></span><span class="ax-title">硕士生</span></a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">650098</span><em>人</em><i class="ax-arrow">有新人</i></span><span class="ax-title">大专生</span></a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">951</span><em>人</em></span><span class="ax-title">高中生</span></a>
                                        </li>
                                        <li class="ax-grid-block ax-col-6">
                                            <a href="###" class="ax-item"><span class="ax-text"><span class="ax-font-light">87</span><em>%</em></span><span class="ax-title">通过率</span></a>
                                        </li>
                                    </ul>
                               </div>