ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-09 05:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化一级分类组件

Browse Source
This commit is contained in:
augushong
2024-05-14 15:33:49 +08:00
parent d4846773be
commit 91615627e4
4 changed files with 50 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1114,6 +1114,7 @@
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%;
} }
.ul-class-1 .item { .ul-class-1 .item {
padding: 8px; padding: 8px;
@@ -1145,6 +1146,19 @@
font-size: 12px; font-size: 12px;
color: #666; color: #666;
} }
.ul-class-1 .item.colord-blue {
background-color: rgb(53, 122, 250);
color: #fff;
}
.ul-class-1 .item.colord-blue .title {
color: #fff;
}
.ul-class-1 .item.colord-blue .desc {
color: #fff;
}
.ul-class-1 .item.colord-blue .footer {
color: #fff;
}
.ul-descriptions-form { .ul-descriptions-form {
width: 100%; width: 100%;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
source/components/class/ul-class-1/_index.html
View File

@@ -6,7 +6,17 @@
<div class="title">足球</div> <div class="title">足球</div>
<div class="desc">这里写两行简单地分类描述，可以多些几字</div> <div class="desc">这里写两行简单地分类描述，可以多些几字</div>
<div class="image ul-demo-img-bg"> <div class="image ul-demo-img-bg">
</div>
<div class="footer">
19w人关注
</div>
</div>
<div class="item colord-blue">
<div class="title">足球</div>
<div class="desc">这里写两行简单地分类描述，可以多些几字</div>
<div class="image ul-demo-img-bg">
</div> </div>
<div class="footer"> <div class="footer">
19w人关注 19w人关注

30
source/components/class/ul-class-1/_index.scss
View File

@@ -4,6 +4,7 @@
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%;
.item { .item {
padding: 8px; padding: 8px;
margin: 8px; margin: 8px;
@@ -26,17 +27,34 @@
overflow: hidden; overflow: hidden;
} }
.image{ .image {
width: 100%; width: 100%;
height: 100px; height: 100px;
background-color: #ddd; background-color: #ddd;
border-radius: 8px; border-radius: 8px;
margin: 6px 0; margin: 6px 0;
} }
.footer { .footer {
font-size: 12px; font-size: 12px;
color: #666; color: #666;
} }
&.colord-blue {
background-color: rgb(53, 122, 250);
color: #fff;
.title {
color: #fff;
}
.desc {
color: #fff;
}
.footer {
color: #fff;
}
}
} }
} }