swiftadmin/app/admin/view/developer/example/card.html

<include file="/public/header"/>
<!-- // 重定位style -->
<div class="layui-fluid ">
    <!--Developer-->
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-card layui-row ">
                <div class="layui-card-body layui-col-space10">
                    <div class="layui-col-md3">
                        <div class="layui-project"> <img class="layui-project-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
                            <div class="layui-project-body">
                                <h2>Angular</h2>
                                <div class="layui-project-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div>
                                <div class="layui-project-desc"> <span class="time">2小时前</span>
                                    <div class="layui-project-head"> <img class="layui-project-head-item" lay-tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="layui-project-head-item" lay-tips="王昭君" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="layui-project-head-item" lay-tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-project"> <img class="layui-project-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
                            <div class="layui-project-body">
                                <h2>Angular</h2>
                                <div class="layui-project-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div>
                                <div class="layui-project-desc"> <span class="time">2小时前</span>
                                    <div class="layui-project-head"> <img class="layui-project-head-item" lay-tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="layui-project-head-item" lay-tips="王昭君" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="layui-project-head-item" lay-tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-project"> <img class="layui-project-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
                            <div class="layui-project-body">
                                <h2>Angular</h2>
                                <div class="layui-project-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div>
                                <div class="layui-project-desc"> <span class="time">2小时前</span>
                                    <div class="layui-project-head"> <img class="layui-project-head-item" lay-tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="layui-project-head-item" lay-tips="王昭君" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="layui-project-head-item" lay-tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-project"> <img class="layui-project-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
                            <div class="layui-project-body">
                                <h2>Angular</h2>
                                <div class="layui-project-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div>
                                <div class="layui-project-desc"> <span class="time">2小时前</span>
                                    <div class="layui-project-head"> <img class="layui-project-head-item" lay-tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="layui-project-head-item" lay-tips="王昭君" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="layui-project-head-item" lay-tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="layui-article" data-index="0" data-number="1">
                        <h2>Alipay</h2>
                        <span class="layui-badge-rim">1楼</span>
                        <div class="layui-badge-list">
                            <span class="layui-badge layui-badge-gray">SwiftAdmin Pro</span>
                            <span class="layui-badge layui-badge-gray">管理系统</span> <span class="layui-badge layui-badge-gray">前端框架</span> </div>
                        <div class="layui-article-text layui-text">SwiftAdmin 基于Layui的一套通用型极速开发管理后台系统。 </div>
                        <div class="layui-article-desc layui-text">
                            <img src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" class="head">&nbsp;
                            <a href="javascript:;" class="name">付小小</a> &emsp;发布在&emsp;
                            <a href="javascript:;">http://swiftadmin.net</a>
                        </div>
                        <div class="layui-article-tool">
                    <span class="layui-article-tool-item star-active" lay-event="star">
                        <i class="layui-icon layui-icon-rate"></i>&nbsp;
                        <span>185</span>
                    </span>
                            <span class="layui-article-tool-item star-active" lay-event="like">
                        <i class="layui-icon layui-icon-praise"></i>&nbsp;
                        <span>126</span>
                    </span>
                            <span class="layui-article-tool-item" lay-event="comment">
                        <i class="layui-icon layui-icon-dialogue"></i>&nbsp;
                        <span>18</span>
                    </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<include file="/public/footer"/>
<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;


    });
</script>