upd: review badge

src/packages/__VUE/avatar/demo.vue

@@ -65,4 +65,7 @@ export default createDemo({
 .demo-avatar {
   color: #fff;
 }
+.nut-avatar {
+  margin-right: 24px;
+}
 </style>

src/packages/__VUE/avatar/index.scss

@@ -4,7 +4,6 @@
   background-position: center center;
   display: inline-block;
   position: relative;
-  margin-right: 24px;
   flex: 0 0 auto; // 防止被压缩
   .icon {
     background-size: 100% 100%;

src/packages/__VUE/badge/demo.vue

@@ -1,92 +1,90 @@
 <template>
   <view class="demo">
     <h2>默认用法</h2>
-    <view class="demo-w">
-      <nut-badge :value="8" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+    <nut-row>
+      <nut-badge :value="8">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge :value="76" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge :value="76">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge value="NEW" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge value="NEW">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge dot class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge dot>
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-    </view>
+    </nut-row>
     <h2>最大值</h2>
-    <view class="demo-w">
-      <nut-badge :value="200" :max="9" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+    <nut-row>
+      <nut-badge :value="200" :max="9">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge :value="200" :max="20" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge :value="200" :max="20">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge :value="200" :max="99" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge :value="200" :max="99">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-    </view>
+    </nut-row>
 
     <h2>自定义颜色</h2>
-    <view class="demo-w">
-      <nut-badge :value="8" class="item" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge
-        :value="76"
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge
-        value="NEW"
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge dot class="item" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-      </nut-badge>
-    </view>
+    <nut-row>
+      <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+    </nut-row>
 
     <h2>自定义徽标内容</h2>
-    <view class="demo-w">
-      <nut-badge class="item">
+    <nut-row>
+      <nut-badge>
         <template #icons>
           <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
         </template>
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge class="item">
+      <nut-badge>
         <template #icons>
           <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
         </template>
-        <view class="demo-svg"></view
-      ></nut-badge>
-      <nut-badge class="item">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge>
         <template #icons>
           <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
         </template>
-        <view class="demo-svg"></view
-      ></nut-badge>
-    </view>
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+    </nut-row>
 
     <h2>自定义位置</h2>
-    <view class="demo-w">
-      <nut-badge :value="8" top="5" right="5" class="item"> <view class="demo-svg"></view></nut-badge>
-      <nut-badge :value="76" top="10" right="10" class="item"> <view class="demo-svg"></view></nut-badge>
-      <nut-badge value="NEW" class="item"> <view class="demo-svg"></view></nut-badge>
-    </view>
+    <nut-row>
+      <nut-badge :value="8" top="5" right="5">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge :value="76" top="10" right="10">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge value="NEW">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+    </nut-row>
 
     <h2>独立展示</h2>
-    <view class="demo-w">
-      <nut-badge :value="8" class="item"> </nut-badge>
-      <nut-badge :value="76" class="item"> </nut-badge>
-      <nut-badge value="NEW" class="item"> </nut-badge>
-    </view>
+    <nut-row>
+      <nut-badge :value="8"> </nut-badge>
+      <nut-badge :value="76"> </nut-badge>
+      <nut-badge value="NEW"> </nut-badge>
+    </nut-row>
   </view>
 </template>
 
@@ -100,18 +98,7 @@ export default createDemo({
 </script>
 
 <style lang="scss" scoped>
-.item {
-  margin: 10px 20px;
-}
-.demo-w {
-  margin: 20px 0;
-}
-.demo-svg {
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-  background: rgba(229, 232, 232);
-  border-radius: 3px;
-  margin-right: 0;
+.nut-badge {
+  margin-right: 40px;
 }
 </style>

src/packages/__VUE/badge/doc.md

@@ -24,121 +24,113 @@ app.use(Badge);
 ### 基本用法
 
 ```html
-  <nut-badge :value="8" class="item">
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge :value="76" class="item">
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge value="NEW" class="item">
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge dot class="item">
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
+<nut-badge :value="8">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge :value="76">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge value="NEW">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge dot>
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
 ```
 
 ### 最大值
 
 ```html
-  <nut-badge :value="200" :max="9" class="item">
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge :value="200" :max="20" class="item">
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge :value="200" :max="99" class="item">
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
+<nut-badge :value="200" :max="9">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge :value="200" :max="20">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge :value="200" :max="99">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
 ```
 
 ### 自定义颜色
 
 ```html
-  <nut-badge
-        :value="8"
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge
-        :value="76"
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge
-        value="NEW"
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge
-        dot
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
+<nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
 ```
 
 ### 自定义徽标内容
 
 ```html
-  <nut-badge class="item">
-    <template #icons>
-      <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
-    </template>
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge class="item">
-    <template #icons>
-      <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
-    </template>
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar></nut-badge>
-  <nut-badge class="item">
-    <template #icons>
-      <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
-    </template>
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
+<nut-badge>
+  <template #icons>
+    <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
+  </template>
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge>
+  <template #icons>
+    <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
+  </template>
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge>
+  <template #icons>
+    <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
+  </template>
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
 ```
 
 ### 自定义位置
 
 ```html
-  <nut-badge :value="8" top="5" right="5" class="item">
-    <div class="demo-svg"></div >
-  </nut-badge>
-  <nut-badge :value="76" top="10" right="10" class="item">
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
-  <nut-badge value="NEW" class="item">
-    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-  </nut-badge>
+<nut-badge :value="8" top="5" right="5">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge :value="76" top="10" right="10">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
+<nut-badge value="NEW">
+  <nut-avatar icon="my" shape="square"></nut-avatar>
+</nut-badge>
 ```
 
 ### 独立展示
 
 ```html
-  <nut-badge :value="8" class="item"> </nut-badge>
-  <nut-badge :value="76" class="item"> </nut-badge>
-  <nut-badge value="NEW" class="item"> </nut-badge>
+<nut-badge :value="8"> </nut-badge>
+<nut-badge :value="76"> </nut-badge>
+<nut-badge value="NEW"> </nut-badge>
 ```
 
 
 ### Prop  
 
-| 字段             | 说明                                 | 类型      | 默认值   |
-|-----------------|--------------------------------------|----------|---------|
-| value           | 显示的内容                             | String   | -       |
-| max             | value 为数值时，最大值                  | Number   | `10000` |
-| z-index         | 徽标的 z-index 值                      | Number   |  `10`   |
-| dot             | 是否为小点                             | Boolean  | `false` |
-| hidden          | 是否隐藏                               | Boolean  | `false` |  
-| top             | 上下偏移量，支持单位设置，可设置为：5px 等  | Number   | `0`     |  
-| right           | 左右偏移量，支持单位设置，可设置为：5px 等  | Number   | `0`     |                                          
-
+| 字段    | 说明                                       | 类型    | 默认值    |
+|---------|--------------------------------------------|---------|-----------|
+| value   | 显示的内容                                 | String  | -         |
+| max     | value 为数值时，最大值                     | Number  | `10000`   |
+| z-index | 徽标的 z-index 值                          | Number  | `10`      |
+| dot     | 是否为小点                                 | Boolean | `false`   |
+| hidden  | 是否隐藏                                   | Boolean | `false`   |
+| top     | 上下偏移量，支持单位设置，可设置为：5px 等 | Number  | `0`       |
+| right   | 左右偏移量，支持单位设置，可设置为：5px 等 | Number  | `0`       |
+| color   | 徽标背景颜色                               | String  | `#fa2c19` |
+
+### Slots
+
+| 名称    | 说明         |
+|---------|--------------|
+| default | 	徽标包裹的子元素 |
+| icons | 	徽标自定义 |

src/packages/__VUE/badge/index.scss

@@ -12,15 +12,14 @@
     border-radius: 14px;
     z-index: 1;
   }
-  sup {
+  .sup {
     position: absolute;
     background: $badge-background-color;
     border-radius: 7px;
     padding: 0 5px;
     text-align: center;
     border-radius: 14px;
-    font-size: 11px;
-    font-family: PingFangSC;
+    font-size: $badge-font-size;
     font-weight: normal;
     color: $badge-default-background-color;
   }

src/packages/__VUE/badge/index.taro.vue

@@ -1,15 +1,17 @@
 <template>
   <view class="nut-badge">
-    <view class="slot-icons"> <slot name="icons"></slot></view>
+    <view class="slot-icons">
+      <slot name="icons"></slot>
+    </view>
     <slot></slot>
-    <sup
+    <view
       v-show="!hidden && (content || dot)"
       v-text="content"
-      class="nut-badge__content"
+      class="nut-badge__content sup"
       :class="{ 'is-dot': dot }"
       :style="stl"
     >
-    </sup>
+    </view>
   </view>
 </template>
 
@@ -48,8 +50,7 @@ export default create({
     },
     color: {
       type: String,
-      default:
-        'linear-gradient(135deg,rgba(250, 44, 25, 1) 0%,rgba(250, 63, 25, 1) 44.59259259%,rgba(250, 89, 25, 1) 83.40740741%,rgba(250, 100, 25, 1) 100%);'
+      default: ''
     }
   },
 

src/packages/__VUE/badge/index.vue

@@ -1,15 +1,17 @@
 <template>
   <view class="nut-badge">
-    <view class="slot-icons"> <slot name="icons"></slot></view>
+    <view class="slot-icons">
+      <slot name="icons"></slot>
+    </view>
     <slot></slot>
-    <sup
+    <view
       v-show="!hidden && (content || dot)"
       v-text="content"
-      class="nut-badge__content"
+      class="nut-badge__content sup"
       :class="{ 'is-dot': dot }"
       :style="stl"
     >
-    </sup>
+    </view>
   </view>
 </template>
 
@@ -48,8 +50,7 @@ export default create({
     },
     color: {
       type: String,
-      default:
-        'linear-gradient(135deg,rgba(250, 44, 25, 1) 0%,rgba(250, 63, 25, 1) 44.59259259%,rgba(250, 89, 25, 1) 83.40740741%,rgba(250, 100, 25, 1) 100%);'
+      default: ''
     }
   },
 

src/packages/styles/variables.scss

@@ -281,14 +281,8 @@ $tag-border-width: 1px !default;
 $tag-plain-background-color: #fff !default;
 
 //badge
-$badge-background-color: linear-gradient(
-  135deg,
-  rgba(250, 44, 25, 1) 0%,
-  rgba(250, 63, 25, 1) 44.59259259%,
-  rgba(250, 89, 25, 1) 83.40740741%,
-  rgba(250, 100, 25, 1) 100%
-) !default;
-
+$badge-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$badge-font-size: $font-size-1 !default;
 $badge-default-background-color: rgba(255, 255, 255, 1) !default;
 
 //popover

src/sites/mobile-taro/vue/src/dentry/pages/badge/index.vue

@@ -1,95 +1,92 @@
 <template>
   <view class="demo">
     <h2>默认用法</h2>
-    <view class="demo-w">
-      <nut-badge :value="8" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+    <nut-row>
+      <nut-badge :value="8">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge :value="76" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge :value="76">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge value="NEW" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge value="NEW">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge dot class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge dot>
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-    </view>
+    </nut-row>
     <h2>最大值</h2>
-    <view class="demo-w">
-      <nut-badge :value="200" :max="9" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+    <nut-row>
+      <nut-badge :value="200" :max="9">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge :value="200" :max="20" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge :value="200" :max="20">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge :value="200" :max="99" class="item">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      <nut-badge :value="200" :max="99">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-    </view>
+    </nut-row>
 
     <h2>自定义颜色</h2>
-    <view class="demo-w">
-      <nut-badge :value="8" class="item" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge
-        :value="76"
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge
-        value="NEW"
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge dot class="item" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
-      </nut-badge>
-    </view>
+    <nut-row>
+      <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+    </nut-row>
 
     <h2>自定义徽标内容</h2>
-    <view class="demo-w">
-      <nut-badge class="item">
+    <nut-row>
+      <nut-badge>
         <template #icons>
           <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
         </template>
-        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+        <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge class="item">
+      <nut-badge>
         <template #icons>
           <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
         </template>
-        <view class="demo-svg"></view
-      ></nut-badge>
-      <nut-badge class="item">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge>
         <template #icons>
           <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
         </template>
-        <view class="demo-svg"></view
-      ></nut-badge>
-    </view>
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+    </nut-row>
 
     <h2>自定义位置</h2>
-    <view class="demo-w">
-      <nut-badge :value="8" top="5" right="5" class="item"> <view class="demo-svg"></view></nut-badge>
-      <nut-badge :value="76" top="10" right="10" class="item"> <view class="demo-svg"></view></nut-badge>
-      <nut-badge value="NEW" class="item"> <view class="demo-svg"></view></nut-badge>
-    </view>
+    <nut-row>
+      <nut-badge :value="8" top="5" right="5">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge :value="76" top="10" right="10">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge value="NEW">
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
+    </nut-row>
 
     <h2>独立展示</h2>
-    <view class="demo-w">
-      <nut-badge :value="8" class="item"> </nut-badge>
-      <nut-badge :value="76" class="item"> </nut-badge>
-      <nut-badge value="NEW" class="item"> </nut-badge>
-    </view>
+    <nut-row>
+      <nut-badge :value="8"> </nut-badge>
+      <nut-badge :value="76"> </nut-badge>
+      <nut-badge value="NEW"> </nut-badge>
+    </nut-row>
   </view>
 </template>
-
 <script lang="ts">
 export default {
   setup() {}
@@ -97,18 +94,7 @@ export default {
 </script>
 
 <style lang="scss">
-.item {
-  margin: 10px 20px;
-}
-.demo-w {
-  margin: 20px 0;
-}
-.demo-svg {
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-  background: rgba(229, 232, 232);
-  border-radius: 3px;
-  margin-right: 0;
+.nut-badge {
+  margin-right: 40px;
 }
 </style>