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

新增按钮搜索筛选,新增课程列表

Browse Source
This commit is contained in:
augushong
2021-06-22 15:33:27 +08:00
parent e99517bc18
commit a997d6651a
3 changed files with 160 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
demo/list.html
View File

@@ -244,4 +244,43 @@
</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">
<div class="ul-course-list">
<a class="ul-course-item" data-repeat="10">
<div class="ul-course-item-poster-container">
<div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
<div class="layui-btn layui-btn-xs ul-course-item-tag">
免费
</div>
</div>
</div>
<div class="ul-course-item-info">
<div class="ul-course-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-item-options">
<div class="ul-course-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-item-option-item">
初级
</div>
<div class="ul-course-item-option-item">
3节课
</div>
<div class="ul-course-item-option-item">
1人报名
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</fieldset>

50
demo/search.html
View File

@@ -64,7 +64,7 @@
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>链接筛选组件</legend>
<legend>边框筛选组件</legend>
<div class="layui-field-box">
<div class="ul-link-select">
<div class="ul-link-title">
@@ -86,4 +86,52 @@
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>按钮筛选组件</legend>
<div class="layui-field-box">
<div class="ul-padding-md ul-bg-gray">
<div class="ul-padding-md ul-bg-white">
<div class="ul-link-select">
<div class="ul-link-title">
风格:
</div>
<div class="ul-link-list">
<div class="ul-link-item layui-btn layui-btn-xs">
全部
</div>
<div class="ul-link-item">
国产
</div>
<div class="ul-link-item">
欧美
</div>
<div class="ul-link-item">
日韩
</div>
</div>
</div>
</div>
</div>
<div class="ul-padding-md ul-bg-gray">
<div class="ul-padding-md ul-bg-white">
<div class="ul-link-select">
<div class="ul-link-list">
<div class="ul-link-item layui-btn layui-btn-xs">
全部
</div>
<div class="ul-link-item">
国产
</div>
<div class="ul-link-item">
欧美
</div>
<div class="ul-link-item">
日韩
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>

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

@@ -57,6 +57,14 @@
background-color: #fff;
}
.ul-bg-gray {
background-color: #eee;
}
.ul-color-main {
color: #6cf !important;
}
.ul-common-flex-list {
display : flex;
flex-wrap: wrap;
@@ -219,14 +227,16 @@
justify-content: flex-start;
}
.ul-link-title {}
.ul-link-title {
margin-right: 15px;
}
.ul-link-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
margin-left : 15px;
}
.ul-link-item {
@@ -665,7 +675,7 @@
left : 50%;
display : none;
background-color: transparent;
z-index: 99999;
z-index : 99999;
}
.ul-header-a-nav-plus>.ul-nav-min {
@@ -751,8 +761,8 @@
}
.ul-card-a-desc {
margin-top: 5px;
font-size : 14px;
margin-top : 5px;
font-size : 14px;
white-space: nowrap;
}
@@ -1088,4 +1098,61 @@
.ul-card-data-c-title {
font-size: 12px;
}
.ul-course-list {
margin: -10px;
}
.ul-course-item {
display : inline-block;
margin : 10px;
width : calc(25% - 20px);
background-color: #fff;
padding-bottom : 12px;
cursor : pointer;
}
.ul-course-item-poster {
background-position: center;
background-size : cover;
height : 140px;
transition : all 0.6s;
position : relative;
}
.ul-course-item-tag {
position: absolute;
right : 8px;
top : 8px;
}
.ul-course-item-info {
padding: 6px;
}
.ul-course-item-title {
padding : 8px 0;
text-overflow: ellipsis;
white-space : nowrap;
overflow : hidden;
}
.ul-course-item-option-item {
display : inline-block;
margin-right: 8px;
font-size : 12px;
color : #999;
}
.ul-course-item-poster:hover {
transform: scale(1.2)
}
.ul-course-item-poster:hover .ul-course-item-tag {
display: none;
}
.ul-course-item-poster-container {
overflow: hidden;
}