layui-ul/demo/pc/card.html

<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-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>

<fieldset class="layui-elem-field layui-field-title">
    <legend>消息信息操作卡片</legend>
    <div class="layui-field-box ">
        <div class="ul-padding-md ul-bg-gray">

            <div class="ul-card-message">
                <div class="header">
                    <div class="title">
                        奥宏科技·预约会议
                    </div>
                    <div class="status">
                        技术人员
                    </div>
                </div>
                <div class="body">
                    <div class="item">
                        <div class="item-title">
                            预约时间
                        </div>
                        <div class="item-value">
                            2022年4月4日14:29:12
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-title">
                            地点
                        </div>
                        <div class="item-value">
                            一楼会议室
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-title">
                            备注
                        </div>
                        <div class="item-value">
                            备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <div class="layui-btn layui-btn-sm layui-btn-primary">取消</div>
                    <div class="layui-btn layui-btn-sm layui-btn-normal">确认</div>
                </div>
            </div>
        </div>


    </div>
</fieldset>


<fieldset class="layui-elem-field layui-field-title">
    <legend>数据详情卡片-简约</legend>
    <div class="layui-field-box">
        <div class="ul-mobile-box">
            
        </div>
    </div>
</fieldset>