<template>
    <div class="map-header">
        <div class="flex">
            <div class="item" v-for="(item, index) in list" :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 {
            list: [
                { name: '年平均气温', units: '°C', num: '24' },
                { name: '年日光照', units: '小时', num: '2700' },
                { name: '无霾期', units: '天', num: '200' },
                { name: '年平均降水', units: '毫升', num: '687' },
                { name: '土壤有机质', units: '含量', num: '1.5%' }
            ]
        };
    },
    created() { },
    methods: {},
    components: {},
    computed: {},
    watch: {},
}
</script>

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

    .item {
        display: flex;
        flex-direction: 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>