jiangxiSZ/shuzhixiangzheng/src/components/MainPageChild/ViewPage.vue

<template>
  <div id="shunagzhongView">
    <tr>
      <td><img class="sign_png" src="../../assets/png/registered.png" /></td>
      <td>
        <span id="peopleNum">
          <span class="font">在籍人数</span> <br />
          <span class="number">{{ szdata ? szdata.peoples : 0 }}</span>
        </span>
        <span id="houseNum">
          <span class="font">户数</span><br />
          <span class="number">{{ szdata ? szdata.households : 0 }}</span>
        </span>
      </td>
    </tr>
    <tr>
      <td><img class="sign_png1" src="../../assets/png/village.png" /></td>
      <td>
        <span id="villageNum">
          <span class="font">小区数量</span> <br />
          <span class="number">{{ szdata ? szdata.villages : 0 }}</span>
        </span>
        <span id="buildNum">
          <span class="font">建筑数量</span><br />
          <span class="number">{{ szdata ? szdata.buildings : 0 }}</span>
        </span>
      </td>
    </tr>
    <tr>
      <td><img class="sign_png2" src="../../assets/png/property.png" /></td>
      <td>
        <span id="hasPropertyNum">
          <span class="font">有物业小区</span> <br />
          <span class="number">{{
            szdata ? szdata.villagesWithCompany : 0
          }}</span>
        </span>
        <span id="nohasPropertyNum">
          <span class="font">无物业小区</span><br />
          <span class="number">{{
            szdata ? szdata.villagesWithoutCompany : 0
          }}</span>
        </span>
      </td>
    </tr>
  </div>
</template>
    
    <script>
export default {
  name: "View",
  // props: ['szdata'],
  components: {},
  data() {
    return {
      szdata: {
        // -- 概况
        peoples: 0, //在籍人数
        villages: 42, //小区数量
        villagesWithCompany: 33, //由物业小区
        buildings: 8049, //建筑数量
        households: 23653, //户数
        villagesWithoutCompany: 8, //无物业小区
      },
    };
  },
  mounted() {
    let clear = setInterval(() => {
      console.log(1111);
      if (
        this.$store.getters.getSzdata.code === 10000 &&
        this.$store.getters.getSzdata.data.index
      ) {
        this.szdata = this.$store.getters.getSzdata.data.index;
        console.log("this.szdata", this.szdata);
        clearInterval(clear);
      }
    }, 500);
  },
  methods: {},
};
</script>
    
    
 <style scoped>
#shunagzhongView {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #ffffff;
}
.sign_png {
  position: absolute;
  width: 80px;
  left: 10%;
  top: 5%;
}

.sign_png1 {
  position: absolute;
  width: 80px;
  left: 10%;
  top: 12%;
}
.sign_png2 {
  position: absolute;
  width: 80px;
  left: 10%;
  top: 20%;
}
#peopleNum {
  position: absolute;
  font-weight: bold;
  left: 35%;
  top: 7%;
}
#houseNum {
  position: absolute;
  font-weight: bold;
  left: 75%;
  top: 7%;
}
#villageNum {
  position: absolute;
  font-weight: bold;
  left: 35%;
  top: 14%;
}
#buildNum {
  position: absolute;
  font-weight: bold;
  left: 75%;
  top: 14%;
}
#hasPropertyNum {
  position: absolute;
  font-weight: bold;
  left: 35%;
  top: 21%;
}

#nohasPropertyNum {
  position: absolute;
  font-weight: bold;
  left: 75%;
  top: 21%;
}
.font {
  font-size: 10px;
}
.number {
  font-size: 30px;
}
</style>