卡片列表
使用 .aui-card-list 可以完成常见卡片列表类布局，并且方便用户自由扩展。
卡片一般包含头部 .aui-card-list-header、主体 .aui-card-list-content、.aui-card-list-content-padded、尾部 .aui-card-list-footer 三部分。
每一部分均可配合栅格、宫格、列表和其它样式来完成多种多样的精美布局。
示例源码
<section class="aui-content-padded">
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content-padded">
内容区域，卡片列表布局样式可以实现APP中常见的各类样式
</div>
<div class="aui-card-list-footer">
底部区域
</div>
</div>
</section>
<section class="aui-content">
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content">
<img src="/static/auicss/img/l2.png" />
</div>
<div class="aui-card-list-footer">
2016年7月12日
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-header">
卡片布局头部区域
</div>
<div class="aui-card-list-content-padded aui-border-b aui-border-t">
<div class="aui-row aui-row-padded">
<div class="aui-col-xs-4">
<img src="/static/auicss/img/l1.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/l2.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/l3.png" />
</div>
</div>
</div>
<div class="aui-card-list-footer">
<div><i class="aui-iconfont aui-icon-star"></i></div>
<div><i class="aui-iconfont aui-icon-laud"></i></div>
<div><i class="aui-iconfont aui-icon-note"></i></div>
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-header aui-card-list-user aui-border-b">
<div class="aui-card-list-user-avatar">
<img src="/static/auicss/img/demo4.png" class="aui-img-round" />
</div>
<div class="aui-card-list-user-name">
<div>AUI</div>
<small>1天前</small>
</div>
<div class="aui-card-list-user-info">北京朝阳</div>
</div>
<div class="aui-card-list-content-padded">
<img src="/static/auicss/img/l2.png" />
</div>
<div class="aui-card-list-footer aui-border-t">
<div><i class="aui-iconfont aui-icon-note"></i> 666</div>
<div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
<div><i class="aui-iconfont aui-icon-star"></i> 888</div>
</div>
</div>
<div class="aui-card-list">
<div class="aui-card-list-header">
<div><i class="aui-iconfont aui-icon-my aui-text-danger"></i><span class="aui-text-danger"> 最近联系人</span></div>
<i class="aui-iconfont aui-icon-more"></i>
</div>
<div class="aui-card-list-content">
<ul class="aui-list aui-media-list">
<li class="aui-list-item aui-list-item-middle">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="/static/auicss/img/demo5.png" class="aui-img-round" >
</div>
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">AUI</div>
<div class="aui-list-item-right">08:00</div>
</div>
<div class="aui-list-item-text">
aui.phper.com
</div>
</div>
</div>
</li>
<li class="aui-list-item aui-list-item-middle">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="/static/auicss/img/liulangnan.png" class="aui-img-round">
</div>
<div class="aui-list-item-inner aui-list-item-arrow">
流浪男
</div>
</div>
</li>
</ul>
</div>
<div class="aui-card-list-footer aui-text-center">
查看更多
</div>
</div>
</section>
<section class="aui-content-padded">
<div class="aui-card-list">
<div class="userinfo-header">
<div class="aui-info">
<div class="aui-info-item">
<img src="/static/auicss/img/demo2.png" style="width:2.2rem"/>
<span class="aui-margin-l-10 aui-margin-r-10">AUI</span>
<i class="aui-iconfont aui-icon-laud aui-text-info "></i>
</div>
<div class="aui-info-item">11km</div>
</div>
</div>
<div class="aui-card-list-content-padded">
只工作不玩耍，聪明的孩子要变傻
</div>
<div class="aui-card-list-footer aui-border-t">
<div><i class="aui-iconfont aui-icon-note"></i> 聊一下</div>
<div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
<div><i class="aui-iconfont aui-icon-star"></i> 888</div>
</div>
</div>
<div class="aui-card-list">
<div class="userinfo-header">
<div class="aui-info">
<div class="aui-info-item">
<img src="/static/auicss/img/demo2.png" style="width:2.4rem"/>
<span class="aui-margin-l-10">AUI</span>
</div>
<div class="aui-info-item">11km</div>
</div>
</div>
<div class="aui-card-list-content-padded">
内容区域，卡片列表布局样式可以实现APP中常见的各类样式
</div>
<div class="aui-card-list-footer aui-border-t">
<div><i class="aui-iconfont aui-icon-note"></i> 聊一下</div>
<div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
<div><i class="aui-iconfont aui-icon-star"></i> 888</div>
</div>
</div>
</section>