修改了头像组件

src/nutui.js

@@ -134,7 +134,7 @@ const packages = {
   InfiniteLoading,
   Uploader,
   TextInput,
-  Avatar: Avatar
+  Avatar
 };
 
 const components = {};

src/packages/avatar/avatar.scss

@@ -2,40 +2,61 @@
     background-size:100% 100%;
     background-repeat: no-repeat;
     background-position: center center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: inline-block;
     position: relative;
+    margin-right: 10px;
+    .icon{
+        width:50%;
+        height: 50%;
+        background-size:100% 100%;
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%,-50%);
+    }
+    .text{
+        display: inline-block;
+        width:100%;
+        text-align: center;
+        overflow: hidden;
+    }
+    .dot{
+        position: absolute;
+        min-width: 18px;
+        min-height: 18px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 2px;
+        text-align: center;
+        border-radius: 50%;
+        background:red;
+        top:-4px;
+        right: -5px;
+        color: #fff;
+        font-size: 12px;
+        transform: scale(0.8);
+        line-height: 1;
+    }
 }
-.icon{
-    width:50%;
-    height: 50%;
-    background-size:100% 100%;
-    position: absolute;
-    top:50%;
-    left:50%;
-    transform: translate(-50%,-50%);
+.avatar-large{
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+}
+.avatar-small{
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+}
+.avatar-mormal{
+    width:32px;
+    height: 32px;
+    line-height: 32px;
 }
-.text{
-    //transform: scale(0.75);
-    width:100%;
-    text-align: center;
-    overflow: hidden;
+.avatar-round{
+    border-radius: 50%
 }
-.dot{
-    position: absolute;
-    min-width: 18px;
-    min-height: 18px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 2px;
-    text-align: center;
-    border-radius: 50%;
-    background:red;
-    top:-4px;
-    right: -5px;
-    color: #fff;
-    font-size: 12px;
-    transform: scale(0.8);
+.avatar-square{
+    border-radius: 5px;
 }

src/packages/avatar/demo.vue

@@ -1,21 +1,29 @@
 <template>
       <div class="demo-list">
-      <h4>默认用法</h4>
-      <nut-cell><span slot="title"><nut-avatar></nut-avatar></span></nut-cell>
-      <h4>可以修改背景色</h4>
-      <nut-cell><span slot="title"><nut-avatar bgColor="#87d068"></nut-avatar></span></nut-cell>
-      <h4>可以修改大小</h4>
-      <nut-cell><span slot="title"><nut-avatar :size="30"></nut-avatar></span></nut-cell>
+      <h4>默认用法,有三种尺寸</h4>
+        <div class="white-bg">
+          <nut-avatar size="large"></nut-avatar>
+          <nut-avatar size="mormal"></nut-avatar>
+          <nut-avatar size="small"></nut-avatar>
+        </div>
       <h4>可以修改头像的形状类型</h4>
-      <nut-cell><span slot="title"><nut-avatar shape="square"></nut-avatar></span></nut-cell>
+      <div class="white-bg">
+        <nut-avatar size="large" shape="square"></nut-avatar>
+        <nut-avatar size="mormal" shape="square"></nut-avatar>
+        <nut-avatar size="small" shape="square"></nut-avatar>
+      </div>
+      <h4>可以修改头像的背景色</h4>
+      <div class="white-bg"><nut-avatar bgColor="#f0250f"></nut-avatar></div>
       <h4>可以修改头像的内容</h4>
-      <nut-cell><span slot="title"><nut-avatar :size="30" bgIcon="">U</nut-avatar></span></nut-cell>
-      <h4>可以增加头像右上角的徽标</h4>
-      <nut-cell><span slot="title"><nut-avatar :dot="13"></nut-avatar></span></nut-cell>
+      <div class="white-bg"><nut-avatar size="large" bgIcon="">U</nut-avatar></div>
       <h4>可以修改头像背景图片</h4>
-      <nut-cell><span slot="title"><nut-avatar bgIcon="" bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar></span></nut-cell>
+      <div class="white-bg">
+        <nut-avatar bgIcon="" bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
+      </div>
       <h4>可以修改头像icon图标</h4>
-      <nut-cell><span slot="title"><nut-avatar bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"></nut-avatar></span></nut-cell>
+      <div class="white-bg">
+        <nut-avatar bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"></nut-avatar>
+      </div>
     </div>
 </template>
 
@@ -32,7 +40,11 @@ export default {
   }
 };
 </script>
-
 <style lang="scss" scoped>
-
-</style>
+.white-bg {
+  padding: 10px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+}
+</style>