新增分组面板,卡片式相册列表,空数据

This commit is contained in:
augushong
2021-03-29 17:46:53 +08:00
parent 273920bb2f
commit ae6b39a8c0
5 changed files with 370 additions and 25 deletions

View File

@@ -1,10 +1,8 @@
/* 列表开始 */
.ul-nav-tree {
}
.ul-nav-tree {}
.ul-nav-tree-group-title{
font-size: 16px;
.ul-nav-tree-group-title {
font-size : 16px;
font-weight: 600;
line-height: 2;
}
@@ -17,7 +15,7 @@
white-space: nowrap;
}
.ul-nav-tree-item.current .ul-nav-tree-item-title{
.ul-nav-tree-item.current .ul-nav-tree-item-title {
color: #6cf;
}
@@ -53,7 +51,7 @@
background-position: center;
}
.ul-border-right{
.ul-border-right {
border-right: 1px solid #bbb;
}
@@ -206,32 +204,142 @@
/* 链接导航开始 */
.ul-link-select{
display: flex;
align-items: flex-start;
.ul-link-select {
display : flex;
align-items : flex-start;
justify-content: flex-start
}
.ul-link-title{
}
.ul-link-list{
display: flex;
align-items: flex-start;
.ul-link-title {}
.ul-link-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap: wrap;
margin-left: 15px;
flex-wrap : wrap;
margin-left : 15px;
}
.ul-link-item{
padding: 0px 10px;
cursor: pointer;
.ul-link-item {
padding : 0px 10px;
cursor : pointer;
margin-right: 10px;
}
.ul-link-item.current{
.ul-link-item.current {
border-radius: 15px;
border: 1px solid #6cf;
color: #6cf;
border : 1px solid #6cf;
color : #6cf;
}
/* 链接导航结束 */
/* 链接导航结束 */
/* 相册列表开始 */
.ul-photo-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
}
.ul-photo-item {
margin : 15px;
text-align: center;
min-width : 220px;
}
.ul-photo-poster {
width : 180px;
height : 140px;
background-image : url('../static/images/avatar.png');
background-size : cover;
background-position: center;
margin : 0 auto;
}
.ul-photo-info {
margin-top : 10px;
font-size : 18px;
line-height: 1.5;
}
.ul-photo-desc {
font-size: 14px;
color : #999;
}
.ul-photo-card-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
}
.ul-photo-card-item {
width : 200px;
margin : 15px;
box-shadow: 0 5px 10px #999;
}
.ul-photo-card-poster {
width : 100%;
height: 140px;
background-size : cover;
background-position: center;
}
.ul-photo-card-info {
padding : 5px;
font-size : 18px;
line-height: 1.5;
}
.ul-photo-card-desc {
font-size: 14px;
color : #999;
}
/* 相册列表结束 */
.ul-info-tips {
padding : 15px;
background-color: rgba(255, 255, 255, 0.3);
}
.ul-card-status {
padding : 5px;
border-radius: 5px;
}
.ul-card-options {
float : right;
cursor: pointer;
}
.data-img .data-img-main {
max-width: 120px;
margin : 5px;
}
.data-img {
display: block;
}
.ul-card-list {
display : flex;
flex-wrap: wrap;
}
.ul-card-list .ul-card {
margin-right: 15px;
}
.ul-card-list .layui-card:last-child {
margin-bottom: 15px;
}