css徽章

网站一直用的 element ui . 加上之后.

可以看到,直接把我原来的布局搞乱了,
而且徽章里我的图标位置太远了, 看了调试了一下源码css 很难改,想着也不难,于是自己就动手写了个 span
加上 class 一分钟 大功告成.

<template>
  <div>
    <svg-icon icon-class="message" @click="goto"/>
    <span class="badge">15</span>
  </div>
</template>

<style>
.badge {
  background-color: red;
  color: white;
  border-radius: 10px;
  padding: 0 5px;
  font-size: 12px;
  display: inline-block;
  height: 16px;
  line-height: 16px;
  transform: translate(-5px, -12px);
}
</style>