feat(Badge): 优化 Badge 组件样式

jd-opensource · Aug 9, 2018 · 6305500 · 6305500
1 parent 4c20692
commit 6305500
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/src/components/badge/index.js b/src/components/badge/index.js
@@ -1,4 +1,3 @@
-
 import PropTypes from 'prop-types'
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
@@ -13,13 +12,10 @@ export default class AtBadge extends Taro.Component {
   }
 
   formatValue (value, maxValue) {
-    console.log('value', value)
     const numValue = +value
     if (loadash.isNaN(numValue)) {
-      console.log('value111', value)
       return value
     }
-    console.log('value222', value)
     return numValue > maxValue ? `${maxValue}+` : numValue
   }
 

diff --git a/src/components/badge/index.scss b/src/components/badge/index.scss
@@ -1,5 +1,10 @@
 @import '../../style/theme/default.scss';
 
+$badge-box-shadow: 0 4px 8px 0 rgba(233, 59, 61, 0.20);
+$badge-height: 28px;
+$badge-border-radius: 14px;
+$badge-dot-size: 20px;
+
 .at-badge {
   position: relative;
   display: inline-block;
@@ -10,27 +15,27 @@
     position: absolute;
     right: -6px;
     top: -6px;
-    width: 20px;
-    height: 20px;
-    border-radius: 20px;
+    width: $badge-dot-size;
+    height: $badge-dot-size;
+    border-radius: 50%;
     overflow: hidden;
-    background: #FF4949;
-    box-shadow: 0 4px 8px 0 rgba(233, 59, 61, 0.20);
+    background: $color-error;
+    box-shadow: $badge-box-shadow;
   }
 
   &__num {
     font-size: $font-size-xs;
     color: #fff;
-    height: 28px;
-    line-height: 28px;
+    height: $badge-height;
+    line-height: $badge-height;
     position: absolute;
     right: 0;
-    top: -14px;
+    top: -$badge-border-radius;
     transform: translate(50%, 0);
     padding: 0 $spacing-h-sm;
-    border-radius: 20px 20px 20px 0;
+    border-radius: $badge-border-radius $badge-border-radius $badge-border-radius 0;
     overflow: hidden;
-    background: #FF4949;
-    box-shadow: 0 4px 8px 0 rgba(233, 59, 61, 0.20);
+    background: $color-error;
+    box-shadow: $badge-box-shadow;
   }
 }
diff --git a/src/pages/view/badge/index.js b/src/pages/view/badge/index.js
@@ -28,9 +28,9 @@ export default class BadgePage extends Taro.Component {
 
         {/* S Body */}
         <View className='doc-body'>
-          {/* 常规徽标 */}
+          {/* 数字 */}
           <View className='panel'>
-            <View className='panel__title'>常规徽标</View>
+            <View className='panel__title'>数字</View>
             <View className='panel__content'>
               <View className='badge-item'>
                 <View className='subitem'>
@@ -39,7 +39,7 @@ export default class BadgePage extends Taro.Component {
                   </AtBadge>
                 </View>
                 <View className='subitem'>
-                  <AtBadge value='10' maxValue='99'>
+                  <AtBadge value='100' maxValue='99'>
                     <AtButton size='small'>按钮</AtButton>
                   </AtBadge>
                 </View>
@@ -72,12 +72,12 @@ export default class BadgePage extends Taro.Component {
             <View className='panel__content'>
               <View className='badge-item'>
                 <View className='subitem'>
-                  <AtBadge value='new'>
+                  <AtBadge value='NEW'>
                     <AtButton size='small' circle>按钮</AtButton>
                   </AtBadge>
                 </View>
                 <View className='subitem'>
-                  <AtBadge value='new'>
+                  <AtBadge value='NEW'>
                     <AtButton size='small'>按钮</AtButton>
                   </AtBadge>
                 </View>
@@ -91,12 +91,12 @@ export default class BadgePage extends Taro.Component {
             <View className='panel__content'>
               <View className='badge-item'>
                 <View className='subitem'>
-                  <AtBadge value='...'>
+                  <AtBadge value='···'>
                     <AtButton size='small' circle>按钮</AtButton>
                   </AtBadge>
                 </View>
                 <View className='subitem'>
-                  <AtBadge value='...'>
+                  <AtBadge value='···'>
                     <AtButton size='small'>按钮</AtButton>
                   </AtBadge>
                 </View>