layui-ul/demo/pc/card.html

<fieldset class="layui-elem-field layui-field-title">
    <legend>卡片A</legend>
    <div class="layui-field-box">
        <div class="ul-padding-md">
            <div class="ul-common-flex-list">
                <div class="ul-card-a" data-repeat="3">
                    <div class="ul-card-a-left">
                        <img width="100%" src="{$site_logo_src}" alt="">
                    </div>
                    <div class="ul-card-a-right">
                        <div class="ul-card-a-main">
                            <div class="ul-card-a-title">
                                卡片标题
                            </div>
                            <div class="ul-card-a-desc">
                                这是卡片说明
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>银行卡</legend>
    <div class="layui-field-box">
        <div class="ul-padding-md">
            <div class="ul-card-bank" data-repeat="3">
                <div class="ul-common-flex-sb ul-card-bank-header">
                    <div class="ul-card-bank-title">
                        中国银行
                    </div>
                    <div class="ul-card-bank-number">
                        尾号 ********123456
                    </div>
                </div>
                <div class="ul-common-flex-sb ul-card-bank-body">
                    <div class="ul-card-bank-line">
                        <div class="ul-card-bank-line-triangle"></div>
                    </div>
                    <div class="ul-card-bank-tips">
                        默认
                    </div>
                </div>
                <div class="ul-common-flex-sb ul-card-bank-footer">
                    <div class="ul-card-bank-time">
                        绑定日期:2021-03-15
                    </div>
                    <div class="ul-card-bank-name">
                        **宏
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>详细属性卡片</legend>
    <div class="layui-field-box">
        <div class="ul-padding-md layui-bg-gray">
            <div class="layui-card ul-card">
                <div class="layui-card-header">
                    <span class="ul-card-status layui-bg-green">意向</span>
                    <span class="ul-card-title">卡片面板</span>
                    <span class="ul-card-options">
                        <span>2021年3月29日</span>
                        <span class=""><i class="layui-icon layui-icon-right"></i></span>
                    </span>
                </div>
                <div class="layui-card-body">
                    <div class="data-item">
                        <span class="data-title">入库时间:</span>
                        <span class="data-value">2021年3月29日16:33:21</span>
                    </div>
                    <div class="data-item">
                        <span class="data-title">用户名称:</span>
                        <span class="data-value">奥古斯宏</span>
                    </div>
                    <div class="data-item">
                        <span class="data-title">公司名称:</span>
                        <span class="data-value">临沂奥宏网络科技有限公司</span>
                    </div>
                    <div class="data-item">
                        <span class="data-title">电话:</span>
                        <span class="data-value">13012341234</span>
                    </div>
                    <div class="data-item">
                        <span class="data-title">相册:</span>
                        <span class="data-img">
                            <img class="data-img-main" src="/static/images/view.jpg" alt="">
                            <img class="data-img-main" src="/static/images/view.jpg" alt="">
                            <img class="data-img-main" src="/static/images/view.jpg" alt="">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>数据卡片</legend>
    <div class="layui-field-box">
        <div class="ul-card-data-container ul-padding-md">
            <div class="ul-card-data-a ul-card-data" data-repeat="2">
                <div class="ul-card-data-a-title">
                    509778.80
                </div>
                <div class="ul-card-data-a-options">
                    <div class="ul-card-data-a-item">
                        <i class="layui-icon layui-icon-gift"></i>
                        余额
                    </div>
                    <div class="ul-card-data-a-item">
                        <div class="layui-btn layui-btn-xs">充值</div>
                        <div class="layui-btn layui-btn-xs">提现</div>
                        <div class="layui-btn layui-btn-xs">记录</div>
                    </div>
                </div>
            </div>
            <div class="ul-card-data-b ul-card-data" data-repeat="2">
                <div class="ul-card-data-b-main">

                    <div class="ul-card-data-b-icon layui-icon layui-icon-gift">

                    </div>
                    <div class="ul-card-data-b-info">
                        <div class="ul-card-data-b-title">
                            盈亏总额(元)
                        </div>
                        <div class="ul-card-data-b-value">
                            0.00
                        </div>
                    </div>
                </div>

            </div>
            <div class="ul-card-data-c ul-card-data">

                <div class="ul-card-data-c-item" data-repeat="3">
                    <div class="ul-card-data-c-value">
                        0
                    </div>
                    <div class="ul-card-data-c-title">
                        余额
                    </div>

                </div>
            </div>


        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>极简图标卡片</legend>
    <div class="layui-field-box">
        <div class="ul-card-simple-icon" data-repeat="3">
            <div class="ul-card-simple-icon-image" style="background-image: url('/static/images/view.jpg');">

            </div>
            <div class="ul-card-simple-icon-title">
                图标
            </div>
        </div>
    </div>
</fieldset>