ak-san 理智

125

理智/130

作战

当前

全部完成

SOURCE / HTML

html

<div class="ak-san-container">
  <div class="ak-san">
    <div class="brain"><svg class="ak-icon" aria-hidden="true"><use href="#icon-Brain"></use></svg></div>
    <button class="add" aria-label="恢复理智"><svg class="ak-icon" aria-hidden="true"><use href="#icon-add-line"></use></svg></button>
    <div class="cur"><div class="value">125</div></div>
    <div class="total">理智/130</div>
  </div>
  <div class="info">
    <div class="title">作战</div><div class="cur">当前</div><div class="status">全部完成</div>
    <svg class="ak-icon" aria-hidden="true"><use href="#icon-sword-line"></use></svg>
  </div>
</div>

ak-san-container--compact 提供适合普通卡片与窄屏的信息密度；ak-san-container--terminal 则用于主终端的大字号行动入口，并可以直接组合 ak-command--operation。

终端版本按“行动水印 + 内容层”的结构组织，内容层再分成理智横幅与作战信息两个区域。横幅使用约 27.5% 的 figure track，作战标题与状态沿用 .ak-command--operation；间距会随面板容器缩放，无需维护一套仅供 Demo 使用的样式。示例用仓库已有图标和原创生成背景替代游戏素材；完整组合可查看仿罗德岛主终端。

ak-san 理智 ​

ak-san 理智