优化图书列表组件

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;
+}