@layui/layui-vue/es/badge/index2.css

a component library for Vue 3 base on layui-vue

.layui-badge-dot-ripple{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:inherit;animation:layui-badge-dot-anim-ripple 2s ease-in-out infinite}.layui-badge{position:relative;display:inline-block}.layui-badge .layui-badge-number,.layui-badge .layui-badge-dot{position:absolute;right:0;top:0;height:18px;background:var(--global-danger-color);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;box-shadow:0 0 0 2px #fff;transform:translate(50%,-50%);padding:0 6px}.layui-badge .layui-badge-number.is-bottom-right,.layui-badge .layui-badge-dot.is-bottom-right{transform:translate(50%,50%);bottom:0;top:auto}.layui-badge .layui-badge-number.is-bottom-left,.layui-badge .layui-badge-dot.is-bottom-left{transform:translate(-50%,50%);bottom:0;top:auto;left:0;right:auto}.layui-badge .layui-badge-number.is-top-left,.layui-badge .layui-badge-dot.is-top-left{left:0;right:auto;transform:translate(-50%,-50%)}.layui-badge .layui-badge-base{transform:none;position:relative;top:auto;right:auto}.layui-badge .layui-badge-dot{width:8px;height:8px;padding:0}