.mtp-tabbar {
    display    : flex;
    align-items: center;
    padding    : 2px;

    .tabs {
        flex           : 1;
        display        : flex;
        list-style-type: none;
        padding        : 0;
        margin         : 0;

        &-item {
            display        : flex;
            justify-content: center;
            align-items    : center;
            cursor         : pointer;
            min-width      : 120px;
            padding        : 0 12px;
        }
    }

    &--top {
        background-color: #181e22;
        border-bottom   : 1px solid #3a87f7;
        padding-bottom  : 0;

        .tabs {
            &-item {
                height       : 32px;
                line-height  : 32px;
                font-size    : 14px;
                color        : #88a0ae;
                background   : linear-gradient(0deg, #262e35 0%, #283139 100%);
                border-radius: 5px 5px 0px 0px;
                margin-right : 3px;

                &.active {
                    color     : #fff;
                    background: linear-gradient(0deg, #26487c 0%, #29538c 100%);
                }
            }
        }
    }

    &--bottom {
        background-color: #121415;
        margin-top      : auto;

        .tabs {
            &-item {
                position    : relative;
                height      : 26px;
                line-height : 26px;
                font-size   : 14px;
                color       : #88a0ae;
                background  : url("~@/assets/images/tabbg.png");
                margin-right: 3px;

                &:not(:first-child) {
                    margin-left: -14px;
                }

                &.active {
                    z-index         : 1;
                    color           : #fff;
                    background-image: url("~@/assets/images/tabbgActive.png");
                }
            }
        }
    }
}