mui 之 卡片视图

说明

卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等

官方文档：https://dev.dcloud.net.cn/mui/ui/#cardview

主体结构

<div class="mui-card">
    <!--页眉，放置标题-->
    <div class="mui-card-header">
        页眉
    </div>
    <!--内容区-->
    <div class="mui-card-content">
        内容区
    </div>
    <!--页脚，放置补充信息或支持的操作-->
    <div class="mui-card-footer">
        页脚
    </div>
</div>

页眉 及 内容区 均支持放置图片；

<div class="mui-card">
    <!--页眉，放置标题-->
    <div class="mui-card-header mui-card-media">
        <img src="images/logo.png" />
        <div class="mui-media-body">
            <p>大数据男孩</p>
            <p>发表于 2016-06-30 15:30</p>
        </div>
    </div>
    <!--内容区-->
    <div class="mui-card-content">内容区</div>
    <!--页脚，放置补充信息或支持的操作-->
    <div class="mui-card-footer">页脚</div>
</div>

页眉、内容区放置图片的话，需要在mui-card-header、mui-card-content节点上增加mui-card-media类，然后设置一张图片做背景图

<style type="text/css">
    .mui-card-header.mui-card-media {
        height:40vw;
        background-image:url(images/logo.png)
    }
</style>
<div class="mui-card">
    <!--页眉，放置标题-->
    <div class="mui-card-header mui-card-media">
        放置图片
    </div>
    <!--内容区-->
    <div class="mui-card-content">内容区</div>
    <!--页脚，放置补充信息或支持的操作-->
    <div class="mui-card-footer">页脚</div>
</div>

例子

<style type="text/css">
    /* 内容区的背景 */
    .mui-card-content.mui-card-media {
        height:40vw;
        background-image:url(images/logo.png)
    }
</style>
<div class="mui-content">
    <div class="mui-card">

        <!--页眉，放置标题-->
        <div class="mui-card-header mui-card-media">
            <img src="images/logo.png" />
            <div class="mui-media-body">
                <p>大数据男孩</p>
                <p>发表于 2016-06-30 15:30</p>
            </div>
        </div>

        <!--内容区-->
        <div class="mui-card-content mui-card-media">
            <!-- 添加四周的边距 -->
            <div class="mui-card-content-inner">
                <p style="color: #000000;">啦啦啦啦啦</p>
            </div>
        </div>

        <!--页脚，放置补充信息或支持的操作-->
        <div class="mui-card-footer">
            <a href="" class="mui-card-link">收 藏</a>
            <a href="" class="mui-card-link">回复</a>
            <a href="" class="mui-card-link">查看</a>
        </div>
    </div>
</div>