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

<template>
  <div id="personStatusPage" >
    <!-- <div id="head">
      <div class="font">流动人口</div>
      <div class="font">户数</div>
      <div class="font">人数</div>
      <div></div>
      <div></div>
      <div></div>
    </div> -->
    <div id="row" v-for="(floatPeople,name,household,people) in population">
      <td id="num1">{{floatPeople}}</td>
      <td>
        <div id="progress_container0">
        </div>
      </td>
      <td id="num2">
        {{name}}
      </td>
       <td>
         <div id="progress_both">
          <div id="progress_container1">
          </div>
          <div id="progress_container2"></div>
         </div>
      </td>
      <td id="num3">
        {{household}}/{{people}}
      </td>
    </div>
  
    
  </div>
  </template>
  
  <script>
   
  export default {
    name: 'PersonStatusPage',
    components:{

    },
    data () {
      return {
          population:[              // -- 人口情况
            {
                name:"大中社区",   //社区名称
                floatPeople:501,	//流动人口
                household:893,		//户数
                people:2200		  //人数
            },
        ],
        str:""
      }
    },
    mounted(){
      this.str=this.population[0].household+"/"+this.population[0].people;
      let clear= setInterval(() => {
          if(this.$store.getters.getSzdata.code===10000) {
            this.population=this.$store.getters.getSzdata.data.population
            console.log(this.population)
            clearInterval(clear)
          }
        }, 500);
    },
    methods:{
      
    
    }
  }
  </script>
  
  
  <style scoped>
    .font{
      position: absolute;
      font-size: 10px;
    }
    #row{
      position: absolute;
      width: 100%;
      height: 100%;
    }
       #personStatusPage{
      position: absolute;
      width: 100%;
      height: 43%;
      /* background-color: rgb(48,115,248,0.1); */
      top:36%
    }
    #num1{
      position: absolute;
      width: 5%;
      left: 15%;
      font-size: 10px;
    }
    #num2{
      position: absolute;
      left: 42%;
      width: 10%;
      font-size: 10px;
    }
    #num3{
      position: absolute;
      left: 84%;
      width: 10%;
      font-size: 10px;
    }

    #progress_both{
      left: 52%;
      top:2%;
      position: absolute;
      width: 30%;
      height: 5px;
    }
    #progress_container0{
      left: 25%;
      top:2%;
      position: absolute;
      width: 15%;
      height: 5px;
      background-color: rgb(48,115,248);
    }
    #progress_container1{
      position: absolute;
      width: 100%;
      height: 5px;
      background-color: rgb(55,179,163);
    }
    #progress_container2{
      position: absolute;
      width: 10%;
      height: 5px;   
      background-color: rgb(245,199,49);
    }
  </style>