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-12-28 21:44:17 +08:00
parent f35b39c713
commit be71c1d145
3 changed files with 96 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo/pc/list.html
View File

@@ -272,10 +272,10 @@
<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 class="layui-btn layui-btn-xs ul-course-item-tag">
免费
</div>
</div>
</div>
<div class="ul-course-item-info">

118
public/cdn/layui-ul-change.css
View File

@@ -1,11 +1,11 @@
@media screen and (max-width: 768px) {}
.layui-nav-tree .layui-nav-item a:hover {
background-color: #6699CC;
background-color: #6699CC;
}
.layui-bg-black {
background-color: #66CCFF !important;
background-color: #66CCFF !important;
}
.layui-nav-tree .layui-nav-child dd.layui-this,
@@ -13,172 +13,182 @@
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this>a,
.layui-nav-tree .layui-this>a:hover {
background-color: #6699CC;
background-color: #6699CC;
}
.layui-layout-admin .layui-logo {
color : #fff;
line-height: 45px;
color : #fff;
line-height: 45px;
}
.layui-layout-admin .layui-header {
background-color: #39BDFF;
background-color: #39BDFF;
}
.layui-nav {
background-color: #66CCFF;
background-color: #66CCFF;
}
.layui-header {
height: 45px;
height: 45px;
}
.layui-nav .layui-nav-item {
line-height: 45px;
line-height: 45px;
}
.layui-nav .layui-nav-item a {
color: #FFFFFF;
color: #FFFFFF;
}
.layui-nav .layui-nav-child a {
color: #66CCFF;
color: #66CCFF;
}
.layui-nav .layui-this::after,
.layui-nav-bar,
.layui-nav-tree .layui-nav-itemed::after {
background-color: #CCFFFF;
background-color: #CCFFFF;
}
.layui-tab-brief>.layui-tab-title .layui-this {
color: #66CCFF;
color: #66CCFF;
}
.layui-tab-brief>.layui-tab-more li.layui-this::after,
.layui-tab-brief>.layui-tab-title .layui-this::after {
border-color: #66CCFF;
border-color: #66CCFF;
}
.layui-btn {
background-color: #66CCFF;
background-color: #66CCFF;
}
.layui-btn-danger {
background-color: #FF5722;
background-color: #FF5722;
}
.layui-btn-primary {
background-color: #fff;
color : #666;
border-color : #d2d2d2;
background-color: #fff;
color : #666;
border-color : #d2d2d2;
}
.layui-btn-primary:hover {
border-color: #6cf;
border-color: #6cf;
}
.layui-btn.layui-btn-disabled {
background-color: #FBFBFB;
background-color: #FBFBFB;
}
.layui-form-radio>i:hover,
.layui-form-radioed>i {
color: #66CCFF;
color: #66CCFF;
}
.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed>i {
color: #66CCFF;
color: #66CCFF;
}
.layui-elem-quote {
border-color: #66CCFF;
border-color: #66CCFF;
}
.layui-laydate td.layui-this {
background-color: #66CCFF !important;
background-color: #66CCFF !important;
}
.layui-form-checkbox[lay-skin="primary"]:hover i {
border-color: #66CCFF;
border-color: #66CCFF;
}
.layui-form-checked[lay-skin="primary"] i {
border-color : #66CCFF !important;
background-color: #66CCFF !important;
border-color : #66CCFF !important;
background-color: #66CCFF !important;
}
.layui-form-checked span,
.layui-form-checked:hover span {
background-color: #66CCFF;
}
.layui-form-checked i,
.layui-form-checked:hover i {
color: #66CCFF;
}
.layui-form-select dl dd.layui-this {
background-color: #66CCFF;
background-color: #66CCFF;
}
.layui-form-label {
width : unset;
padding : 3px 3px;
float : unset;
text-align : left;
font-weight: 600;
font-size : 15px;
width : unset;
padding : 3px 3px;
float : unset;
text-align : left;
font-weight: 600;
font-size : 15px;
}
.layui-input-block {
margin-left: 0;
margin-left: 0;
}
.layui-form-pane .layui-form-label {
float : left;
font-weight: normal;
font-size : 14px;
float : left;
font-weight: normal;
font-size : 14px;
}
.layui-nav-tree .layui-nav-item a {
height : 35px;
line-height: 35px;
height : 35px;
line-height: 35px;
}
.layui-nav-tree {
width: 140px;
width: 140px;
}
.layui-layout-admin .layui-side {
width: 140px;
top : 45px;
width: 140px;
top : 45px;
}
.layui-layout-admin .layui-footer {
left : 140px;
height : 35px;
line-height: 35px;
left : 140px;
height : 35px;
line-height: 35px;
}
.layui-layout-admin .layui-body {
top: 45px;
top: 45px;
}
.layui-side-scroll {
width: 140px;
width: 140px;
}
.layui-body {
left: 140px;
left: 140px;
}
.layui-nav .layui-nav-child dd.layui-this a,
.layui-nav-child dd.layui-this {
background-color: #19B3FF;
background-color: #19B3FF;
}
.layui-nav-child {
padding: 0;
padding: 0;
}
.layui-nav-tree .layui-nav-bar {
background-color: #66CCFF;
background-color: #66CCFF;
}
.layui-form-label .layui-word-aux {
font-size: 12px;
font-size: 12px;
}

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

@@ -234,6 +234,7 @@
.ul-link-title {
margin-right: 15px;
white-space : nowrap;
}
.ul-link-list {
@@ -245,9 +246,10 @@
}
.ul-link-item {
padding : 0px 10px;
cursor : pointer;
margin-right: 10px;
padding : 0px 10px;
cursor : pointer;
margin-right : 10px;
margin-bottom: 5px;
}
.ul-link-item.current {
@@ -1039,15 +1041,15 @@
}
.ul-nav-card-item-title {
font-size : 14px;
color : #253647;
font-weight: 700;
font-size : 14px;
color : #253647;
font-weight : 700;
margin-bottom: 4px;
}
.ul-nav-card-item-desc {
line-height: 28px;
color : #666;
font-size : 12px;
color : #666;
font-size: 12px;
}
.ul-nav-card-item.disabled .ul-nav-card-item-icon {
@@ -1159,6 +1161,7 @@
position: absolute;
right : 8px;
top : 8px;
z-index : 9999;
}
.ul-course-item-info {
@@ -1183,12 +1186,13 @@
transform: scale(1.2)
}
.ul-course-item-poster:hover .ul-course-item-tag {
.ul-course-item-poster-container:hover .ul-course-item-tag {
display: none;
}
.ul-course-item-poster-container {
overflow: hidden;
position: relative;
}
.ul-avatar-sidebar-list-item {
@@ -1347,16 +1351,23 @@ body .layui-quote-gray {
}
.ul-book-title {
font-size : 16px;
color : #3e3a39;
margin-bottom: 6px;
font-weight : 600;
line-height : 1.5;
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;
font-size : 12px;
color : #3e3a39;
word-break: break-all;
}
.ul-book-status {
@@ -1390,6 +1401,7 @@ body .layui-quote-gray {
padding : 10px;
box-shadow : 0px 1px 3px #bbb;
background-color: #fff;
cursor : pointer;
}
.ul-nav-button-icon {