ak-ui

# ak-button-group 按钮组

# 寻访

没有合成玉图标，所以随便找个图标代替了。

示例（彩色）

x600
x6000 

<template>
  <div class="ak-button-group">
    <div class="ak-button--with-info">
      <div class="ak-button__info">
        <svg class="ak-icon" aria-hidden="true">
          <use xlink:href="#icon-sword-line"></use>
        </svg>
        x600
      </div>
      <button class="ak-button ak-button--light">寻访一次</button>
    </div>
    <div class="ak-button--with-info">
      <div class="ak-button__info">
        <svg class="ak-icon" aria-hidden="true">
          <use xlink:href="#icon-sword-line"></use></svg
        >x6000
      </div>
      <button class="ak-button ak-button--advanced">寻访十次</button>
    </div>
  </div>
</template>

# 招募

  • --button-group-bgcolor：按钮组背景色

示例（彩色）

招募
公开招募
干员寻访 

<template>
  <div class="ak-button-group--total">
    <div class="left">
      <button class="ak-button">
        <svg class="ak-icon" aria-hidden="true">
          <use xlink:href="#icon-shopping-cart-2-line"></use>
        </svg>
        <div class="ak-button__label">
          采购中心
        </div>
      </button>
    </div>
    <div class="right">
      <div class="ak-button-group--action">
        <div class="info text-shadow">
          <svg class="ak-icon" aria-hidden="true">
            <use xlink:href="#icon-profile-line"></use>
          </svg>
          招募
        </div>
        <div class="button-group">
          <div class="ak-button">
            <svg class="ak-icon" aria-hidden="true">
              <use xlink:href="#icon-rook"></use>
            </svg>
            <div class="ak-button__label">
              公开招募
            </div>
          </div>
          <div class="ak-button">
            <svg class="ak-icon" aria-hidden="true">
              <use xlink:href="#icon-search-line"></use>
            </svg>
            <div class="ak-button__label">
              干员寻访
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

# 基建

示例（彩色）

基建
BETA
仓库

<template>
  <div class="ak-button-group with-small">
    <div class="ak-button ak-button--card">
      <svg class="ak-icon" aria-hidden="true">
        <use xlink:href="#icon-qr-code-line"></use>
      </svg>
      <div class="label">基建</div>
      <div class="subtitle">BETA</div>
    </div>
    <div class="small">
      <div class="label">仓库</div>
      <svg class="ak-icon" aria-hidden="true">
        <use xlink:href="#icon-database-line"></use>
      </svg>
    </div>
  </div>
</template>

← ak-card 卡片 →