PC_FiveFollowing/src/views/home/components/mapStaticTop.vue

<template>
  <div class="mapStaticTop">
    <ul>
      <li>
        <div>
          <p><span class="num static">{{fsiteCount.count}}</span></p>
          <p>站点总数</p>
        </div>
      </li>
      <li>
        <div>
          <p><span class="num offLine">{{fsiteCount.offLineCount}}</span></p>
          <p>离线站点</p>
        </div>
      </li>
      <li>
        <div>
          <p><span class="num error">{{fsiteCount.faultCount}}</span></p>
          <p>故障站点</p>
        </div>
      </li>
      <li>
        <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;
  ul {
    display: flex;
    text-align: center;

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