优化一级分类组件

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

View File

@@ -6,7 +6,17 @@
<div class="title">足球</div>
<div class="desc">这里写两行简单地分类描述,可以多些几字</div>
<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 class="footer">
19w人关注

View File

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