<template>
  <div>
    <div class="ModularLeft population" v-for="(value,index) in data" :key="index">
      <div class="populationBox">
        <div :class="'circular circular_'+(index+1)">
          <i :class="'iconfont '+value.icon"></i>
          </div>
        <div class="population_total">
          <span>规划总人口</span>
          <div class="populationNum">
            <span>{{value.ghNum}}</span>人
          </div>
        </div>
        <div class="population_total">
          <span>现有总人口</span>
          <div class="populationNum">
            <span class="Existing_1">{{value.nowNum}}</span>人
          </div>
        </div>
      </div>
    </div>
  </div> 
</template>
<script>

export default {
  props:['data'],
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
  }
};
</script>

<style scoped>
.populationBox {
  margin: 0 0 0.05rem 0.1rem;
  padding: 0.01rem 0.03rem 0;
  border-radius: 0.6rem;
  box-shadow: 0px 0px 30px #0006ff inset;
  display: flex;
  align-items: center;
}
.populationBox .population_total {
  flex: 1;
}
.circular {
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  margin-right: 0.05rem;
  text-align: center;
}
.circular i{
  display: inline-block;
  font-size: .1rem;
  padding-top: .04rem;
}
.population_total {
  line-height: 0.106rem;
}
.population_total > span {
  font-size: 0.6em;
  color: #fff;
}
.populationNum {
  color: #30d7e0;
  font-size: 0.06rem;
}
.populationNum span {
  font-size: 0.08rem;
}
.Existing_1 {
  color: #1eff00;
}
.Existing_2 {
  color: #1eff00;
}
.Existing_3 {
  color: #ef6e18;
}
.Existing_4 {
  color: #ab60ff;
}
.Existing_5 {
  color: #1eff00;
}
.circular_1 {
  background: linear-gradient(to top, #0336ff 0%, #01b4ff 100%);
}
.circular_2 {
  background: linear-gradient(to top, #00908e 0%, #33ff99 100%);
}
.circular_3 {
  background: linear-gradient(to top, #ef6e18 0%, #fcc204 100%);
}
.circular_4 {
  background: linear-gradient(to top, #5900bc 0%, #9f4efb 100%);
}
.circular_5 {
  background: linear-gradient(to top, #5900bc 0%, #9f4efb 100%);
}
</style>