仿淘宝首页

示例源码

<section class="aui-content ">
    <div class="aui-grid aui-bg-info">
        <div class="aui-row" id="classify">
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-image"></i>
                <div class="aui-grid-label">扫两扫</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-camera"></i>
                <div class="aui-grid-label">支付</div>
            </div>
            <div class="aui-col-xs-3">
                <div class="aui-badge">新</div>
                <i class="aui-iconfont aui-icon-pencil"></i>
                <div class="aui-grid-label">写点啥</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-date"></i>
                <div class="aui-grid-label">咻二咻</div>
            </div>
        </div>
    </div>
</section>
<section class="aui-content aui-margin-b-10">
    <div class="aui-grid">
        <div class="aui-row">
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-recovery aui-text-info"></i>
                <div class="aui-grid-label">名字</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-mobile aui-text-warning"></i>
                <div class="aui-grid-label">手付</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-cert aui-text-warning"></i>
                <div class="aui-grid-label">卡券</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-map aui-text-info"></i>
                <div class="aui-grid-label">位置</div>
            </div>
            <div class="aui-hr aui-clearfix"></div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-gear aui-text-danger"></i>
                <div class="aui-grid-label">设置</div>
            </div>
            <div class="aui-col-xs-3">
                <div class="aui-badge" style="left:50%">抢红包</div>
                <i class="aui-iconfont aui-icon-calendar aui-text-danger"></i>
                <div class="aui-grid-label">日历</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-location aui-text-warning"></i>
                <div class="aui-grid-label">定位</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-video aui-text-primary"></i>
                <div class="aui-grid-label">直播</div>
            </div>
        </div>
    </div>
</section>
<section class="aui-content aui-margin-b-10" style="overflow:hidden; background:#ffffff;">
    <div class="aui-info aui-padded-l-15 aui-padded-r-15">
        <div class="aui-info-item">
            <img src="/static/auicss/img/liulangnan.png" class="aui-margin-r-10" style="width:2rem;border-radius:4px;" />
            记录我的生活
        </div>
        <div class="aui-info-item">
            <i class="aui-iconfont aui-icon-camera"></i>
        </div>
    </div>
</section>
<section class="aui-content">
    <div class="aui-card-list">
        <div class="aui-card-list-header aui-card-list-user">
            <div class="aui-card-list-user-avatar">
                <img src="/static/auicss/img/gril.jpg" class="aui-margin-r-10" style="width:2rem;border-radius:4px;" />
            </div>
            <div class="aui-card-list-user-name">
                <div>小太阳</div>
                <i class="aui-iconfont aui-icon-down"></i>
            </div>
            <div class="aui-card-list-user-info">08-09 11:05</div>
        </div>
        <div class="aui-card-list-content aui-list aui-media-list aui-list-noborder aui-padded-t-0">
            <div class="aui-list-item aui-list-item-middle aui-padded-r-15">
                <div class="aui-media-list-item-inner "  style="background:#f5f5f5;">
                    <div class="aui-list-item-media aui-padded-t-0 aui-padded-b-0 aui-padded-r-0" style="width:3rem;">
                        <img src="/static/auicss/img/hongbao.png">
                    </div>
                    <div class="aui-list-item-inner aui-padded-l-10">
                        呼唤朋友拿红包
                    </div>
                </div>
            </div>
        </div>
        <div class="aui-card-list-footer aui-border-t aui-margin-t-10" style="padding-left:1.5rem;padding-right:1.5rem;">
            <div>
                <i class="aui-iconfont aui-icon-laud aui-margin-r-5"></i>赞
            </div>
            <div>
                <i class="aui-iconfont aui-icon-comment aui-margin-r-5"></i>评论
            </div>
            <div>
                <i class="aui-iconfont aui-icon-star aui-margin-r-5"></i>打赏
            </div>
        </div>
    </div>
</section>
<section class="aui-content">
    <div class="aui-card-list aui-margin-b-0">
        <div class="aui-card-list-header aui-card-list-user">
            <div class="aui-card-list-user-avatar">
                <img src="/static/auicss/img/demo1.png" class="aui-margin-r-10" style="width:2rem;border-radius:4px;" />
            </div>
            <div class="aui-card-list-user-name">
                <div>XX信用-阅读更新</div>
                <i class="aui-iconfont aui-icon-down"></i>
            </div>
            <div class="aui-card-list-user-info">08-09 11:05</div>
        </div>
        <div class="aui-card-list-content aui-text-center">
            <div class="aui-font-size-20">本月XX分更新了</div>
            <p class="aui-text-danger aui-margin-b-10">评估时间：2016-08-06</p>
            <p class="aui-margin-b-10">点滴珍贵，重在积累</p>
        </div>
        <div class="aui-card-list-footer aui-text-center aui-border-t">
            <div class="aui-text-info">立即查看</div>
        </div>
    </div>
</section>