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/v1.0/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/v1.0/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/v1.0/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/v1.0/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>