<template>
  <div id="centerCmp1">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">银川市流动人口数据</span>
      </div>
	  <div style="display: flex;position: absolute;top: .4rem;bottom: 0;">
		  <div v-for="item in headData" style="width: 50%;display: flex;align-items: center;box-sizing: border-box;padding: 0 .7rem;">
			  <div style="width: 1.5rem;font-size: 16px;font-weight: bold;">{{item.title}}</div>
				<dv-digital-flop :config="item.number" style="height: 1rem;" />
		  </div>
	  </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
		  headData:[{
		    title:'外省流入',
		      number: {
		        number: [120],
		        toFixed: 1,
		        content: "{nt}",
		        textAlign:'center',
		        style:{
		          fill:'#09dbfe',
              fontWeigth:'bold',
              fontSize:40
		        }
		      },

		  },{
		    title:'省内流出',
		      number: {
		        number: [120],
		        toFixed: 1,
		        content: "{nt}",
		        textAlign:'center',
		        style:{
		          fill:'#09dbfe',
              fontWeigth:'bold',
              fontSize:40
		        }
		      },

		  }]
      }
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){

		}
    }
  }
</script>

<style lang="less" scoped="scoped">
  #centerCmp1{
      width: 100%;
      height: 1.2rem;
      position:relative
    }
</style>
