From d14c155e23676ad2e329ce5ce6dfbed85be6fc8f Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Tue, 22 Jun 2021 16:22:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AF=BE=E7=A8=8B=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/list.html          | 52 ++++++++++++++++++++++++++++++++-
 public/cdn/layui-ul.css | 64 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 114 insertions(+), 2 deletions(-)

diff --git a/demo/list.html b/demo/list.html
index 57653f6..1819940 100644
--- a/demo/list.html
+++ b/demo/list.html
@@ -92,8 +92,26 @@
       </div>
     </div>
   </div>
+</fieldset>
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>侧边头像列表</legend>
+  <div class="layui-field-box">
 
+    <div class="ul-avatar-sidebar-list" style="width: 200px;">
+      <div class="ul-avatar-sidebar-list-item" data-repeat="3">
+        <div class="ul-avatar-sidebar-list-item-img"></div>
+        <div class="ul-avatar-sidebar-list-item-info">
+          <div class="ul-avatar-sidebar-list-item-title">
+            张三
+          </div>
+          <div class="ul-avatar-sidebar-list-item-intro">
+            法外狂徒不寂寞
+          </div>
+        </div>
+      </div>
 
+    </div>
+  </div>
 </fieldset>
 
 <fieldset class="layui-elem-field layui-field-title">
@@ -232,7 +250,7 @@
     <div class="ul-ad-list">
       <div class="ul-ad-item" data-repeat="3">
         <div class="ul-ad-left">
-          <div  class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
+          <div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
         </div>
         <div class="ul-ad-right">
           <div class="ul-ad-title">福牛迎春</div>
@@ -283,4 +301,36 @@
       </div>
     </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" style="width: 300px;">
+      <div class="ul-course-sidebar-list" >
+        <a class="ul-course-sidebar-item" data-repeat="4">
+          <div class="ul-course-sidebar-item-poster-container">
+            <div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">
+
+            </div>
+          </div>
+          <div class="ul-course-sidebar-item-info">
+            <div class="ul-course-sidebar-item-title">
+              PHP8最新特性介绍和演示
+            </div>
+            <div class="ul-course-sidebar-item-options">
+              <div class="ul-course-sidebar-item-option-item ul-color-main">
+                免费
+              </div>
+              <div class="ul-course-sidebar-item-option-item">
+                初级
+              </div>
+              <div class="ul-course-sidebar-item-option-item">
+                3节课
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
 </fieldset>
\ No newline at end of file
diff --git a/public/cdn/layui-ul.css b/public/cdn/layui-ul.css
index 2265d37..a9157d1 100644
--- a/public/cdn/layui-ul.css
+++ b/public/cdn/layui-ul.css
@@ -1155,4 +1155,66 @@
 
 .ul-course-item-poster-container {
   overflow: hidden;
-}
\ No newline at end of file
+}
+
+.ul-avatar-sidebar-list-item{
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 12px;
+}
+
+.ul-avatar-sidebar-list-item-img{
+  width: 58px;
+  height: 58px;
+  border-radius: 58px;
+  background-image: url("/static/images/avatar.png");
+  background-size: cover;
+  background-position: center;
+
+}
+
+.ul-avatar-sidebar-list-item-info{
+  margin-left: 10px;
+}
+
+.ul-avatar-sidebar-list-item-intro{
+  font-size: 12px;
+  color: #999;
+  line-height: 2;
+}
+
+.ul-course-sidebar-item{
+  display: flex;
+  padding: 8px 0;
+  align-items: center;
+  justify-content: flex-start;
+}
+.ul-course-sidebar-item:not(:last-child){
+  border-bottom: 1px dotted #999;
+}
+
+.ul-course-sidebar-item-poster{
+  height: 50px;
+  width: 80px;
+  background-size: cover;
+  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;
+}