<template>
  <div class="earth-box" :style="`height:${height}`">
    <div class="earth-main" v-if="data.length>=3">
      <div v-if="data.length>=3" v-for="(value,index) in data" :key="index">
        <div :class="'earth-data'+(index+1)">{{value.num}}</div>
        <p>{{value.name}}</p>
      </div>
    </div>
    <div class="earth-main" v-else>
      <div v-for="(value,index) in data" :key="index">
        <div :class="'earth-datas'+(index+1)">{{value.num}}</div>
        <p>{{value.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @author chenyanqing
 * @date 2019/10/18
 * @Description 地球背景数据展示
 * @props data:[name:'', num:'']   height:组件高度
 * @update by:
 */

export default {
  props: {
    data: Array,
    height: String
  }
};
</script>

<style scoped>
.earth-main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 .1rem;
}
.earth-main > div p {
  font-size: 0.06rem;
  color: #fff;
  margin-top: 0.06rem;
  width: .45rem;
  overflow: hidden;
}
.earth-main > div > div {
  width: 0.37rem;
  height: 0.37rem;
  font-weight: bold;
  font-size: 0.1rem;
  font-family: DS-DigitalBold;
  text-align: center;
  padding-top: 0.15rem;
  margin-left: 0.02rem;
}
.earth-box {
  width: 100%;
  height: 1.2rem;
  background: url("../assets/images/moduleBg02.png") no-repeat center bottom;
  background-size: contain;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  position: relative;
}
.earth-box .earth-data1 {
  margin-top: 0.3rem;
  background: url("../assets/images/icon-circle1.png") no-repeat;
  background-size: cover;
  color: #fed849;
}
.earth-box .earth-data2 {
  margin-top: 0.03rem;
  background: url("../assets/images/icon-circle2.png") no-repeat;
  background-size: cover;
  color: #fa5900;
}
.earth-box .earth-data3 {
  margin-top: 0.3rem;
  background: url("../assets/images/icon-circle3.png") no-repeat;
  background-size: cover;
  color: #22fd0b;
}
.earth-box .earth-data4 {
  margin-top: 0.03rem;
  background: url("../assets/images/icon-circle5.png") no-repeat;
  background-size: cover;
  color: #39edfb;
}
.earth-main>div:nth-child(4){
  transform:translate(-50%,0);
  position: absolute;
  left: 50%;
  top: .52rem;
}
/* 只有两组数据时并排显示 */
.earth-box .earth-datas1 {
  margin-top: 0.07rem;
  background: url("../assets/images/icon-circle1.png") no-repeat;
  background-size: cover;
  color: #fed849;
}
.earth-box .earth-datas2 {
  margin-top: 0.07rem;
  background: url("../assets/images/icon-circle2.png") no-repeat;
  background-size: cover;
  color: #fa5900;
}
</style>