ak-counter 计数器

用于同时展示资源图标、当前数值和补充操作。

PREVIEW / COUNTER/BASICResource counters

LINKING…

SOURCE / HTML

<div class="ak-counter-group">
  <div class="ak-counter">
    <div class="ak-counter__prefix">
      <svg class="ak-icon" aria-hidden="true" style="color: #22bbff"><use href="#icon-money-cny-box-fill"></use></svg>
    </div>
    <div class="ak-counter__content">227107</div>
  </div>
  <div class="ak-counter">
    <div class="ak-counter__prefix">
      <svg class="ak-icon" aria-hidden="true" style="color: crimson"><use href="#icon-sword-line"></use></svg>
    </div>
    <div class="ak-counter__content">5945</div>
    <div class="ak-counter__suffix">
      <svg class="ak-icon" aria-hidden="true"><use href="#icon-add-circle-fill"></use></svg>
    </div>
  </div>
  <div class="ak-counter">
    <div class="ak-counter__prefix">
      <svg class="ak-icon" aria-hidden="true" style="color: var(--ak-color-advanced)"><use href="#icon-settings-line"></use></svg>
    </div>
    <div class="ak-counter__content">59</div>
    <div class="ak-counter__suffix">
      <svg class="ak-icon" aria-hidden="true"><use href="#icon-add-circle-fill"></use></svg>
    </div>
  </div>
</div>