vue布局模板，前端布局模板，flex布局应用

设计图效果：

代码：

<!-- 学习活跃度 -->
<template>
    <div class="learnActivityContainer">
        <div class="learnActivityitem">
            <div class="learnActivity_warp">
                <div class="learnActivity_img_warp">
                    <img :src="require('@/assets/img/learnActivity.png')" class="learnActivity_img" style="" alt="">
                </div>
                <div>
                    <div class="learnActivity_desc">当日人次</div>
                    <div class="learnActivity_datavalue" style="color:#FFD659">
                        {{ nowPeopleCount }}
                    </div>
                    <!-- <div><dv-digital-flop class="learnActivity_datavalue" :config="numberData.labroom" /></div> -->
                </div>
            </div>
        </div>
        <div class="learnActivityitem" >
            <div class="learnActivity_warp">
                <div class="learnActivity_img_warp">
                    <img :src="require('@/assets/img/learnActivity2.png')" class="learnActivity_img" style="" alt="">
                </div>
                <div>
                    <div class="learnActivity_desc">昨日人次</div>
                    <div class="learnActivity_datavalue" style="color: #36FB66;">
                        {{ nowPeopleCount }}
                    </div>
                </div>
            </div>
        </div>
        <div class="learnActivityitem" >
            <div class="learnActivity_warp">
                <div class="learnActivity_img_warp">
                    <img :src="require('@/assets/img/learnActivity3.png')" class="learnActivity_img" style="" alt="">
                </div>
                <div>
                    <div class="learnActivity_desc">今日人次</div>
                    <div class="learnActivity_datavalue" style="color: #48ECE7;">
                        {{ nowPeopleCount }}
                    </div>
                </div>
            </div>
        </div>
        <div class="learnActivityitem" style="">
            <div class="learnActivity_warp">
                <div class="learnActivity_img_warp">
                    <img :src="require('@/assets/img/learnActivity4.png')" class="learnActivity_img" style="" alt="">
                </div>
                <div>
                    <div class="learnActivity_desc">学期累计人次</div>
                    <div class="learnActivity_datavalue" style="color: #FFD659;">
                        {{ termPeopleCount }}
                    </div>
                </div>
            </div>
        </div>
        <div class="learnActivityitem">
            <div class="learnActivity_warp">
                <div class="learnActivity_img_warp">
                    <img :src="require('@/assets/img/learnActivity5.png')" class="learnActivity_img" style="" alt="">
                </div>
                <div>
                    <div class="learnActivity_desc">周环比</div>
                    <div class="learnActivity_datavalue" style="color: #36FB66;">
                        {{ nowPeopleCount }}
                    </div>
                </div>
            </div>
        </div>
        <div class="learnActivityitem">
            <div class="learnActivity_warp">
                <div class="learnActivity_img_warp">
                    <img :src="require('@/assets/img/learnActivity6.png')" class="learnActivity_img" style="" alt="">
                </div>
                <div>
                    <div class="learnActivity_desc">月环比</div>
                    <div class="learnActivity_datavalue" style="color: #FF3737;">
                        {{ nowPeopleCount }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    // 组件名字
    name: 'LearnActivity',
    // 组件参数
    props: {
    },
    data() {
        return {
            nowPeopleCount: 2895,
            termPeopleCount: 1025905,//学期累计人次
            numberData: {
                labroom: {
                    number: [2895],
                    content: '{nt}',
                    textAlign: 'left',
                    style: {
                        fontSize: 20,
                        fill: '#FFD659'
                    }
                },
                // 评估
                eval: {
                    number: [30.6],
                    content: '{nt}%',
                    toFixed: 1,
                    textAlign: 'left',
                    style: {
                        fontSize: 18,
                        fill: '#23FFFC'
                    }
                },
                // 产教
                prod: {
                    number: [30.6],
                    content: '{nt}%',
                    toFixed: 1,
                    textAlign: 'left',
                    style: {
                        fontSize: 18,
                        fill: '#23FFFC'
                    }
                },
            },
        }
    },
    mounted() {
        setInterval(() => {
            let val = this.numberData.labroom.number[0]
            this.numberData.labroom.number[0] = val + 10
            //相当于复制了一份新的对象在给自己
            this.numberData.labroom = { ...this.numberData.labroom }
            let prodval = this.numberData.prod.number[0]
            this.numberData.prod.number[0] = prodval + 2
            this.numberData.prod = { ...this.numberData.prod }
            console.log(val)
            console.log("------------------")
        }, 3800)
    },
    beforeDestroy() {
    },
    methods: {
    }
}
</script>
<style lang="scss" scoped>
.learnActivityContainer {
    margin-top: 20px;
    // margin-left: -10px;
    display: flex;
    justify-content: space-between;
    height: 100px;
    // 微调两边的间距，左边图片默认有点间距，所以设置比右边少了10px
    padding-left: 10px;
    padding-right: 20px;
    .learnActivityitem:last-child
    {
        margin-right: 0px;
    }
    .learnActivityitem {
        // flex: 1;
        // margin-right: 20px;
        .learnActivity_warp {
            height: 100px;
            display: flex;
            align-items: center;
        }
        .learnActivity_img_warp {
            margin-right: 12px;
            // margin-right: 12px;
            // margin-left: -10px;
            // background: #ffabcd;
            .learnActivity_img {
                width: 59px;
                height: 67px;
                // margin-left: -6px;
                // margin-top: -26px;
            }
        }
        .learnActivity_desc {
            font-size: 14px;
            margin-top: 7px;
        }
        .learnActivity_datavalue {
            // width: 100%;
            margin-top: 7px;
            font-size: 20px;
        }
    }
}
</style>