ソースを参照

fix(badge): 修复 icon 位置偏移问题

eiinu 3 年 前
コミット
f7b80a323e

+ 2 - 2
src/packages/__VUE/badge/index.scss

@@ -10,10 +10,10 @@
   position: relative;
   display: inline-block;
   .nut-badge__icon {
+    line-height: normal;
+    transform: $badge-content-transform;
     position: absolute;
     background: $badge-background-color;
-    top: -20%;
-    right: -20%;
     padding: $badge-padding;
     text-align: center;
     border-radius: $badge-border-radius;

+ 1 - 1
src/packages/styles/variables-jdb.scss

@@ -597,7 +597,7 @@ $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
 $badge-border-radius: 14px !default;
 $badge-padding: 0 5px !default;
-$badge-content-transform: translateY(-50%) translateX(100%) !default;
+$badge-content-transform: translate(50%, -50%) !default;
 $badge-z-index: 1 !default;
 $badge-dot-width: 7px !default;
 $badge-dot-height: 7px !default;

+ 1 - 1
src/packages/styles/variables-jddkh.scss

@@ -529,7 +529,7 @@ $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
 $badge-border-radius: 8px !default;
 $badge-padding: 0 5px !default;
-$badge-content-transform: translateY(-50%) translateX(100%) !default;
+$badge-content-transform: translate(50%, -50%) !default;
 $badge-z-index: 1 !default;
 $badge-dot-width: 7px !default;
 $badge-dot-height: 7px !default;

+ 1 - 1
src/packages/styles/variables-jdt.scss

@@ -544,7 +544,7 @@ $badge-color: var(--nut-badge-color, #fff) !default;
 $badge-font-size: var(--nut-badge-font-size, $font-size-1) !default;
 $badge-border-radius: var(--nut-badge-border-radius, 14px) !default;
 $badge-padding: var(--nut-badge-padding, 0 5px) !default;
-$badge-content-transform: var(--nut-badge-content-transform, translateY(-50%) translateX(100%)) !default;
+$badge-content-transform: var(--nut-badge-content-transform, translate(50%, -50%)) !default;
 $badge-z-index: var(--nut-badge-z-index, 1) !default;
 $badge-dot-width: var(--nut-badge-dot-width, 7px) !default;
 $badge-dot-height: var(--nut-badge-dot-height, 7px) !default;