diff --git a/demo/pc/list.html b/demo/pc/list.html
index fa07918..f0f18aa 100644
--- a/demo/pc/list.html
+++ b/demo/pc/list.html
@@ -339,40 +339,3 @@
         </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>
\ No newline at end of file
diff --git a/source/components/_index.scss b/source/components/_index.scss
index 0dcdeb7..386d433 100644
--- a/source/components/_index.scss
+++ b/source/components/_index.scss
@@ -1,3 +1,5 @@
+@import './list/ul-book-item/index';
 @import './list/ul-music-list/index';
 @import './list/ul-order-list-simple-card/index';
 @import './list/ul-site-group/index';
+@import './list/ul-book-item/index';
\ No newline at end of file
diff --git a/source/components/list/ul-book-item/_index.env b/source/components/list/ul-book-item/_index.env
new file mode 100644
index 0000000..f855e04
--- /dev/null
+++ b/source/components/list/ul-book-item/_index.env
@@ -0,0 +1,5 @@
+title=图书列表
+padding=1
+margin=0
+gray=0
+mobile=0
\ No newline at end of file
diff --git a/source/components/list/ul-book-item/_index.html b/source/components/list/ul-book-item/_index.html
new file mode 100644
index 0000000..7ddbd4c
--- /dev/null
+++ b/source/components/list/ul-book-item/_index.html
@@ -0,0 +1,28 @@
+<div class="layui-word-aux">一般大小</div>
+<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 class="layui-word-aux">大号</div>
+<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>
\ No newline at end of file
diff --git a/source/components/list/ul-book-item/_index.md b/source/components/list/ul-book-item/_index.md
new file mode 100644
index 0000000..e69de29
diff --git a/source/components/list/ul-book-item/_index.scss b/source/components/list/ul-book-item/_index.scss
new file mode 100644
index 0000000..0b10cdd
--- /dev/null
+++ b/source/components/list/ul-book-item/_index.scss
@@ -0,0 +1,79 @@
+
+.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;
+    border         : 1px solid transparent;
+}
+
+.ul-book-item:hover {
+    border-color: #ddd;
+}
+
+.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;
+    word-break        : break-all;
+    text-overflow     : ellipsis;
+    display           : -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow          : hidden;
+}
+
+.ul-book-author {
+    font-size : 12px;
+    color     : #3e3a39;
+    word-break: break-all;
+}
+
+.ul-book-status {
+    font-size: 12px;
+    color    : #99999a;
+    position : absolute;
+    bottom   : 0;
+    left     : 0;
+}
+
+.ul-book-list.big .ul-book-item {
+    width: 240px;
+}
+
+.ul-book-list.big .ul-book-poster {
+    width : 120px;
+    height: 160px;
+}
+
+.ul-book-list.big .ul-book-info {
+    height: 160px;
+    width : 110px;
+}
\ No newline at end of file
diff --git a/source/scss/layui-ul.scss b/source/scss/layui-ul.scss
index 43f65e1..417046b 100644
--- a/source/scss/layui-ul.scss
+++ b/source/scss/layui-ul.scss
@@ -1104,84 +1104,6 @@ body .layui-quote-gray {
 
 }
 
-.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;
-    border         : 1px solid transparent;
-}
-
-.ul-book-item:hover {
-    border-color: #ddd;
-}
-
-.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;
-    word-break        : break-all;
-    text-overflow     : ellipsis;
-    display           : -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow          : hidden;
-}
-
-.ul-book-author {
-    font-size : 12px;
-    color     : #3e3a39;
-    word-break: break-all;
-}
-
-.ul-book-status {
-    font-size: 12px;
-    color    : #99999a;
-    position : absolute;
-    bottom   : 0;
-    left     : 0;
-}
-
-.ul-book-list.big .ul-book-item {
-    width: 240px;
-}
-
-.ul-book-list.big .ul-book-poster {
-    width : 120px;
-    height: 160px;
-}
-
-.ul-book-list.big .ul-book-info {
-    height: 160px;
-    width : 110px;
-}
 
 .ul-nav-button-item {
     display         : flex;