ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 10:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

将侧边栏头像使用新的方式实现

Browse Source
This commit is contained in:
augushong
2023-04-11 15:40:40 +08:00
parent 9d5a91933e
commit d6ed22abbf
9 changed files with 73 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
demo/pc/list.html
View File

@@ -1,27 +1,3 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>侧边头像列表</legend>
<div class="layui-field-box ">
<div class="demo-js-src" style="display: block;">
<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>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>内容丰富的留言列表</legend>
<div class="layui-field-box layui-bg-gray">

49
public/cdn/layui-ul.css
View File

@@ -1036,6 +1036,29 @@
text-overflow: ellipsis;
}
.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 12px;
}
.ul-avatar-sidebar-list .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 .ul-avatar-sidebar-list-item-info {
margin-left: 10px;
}
.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item-intro {
font-size: 12px;
color: #999;
line-height: 2;
}
.ul-book-list {
display: flex;
align-items: flex-start;
@@ -2357,32 +2380,6 @@
position: relative;
}
.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;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

@@ -3,6 +3,7 @@
@import './descriptions/ul-easy-item/index';
@import './header/ul-shop-header/index';
@import './list/ul-avatar-list/index';
@import './list/ul-avatar-sidebar-list/index';
@import './list/ul-book-item/index';
@import './list/ul-list-record/index';
@import './list/ul-music-list/index';

5
source/components/list/ul-avatar-sidebar-list/_index.env Normal file
View File

@@ -0,0 +1,5 @@
title=侧边头像列表
padding=1
margin=0
gray=0
mobile=0

14
source/components/list/ul-avatar-sidebar-list/_index.html Normal file
View File

@@ -0,0 +1,14 @@
<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>

0
source/components/list/ul-avatar-sidebar-list/_index.md Normal file
View File

29
source/components/list/ul-avatar-sidebar-list/_index.scss Normal file
View File

@@ -0,0 +1,29 @@
.ul-avatar-sidebar-list {
.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;
}
}

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

@@ -918,32 +918,6 @@
position: relative;
}
.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;