```vue
<template>
  <div class="container">
    <div>
      <c-avatar style="width:30px;height:30px;" src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp" />
      <br>
      <br>
      <c-avatar style="width:60px;height:60px;" src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp" />
      <br>
      <br>
      <c-avatar style="width:90px;height:90px;" src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp" />
      <br>
      <br>
      <c-avatar style="width:120px;height:120px;" src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp" />
      <br>
      <br>
    </div>
    <div>
      <c-avatar
        :recommend-author="true"
        :level="0"
        style="width:30px;height:30px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
      <c-avatar
        :recommend-author="true"
        :level="1"
        style="width:60px;height:60px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
      <c-avatar
        :recommend-author="true"
        :level="2"
        style="width:90px;height:90px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
      <c-avatar
        :recommend-author="true"
        :level="3"
        style="width:120px;height:120px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
    </div>
    <div>
      <c-avatar
        :token-user="true"
        :level-token="0"
        style="width:30px;height:30px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
      <c-avatar
        :token-user="true"
        :level-token="1"
        style="width:60px;height:60px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
      <c-avatar
        :token-user="true"
        :level-token="2"
        style="width:90px;height:90px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
      <c-avatar
        :token-user="true"
        :level-token="3"
        style="width:120px;height:120px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
    </div>

    <div>
      <c-avatar
        :recommend-author="true"
        :token-user="true"
        :level="0"
        :level-token="0"
        style="width:30px;height:30px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
      <c-avatar
        :recommend-author="true"
        :token-user="true"
        :level="1"
        :level-token="1"
        style="width:60px;height:60px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
      <c-avatar
        :recommend-author="true"
        :token-user="true"
        :level="2"
        :level-token="2"
        style="width:90px;height:90px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
      <c-avatar
        :recommend-author="true"
        :token-user="true"
        :level="3"
        :level-token="3"
        style="width:120px;height:120px;"
        src="https://smartsignature-img.oss-cn-hongkong.aliyuncs.com/avatar/2019/11/07/740fd91594538dbe1f016bd301e7e234.jpg?x-oss-process=image/resize,h_90/format,webp"
      />
      <br>
      <br>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  display: flex;
  margin: 40px;
  & > div {
    margin: 0 20px;
  }
}
</style>
```
