bk-magic-vue/lib/ui/fixed-navbar.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-fixed-navbar-wrapper{
    width:52px;
    opacity:1;
    background:#ffffff;
    padding:22px 14px;
    border-radius:26px;
    z-index:999;
    -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,0.10);
            box-shadow:0px 2px 4px 0px rgba(0,0,0,0.10);
    position:fixed;
    right:10px
}

.bk-fixed-navbar-wrapper.middle{
        top:50%;
        -webkit-transform:translateY(-50%);
                transform:translateY(-50%);
    }

.bk-fixed-navbar-wrapper.bottom{
        bottom:10%;
    }

.bk-fixed-navbar-wrapper.top{
        top:10%;
    }

.bk-fixed-navbar-wrapper .fixed-navbar-item{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        color:#979ba5
    }

.bk-fixed-navbar-wrapper .fixed-navbar-item:hover{
            color:#3a84ff;
            cursor:pointer;
        }

.bk-fixed-navbar-wrapper .fixed-navbar-item:not(:last-of-type){
            margin-bottom:25px;
        }

.bk-fixed-navbar-wrapper .fixed-navbar-item .bk-icon{
            font-size:17px;
            margin-bottom:5px;
        }

.bk-fixed-navbar-wrapper .fixed-navbar-item .text{
            font-size:12px;
        }