<!--
  Description: 综合大屏-数据展示-九五示范区的基本信息展示
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenBaseOver">
const baseInfo = ref([
  {
    name: '管线',
    value: '4523',
    unit: '公里',
  },
  {
    name: '闸井',
    value: '23',
    unit: '座',
  },
  {
    name: '调压站',
    value: '42',
    unit: '个',
  },
  {
    name: '调压箱',
    value: '102',
    unit: '座',
  },
])
</script>

<template>
  <div class="container">
    <div v-for="item in baseInfo" :key="item.name" class="item">
      <div class="name">
        {{ item.name }}
      </div>
      <div class="content">
        <span class="value"> {{ item.value }}</span>
        <span class="unit"> {{ item.unit }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-loading-mask) {
  background-color: rgba($color: #0b0b0f, $alpha: 95%);
}

@font-face {
  font-family: MyFont;
  src: url("@/assets/Digital.ttf");
}

.container {
  font-family: MyFont !important;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .item {
    width: 48%;
    background: url("@/assets/images/dashboard/legend.png") no-repeat center center / cover;
    border: 1px solid #249eff;
    color: #fff;
    margin-top: 10px;
    background-color: rgba($color: #1e1e20, $alpha: 70%);
    padding: 10px;

    .name {
      text-align: center;
      height: 24px;
      line-height: 24px;
    }

    .content {
      .value {
        font-size: 20px;
      }

      .unit {
        padding-left: 5px;
      }

      text-align: center;
      height: 26px;
      line-height: 26px;
    }
  }
}
</style>