ak-panel 面板

ak-status 状态栏

面板组合了分割线、计数器与行动按钮组。

PREVIEW / PANEL/STATUSStatus panel

LINKING…

SOURCE / HTML

<section class="ak-panel-right">
  <div class="ak-divider" style="width: 30rem">
    <span><svg class="ak-icon" aria-hidden="true"><use href="#icon-battery-charge-line"></use></svg>2026/08/01 08:21</span>
  </div>
  <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>
  </div>
  <div class="ak-button-group--total" style="margin-top: 150px">
    <div class="left"><button class="ak-button"><span class="ak-button__label">采购中心</span></button></div>
    <div class="right">
      <div class="ak-button-group--action">
        <div class="info text-shadow">招募</div>
        <div class="button-group">
          <button class="ak-button"><span class="ak-button__label">公开招募</span></button>
          <button class="ak-button"><span class="ak-button__label">干员寻访</span></button>
        </div>
      </div>
    </div>
  </div>
</section>