<template>
  <div class="map-header">
    <div class="flex">
      <div class="item" v-for="(item, index) in data" :key="index">
        <div class="name">{{ item.name }}</div>
        <section>
          <span :class="{ num: true, yellow: index === 4 }">{{
            item.num
          }}</span>
          <span :class="{ units: true, yellow: index === 4 }">{{
            item.units
          }}</span>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  created () {
  },
  methods: {},
  components: {},
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.flex {
  @include flex();
  width: 100%;
  justify-content: space-around;

  .item {
    @include flex(column);

    section {
      margin-top: 13px;
    }

    .name {
      font-size: 20px;
      color: #acbbd4;
    }

    .num {
      font-family: lihei;
      font-size: 26px;
      color: #ffffff;
      font-style: italic;
      text-shadow: 0 0 10px #fff;
    }

    .units {
      font-size: 16px;
      color: #869db8;
      margin-left: 5px;
    }
    .yellow {
      color: #ffc486;
      text-shadow: 0 0 10px #ffc486;
    }
  }
}
</style>
