music-score/src/page-instrument/component/the-music-list/index.module.less

.popup{
    background:initial;
}
.tabs {
    height: 100vh;
    width: 380px;
    padding: 10px 0;
    :global {
        .van-tabs{
            height: 100%;
            .van-tabs__wrap{
                display: flex;
                justify-content: flex-end;
                height: 30px;
                .van-tabs__nav--line{
                    padding-bottom: 0;
                    background-color: initial;
                    .van-tab{
                        flex: initial;
                        .van-tab__text{
                            display: none;
                        }
                        &:nth-child(1){
                            width: 100px;
                            height: 30px;
                            background: url("./imgs/qtqm.png") no-repeat;
                            background-size: 100% 100%;
                            background-position-y: 2px;
                            &.van-tab--active{
                                background: url("./imgs/qtqmAct.png") no-repeat;
                                background-size: 100% 100%;
                                background-position-y: 2px;
                            }
                        }                   
                        &:nth-child(2){
                            margin-left: 30px;
                            margin-right: 60px;
                            width: 100px;
                            height: 30px;
                            background: url("./imgs/zjlx.png") no-repeat;
                            background-size: 100% 100%;
                            background-position-y: 2px;
                            &.van-tab--active{
                                background: url("./imgs/zjlxAct.png") no-repeat;
                                background-size: 100% 100%;
                                background-position-y: 2px;
                            }
                        }
                    }
                }
                .van-tabs__line{
                    display: none;
                }
            }
            .van-tabs__content{
                height: calc(100% - 30px);
                background: url("./imgs/bg.png") no-repeat;
                background-size: 100% 100%;
                .van-tab__panel{
                    height: 100%;
                }
            }
        }
    }
    &.follow{
        :global{
            .van-tabs .van-tabs__content{
                background: url("./imgs/bg1.png") no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    &.evaluating{
        :global{
            .van-tabs .van-tabs__content{
                background: url("./imgs/bg2.png") no-repeat;
                background-size: 100% 100%;
            }
        }
    }
}

.wrap {
    height: 100%;
    padding: 18px 16px 12px 46px;
    .searchBox{
        display: flex;
        align-items: center;
        height: 34px;
        background: #F8F9FC;
        border-radius: 18px;
        padding: 0 4px 0 10px;
        border: 1px solid transparent;
        &.isFocus{
            border-color: #1CACF1;
        }
        >img{
            flex-shrink: 0;
            width: 16px;
            height: 16px;
        }
        :global{
            .van-field{
                margin: 0 6px;
                flex-grow: 1;
                padding: 0;
                line-height: initial;
                background: initial;
                &::after{
                    display: none;
                }
                .van-field__control{
                    font-weight: 400;
                    font-size: 13px;
                    color: #131415;
                    caret-color: #1cacf1;
                    &::placeholder{
                        color: #AAAAAA;
                    }
                }
            }
        }
        .searchBtn{
            flex-shrink: 0;
            width: 54px;
            height: 26px; 
            line-height: 26px;
            text-align: center;
            background: linear-gradient(to right,#5BECFF,#259CFE);
            border-radius: 18px;
            font-weight: 500;
            font-size: 13px;
            color: #FFFFFF;
            cursor: pointer;
            &:active{
                opacity: 0.8;
            }
        }
        .dropdownMenu{
            border-right: 1px solid #DADCE5;
            margin-right: 8px;
            :global{
                .van-dropdown-menu__bar{
                    height: 20px;
                    background: transparent;
                    box-shadow: initial;
                    .van-dropdown-menu__item{
                        padding: 0 8px 0 0;
                    }
                    .van-dropdown-menu__title{
                        --van-gray-4: #0CA2EA;
                        font-weight: 400;
                        font-size: 14px;
                        color: #0CA2EA;
                        padding: 0 12px 0 0;
                        &::after{
                            right: 0;
                            opacity: initial;
                        }
                    }
                }
                .van-dropdown-item.van-dropdown-item--down{
                    left: 36px;
                    width: 148px;
                    margin-top: 7px;
                    .van-dropdown-item__content{
                        margin-left: 10px;
                        padding: 0 10px;
                        width: 128px;
                        box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.12);
                        border-radius: 8px;
                        .van-cell{
                            margin-top: 6px;
                            padding: 0;
                            font-weight: 400;
                            font-size: 14px;
                            color: #323233;
                            line-height: 32px;
                            text-align: center;
                            &::after{
                                border: none;
                            }
                            &:last-child{
                                margin-bottom: 6px;
                            }
                            &.van-dropdown-item__option--active{
                                background: #EEF8FF;
                                border-radius: 4px;
                                color: #1CACF1;
                                font-weight: 500;
                            }
                            .van-cell__value{
                                display: none;
                            }
                        }
                    }
                }
            }
            &.currItem{
                :global{
                    .van-dropdown-menu__bar  .van-dropdown-menu__title{
                        color: #1CACF1;
                        --van-gray-4:#1CACF1;
                    }
                }
            }
        }
    }
    :global{
        .van-list{
            margin-top: 10px;
            height: calc(100% - 44px);
            overflow-y: auto;
            .van-loading__circular{
                color: rgba(0,0,0,0.3);
            }
            .van-loading__text{
                color: rgba(0,0,0,0.3);
            }
        }
    }
}

.item {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 6px;
    margin-bottom: 8px;
    &.itemActive {
        background: linear-gradient( 180deg, #FFFFFF 0%, #BFE1FF 100%);
        box-shadow: 0px 2px 4px 0px #499FE4;
        border: 3px solid #FFFFFF;
        .content .name{
            color: #2EAAFE;
        }
    }
    .titleImg {
        width: 51px;
        height: 51px;
        margin-right: 10px;
        border-radius: 9px !important;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
        .iconType {
            position: absolute;
            width: 28px;
            height: 14px;
            right: 0;
            top: 0;
            z-index: 9;
            border-top-right-radius: 8px !important;
            &.VIP {
                background: url('./imgs/icon-music-vip.png') no-repeat center;
                background-size: contain;
            }
        }
    }
    .content{
        .name{
            font-weight: 600;
            font-size: 16px;
            color: #333333;
        }
        .detail{
            display: flex;
            align-items: center;
            margin-top: 8px;
            .usedNum{
                display: flex;
                align-items: center;
                padding: 0 5px;
                height: 14px;
                background: #FFF8F7;
                border-radius: 4px;
                border: 0.6px solid #FFC5C5;
                font-size: 10px;
                >img{
                    width: 8px;
                    height: 11px;
                }
                >div{
                    margin-left: 3px;
                    font-weight: 400;
                    color: #FF6A6A
                }
            }
            .author {
                margin-left: 6px;
                font-weight: 400;
                font-size: 13px;
                color: rgba(0,0,0,0.5);
            }
            .playType,.singType{
                margin-left: 5px;
                width: 26px;
                height: 14px;
                background: #FFFFFF;
                border-radius: 3px;
                text-align: center;
                line-height: 14px;
                border: 0.6px solid #15B2FD;
                font-weight: 400;
                font-size: 10px;
                color: #15B2FD;
                &.singType{
                    color: #CD8613;
                    border-color: #CD8613;
                }
            }
        }
    }
}
.empty{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    >img{
        width: 182px;
    }
    >span{
        font-size: 14px;
        color: rgba(0,0,0,0.46);
        margin-top: 10px;
    }
}