仿微信首页
利用列表、媒体列表、栅格等实现微信首页效果。
示例源码
<style>
.aui-list-item.wechat-top {
background-color: #f3f3f7;
}
.aui-list .wechat-avatar {
width:3rem;
}
.wechat-avatar .aui-row-padded {
background-color: #dddee0;
padding: 0.1rem;
border-radius: 0.2rem;
margin-left: -0.05rem;
margin-right: -0.05rem;
}
.wechat-avatar .aui-row-padded [class*=aui-col-xs-] {
padding: 0.05rem;
}
.wechat-avatar,
.wechat-avatar > img {
border-radius:0.2rem;
}
</style>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-media-list">
<li class="aui-list-item wechat-top">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-mobile"></i>
</div>
<div class="aui-list-item-inner">
Mac 微信已登录
</div>
</div>
</li>
<li class="aui-list-item aui-list-item-middle wechat-top">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media wechat-avatar">
<div class="aui-badge">9</div>
<div class="aui-row-padded">
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo1.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo2.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo3.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo4.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo5.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo6.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo1.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo3.png" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo5.png" />
</div>
</div>
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">AUI微信开发交流群</div>
<div class="aui-list-item-right">08:00</div>
</div>
<div class="aui-list-item-text aui-font-size-12">
流浪男:欢迎使用AUI 2.1
</div>
</div>
</div>
</li>
<li class="aui-list-item aui-list-item-middle wechat-top">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media wechat-avatar">
<div class="aui-row-padded">
<div class="aui-col-xs-6">
<img src="/static/auicss/img/demo2.png" />
</div>
<div class="aui-col-xs-6">
<img src="/static/auicss/img/demo3.png" />
</div>
<div class="aui-col-xs-6">
<img src="/static/auicss/img/demo1.png" />
</div>
<div class="aui-col-xs-6">
<img src="/static/auicss/img/demo5.png" />
</div>
</div>
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">AUI 2.1讨论组</div>
<div class="aui-list-item-right">08:00</div>
</div>
<div class="aui-list-item-text aui-font-size-12">
AUI:官方网站 www.auicss.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 wechat-avatar">
<div class="aui-badge">9</div>
<img src="/static/auicss/img/demo5.png" />
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">流浪男</div>
<div class="aui-list-item-right">星期一</div>
</div>
<div class="aui-list-item-text aui-font-size-12">
Hello AUI 2.1!
</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 wechat-avatar">
<img src="/static/auicss/img/demo1.png" />
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">张三</div>
<div class="aui-list-item-right">1天前</div>
</div>
<div class="aui-list-item-text aui-font-size-12">
Hello AUI 2.1!
</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 wechat-avatar">
<div class="aui-dot"></div>
<img src="/static/auicss/img/demo4.png" />
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">李四</div>
<div class="aui-list-item-right">星期一</div>
</div>
<div class="aui-list-item-text aui-font-size-12">
Hello AUI 2.1!
</div>
</div>
</div>
</li>
</ul>
</div>