dispacth_zhongpin/src/layout/components/Sidebar/Logo.vue

<template>
    <div class="sidebar-logo-container" :class="{ collapse: collapse }">
        <transition name="sidebarLogoFade">
            <router-link
                v-if="collapse"
                key="collapse"
                class="sidebar-logo-link"
                to="/"
            >
                <img
                    v-if="logo"
                    :src="logo"
                    style="min-height: 80px;"
                    class="sidebar-logo"
                />
                <h1 v-else class="sidebar-title">{{ title }}</h1>
            </router-link>
            <router-link v-else key="expand" class="sidebar-logo-link" to="/">
                <img v-if="logo" :src="logo" class="sidebar-logo" />
                <!-- <h1 class="sidebar-title">星油能源调度管理平台</h1> -->
            </router-link>
        </transition>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "SidebarLogo",
    props: {
        collapse: {
            type: Boolean,
            required: true
        }
    },
    data() {
        return {
            title: "星卡互联",
            companyList: [
                {
                    value: "1622767323771695104", // 中品
                    logo: require("@/assets/img/zhongpin.png")
                },
                {
                    value: "1575024124503068672", // 百川
                    logo: require("@/assets/img/baichuan.png")
                }
            ]
        };
    },
    computed: {
        ...mapGetters(["user"]),
        logo() {
            let company = this.companyList.find(
                item => item.value === this.user.userCompany
            );
            return company ? company.logo : "";
        }
    }
};
</script>

<style lang="scss">
.sidebarLogoFade-enter-active {
    transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
    opacity: 0;
}

.sidebar-logo-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    & .sidebar-logo-link {
        width: 100%;
        text-align: center;
        & .sidebar-logo {
            vertical-align: middle;
            margin: 10px 0 15px;
            width: 100%;
        }

        & .sidebar-title {
            display: inline-block;
            margin: 0;
            font-weight: normal;
            line-height: 50px;
            font-size: 16px;
            font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
            vertical-align: middle;
        }
    }

    &.collapse {
        .sidebar-logo {
            margin-right: 0px;
        }
    }
}
</style>