组件

Avatar 头像

用户头像或 LOGO；图片、首字母或图标占位。

Image & text

AK站

<div class="pvs-cluster pvs-items-center">
  <span class="pvs-avatar">
    <img class="pvs-avatar__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%232563eb' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="用户" />
  </span>
  <span class="pvs-avatar">
    <span class="pvs-avatar__text">AK</span>
  </span>
  <span class="pvs-avatar pvs-avatar--square">
    <span class="pvs-avatar__text">站</span>
  </span>
</div>

Sizes & group

SML

ABC

<div class="pvs-cluster pvs-items-center">
  <span class="pvs-avatar pvs-avatar--sm">
    <span class="pvs-avatar__text">S</span>
  </span>
  <span class="pvs-avatar">
    <span class="pvs-avatar__text">M</span>
  </span>
  <span class="pvs-avatar pvs-avatar--lg">
    <span class="pvs-avatar__text">L</span>
  </span>
</div>
<div class="pvs-avatar-group pvs-mt-4">
  <span class="pvs-avatar">
    <span class="pvs-avatar__text">A</span>
  </span>
  <span class="pvs-avatar">
    <span class="pvs-avatar__text">B</span>
  </span>
  <span class="pvs-avatar">
    <span class="pvs-avatar__text">C</span>
  </span>
</div>

类名速查

类名	说明
`pvs-avatar`	根容器
`pvs-avatar__img / __text`	图片 / 首字母
`pvs-avatar--sm / --lg / --xl`	尺寸
`pvs-avatar--square`	方角
`pvs-avatar-group`	头像叠放组