<template>
  <div class="mapStaticTop">
    <ul>
      <li>
        <img src="../../../assets/images/top1.png" alt="">
        <div>
          <p><span class="num static">{{fsiteCount.count}}</span></p>
          <p>站点总数</p>
        </div>
      </li>
      <li>
        <img src="../../../assets/images/top2.png" alt="">
        <div>
          <p><span class="num offLine">{{fsiteCount.offLineCount}}</span></p>
          <p>离线站点</p>
        </div>
      </li>
      <li>
        <img src="../../../assets/images/top3.png" alt="">
        <div>
          <p><span class="num error">{{fsiteCount.faultCount}}</span></p>
          <p>故障站点</p>
        </div>
      </li>
      <li>
        <img src="../../../assets/images/top4.png" alt="">
        <div>
          <p><span class="num alarm">{{fsiteCount.deviceCount}}</span></p>
          <p>告警站点</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["fsiteCount"],
  name: "",
  components: {},
  methods: {
 
  },
};
</script>
<style lang="scss">
.mapStaticTop {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 9;
  width:99%;
  ul {
    display: flex;
    text-align: center;

    li {
      flex: 1;
      width: 1.5rem;
      height: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      // border: 1px solid #00f4fd;
      background: rgba(8,31,47,0.50);
      img{
        width:1.2rem;
      }
      p{
          font-size:.2rem;
           text-align:left
      }
      .num{
          margin-bottom:.0625rem;
          display:inline-block;
          font-size:.35rem;
         
      }
    }
  }
}
</style>