@cw-devops/bk-magic-vue/lib/ui/badge.css

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

.bk-badge-wrapper{
    position:relative;
    display:inline-block;
}

.bk-badge-wrapper .bk-badge{
        position:relative;
        display:inline-block;
        min-width:18px;
        height:18px;
        line-height:16px;
        padding:0 2px;
        border:1px solid #c3cdd7;
        border-radius:18px;
        background-color:#fff;
        font-size:12px;
        text-align:center;
    }

.bk-badge-wrapper .bk-badge .bk-icon{
            position:absolute;
            left:50%;
            top:50%;
            margin-top:0;
            -webkit-transform:translate(-50%, -50%);
                    transform:translate(-50%, -50%);
            display:block;
            line-height:18px;
        }

.bk-badge-wrapper .bk-badge.pinned{
            position:absolute
        }

.bk-badge-wrapper .bk-badge.pinned.top-right{
                top:0;
                right:0;
                -webkit-transform:translate(50%, -50%) scale(1, 1);
                        transform:translate(50%, -50%) scale(1, 1)
            }

.bk-badge-wrapper .bk-badge.pinned.top-right.fade-center-enter,
                .bk-badge-wrapper .bk-badge.pinned.top-right.fade-center-leave-active{
                    opacity:0;
                    -webkit-transform:translate(50%, -50%) scale(0, 0);
                            transform:translate(50%, -50%) scale(0, 0);
                }

.bk-badge-wrapper .bk-badge.pinned.right{
                top:50%;
                right:0%;
                -webkit-transform:translate(100%, -50%) scale(1, 1);
                        transform:translate(100%, -50%) scale(1, 1)
            }

.bk-badge-wrapper .bk-badge.pinned.right.fade-center-enter,
                .bk-badge-wrapper .bk-badge.pinned.right.fade-center-leave-active{
                    opacity:0;
                    -webkit-transform:translate(50%, -50%) scale(0, 0);
                            transform:translate(50%, -50%) scale(0, 0);
                }

.bk-badge-wrapper .bk-badge.pinned.bottom-right{
                bottom:0;
                right:0;
                -webkit-transform:translate(50%, 50%) scale(1, 1);
                        transform:translate(50%, 50%) scale(1, 1)
            }

.bk-badge-wrapper .bk-badge.pinned.bottom-right.fade-center-enter,
                .bk-badge-wrapper .bk-badge.pinned.bottom-right.fade-center-leave-active{
                    opacity:0;
                    -webkit-transform:translate(50%, 50%) scale(0, 0);
                            transform:translate(50%, 50%) scale(0, 0);
                }

.bk-badge-wrapper .bk-badge.pinned.top-left{
                top:0;
                left:0;
                -webkit-transform:translate(-50%, -50%) scale(1, 1);
                        transform:translate(-50%, -50%) scale(1, 1)
            }

.bk-badge-wrapper .bk-badge.pinned.top-left.fade-center-enter,
                .bk-badge-wrapper .bk-badge.pinned.top-left.fade-center-leave-active{
                    opacity:0;
                    -webkit-transform:translate(-50%, -50%) scale(0, 0);
                            transform:translate(-50%, -50%) scale(0, 0);
                }

.bk-badge-wrapper .bk-badge.pinned.bottom-left{
                bottom:0;
                left:0;
                -webkit-transform:translate(-50%, 50%) scale(1, 1);
                        transform:translate(-50%, 50%) scale(1, 1)
            }

.bk-badge-wrapper .bk-badge.pinned.bottom-left.fade-center-enter,
                .bk-badge-wrapper .bk-badge.pinned.bottom-left.fade-center-leave-active{
                    opacity:0;
                    -webkit-transform:translate(-50%, 50%) scale(0, 0);
                            transform:translate(-50%, 50%) scale(0, 0);
                }

.bk-badge-wrapper .bk-badge.dot{
            width:8px;
            height:8px;
            min-width:8px;
        }

.bk-badge-wrapper .bk-badge.bk-danger{
            background-color:#ff5656;
            border:2px solid #fff;
            color:#fff
        }

.bk-badge-wrapper .bk-badge.bk-danger.is-icon{
                background-color:#fff;
                border-color:#fff;
                color:#ff5656;
            }

.bk-badge-wrapper .bk-badge.bk-warning{
            background-color:#ffb848;
            border:2px solid #fff;
            color:#fff
        }

.bk-badge-wrapper .bk-badge.bk-warning.is-icon{
                background-color:#fff;
                border-color:#fff;
                color:#ffb848;
            }

.bk-badge-wrapper .bk-badge.bk-success{
            background-color:#2dcb56;
            border:2px solid #fff;
            color:#fff
        }

.bk-badge-wrapper .bk-badge.bk-success.is-icon{
                background-color:#fff;
                border-color:#fff;
                color:#2dcb56;
            }

.bk-badge-wrapper .bk-badge.bk-primary{
            background-color:#3c96ff;
            border:2px solid #fff;
            color:#fff
        }

.bk-badge-wrapper .bk-badge.bk-primary.is-icon{
                background-color:#fff;
                border-color:#fff;
                color:#3c96ff;
            }

.bk-badge-wrapper .bk-badge.bk-info{
            background-color:#88c3ff;
            border:2px solid #fff;
            color:#fff
        }

.bk-badge-wrapper .bk-badge.bk-info.is-icon{
                background-color:#fff;
                border-color:#fff;
                color:#88c3ff;
            }