<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>
