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-05-20 15:42:10 +08:00
parent 93a613a9d2
commit c55c35cfe7
11 changed files with 208 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
demo/pc/list.html
View File

@@ -109,42 +109,3 @@
</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="layui-btn layui-btn-xs ul-course-item-tag">
免费
</div>
<div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
</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>

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

@@ -1371,30 +1371,98 @@
width: 110px;
}
.ul-course-sidebar-list .ul-course-sidebar-item {
.ul-course-list {
margin: -10px;
font-size: 0;
display: flex;
flex-wrap: wrap;
}
.ul-course-item {
display: inline-block;
margin: 10px;
width: calc(25% - 20px);
background-color: #fff;
padding-bottom: 12px;
cursor: pointer;
font-size: 14px;
}
.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;
z-index: 9999;
}
.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-container:hover .ul-course-item-tag {
display: none;
}
.ul-course-item-poster-container {
overflow: hidden;
position: relative;
}
.ul-course-sidebar-item {
display: flex;
padding: 8px 0;
align-items: center;
justify-content: flex-start;
}
.ul-course-sidebar-list .ul-course-sidebar-item:not(:last-child) {
.ul-course-sidebar-item:not(:last-child) {
border-bottom: 1px dotted #999;
}
.ul-course-sidebar-list .ul-course-sidebar-item-poster {
.ul-course-sidebar-item-poster {
height: 50px;
width: 80px;
background-size: cover;
background-position: center;
}
.ul-course-sidebar-list .ul-course-sidebar-item-option-item {
.ul-course-sidebar-item-option-item {
display: inline-block;
font-size: 12px;
color: #999;
}
.ul-course-sidebar-list .ul-course-sidebar-item-info {
.ul-course-sidebar-item-info {
margin-left: 8px;
}
.ul-course-sidebar-list .ul-course-sidebar-item-title {
.ul-course-sidebar-item-title {
line-height: 2;
text-overflow: ellipsis;
white-space: nowrap;
@@ -2633,69 +2701,6 @@
background-color: #908b8b;
}
.ul-course-list {
margin: -10px;
font-size: 0;
display: flex;
flex-wrap: wrap;
}
.ul-course-item {
display: inline-block;
margin: 10px;
width: calc(25% - 20px);
background-color: #fff;
padding-bottom: 12px;
cursor: pointer;
font-size: 14px;
}
.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;
z-index: 9999;
}
.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-container:hover .ul-course-item-tag {
display: none;
}
.ul-course-item-poster-container {
overflow: hidden;
position: relative;
}
body .layui-quote-gray {
background-color: #f0f0f0;
color: #666;

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

@@ -12,6 +12,7 @@
@import './list/ul-avatar-list/index';
@import './list/ul-avatar-sidebar-list/index';
@import './list/ul-book-item/index';
@import './list/ul-course-list/index';
@import './list/ul-course-sidebar-list/index';
@import './list/ul-list-record/index';
@import './list/ul-music-list/index';

6
source/components/list/ul-course-list/_index.env Normal file
View File

@@ -0,0 +1,6 @@
title=课程列表
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

30
source/components/list/ul-course-list/_index.html Normal file
View File

@@ -0,0 +1,30 @@
<div class="ul-course-list">
<a class="ul-course-item" data-repeat="10">
<div class="ul-course-item-poster-container">
<div class="layui-btn layui-btn-xs ul-course-item-tag">
免费
</div>
<div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
</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>

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

5
source/components/list/ul-course-list/_index.php Normal file
View File

@@ -0,0 +1,5 @@
<?php
return [
];

62
source/components/list/ul-course-list/_index.scss Normal file
View File

@@ -0,0 +1,62 @@
.ul-course-list {
margin: -10px;
font-size: 0;
display: flex;
flex-wrap: wrap;
}
.ul-course-item {
display: inline-block;
margin: 10px;
width: calc(25% - 20px);
background-color: #fff;
padding-bottom: 12px;
cursor: pointer;
font-size: 14px;
}
.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;
z-index: 9999;
}
.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-container:hover .ul-course-item-tag {
display: none;
}
.ul-course-item-poster-container {
overflow: hidden;
position: relative;
}

60
source/components/list/ul-course-sidebar-list/_index.scss
View File

@@ -1,39 +1,37 @@
.ul-course-sidebar-list {
.ul-course-sidebar-list {}
.ul-course-sidebar-item {
display: flex;
padding: 8px 0;
align-items: center;
justify-content: flex-start;
}
.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: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-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-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;
}
.ul-course-sidebar-item-info {
margin-left: 8px;
}
.ul-course-sidebar-item-title {
line-height: 2;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

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

@@ -777,69 +777,6 @@
}
.ul-course-list {
margin : -10px;
font-size: 0;
display : flex;
flex-wrap: wrap;
}
.ul-course-item {
display : inline-block;
margin : 10px;
width : calc(25% - 20px);
background-color: #fff;
padding-bottom : 12px;
cursor : pointer;
font-size : 14px;
}
.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;
z-index : 9999;
}
.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-container:hover .ul-course-item-tag {
display: none;
}
.ul-course-item-poster-container {
overflow: hidden;
position: relative;
}
body .layui-quote-gray {
background-color : #f0f0f0;