角标改为倍率缩放

src/assets/style/global.less

@@ -52,26 +52,13 @@
 
 @selectColor: #4498F0;  // #4498F0
 .diyTag{
-  // transform: scale(.99,.99);
-  border-radius: 14px;
-  font-size: 20px;
+  transform: scale(0.5);
   background-color:#E94B3F;
   color: white;
+  position: absolute;
   font-weight: initial;
   z-index: 999;
-  display: inline-table;
-  box-sizing: border-box;
-  transform-origin: 0 0;
-  // display: flex;
-  // align-items: center;
-  // justify-content: center;
-  .center{
-    display: table-cell;
-    vertical-align:middle;
-    //display: flex;
-    //align-items: center;
-    //justify-content: center
-  }
+
 }
 
 

src/components/diyTags/diyTag.vue

 <template>
-  <div style="position: relative;display: inline-block;width: 0px;height: 18px;transform: scale(0.5)">
+  <div style="position: relative;display: inline-block;width: 0px;height: 18px">
     <div class="diyTag" v-if="num !== 0" v-show="num !== 'NaN'"
-         style="height: 28px"
+         style="height: 30px;border-radius: 30px;font-size: 20px;line-height: 28px"
          :style="{
-         'top':type === 1 ? '-22px' : type === 2 ? '-18px' : '0',
-         'left':type === 1 ? '-10px': type === 2 ? '-8px' : '0',
-         'width':num > 99 ? '48px': '28px',
+         'top':type === 1 ? '-30px' : type === 2 ? '-24px' : '-14px',
+         'left':type === 1 ? '-14px': type === 2 ? '-12px' : '-12px',
+         'width':num > 99 ? '48px': '30px',
          }">
-      <span class="center">{{num > 99 ? '99+' : num }}</span>
+      <span>{{num > 99 ? '99+' : num }}</span>
     </div>
   </div>