fit: 修改avatar

src/packages/avatar/demo.vue

@@ -1,26 +1,26 @@
 <template>
-  <div class="demo">
+  <div class="demo avatar-demo">
     <h2>默认用法</h2>
     <!-- <p>内置"small","normal","large"三种尺寸规格</p> -->
     <nut-cell>
-      <nut-avatar size="80"></nut-avatar>
-      <nut-avatar size="large"></nut-avatar>
-      <nut-avatar size="normal"></nut-avatar>
-      <nut-avatar size="small"></nut-avatar>
+      <nut-avatar size="80" bg-icon bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"></nut-avatar>
+      <nut-avatar size="large" bg-icon bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"></nut-avatar>
+      <nut-avatar size="normal" bg-icon bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"></nut-avatar>
+      <nut-avatar size="small" bg-icon bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"></nut-avatar>
     </nut-cell>
-    <h2>修改形状类型</h2>
+    <!-- <h2>修改形状类型</h2>
     <nut-cell>
       <nut-avatar size="large" shape="square"></nut-avatar>
       <nut-avatar size="normal" shape="square"></nut-avatar>
       <nut-avatar size="small" shape="square"></nut-avatar>
-    </nut-cell>
+    </nut-cell> -->
     <h2>修改背景色</h2>
     <nut-cell>
       <nut-avatar bg-color="#FA2C19"></nut-avatar>
     </nut-cell>
     <h2>修改背景图片</h2>
     <nut-cell>
-      <nut-avatar bg-icon bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
+      <nut-avatar bg-icon bg-image="https://img14.360buyimg.com/imagetools/jfs/t1/139441/32/16630/31987/5fc6f541E66763039/5f17cb6954f419b2.png"></nut-avatar>
     </nut-cell>
     <h2>可以修改头像的内容</h2>
     <nut-cell>
@@ -45,7 +45,19 @@ export default createDemo({
 });
 </script>
 <style lang="scss" scoped>
+#app {
+  .avatar-demo {
+    padding-left: 0;
+    padding-right: 0;
+    & > h2 {
+      padding: 0 25px;
+    }
+
+  }
+}
+
 .nut-cell {
   align-items: flex-end;
+  border-radius: 0;
 }
 </style>

src/packages/avatar/doc.md

@@ -8,10 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Price } from '@nutui/nutui';
+import { Avatar } from '@nutui/nutui';
 
 const app = createApp();
-app.use(Price);
+app.use(Avatar);
 
 ```
 

src/packages/avatar/index.scss

@@ -5,6 +5,7 @@
   display: inline-block;
   position: relative;
   margin-right: 24px;
+  flex: 0 0 auto; // 防止被压缩
   .icon {
     width: 50%;
     height: 50%;