新增一斤卡片分类

public/cdn/layui-ul.css

@@ -1108,6 +1108,44 @@
   margin-bottom: 6px;
 }
 
+.ul-class-1 {
+  margin: 0 -8px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.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-descriptions-form {
   width: 100%;
 }

source/components/_index.scss

@@ -7,6 +7,7 @@
 @import './card/ul-data-card/index';
 @import './card/ul-easy-image/index';
 @import './card/ul-info-card/index';
+@import './class/ul-class-1/index';
 @import './descriptions/ul-descriptions-form/index';
 @import './descriptions/ul-descriptions-info/index';
 @import './descriptions/ul-descriptions-row/index';

source/components/class/ul-class-1/_index.env

@@ -0,0 +1,6 @@
+title=一级卡片式丰富内容分类
+padding=1
+margin=0
+gray=0
+mobile=1
+inner_margin=0

source/components/class/ul-class-1/_index.html

@@ -0,0 +1,15 @@
+<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>

source/components/class/ul-class-1/_index.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+
+];

source/components/class/ul-class-1/_index.scss

@@ -0,0 +1,42 @@
+.ul-class-1 {
+  margin: 0 -8px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  .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;
+    }
+  }
+}