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

<template>
    <div class="company-card">
        <div class="company-info">
            <div>
                <el-avatar
                    size="large"
                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                />
            </div>
            <div style="flex: 1; padding-left: 14px">
                <div class="company-title">
                    <span> {{ companyInfo.deptName }} </span>
                    <el-tag type="success" effect="dark" size="mini">
                        启用中
                    </el-tag>
                </div>

                <p> {{ companyInfo.remark }} </p>
            </div>
        </div>

        <div class="items-card">
            <div
                :key="index"
                class="items-center"
                v-for="(item, index) in userList"
            >
                <div>{{ item.title_name }}</div>
                <div>{{ item.count }}</div>
            </div>
        </div>
        <div class="items-card">
            <el-button
                type="text"
                :key="index"
                :icon="item.icon"
                v-for="(item, index) in btnList"
                @click="onClickButton(item.type)"
            >
                {{ item.btn_name }}
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        companyInfo: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            userList: [
                { title_name: '用户', count: 20 },
                { title_name: '项目', count: 20 },
                { title_name: '设备', count: 20 },
            ],
            btnList: [
                { btn_name: '详情', icon: 'el-icon-chat-dot-round', type: 1 },
                { btn_name: '编辑', icon: 'el-icon-edit', type: 2 },
                { btn_name: '注销', icon: 'el-icon-delete', type: 3 },
            ],
        }
    },

    methods: {
        onClickButton(type) {
            if (type === 1 || type === 2) {
                this.$emit('openAddForm', type)
            } else {
                this.$modal
                    .confirm('是否确认注销')
                    .then(() => {})
                    .catch(() => {})
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.company-card {
    padding: 12px 10px;
    border-radius: 6px;
    background-color: #f7f8fc;

    .company-info {
        display: flex;
        align-items: center;

        .company-title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            & span:first-child {
                font-weight: bold;
            }
        }

        p {
            font-size: 14px;
            color: #abafb3;
        }
    }
    .items-card {
        margin-top: 16px;
        display: flex;
        justify-content: space-around;
        color: #454545;

        .items-center {
            display: flex;
            flex-direction: column;
            align-items: center;

            & div:last-child {
                margin-top: 14px;
                font-weight: bold;
            }
        }
    }
}
</style>