重构课程列表组件

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;