角标测试

src/assets/style/global.less

@@ -53,27 +53,21 @@
 @selectColor: #4498F0;  // #4498F0
 .diyTag{
   // transform: scale(.99,.99);
-  line-height: normal;
   border-radius: 14px;
-  font-size: 10px;
+  font-size: 20px;
   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{
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
     display: table-cell;
-    vertical-align: center;
+    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">
+  <div style="position: relative;display: inline-block;width: 0px;height: 18px;transform: scale(0.5)">
     <div class="diyTag" v-if="num !== 0" v-show="num !== 'NaN'"
-         style="height: 14px"
+         style="height: 28px"
          :style="{
          'top':type === 1 ? '-22px' : type === 2 ? '-18px' : '0',
          'left':type === 1 ? '-10px': type === 2 ? '-8px' : '0',
-         'width':num > 99 ? '24px': '14px',
+         'width':num > 99 ? '48px': '28px',
          }">
       <span class="center">{{num > 99 ? '99+' : num }}</span>
     </div>