分类-layui-ul

<div class="ul-group-title-simple">全部分类 </div>
<div class="ul-class-1">
    <div class="item" data-repeat="3">
        <div class="title">足球</div>
        <div class="desc">这里写两行简单地分类描述，可以多些几字</div>
        <div class="image ul-demo-img-bg"></div>
        <div class="footer">19w人关注 </div>
    </div>
    <div class="item colord-blue">
        <div class="title">足球</div>
        <div class="desc">这里写两行简单地分类描述，可以多些几字</div>
        <div class="image ul-demo-img-bg"></div>
        <div class="footer">19w人关注 </div>
    </div>
</div>

.ul-class-1 {
  margin: 0 -8px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  .item {
    padding: 8px;
    margin: 8px;
    background-color: #f0f0f0;
    width: calc(50% - 32px);
    border-radius: 8px;

    .title {
      font-size: 16px;
    }

    .desc {
      font-size: 12px;
      color: #333;
      white-space: break-spaces;
      // 最多2行
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .image {
      width: 100%;
      height: 100px;
      background-color: #ddd;
      border-radius: 8px;
      margin: 6px 0;
    }

    .footer {
      font-size: 12px;
      color: #666;
    }

    &.colord-blue {
      background-color: rgb(53, 122, 250);
      color: #fff;

        .title {
            color: #fff;
        }

        .desc {
            color: #fff;
        }

        .footer {
            color: #fff;
        }
    }
  }
}

.ul-class-1 {
  margin: 0 -8px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.ul-class-1 .item {
  padding: 8px;
  margin: 8px;
  background-color: #f0f0f0;
  width: calc(50% - 32px);
  border-radius: 8px;
}
.ul-class-1 .item .title {
  font-size: 16px;
}
.ul-class-1 .item .desc {
  font-size: 12px;
  color: #333;
  white-space: break-spaces;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ul-class-1 .item .image {
  width: 100%;
  height: 100px;
  background-color: #ddd;
  border-radius: 8px;
  margin: 6px 0;
}
.ul-class-1 .item .footer {
  font-size: 12px;
  color: #666;
}
.ul-class-1 .item.colord-blue {
  background-color: #357afa;
  color: #fff;
}
.ul-class-1 .item.colord-blue .title {
  color: #fff;
}
.ul-class-1 .item.colord-blue .desc {
  color: #fff;
}
.ul-class-1 .item.colord-blue .footer {
  color: #fff;
}

<view class="ul-group-title-simple">全部分类 </view>
<view class="ul-class-1">
    <view class="item" data-repeat="3">
        <view class="title">足球</view>
        <view class="desc">这里写两行简单地分类描述，可以多些几字</view>
        <view class="image ul-demo-img-bg"></view>
        <view class="footer">19w人关注 </view>
    </view>
    <view class="item colord-blue">
        <view class="title">足球</view>
        <view class="desc">这里写两行简单地分类描述，可以多些几字</view>
        <view class="image ul-demo-img-bg"></view>
        <view class="footer">19w人关注 </view>
    </view>
</view>

开源信息