<template>
  <div class="info-box">
    <div class="box-title">
      <div class="dot"></div>
      <span>办公区域扶梯A</span>
    </div>
    <div class="box-inner">
      <!-- 是否开启 -->
      <div class="item">
        <div class="item-box">
          <div class="icon">
            <div class="icon-item">
              <img src="../image/liftState/lift-normal.svg" alt="" />
            </div>
          </div>
        </div>
        <div class="item-text">开启</div>
      </div>
      <!-- 是否故障 -->
      <div class="item">
        <div class="item-box">
          <div class="icon">
            <div class="icon-item">
              <img src="../image/liftState/lift-normal.svg" alt="" />
            </div>
          </div>
        </div>
        <div class="item-text">开启</div>
      </div>
      <!-- 如何运行 -->
      <div class="item">
        <div class="item-box">
          <div class="icon">
            <div class="icon-item">
              <img src="../image/liftState/lift-normal.svg" alt="" />
            </div>
          </div>
        </div>
        <div class="item-text">开启</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';

  // 请求

  // 初始化 ===========================================================

  onMounted(() => {});

  // tab页部分 ========================================================

  // 运行状态
  const runState = ref('1');
  // 电梯状态
  const liftState = ref('2');
</script>
<style lang="less" scoped>
  // 面板
  .info-box {
    // 字体颜色变量
    --text: rgb(20, 255, 255);

    width: 240px;
    height: 130px;
    display: flex;
    gap: 5px;
    flex-direction: column;
    background: rgb(17, 44, 86, 0.9);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 8px;
    border: 3px solid var(--text);
    // 面板标题
    .box-title {
      height: auto;
      color: var(--text);
      // 标题前小方块
      .dot {
        display: inline-block;
        width: 2px;
        height: 16px;
        vertical-align: middle;
        background: var(--text);
      }
      // 标题
      span {
        padding-left: 8px;
      }
    }
    // 下半部分
    .box-inner {
      flex: 1;
      display: flex;
      padding: 0 10px;
      // 单个盒子（3盒子）
      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        // 盒子中放置图片的容器
        .item-box {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          // border: 1px solid red;
          .icon {
            width: 55px;
            height: 55px;
            background-image: url(../image/box.svg);
            background-size: 130% 130%;
            background-repeat: no-repeat;
            background-position: left -8px top -8px;
            // border: 1px solid red;
            position: relative;
            .icon-item {
              position: absolute;
              width: 20px;
              height: 20px;
              left: 0;
              right: 0;
              bottom: 0;
              top: 0;
              margin: auto;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        .item-text {
          height: 20px;
          text-align: center;
          font-size: 12px;
          color: white;
          user-select: none;
        }
      }
    }
  }
</style>
