.app-bot-nav{
    height: 50px;
    border-top: 1px solid #e1e1e1;
    background: #fff;
    position: fixed; 
    bottom: 0;
    width: 100%;
    z-index: 2;
    .app-bot-nav-item{
        padding-top: 7px;
        text-align: center;
        color: #c8c8c8;
        font-size: 12px;
        .app-bot-nav-item_icon{
            position: relative;
            >img{
                height: 20px;
            }
            >img.next-icon{
                display: none;
            }
            .app-bot-nav-item_badge{
                position: absolute;
                top: 2px;
                left: 45%;
                box-sizing: border-box;
                min-width: 16px;
                padding: 0 3px;
                color: #fff;
                font-weight: 500;
                font-size: 12px;
                font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
                line-height: 14px;
                text-align: center;
                background-color: #ee0a24;
                border: 1px solid #fff;
                border-radius: 16px;
                -webkit-transform: translate(50%, -50%);
                transform: translate(50%, -50%);
                -webkit-transform-origin: 100%;
                transform-origin: 100%;
            }
        }
        &.active{
            color: #4dcd70;
            .app-bot-nav-item_icon{
                >img.pre-icon{
                    display: none;
                }
                >img.next-icon{
                    display: inline-block;
                }
            }
        }
    }
}