<template>
    <div class="org-info">
        <div class="square-box">
            <el-image :src="info.logo" fit="contain">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
        </div>
        <div class="title">{{ info.orgName }}</div>
    </div>
</template>

<script>
export default {
    name: 'OrgInfo',
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
};
</script>

<style lang="less" scoped>
.square-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    cursor: default;
    .el-image {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
}
.el-image {
    background-color: #fff;
}

.el-image /deep/ .image-slot {
    width: 100%;
    height: 100%;
    background-color: #ffffff80;
    color: #3cbef2;
    font-size: 80px;
    .flex();
    justify-content: center;
}

.title {
    height: 60px;
    background: #ffffff;
    line-height: 60px;
    padding: 0 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
