diff --git a/src/components/badge/index.js b/src/components/badge/index.js index e42fc3fc5..98f70ce72 100644 --- 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 index 0c098f7e4..092ef94f0 100644 --- 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 index 32d5345df..56af7046d 100644 --- 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 */} - {/* 常规徽标 */} + {/* 数字 */} - 常规徽标 + 数字 @@ -39,7 +39,7 @@ export default class BadgePage extends Taro.Component { - + 按钮 @@ -72,12 +72,12 @@ export default class BadgePage extends Taro.Component { - + 按钮 - + 按钮 @@ -91,12 +91,12 @@ export default class BadgePage extends Taro.Component { - + 按钮 - + 按钮