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

<template>
    <div class="map-legeng">
        <div class="flex">
            <div class="item" v-for="(item, index) in list" :key="index">
                <img :src="item.imgSrc" alt="">
                <section>
                    <div>
                        <span :class="{ 'num': true, 'yellow': index === 4 }">{{ item.num }}</span>
                        <span :class="{ 'units': true, 'yellow': index === 4 }">{{ item.units }}</span>
                    </div>
                    <div class="name">{{ item.name }}</div>

                </section>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { imgSrc: require('@/assets/images/map/legeng/qq.png'), units: '家', num: '100', name: '引进育种企业' },
                { imgSrc: require('@/assets/images/map/legeng/pz.png'), units: '种', num: '990', name: '培育优质品种' },
                { imgSrc: require('@/assets/images/map/legeng/zz.png'), units: '亿元', num: '5.2', name: '种子年销售额' },
                { imgSrc: require('@/assets/images/map/legeng/sc.png'), units: '万吨', num: '30', name: '蔬菜类产量' },
            ]
        };
    },
    created() { },
    methods: {},
    components: {},
    computed: {},
    watch: {},
}
</script>

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

    .item {
        @include flex();
        margin-top: 20px;
        img {
            width: 48px;
            height: 40px;
            margin-right: 8px;
            align-items: center;
        }

        section {
            @include flex(column);

            .name {
                color: #ACBBD4;
                font-size: 14px;
            }

            .num {
                font-family: pangmenzhengdao;
                color: #FFFFFF;
            }

            .units {
                font-size: 16px;
                color: #869DB8;
                margin-left: 5px;
            }
        }


    }
}
</style>