ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-09 13:42:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化图书列表组件

Browse Source
This commit is contained in:
augushong
2023-01-18 10:11:19 +08:00
parent 568b2bed52
commit faff30a596
7 changed files with 114 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
demo/pc/list.html
View File

@@ -339,40 +339,3 @@
</div> </div>
</div> </div>
</fieldset> </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>

2
source/components/_index.scss
View File

@@ -1,3 +1,5 @@
@import './list/ul-book-item/index';
@import './list/ul-music-list/index'; @import './list/ul-music-list/index';
@import './list/ul-order-list-simple-card/index'; @import './list/ul-order-list-simple-card/index';
@import './list/ul-site-group/index'; @import './list/ul-site-group/index';
@import './list/ul-book-item/index';

5
source/components/list/ul-book-item/_index.env Normal file
View File

@@ -0,0 +1,5 @@
title=图书列表
padding=1
margin=0
gray=0
mobile=0

28
source/components/list/ul-book-item/_index.html Normal file
View File

@@ -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>

0
source/components/list/ul-book-item/_index.md Normal file
View File

79
source/components/list/ul-book-item/_index.scss Normal file
View File

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

78
source/scss/layui-ul.scss
View File

@@ -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 { .ul-nav-button-item {
display : flex; display : flex;