首页 分组面板

分组类样式可以搭配瀑布流插件:https://masonry.desandro.com/

按月分组面板
预览效果
8月
当前没有数据
7月
意向 卡片面板 2021年3月29日
入库时间: 2021年3月29日16:33:21
用户名称: 奥古斯宏
公司名称: 临沂奥宏网络科技有限公司
电话: 13012341234
相册:
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-group-list">
    <fieldset class="layui-elem-field layui-field-title ul-group-item">
        <legend>8月</legend>
        <div class="layui-field-box">
            <div class="ul-info-tips">当前没有数据</div>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title ul-group-item">
        <legend>7月</legend>
        <div class="layui-field-box">
            <div class="ul-card-list">
                <div class="layui-card ul-card" style="width:300px" data-repeat="2">
                    <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>
</div>
.ul-group-list {

}



.ul-card-list {
    display  : flex;
    flex-wrap: wrap;
}

.ul-card-list .ul-card {
    margin-right: 15px;
}

.ul-card-list .layui-card:last-child {
    margin-bottom: 15px;
}

.ul-card-list {
  display: flex;
  flex-wrap: wrap;
}
.ul-card-list .ul-card {
  margin-right: 15px;
}
.ul-card-list .layui-card:last-child {
  margin-bottom: 15px;
}

<view class="ul-group-list">
    <fieldset class="layui-elem-field layui-field-title ul-group-item">
        <legend>8月</legend>
        <view class="layui-field-box">
            <view class="ul-info-tips">当前没有数据</view>
        </view>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title ul-group-item">
        <legend>7月</legend>
        <view class="layui-field-box">
            <view class="ul-card-list">
                <view class="layui-card ul-card" style="width:300px" data-repeat="2">
                    <view 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></view>
                    <view class="layui-card-body">
                        <view class="data-item"><span class="data-title">入库时间:</span> <span class="data-value">2021年3月29日16:33:21</span></view>
                        <view class="data-item"><span class="data-title">用户名称:</span> <span class="data-value">奥古斯宏</span></view>
                        <view class="data-item"><span class="data-title">公司名称:</span> <span class="data-value">临沂奥宏网络科技有限公司</span></view>
                        <view class="data-item"><span class="data-title">电话:</span> <span class="data-value">13012341234</span></view>
                        <view 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>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </fieldset>
</view>