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
2021-06-22 16:22:18 +08:00
parent a997d6651a
commit d14c155e23
2 changed files with 114 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
demo/list.html
View File

@@ -92,8 +92,26 @@
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>侧边头像列表</legend>
<div class="layui-field-box">
<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>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
@@ -232,7 +250,7 @@
<div class="ul-ad-list">
<div class="ul-ad-item" data-repeat="3">
<div class="ul-ad-left">
<div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
<div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
</div>
<div class="ul-ad-right">
<div class="ul-ad-title">福牛迎春</div>
@@ -283,4 +301,36 @@
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>课程侧边列表</legend>
<div class="layui-field-box ">
<div class="ul-bg-gray ul-padding-md" style="width: 300px;">
<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');">
</div>
</div>
<div class="ul-course-sidebar-item-info">
<div class="ul-course-sidebar-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-sidebar-item-options">
<div class="ul-course-sidebar-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-sidebar-item-option-item">
初级
</div>
<div class="ul-course-sidebar-item-option-item">
3节课
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</fieldset>

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

@@ -1155,4 +1155,66 @@
.ul-course-item-poster-container {
overflow: hidden;
}
}
.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;
align-items: center;
justify-content: flex-start;
}
.ul-course-sidebar-item:not(:last-child){
border-bottom: 1px dotted #999;
}
.ul-course-sidebar-item-poster{
height: 50px;
width: 80px;
background-size: cover;
background-position: center;
}
.ul-course-sidebar-item-option-item{
display: inline-block;
font-size: 12px;
color: #999;
}
.ul-course-sidebar-item-info{
margin-left: 8px;
}
.ul-course-sidebar-item-title{
line-height: 2;
text-overflow: ellipsis;
white-space : nowrap;
overflow : hidden;
}