新增按钮搜索筛选,新增课程列表

demo/list.html

@@ -245,3 +245,42 @@
     </div>
   </div>
 </fieldset>
+
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>课程列表</legend>
+  <div class="layui-field-box ">
+    <div class="ul-bg-gray ul-padding-md">
+      <div class="ul-course-list">
+        <a class="ul-course-item" data-repeat="10">
+          <div class="ul-course-item-poster-container">
+            <div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
+              <div class="layui-btn layui-btn-xs ul-course-item-tag">
+                免费
+              </div>
+            </div>
+          </div>
+          <div class="ul-course-item-info">
+            <div class="ul-course-item-title">
+              PHP8最新特性介绍和演示
+            </div>
+            <div class="ul-course-item-options">
+              <div class="ul-course-item-option-item ul-color-main">
+                免费
+              </div>
+              <div class="ul-course-item-option-item">
+                初级
+              </div>
+              <div class="ul-course-item-option-item">
+                3节课
+              </div>
+              <div class="ul-course-item-option-item">
+                1人报名
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</fieldset>

demo/search.html

@@ -64,7 +64,7 @@
   </div>
 </fieldset>
 <fieldset class="layui-elem-field layui-field-title">
-  <legend>链接筛选组件</legend>
+  <legend>边框筛选组件</legend>
   <div class="layui-field-box">
     <div class="ul-link-select">
       <div class="ul-link-title">
@@ -87,3 +87,51 @@
     </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-padding-md ul-bg-white">
+        <div class="ul-link-select">
+          <div class="ul-link-title">
+            风格:
+          </div>
+          <div class="ul-link-list">
+            <div class="ul-link-item layui-btn layui-btn-xs">
+              全部
+            </div>
+            <div class="ul-link-item">
+              国产
+            </div>
+            <div class="ul-link-item">
+              欧美
+            </div>
+            <div class="ul-link-item">
+              日韩
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ul-padding-md ul-bg-gray">
+      <div class="ul-padding-md ul-bg-white">
+        <div class="ul-link-select">
+          <div class="ul-link-list">
+            <div class="ul-link-item layui-btn layui-btn-xs">
+              全部
+            </div>
+            <div class="ul-link-item">
+              国产
+            </div>
+            <div class="ul-link-item">
+              欧美
+            </div>
+            <div class="ul-link-item">
+              日韩
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>

public/cdn/layui-ul.css

@@ -57,6 +57,14 @@
   background-color: #fff;
 }
 
+.ul-bg-gray {
+  background-color: #eee;
+}
+
+.ul-color-main {
+  color: #6cf !important;
+}
+
 .ul-common-flex-list {
   display  : flex;
   flex-wrap: wrap;
@@ -219,14 +227,16 @@
   justify-content: flex-start;
 }
 
-.ul-link-title {}
+.ul-link-title {
+  margin-right: 15px;
+}
 
 .ul-link-list {
   display        : flex;
   align-items    : flex-start;
   justify-content: flex-start;
   flex-wrap      : wrap;
-  margin-left    : 15px;
+
 }
 
 .ul-link-item {
@@ -665,7 +675,7 @@
   left            : 50%;
   display         : none;
   background-color: transparent;
-  z-index: 99999;
+  z-index         : 99999;
 }
 
 .ul-header-a-nav-plus>.ul-nav-min {
@@ -751,7 +761,7 @@
 }
 
 .ul-card-a-desc {
-  margin-top: 5px;
+  margin-top : 5px;
   font-size  : 14px;
   white-space: nowrap;
 }
@@ -1089,3 +1099,60 @@
 .ul-card-data-c-title {
   font-size: 12px;
 }
+
+.ul-course-list {
+  margin: -10px;
+}
+
+.ul-course-item {
+  display         : inline-block;
+  margin          : 10px;
+  width           : calc(25% - 20px);
+  background-color: #fff;
+  padding-bottom  : 12px;
+  cursor          : pointer;
+}
+
+.ul-course-item-poster {
+  background-position: center;
+  background-size    : cover;
+  height             : 140px;
+  transition         : all 0.6s;
+  position           : relative;
+}
+
+.ul-course-item-tag {
+  position: absolute;
+  right   : 8px;
+  top     : 8px;
+}
+
+.ul-course-item-info {
+  padding: 6px;
+}
+
+.ul-course-item-title {
+  padding      : 8px 0;
+  text-overflow: ellipsis;
+  white-space  : nowrap;
+  overflow     : hidden;
+}
+
+.ul-course-item-option-item {
+  display     : inline-block;
+  margin-right: 8px;
+  font-size   : 12px;
+  color       : #999;
+}
+
+.ul-course-item-poster:hover {
+  transform: scale(1.2)
+}
+
+.ul-course-item-poster:hover .ul-course-item-tag {
+  display: none;
+}
+
+.ul-course-item-poster-container {
+  overflow: hidden;
+}