<template>
  <div class="three-cell">
    <div class="cell-item">
      <img src="@/assets/images/ui/icon_3.png" alt="" />
      <div class="lable-value">
        <div class="value-item">
          <div class="value-data">{{ threeCell.houseTotal }}</div>
          <div class="value-lable">总户数</div>
        </div>
        <div class="value-item" style="margin-left: 6px">
          <div class="value-data">{{ threeCell.personTotal }}</div>
          <div class="value-lable">人口数</div>
        </div>
      </div>
    </div>
    <div class="cell-item">
      <img src="@/assets/images/ui/icon_1.png" alt="" />
      <div class="value-item">
        <div class="value-data">{{ threeCell.netTotal }}</div>
        <div class="value-lable">网格总数</div>
      </div>
    </div>
    <div class="cell-item">
      <img src="@/assets/images/ui/icon_2.png" alt="" />
      <div class="value-item">
        <div class="value-data">{{ threeCell.buildingTotal }}</div>
        <div class="value-lable">楼幢总数</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["threeCell"]),
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.three-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .cell-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      display: block;
      width: 50px;
      height: 55px;
    }
    .lable-value {
      display: flex;
      align-items: center;
      & > div {
        flex: 1;
      }
    }
    .value-item {
      div {
        text-align: center;
      }
      .value-data {
        margin: 2px 0;
        font-size: 16px;
        color: #ffffff;
        font-family: "DIN-Medium-2.otf";
        text-shadow: 0 0 10px #278873, 0 0 10px #278873, 0 0 30px #278873,
          0 0 50px #278873;
      }
      .value-lable {
        font-size: 14px;
        color: #30ecf9;
        font-family: "Alibaba-PuHuiTi-Medium.otf";
      }
    }
  }
}
</style>
