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

<template>
    <div id="keyPopulationPage">
      <tr>
        <td>
          <span id="partyMemberNum">
            <span class="font">党员人数</span> <br>
            <span class="number">{{important.member}}</span> 
          </span>
          <span id="treatmentObjectNum">
            <span class="font" >优抚对象</span><br>
            <span class="number" >{{important.specialCare}}</span> 
          </span>
          <span id="subsistenceAllowanceObjectNum">
            <span class="font" >低保对象</span><br>
            <span class="number" >{{important.basicAllowance}}</span> 
          </span>
          <span id="shakeoffPovertyNum">
            <span class="font" >城市脱贫解困对象</span><br>
            <span class="number" >{{0}}</span> 
          </span>
          <span id="disabledNum">
            <span class="font" >残疾人</span><br>
            <span class="number" >{{important.deformed}}</span> 
          </span>
          <span id="liveAloneNum">
            <span class="font" >独居户</span><br>
            <span class="number" >{{important.alone}}</span> 
          </span>
        </td>
       </tr>
    </div>
</template>
    <script>   
    export default {
      name: 'KeyPopulationPage',
      components:{
  
      },
      data () {
        return {
           important:{                        // -- 重点人群
            specialCare:165,            //优抚对象
            alone:455,            		//独居户
            member:927,			//党员人数
            basicAllowance:1336,	//低保对象
            deformed:1102,                 //残疾人
          }
        }
      },
      mounted(){
        let clear= setInterval(() => {
          if(this.$store.getters.getSzdata.code===10000) {
            this.important=this.$store.getters.getSzdata.data.important
            clearInterval(clear)
          }
        }, 500);
      },
      methods:{
        
      
      }
    }
    </script>
    
    
    <style scoped>
    #keyPopulationPage{
        position: absolute;
        width: 100%;
        height: 40%;
    }
    .font{
      font-size: 10px;
      color: rgb( 90,166,220);
    }
  .number{
    font-size: 30px;
  }
  #partyMemberNum{
    position: absolute;
    font-weight:bold;
    left: 15%;
    top:15%
  }
  #treatmentObjectNum{
    position: absolute;
    font-weight:bold;
    left: 45%;
    top:15%
  }
  #subsistenceAllowanceObjectNum{
    position: absolute;
    font-weight:bold;
    left: 75%;
    top:15%
  }
  #shakeoffPovertyNum{
    position: absolute;
    font-weight:bold;
    left: 15%;
    top:35%
  }
  #disabledNum{
    position: absolute;
    font-weight:bold;
    left: 45%;
    top:35%
  }
  #liveAloneNum{
    position: absolute;
    font-weight:bold;
    left: 75%;
    top:35%
  }
    </style>