yu.css.ui/dist/component/badge.css

纯CSS通用UI模块和组件

.yu-badge{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;position:relative;display:inline-block;margin-right:14px;font-size:0}.yu-badge .transition{transform:scale(0);opacity:0;transition:transform .3s ease,opacity .3s ease}.yu-badge .transition.transition-enter{transform:scale(1);opacity:1}.yu-badge .transition.transition-leave{transform:scale(0);opacity:0}.yu-badge>.badge{position:absolute;right:-10px;top:-10px;z-index:1;height:20px;line-height:20px;border-radius:10px;min-width:20px;padding:0 6px;box-sizing:border-box;text-align:center;background-color:#f56c6c;display:inline-block;color:#fff;font-size:12px}.yu-badge>.badge.hide{display:none}.yu-badge>.badge.primary{background-color:#409eff}.yu-badge>.badge.success{background-color:#67c23a}.yu-badge>.badge.warning{background-color:#fecf20}.yu-badge>.badge.info{background-color:#909399}.yu-badge>.badge.danger,.yu-badge>.dot{background-color:#f56c6c}.yu-badge>.dot{position:absolute;right:-4px;top:-4px;z-index:1;width:8px;height:8px;border-radius:4px}.yu-badge>.dot.hide{display:none}.yu-badge>.dot.primary{background-color:#409eff}.yu-badge>.dot.success{background-color:#67c23a}.yu-badge>.dot.warning{background-color:#fecf20}.yu-badge>.dot.info{background-color:#909399}.yu-badge>.dot.danger{background-color:#f56c6c}