sk-demo-vue/src/layout/components/Sidebar/Logo.vue

<template>
    <div class="sidebar-logo-container" :class="{ collapse: collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
        <transition name="sidebarLogoFade">
            <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
                <img v-if="logo" :src="logo" class="sidebar-logo" />
                <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }" style="padding-left: 10px">{{ title }}</h1>
            </router-link>
            <router-link v-else key="expand" class="sidebar-logo-link" to="/">
                <img v-if="logo" :src="logo" class="sidebar-logo" />
                <span class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }" style="padding-left: 10px">{{ title }}</span>
            </router-link>
        </transition>
    </div>
</template>

<script>
import logoImg from '@/assets/logo/logo.gif';
import variables from '@/assets/styles/variables.scss';
import { getDept } from '@/api/system/dept';

export default {
    name: 'SidebarLogo',
    props: {
        collapse: {
            type: Boolean,
            required: true,
        },
    },
    computed: {
        variables() {
            return variables;
        },
        sideTheme() {
            return this.$store.state.settings.sideTheme;
        },
    },
    data() {
        return {
            title: '',
            logo: '',
            baseUrl: process.env.VUE_APP_BASE_API,
        };
    },
    mounted() {
        this.getDeptDetail();
    },
    methods: {
        //获取机构详情
        getDeptDetail() {
            const deptId = this.$store.state.user.dept.deptId;
            getDept(deptId).then((response) => {
                const data = response.data;
                if (data.logoName) {
                    this.title = data.logoName.length > 8 ? data.logoName.slice(0, 8) : data.logoName;
                } else {
                    this.title = 'FastBee';
                }
                if (data.deptLogo) {
                    this.logo = this.baseUrl + data.deptLogo;
                } else {
                    this.logo = logoImg;
                }
            });
        },
    },
};
</script>

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

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

.sidebar-logo-container {
    position: relative;
    // width: 100%;
    height: 50px;
    line-height: 50px;
    background: #2b2f3a;
    overflow: hidden;
    margin-top: 15px;
    width: 100%; /* 固定宽度 */
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 不换行 */

    & .sidebar-logo-link {
        height: 100%;
        width: 100%;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        & .sidebar-logo {
            width: 30px; // 30
            height: 30px; // 30
            vertical-align: middle;
            margin-right: 10px;
        }

        & .sidebar-title {
            display: inline-block;
            margin: 0;
            color: #fff;
            font-weight: 400;
            line-height: 50px;
            font-size: 18px; // 18
            font-family: '微软雅黑';
            vertical-align: middle;
            position: relative; /* 相对定位以便绝对定位子元素 */
            white-space: nowrap; // 防止换行
            overflow: hidden; // 隐藏溢出部分
            text-align: center;
            padding-left: 0 !important;
        }
    }

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