<template>
  <div class="demo-avatar-type">
    <ui-avatar icon="user">
    </ui-avatar>

    <ui-avatar text="U">
    </ui-avatar>

    <ui-avatar text="Lucyxx">
    </ui-avatar>

    <ui-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png">
    </ui-avatar>

    <ui-avatar
      :style="{
        color: '#f56a00',
        backgroundColor: '#fde3cf'
      }"
      text="U">
    </ui-avatar>

    <ui-avatar
      :style="{
        'background-color': '#87d068'
      }"
      icon="user">
    </ui-avatar>
  </div>
</template>
<script>
import { Avatar } from "amumu-ui"

export default {
  components: {
    "ui-avatar": Avatar,
  },
}
</script>
<style lang="scss">
.demo-avatar-type {
  display: flex;
  align-items: flex-end;
  .mm-avatar {
    margin: 10px;
  }
}
</style>
