other / mew-iview

Commit acf00f5cc2c7bc8ebb7262cbae169cdfe235ef7e

Authored by 梁灏
1 parent afb6a9f4

update Avatar style

Showing 2 changed files with 37 additions and 0 deletions   Show diff stats
Inline Side-by-side
examples/routers/avatar.vue
  Show/Hide comments   View file @acf00f5
... ... @@ -2,6 +2,34 @@
2 2 <div class="demo-avatar">
3 3 <Avatar :style="{background: color}">{{ user }}</Avatar>
4 4 <Button size="small" @click="handleChange">Change</Button>
  5 + <div>
  6 + <div class="demo-avatar">
  7 + <Avatar icon="ios-person" size="large" />
  8 + <Avatar icon="ios-person" />
  9 + <Avatar icon="ios-person" size="small" />
  10 + </div>
  11 + <div class="demo-avatar">
  12 + <Avatar shape="square" icon="ios-person" size="large" />
  13 + <Avatar shape="square" icon="ios-person" />
  14 + <Avatar shape="square" icon="ios-person" size="small" />
  15 + </div>
  16 + </div>
  17 + <div class="demo-avatar">
  18 + <Avatar icon="ios-person" />
  19 + <Avatar>U</Avatar>
  20 + <Avatar>USER</Avatar>
  21 + <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
  22 + <Avatar style="color: #f56a00;background-color: #fde3cf">U</Avatar>
  23 + <Avatar style="background-color: #87d068" icon="ios-person" />
  24 + </div>
  25 + <div class="demo-avatar-badge">
  26 + <Badge :count="1">
  27 + <Avatar shape="square" icon="ios-person" />
  28 + </Badge>
  29 + <Badge dot>
  30 + <Avatar shape="square" icon="ios-person" />
  31 + </Badge>
  32 + </div>
5 33 </div>
6 34 </template>
7 35 <script>
... ...
src/styles/components/avatar.less
  Show/Hide comments   View file @acf00f5
... ... @@ -14,10 +14,19 @@
14 14 background: transparent;
15 15 }
16 16  
  17 + .ivu-icon{
  18 + position: relative;
  19 + top: -1px;
  20 + }
  21 +
17 22 .avatar-size(@avatar-size-base, @avatar-font-size-base);
18 23  
19 24 &-large {
20 25 .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
  26 + .ivu-icon{
  27 + position: relative;
  28 + top: -2px;
  29 + }
21 30 }
22 31  
23 32 &-small {
... ...