////////列表////////
////条列表////
.list-bar{
    .item-caption{
        margin:@sys-layout-sm 0;
        font-weight: 700;
        border-left: 3px solid @color-theme;
        .item-link{
            color:@sys-color-gray;
            padding:0 @sys-layout-sm;
        }
    }
    .item-text{
        border-left: 3px solid transparent;
        &:hover{
            background:@color-highlight;
        }
    }
    .active{
        & > .item-text{
            background:@color-highlight;
        }
    }
    .item-link{
        position: relative;
        display: block;
        padding: @sys-layout-xs @sys-layout-sm;
        color:@sys-color-lightgray;
    }
}
////标签列表////
.list-tag{
    overflow:hidden;
    .tag-label{
        float:left;
        margin-right:10px;
    }
    .tag-container{
        overflow:hidden;
    }
    .tag{
        float:left;
        margin-right:3px;
    }
}

//块状标签
.list-tag-block{
    padding:15px 15px 11px;
    line-height:34px;
    .tag{
        margin-bottom:4px;
        padding:0 20px;
        color:@sys-color-gray;
    }
    .tag:hover,.active{
        color:#fff;
        background:@color-theme;
        .sys-border-radius(3px);
    }
}

//文字标签
.list-tag-text{
    padding:15px 15px 0;
    border:1px solid @color-border;
    line-height:16px;
    .tag{
        margin-bottom:10px;
        padding:0 20px;
        color:@sys-color-gray;
    }
    .tag:hover,.active{
        color:@color-theme;
    }
}

//表格分类
.list-cat-grid{
    .list-container{
        .sys-flex();
        .sys-flex-direction();
        .sys-flex-wrap(wrap);
    }
    .list-item{
        padding:15px 10px;
        width:25%;
        text-align:center;
        &:nth-child(1){
            background:@color-aaa;
        }
        &:nth-child(2){
            background:@color-aab;
        }
        &:nth-child(3){
            background:@color-aac;
        }
        &:nth-child(4){
            background:@color-aae;
        }
        &:nth-child(5){
            background:@color-aaf;
        }
        &:nth-child(6){
            background:@color-aag;
        }
        &:nth-child(7){
            background:@color-aah;
        }
        &:nth-child(8){
            background:@color-aai;
        }
    }
    .item-link{
        color:@sys-color-snow;
        font-size:@sys-font-size-sm;
    }
    .icon{
        display:block;
        margin-bottom:5px;
        font-size:22px;
        color:@sys-color-snow;
    }
}

//表格线分类
.list-cat-line{
    .list-container{
        .sys-flex();
        .sys-flex-direction();
        .sys-flex-wrap(wrap);
        border-top:1px solid @color-border;
        border-bottom:1px solid @color-border;
    }
    .list-item{
        padding:15px 10px;
        width:25%;
        text-align:center;
        border-left:1px solid @color-border;
        &:nth-child(n+5){
            border-top:1px solid @color-border;
        }
        &:nth-child(4n + 1){
            border-left:none;
        }
    }
    .item-link{
        color:@sys-color-gray;
        font-size:@sys-font-size-sm;
    }
    .icon{
        display:block;
        margin-bottom:5px;
        font-size:22px;
        color:@color-theme;
    }
}

//圆角分类
.list-cat-radius{
    padding-bottom:@sys-layout-sm;
    .list-container{
        .sys-flex();
        .sys-flex-direction();
        .sys-flex-wrap(wrap);
    }
    .list-item{
        padding:15px 10px 0;
        width:25%;
        text-align:center;
        &:nth-child(1){
            .icon{
                background:@color-aaa;
            }
        }
        &:nth-child(2){
            .icon {
                background: @color-aab;
            }
        }
        &:nth-child(3){
            .icon {
                background: @color-aac;
            }
        }
        &:nth-child(4){
            .icon {
                background: @color-aae;
            }
        }
        &:nth-child(5){
            .icon {
                background: @color-aaf;
            }
        }
        &:nth-child(6){
            .icon {
                background: @color-aag;
            }
        }
        &:nth-child(7){
            .icon {
                background: @color-aah;
            }
        }
        &:nth-child(8){
            .icon {
                background: @color-aai;
            }
        }
    }
    .item-link{
        color:@sys-color-gray;
        font-size:@sys-font-size-sm;
    }
    .icon{
        display:block;
        margin:0 auto 5px;
        width:48px;
        height:48px;
        font-size:22px;
        color:@sys-color-snow;
        .sys-border-radius(50%);
        text-align:center;
        line-height:48px;
    }
}

//圆圈分类
.list-cat-circle{
    padding-bottom:@sys-layout-sm;
    .list-container{
        .sys-flex();
        .sys-flex-direction();
        .sys-flex-wrap(wrap);
    }
    .list-item{
        padding:15px 10px 0;
        width:25%;
        text-align:center;
        &:nth-child(1){
            .icon{
                border-color:@color-aaa;
                color:@color-aaa;
            }
        }
        &:nth-child(2){
            .icon {
                border-color: @color-aab;
                color:@color-aab;
            }
        }
        &:nth-child(3){
            .icon {
                border-color: @color-aac;
                color:@color-aac;
            }
        }
        &:nth-child(4){
            .icon {
                border-color: @color-aae;
                color:@color-aae;
            }
        }
        &:nth-child(5){
            .icon {
                border-color: @color-aaf;
                color:@color-aaf;
            }
        }
        &:nth-child(6){
            .icon {
                border-color: @color-aag;
                color:@color-aag;
            }
        }
        &:nth-child(7){
            .icon {
                border-color: @color-aah;
                color:@color-aah;
            }
        }
        &:nth-child(8){
            .icon {
                border-color: @color-aai;
                color:@color-aai;
            }
        }
    }
    .item-link{
        color:@sys-color-gray;
        font-size:@sys-font-size-sm;
    }
    .icon{
        display:block;
        margin:0 auto 5px;
        width:48px;
        height:48px;
        font-size:22px;
        color:@sys-color-snow;
        .sys-border-radius(50%);
        text-align:center;
        line-height:48px;
        border:1px solid #fff;
    }
}

//商品列表
.list-good{
    @layout-pd:3px;
    .list-container{
        overflow:hidden;
        padding:@layout-pd;
        background:@sys-color-snow;
    }
    .list-item{
        float:left;
        padding:@layout-pd;
        width:50%;
        &:nth-child(2n+3){
            clear:both;
        }
    }
    .item-cell{
        overflow:hidden;
        position:relative;
        padding-bottom: 75%;
        width: 100%;
        height: 0;
        img {
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            vertical-align: top;
        }
    }
    .item-caption{
        .sys-ellipsis(26px);
        padding:4px 0 2px;
        font-size:16px;
        color:@sys-color-deepgray;
        &:hover,&:focus{
            &:extend(.text-linker all);
        }
    }
    .item-buy{
        margin:4px 0 2px;
        .sys-ellipsis(24px);
        color:@color-theme;
        font-size:16px;
    }
    .item-info{
        margin:2px 0 4px;
        .sys-text-camp(2, 20px);
        color:@sys-color-lightgray;
    }
}

////////扩展////////