<!--图示区域-->
<template>
  <div class="descriptions-box card">
    <div style="float: left; margin-left: 60px" id="components-a-tooltip-demo-color">
      <div class="item-example-span">空闲状态:</div>
      <div class="wrapper_example">
        <div class="item-example " id="空闲-正常">
          <a-tooltip title="空闲-正常" color="pink">
            <a-button class="Free-Normal" style="font-size: 1px;"> 空闲-正常</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="空闲-禁入">
          <a-tooltip title="空闲-禁入" color="pink">
            <a-button class="Free-NoIn" style="font-size: 1px;">空闲-禁入</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="空闲-禁出">
          <a-tooltip title="空闲-禁出" color="pink">
            <a-button class="Free-NoOut" style="font-size: 1px;">空闲-禁出</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="空闲-禁出入">
          <a-tooltip title="空闲-禁出入" color="pink">
            <a-button class="Free-Freeze" style="font-size: 1px;">空闲-禁出入</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="空闲-预入">
          <a-tooltip title="空闲-预入" color="pink">
            <a-button class="DoIn" style="font-size: 1px;">空闲-预入</a-button>
          </a-tooltip>
        </div>
      </div>
    </div>
    <div style="float: left; margin-left: 60px">
      <div class="item-example-span">载货状态:</div>
      <div class="wrapper_example">
        <!--头部用于标注列的小方格-->
        <div class="item-example" id="载货-正常">
          <a-tooltip title="载货-正常" color="pink">
            <a-button class="Load-Normal" style="font-size: 1px;">载货-正常</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="载货-禁入">
          <a-tooltip title="载货-禁入" color="pink">
            <a-button class="Load-NoIn" style="font-size: 1px;">载货-禁入</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="载货-禁出">
          <a-tooltip title="载货-禁出" color="pink">
            <a-button class="Load-NoOut" style="font-size: 1px;">Load-NoOut</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="载货-禁出入">
          <a-tooltip title="载货-禁出入" color="pink">
            <a-button class="Load-Freeze" style="font-size: 1px;">载货-禁出入</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="载货-预出">
          <a-tooltip title="载货-预出" color="pink">
            <a-button class="DoOut" style="font-size: 1px;">载货-预出</a-button>
          </a-tooltip>
        </div>
      </div>
    </div>
    <div style="float: left; margin-left: 60px">
      <div class="item-example-span">无货位状态:</div>
      <div class="wrapper_example-2">
        <!--头部用于标注列的小方格-->
        <div class="item-example" id="立柱位置或货位不存在">
          <a-tooltip title="立柱位置或货位不存在" color="pink">
            <a-button class="none-loc" style="font-size: 1px;">21</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="通道路径">
          <a-tooltip title="通道或路径" color="pink">
            <a-button class="Point" style="font-size: 1px;">21</a-button>
          </a-tooltip>
        </div>
      </div>
    </div>
    <div style="float: left; margin-left: 60px">
      <div class="item-example-span">任务故障货位:</div>
      <div class="wrapper_example-2">
        <!--头部用于标注列的小方格-->
        <div class="item-example" id="故障任务标记货位，需要人为处理任务和货位状态">
          <a-tooltip title="故障任务标记货位，需要人为处理任务和货位状态" color="pink">
            <a-button class="Fault" style="font-size: 1px;">21</a-button>
          </a-tooltip>
        </div>
      </div>
    </div>
    <div style="float: left; margin-left: 60px">
      <div class="item-example-span">货位高矮:</div>
      <div class="wrapper_example-2">
        <div class="item-example" id="矮货位：白色背景">
          <a-tooltip title="矮货位：白色背景" color="pink">
            <a-button class="Free-Normal" style="font-size: 1px;">21</a-button>
          </a-tooltip>
        </div>
        <div class="item-example" id="高货位：淡蓝色背景">
          <a-tooltip title="高货位：淡蓝色背景" color="pink">
            <a-button class="Free-Normal material-border-8" style="font-size: 1px;">21</a-button>
          </a-tooltip>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
</script>

<style>
  @import ".././index.less";

  :deep(#components-a-tooltip-demo-color) .ant-btn {
    margin-right: 18px;
    margin-bottom: 18px;
  }

  /*指定节点下的按钮大小*/
  .wrapper_example .ant-btn {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 0;
    width: 10px;
    min-height: 10px;
  }

  .wrapper_example .ant-btn:hover {
    width: 10px;
    color: rgba(0, 0, 0, 0.85);
    border-color: aliceblue;
  }

  .wrapper_example-2 .ant-btn {
    width: 10px;
    min-height: 10px;
  }

  .wrapper_example-2 .ant-btn:hover {
    width: 10px;
    color: aliceblue;
    border-color: aliceblue;
  }
</style>
