优化一级分类组件

public/cdn/layui-ul.css

@@ -1114,6 +1114,7 @@
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
+  width: 100%;
 }
 .ul-class-1 .item {
   padding: 8px;
@@ -1145,6 +1146,19 @@
   font-size: 12px;
   color: #666;
 }
+.ul-class-1 .item.colord-blue {
+  background-color: rgb(53, 122, 250);
+  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;
+}
 
 .ul-descriptions-form {
   width: 100%;

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

@@ -7,6 +7,16 @@
         <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人关注

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

@@ -4,6 +4,7 @@
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
+  width: 100%;
   .item {
     padding: 8px;
     margin: 8px;
@@ -26,7 +27,7 @@
       overflow: hidden;
     }
 
-    .image{
+    .image {
       width: 100%;
       height: 100px;
       background-color: #ddd;
@@ -38,5 +39,22 @@
       font-size: 12px;
       color: #666;
     }
+
+    &.colord-blue {
+      background-color: rgb(53, 122, 250);
+      color: #fff;
+
+        .title {
+            color: #fff;
+        }
+
+        .desc {
+            color: #fff;
+        }
+
+        .footer {
+            color: #fff;
+        }
+    }
   }
 }