增加列表图书模式;

demo/pc/list.html

@@ -306,7 +306,7 @@
     <legend>课程侧边列表</legend>
     <div class="layui-field-box ">
         <div class="ul-bg-gray ul-padding-md" style="width: 300px;">
-      <div class="ul-course-sidebar-list" >
+            <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');">
@@ -334,3 +334,40 @@
         </div>
     </div>
 </fieldset>
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>图书列表</legend>
+    <div class="layui-field-box">
+        <div class="layui-word-aux">一般大小</div>
+        <div class="ul-padding-md">
+            <div class="ul-book-list">
+                <div class="ul-book-item" data-repeat="6">
+                    <div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">
+
+                    </div>
+                    <div class="ul-book-info">
+                        <div class="ul-book-title">三体</div>
+                        <div class="ul-book-author">刘慈欣</div>
+                        <div class="ul-book-status">阅读次数333</div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="layui-word-aux">加大</div>
+        <div class="ul-padding-md">
+            <div class="ul-book-list big">
+                <div class="ul-book-item" data-repeat="6">
+                    <div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">
+
+                    </div>
+                    <div class="ul-book-info">
+                        <div class="ul-book-title">三体</div>
+                        <div class="ul-book-author">刘慈欣</div>
+                        <div class="ul-book-status"><span>阅读</span><span>3333</span></div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</fieldset>

public/cdn/js/tree.js

@@ -99,6 +99,9 @@ function renderUlTree(options) {
         itemDom.addClass('item-id-' + item.id)
         itemDom.children('.ul-tree-item-info').find('.ul-tree-item-title').text(item.title)
 
+        if (item.current == 1) {
+            itemDom.children('.ul-tree-item-info').addClass('current')
+        }
 
         itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').children().remove()
 
@@ -206,7 +209,7 @@ function renderUlTree(options) {
             }
             newList.push(data)
         });
-    settings.list = list;
+        settings.list = newList;
     }
 
     this.itemUpdate = function (newData) {
@@ -225,7 +228,7 @@ function renderUlTree(options) {
             }
             newList.push(data)
         });
-    settings.list = list;
+        settings.list = newList;
     }
 
     this.getList = function () {

public/cdn/layui-ul.css

@@ -544,8 +544,10 @@
 
 .ul-tree-item-info {
     border-left: 3px solid transparent;
-  padding    : 8px 0;
+    padding    : 0px 0;
     position   : relative;
+    min-height : 35px;
+    line-height: 35px;
 }
 
 .ul-tree-item-info.current {
@@ -565,7 +567,7 @@
 .ul-tree-item-icon {
     position: absolute;
     left    : 5px;
-  top     : 10px;
+    top     : 0;
 }
 
 .ul-tree-item-info:hover .ul-tree-item-options-item {
@@ -585,6 +587,8 @@
 .ul-tree-item-options-item {
     margin-left: 10px;
     display    : none;
+    height     : 100%;
+    line-height: 35px;
 }
 
 .ul-note-item {
@@ -1059,11 +1063,11 @@
 .ul-card-data {
     display         : inline-block;
     border          : 1px solid #eee;
-  border-radius: 5px;
+    border-radius   : 5px;
     padding         : 15px;
     margin-right    : 15px;
-  margin-bottom: 15px;
+    margin-bottom   : 15px;
-  height       : 70px;
+    /* height       : 70px; */
 }
 
 .ul-card-data-a-title {
@@ -1304,3 +1308,69 @@ body .layui-quote-gray {
     margin-left: 45px;
 
 }
+
+.ul-book-list {
+    display        : flex;
+    align-items    : flex-start;
+    justify-content: flex-start;
+    flex-wrap      : wrap;
+}
+
+.ul-book-item {
+    width          : 140px;
+    display        : flex;
+    align-items    : flex-start;
+    justify-content: space-between;
+    margin-bottom  : 15px;
+    margin-right   : 15px;
+    cursor         : pointer;
+}
+
+.ul-book-poster {
+    background-image      : url(../img/book-bg.png);
+    background-size       : cover;
+    background-position   : center;
+    width                 : 60px;
+    height                : 80px;
+    /* margin-right       : 15px; */
+}
+
+.ul-book-info {
+    position: relative;
+    height  : 80px;
+    width   : 75px;
+}
+
+.ul-book-title {
+    font-size    : 16px;
+    color        : #3e3a39;
+    margin-bottom: 6px;
+    font-weight  : 600;
+    line-height  : 1.5;
+}
+
+.ul-book-author {
+    font-size: 12px;
+    color    : #3e3a39;
+}
+
+.ul-book-status {
+    font-size: 12px;
+    color    : #99999a;
+    position : absolute;
+    bottom   : 0;
+    left     : 0;
+}
+
+.ul-book-list.big .ul-book-item {
+    width: 180px;
+}
+
+.ul-book-list.big .ul-book-poster {
+    width : 100px;
+    height: 140px;
+}
+
+.ul-book-list.big .ul-book-info {
+    height: 140px;
+}