bonus-ui/src/views/company-manage/components/company-card.vue

<template>
    <div class="company-card">
        <div class="company-info">
            <div>
                <el-avatar
                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                />
            </div>
            <div>
                <div>
                    安徽送变电工程有限公司
                    <span> 启用中 </span>
                </div>

                <p> 秉承专业.... </p>
            </div>
        </div>

        <div class="items-card">
            <div class="items-center">
                <div>用户</div>
                <div>20</div>
            </div>
            <div class="items-center">
                <div>项目</div>
                <div>20</div>
            </div>
            <div class="items-center">
                <div>设备</div>
                <div>20</div>
            </div>
        </div>
        <div class="items-card">
            <div>
                <div>详情</div>
            </div>
            <div>
                <div>编辑</div>
            </div>
            <div>
                <div>注销</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.company-card {
    background-color: #f7f8fc;
    padding: 12px 10px;
    border-radius: 6px;
    .company-info {
        display: flex;
        align-items: center;
    }

    .items-card {
        margin-top: 16px;
        display: flex;
        justify-content: space-around;

        .items-center {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
}
</style>