卡片 Card

使用 .aui-card 做为外侧容器。使用 .aui-card-title 和 .aui-card-main 来实现卡片布局。.aui-card-* 设置额外样式，部分样式参考如下：

• .aui-card-shandow 给卡片添加阴影

• .aui-card-disabled 禁用样式

• .aui-card-round 圆角

• .aui-card-image 图文卡片

• .aui-card-title-line 蓝色竖线

• .aui-card-title-right 标题右侧额外信息，有单独 i 标签ICON样式

• .aui-card-down 卡片底部区域

• .aui-card-down-tip 卡片底部区域提示语，灰色文字

• ..aui-card-image .img-mask 图文卡片图片底部的透明遮罩

示例代码

<div class="aui-content">
    <div class="content-top">
        Card卡片组件通常用来显示完整独立的一段信息，例如一篇文章的预览图、作者信息、时间等。卡片通常是更复杂信息的入口点。
    </div>
    <div class="aui-card">
        <div class="aui-card-title">
            <span class="aui-card-title-line"></span>
            基础卡片
        </div>
        <div class="aui-card-main">
            <!-- 卡片实例 -->
            <!-- 1、 -->
            <div class="aui-card aui-card-shandow aui-card-round">
                <div class="aui-card-main">
                    <p>这是一个基础卡片示例，内容比较少，内容样式可自定义。</p>
                </div>
            </div>
            <!-- 2、 -->
            <div class="aui-card aui-card-shandow aui-card-round">
                <div class="aui-card-title">标题文字
                    <div class="aui-card-title-right aui-text-gray">额外信息</div>
                </div>
                <div class="aui-card-main">
                    <p>这个一个基础卡片示例，内容比较多，内容样式可自定义，卡片识图通常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、时间等。</p>
                </div>
            </div>
            <!-- 3、 -->
            <div class="aui-card aui-card-shandow aui-card-round">
                <div class="aui-card-title">标题文字
                    <div class="aui-card-title-right aui-text-gray">额外信息</div>
                </div>
                <div class="aui-card-main">
                    <p>这个一个基础卡片示例，底部带提示信息，具体样式可自定义。</p>
                </div>
                <div class="aui-card-down row-before">
                    <p class="aui-card-down-tip">Tips</p>
                </div>
            </div>
            <!-- 4、 -->
            <div class="aui-card aui-card-shandow aui-card-round">
                <div class="aui-card-title">
                    标题文字
                    <div class="aui-card-title-right aui-text-gray">额外信息<i
                                class="iconfont aui-btn-right iconright1"></i></div>
                </div>
                <div class="aui-card-main">
                    <p>这个一个基础卡片示例，内容比较多，内容样式可自定义，卡片识图通常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、时间等。</p>
                </div>
                <div class="aui-card-down row-before" style="padding: 0;">
                    <div class="aui-list" style="background: none;">
                        <div class="aui-list-left"><img src="../../../static/img/success-green.png" alt="">设备</div>
                        <div class="aui-list-right" @click.stop="aui.closeWin()"><span
                                    style="color: #aaa;">查看更多</span><i class="iconfont aui-btn-right iconright1"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="aui-card">
        <div class="aui-card-title"><span class="aui-card-title-line"></span>图文卡片</div>
        <div class="aui-card-main">

            <div class="aui-card aui-card-image aui-card-shandow aui-card-round">
                <div class="aui-card-main">
                    <div class="img">
                        <img src="../../../static/img/image/logo.png" alt="">
                        <div class="img-mask">aui框架</div>
                    </div>
                    <div class="desc">aui
                        是一套基于原生javascript开发的移动端UI组件库，包含常用js方法、字符校验、dialog提示弹窗、数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板…
                    </div>
                </div>
                <div class="aui-card-down row-before">
                    <div class="aui-btn"><i class="iconfont iconsend"></i>转发</div>
                    <div class="aui-btn"><i class="iconfont iconmessage"></i>评论</div>
                    <div class="aui-btn"><i class="iconfont iconpraise"></i>赞</div>
                </div>
            </div>
        </div>
    </div>
</div>