ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-08 21:22:48 +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"> <div class="ul-course-list">
<a class="ul-course-item" data-repeat="10"> <a class="ul-course-item" data-repeat="10">
<div class="ul-course-item-poster-container"> <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="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> </div>
<div class="ul-course-item-info"> <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) {} @media screen and (max-width: 768px) {}
.layui-nav-tree .layui-nav-item a:hover { .layui-nav-tree .layui-nav-item a:hover {
background-color: #6699CC; background-color: #6699CC;
} }
.layui-bg-black { .layui-bg-black {
background-color: #66CCFF !important; background-color: #66CCFF !important;
} }
.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this,
@@ -13,172 +13,182 @@
.layui-nav-tree .layui-this, .layui-nav-tree .layui-this,
.layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a,
.layui-nav-tree .layui-this>a:hover { .layui-nav-tree .layui-this>a:hover {
background-color: #6699CC; background-color: #6699CC;
} }
.layui-layout-admin .layui-logo { .layui-layout-admin .layui-logo {
color : #fff; color : #fff;
line-height: 45px; line-height: 45px;
} }
.layui-layout-admin .layui-header { .layui-layout-admin .layui-header {
background-color: #39BDFF; background-color: #39BDFF;
} }
.layui-nav { .layui-nav {
background-color: #66CCFF; background-color: #66CCFF;
} }
.layui-header { .layui-header {
height: 45px; height: 45px;
} }
.layui-nav .layui-nav-item { .layui-nav .layui-nav-item {
line-height: 45px; line-height: 45px;
} }
.layui-nav .layui-nav-item a { .layui-nav .layui-nav-item a {
color: #FFFFFF; color: #FFFFFF;
} }
.layui-nav .layui-nav-child a { .layui-nav .layui-nav-child a {
color: #66CCFF; color: #66CCFF;
} }
.layui-nav .layui-this::after, .layui-nav .layui-this::after,
.layui-nav-bar, .layui-nav-bar,
.layui-nav-tree .layui-nav-itemed::after { .layui-nav-tree .layui-nav-itemed::after {
background-color: #CCFFFF; background-color: #CCFFFF;
} }
.layui-tab-brief>.layui-tab-title .layui-this { .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-more li.layui-this::after,
.layui-tab-brief>.layui-tab-title .layui-this::after { .layui-tab-brief>.layui-tab-title .layui-this::after {
border-color: #66CCFF; border-color: #66CCFF;
} }
.layui-btn { .layui-btn {
background-color: #66CCFF; background-color: #66CCFF;
} }
.layui-btn-danger { .layui-btn-danger {
background-color: #FF5722; background-color: #FF5722;
} }
.layui-btn-primary { .layui-btn-primary {
background-color: #fff; background-color: #fff;
color : #666; color : #666;
border-color : #d2d2d2; border-color : #d2d2d2;
} }
.layui-btn-primary:hover { .layui-btn-primary:hover {
border-color: #6cf; border-color: #6cf;
} }
.layui-btn.layui-btn-disabled { .layui-btn.layui-btn-disabled {
background-color: #FBFBFB; background-color: #FBFBFB;
} }
.layui-form-radio>i:hover, .layui-form-radio>i:hover,
.layui-form-radioed>i { .layui-form-radioed>i {
color: #66CCFF; color: #66CCFF;
} }
.layui-form-radio:hover *, .layui-form-radio:hover *,
.layui-form-radioed, .layui-form-radioed,
.layui-form-radioed>i { .layui-form-radioed>i {
color: #66CCFF; color: #66CCFF;
} }
.layui-elem-quote { .layui-elem-quote {
border-color: #66CCFF; border-color: #66CCFF;
} }
.layui-laydate td.layui-this { .layui-laydate td.layui-this {
background-color: #66CCFF !important; background-color: #66CCFF !important;
} }
.layui-form-checkbox[lay-skin="primary"]:hover i { .layui-form-checkbox[lay-skin="primary"]:hover i {
border-color: #66CCFF; border-color: #66CCFF;
} }
.layui-form-checked[lay-skin="primary"] i { .layui-form-checked[lay-skin="primary"] i {
border-color : #66CCFF !important; border-color : #66CCFF !important;
background-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 { .layui-form-select dl dd.layui-this {
background-color: #66CCFF; background-color: #66CCFF;
} }
.layui-form-label { .layui-form-label {
width : unset; width : unset;
padding : 3px 3px; padding : 3px 3px;
float : unset; float : unset;
text-align : left; text-align : left;
font-weight: 600; font-weight: 600;
font-size : 15px; font-size : 15px;
} }
.layui-input-block { .layui-input-block {
margin-left: 0; margin-left: 0;
} }
.layui-form-pane .layui-form-label { .layui-form-pane .layui-form-label {
float : left; float : left;
font-weight: normal; font-weight: normal;
font-size : 14px; font-size : 14px;
} }
.layui-nav-tree .layui-nav-item a { .layui-nav-tree .layui-nav-item a {
height : 35px; height : 35px;
line-height: 35px; line-height: 35px;
} }
.layui-nav-tree { .layui-nav-tree {
width: 140px; width: 140px;
} }
.layui-layout-admin .layui-side { .layui-layout-admin .layui-side {
width: 140px; width: 140px;
top : 45px; top : 45px;
} }
.layui-layout-admin .layui-footer { .layui-layout-admin .layui-footer {
left : 140px; left : 140px;
height : 35px; height : 35px;
line-height: 35px; line-height: 35px;
} }
.layui-layout-admin .layui-body { .layui-layout-admin .layui-body {
top: 45px; top: 45px;
} }
.layui-side-scroll { .layui-side-scroll {
width: 140px; width: 140px;
} }
.layui-body { .layui-body {
left: 140px; left: 140px;
} }
.layui-nav .layui-nav-child dd.layui-this a, .layui-nav .layui-nav-child dd.layui-this a,
.layui-nav-child dd.layui-this { .layui-nav-child dd.layui-this {
background-color: #19B3FF; background-color: #19B3FF;
} }
.layui-nav-child { .layui-nav-child {
padding: 0; padding: 0;
} }
.layui-nav-tree .layui-nav-bar { .layui-nav-tree .layui-nav-bar {
background-color: #66CCFF; background-color: #66CCFF;
} }
.layui-form-label .layui-word-aux { .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 { .ul-link-title {
margin-right: 15px; margin-right: 15px;
white-space : nowrap;
} }
.ul-link-list { .ul-link-list {
@@ -245,9 +246,10 @@
} }
.ul-link-item { .ul-link-item {
padding : 0px 10px; padding : 0px 10px;
cursor : pointer; cursor : pointer;
margin-right: 10px; margin-right : 10px;
margin-bottom: 5px;
} }
.ul-link-item.current { .ul-link-item.current {
@@ -1039,15 +1041,15 @@
} }
.ul-nav-card-item-title { .ul-nav-card-item-title {
font-size : 14px; font-size : 14px;
color : #253647; color : #253647;
font-weight: 700; font-weight : 700;
margin-bottom: 4px;
} }
.ul-nav-card-item-desc { .ul-nav-card-item-desc {
line-height: 28px; color : #666;
color : #666; font-size: 12px;
font-size : 12px;
} }
.ul-nav-card-item.disabled .ul-nav-card-item-icon { .ul-nav-card-item.disabled .ul-nav-card-item-icon {
@@ -1159,6 +1161,7 @@
position: absolute; position: absolute;
right : 8px; right : 8px;
top : 8px; top : 8px;
z-index : 9999;
} }
.ul-course-item-info { .ul-course-item-info {
@@ -1183,12 +1186,13 @@
transform: scale(1.2) 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; display: none;
} }
.ul-course-item-poster-container { .ul-course-item-poster-container {
overflow: hidden; overflow: hidden;
position: relative;
} }
.ul-avatar-sidebar-list-item { .ul-avatar-sidebar-list-item {
@@ -1347,16 +1351,23 @@ body .layui-quote-gray {
} }
.ul-book-title { .ul-book-title {
font-size : 16px; font-size : 16px;
color : #3e3a39; color : #3e3a39;
margin-bottom: 6px; margin-bottom : 6px;
font-weight : 600; font-weight : 600;
line-height : 1.5; 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 { .ul-book-author {
font-size: 12px; font-size : 12px;
color : #3e3a39; color : #3e3a39;
word-break: break-all;
} }
.ul-book-status { .ul-book-status {
@@ -1390,6 +1401,7 @@ body .layui-quote-gray {
padding : 10px; padding : 10px;
box-shadow : 0px 1px 3px #bbb; box-shadow : 0px 1px 3px #bbb;
background-color: #fff; background-color: #fff;
cursor : pointer;
} }
.ul-nav-button-icon { .ul-nav-button-icon {