重构课程列表组件

demo/pc/list.html

@@ -109,42 +109,3 @@
         </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="layui-btn layui-btn-xs ul-course-item-tag">
-                            免费
-                        </div>
-                        <div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
-                        </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>

public/cdn/layui-ul.css

@@ -1371,30 +1371,98 @@
   width: 110px;
 }
 
-.ul-course-sidebar-list .ul-course-sidebar-item {
+.ul-course-list {
+  margin: -10px;
+  font-size: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.ul-course-item {
+  display: inline-block;
+  margin: 10px;
+  width: calc(25% - 20px);
+  background-color: #fff;
+  padding-bottom: 12px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.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;
+  z-index: 9999;
+}
+
+.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-container:hover .ul-course-item-tag {
+  display: none;
+}
+
+.ul-course-item-poster-container {
+  overflow: hidden;
+  position: relative;
+}
+
+.ul-course-sidebar-item {
   display: flex;
   padding: 8px 0;
   align-items: center;
   justify-content: flex-start;
 }
-.ul-course-sidebar-list .ul-course-sidebar-item:not(:last-child) {
+
+.ul-course-sidebar-item:not(:last-child) {
   border-bottom: 1px dotted #999;
 }
-.ul-course-sidebar-list .ul-course-sidebar-item-poster {
+
+.ul-course-sidebar-item-poster {
   height: 50px;
   width: 80px;
   background-size: cover;
   background-position: center;
 }
-.ul-course-sidebar-list .ul-course-sidebar-item-option-item {
+
+.ul-course-sidebar-item-option-item {
   display: inline-block;
   font-size: 12px;
   color: #999;
 }
-.ul-course-sidebar-list .ul-course-sidebar-item-info {
+
+.ul-course-sidebar-item-info {
   margin-left: 8px;
 }
-.ul-course-sidebar-list .ul-course-sidebar-item-title {
+
+.ul-course-sidebar-item-title {
   line-height: 2;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2633,69 +2701,6 @@
   background-color: #908b8b;
 }
 
-.ul-course-list {
-  margin: -10px;
-  font-size: 0;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.ul-course-item {
-  display: inline-block;
-  margin: 10px;
-  width: calc(25% - 20px);
-  background-color: #fff;
-  padding-bottom: 12px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.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;
-  z-index: 9999;
-}
-
-.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-container:hover .ul-course-item-tag {
-  display: none;
-}
-
-.ul-course-item-poster-container {
-  overflow: hidden;
-  position: relative;
-}
-
 body .layui-quote-gray {
   background-color: #f0f0f0;
   color: #666;

source/components/_index.scss

@@ -12,6 +12,7 @@
 @import './list/ul-avatar-list/index';
 @import './list/ul-avatar-sidebar-list/index';
 @import './list/ul-book-item/index';
+@import './list/ul-course-list/index';
 @import './list/ul-course-sidebar-list/index';
 @import './list/ul-list-record/index';
 @import './list/ul-music-list/index';

source/components/list/ul-course-list/_index.env

@@ -0,0 +1,6 @@
+title=课程列表
+padding=0
+margin=0
+gray=0
+mobile=0
+inner_margin=0

source/components/list/ul-course-list/_index.html

@@ -0,0 +1,30 @@
+<div class="ul-course-list">
+    <a class="ul-course-item" data-repeat="10">
+        <div class="ul-course-item-poster-container">
+            <div class="layui-btn layui-btn-xs ul-course-item-tag">
+                免费
+            </div>
+            <div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
+            </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>

source/components/list/ul-course-list/_index.php

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

source/components/list/ul-course-list/_index.scss

@@ -0,0 +1,62 @@
+.ul-course-list {
+    margin: -10px;
+    font-size: 0;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.ul-course-item {
+    display: inline-block;
+    margin: 10px;
+    width: calc(25% - 20px);
+    background-color: #fff;
+    padding-bottom: 12px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.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;
+    z-index: 9999;
+}
+
+.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-container:hover .ul-course-item-tag {
+    display: none;
+}
+
+.ul-course-item-poster-container {
+    overflow: hidden;
+    position: relative;
+}

source/components/list/ul-course-sidebar-list/_index.scss

@@ -1,39 +1,37 @@
-.ul-course-sidebar-list {
+.ul-course-sidebar-list {}
 
-    .ul-course-sidebar-item {
+.ul-course-sidebar-item {
-        display: flex;
+    display: flex;
-        padding: 8px 0;
+    padding: 8px 0;
-        align-items: center;
+    align-items: center;
-        justify-content: flex-start;
+    justify-content: flex-start;
-    }
+}
 
-    .ul-course-sidebar-item:not(:last-child) {
+.ul-course-sidebar-item:not(:last-child) {
-        border-bottom: 1px dotted #999;
+    border-bottom: 1px dotted #999;
-    }
+}
 
-    .ul-course-sidebar-item-poster {
+.ul-course-sidebar-item-poster {
-        height: 50px;
+    height: 50px;
-        width: 80px;
+    width: 80px;
-        background-size: cover;
+    background-size: cover;
-        background-position: center;
+    background-position: center;
-
-    }
-
-    .ul-course-sidebar-item-option-item {
-        display: inline-block;
-        font-size: 12px;
-        color: #999;
-    }
-
-    .ul-course-sidebar-item-info {
-        margin-left: 8px;
-    }
-
-    .ul-course-sidebar-item-title {
-        line-height: 2;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
 
 }
+
+.ul-course-sidebar-item-option-item {
+    display: inline-block;
+    font-size: 12px;
+    color: #999;
+}
+
+.ul-course-sidebar-item-info {
+    margin-left: 8px;
+}
+
+.ul-course-sidebar-item-title {
+    line-height: 2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}

source/scss/layui-ul.scss

@@ -777,69 +777,6 @@
 }
 
 
-.ul-course-list {
-    margin   : -10px;
-    font-size: 0;
-    display  : flex;
-    flex-wrap: wrap;
-}
-
-.ul-course-item {
-    display         : inline-block;
-    margin          : 10px;
-    width           : calc(25% - 20px);
-    background-color: #fff;
-    padding-bottom  : 12px;
-    cursor          : pointer;
-    font-size       : 14px;
-}
-
-.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;
-    z-index : 9999;
-}
-
-.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-container:hover .ul-course-item-tag {
-    display: none;
-}
-
-.ul-course-item-poster-container {
-    overflow: hidden;
-    position: relative;
-}
-
 
 body .layui-quote-gray {
     background-color : #f0f0f0;