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 {

    };
  },
  mounted() {

  },
  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>