yifeng_integration/src/components/screen-map-header/index.vue

<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>