parking/src/layouts/backend/components/logo.vue

<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: 舟舟
 * @Date: 2022-06-25 23:01:29
 * @LastEditors: 舟舟
 * @LastEditTime: 2023-06-29 13:05:21
 * @FilePath: /parking/src/layouts/backend/components/logo.vue
-->
<template>
    <div class="layout-logo">
        <img style="width:70%" src="~assets/logo.svg" alt="logo" v-if="(config.layout.layoutMode == 'Default' && ! config.layout.menuCollapse) || (config.layout.layoutMode == 'Classic' && ! config.layout.menuCollapse)"/>
        <div v-if="config.layout.menuCollapse" :style="{ color: config.layout.logoTitleColor }" class="website-name">
             <img class="logo-img" src="~assets/logo_small.svg" alt="logo" v-if="(config.layout.layoutMode == 'Default' && config.layout.menuCollapse) || config.layout.layoutMode == 'Classic'"/>
        </div>
         <Icon
            v-if="config.layout.layoutMode == 'Default'"
            @click="onMenuCollapse"
            :name="config.layout.menuCollapse ? 'local-IndentIncrease' : 'local-IndentDecrease'"
            :class="config.layout.menuCollapse ? 'unfold' : ''"
            :color="config.layout.logoTitleColor"
            size="18"
            class="fold"
            style="margin-right: 20px"
        />
    </div>
</template>

<script setup lang="ts">
import { useConfig } from '/@/stores/config'
import { useSiteConfig } from '/@/stores/siteConfig'
import { closeShade } from '/@/utils/pageShade'

const config = useConfig()
const siteConfig = useSiteConfig()


const onMenuCollapse = function () {
    if (config.layout.shrink && !config.layout.menuCollapse) {
        closeShade()
    }

    config.setLayout('menuCollapse', !config.layout.menuCollapse)
}


</script>

<style scoped lang="scss">

.layout-logo {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px;
    background: v-bind('config.layout.layoutMode != "Streamline" ? config.layout.menuTopBarBackground:"transparent"');
}
.logo-img {
    width: 28px;
}


.website-name {
    padding-left: 4px;
    font-size: var(--el-font-size-extra-large);
    font-weight: 600;
}
.fold {
    margin-left: auto;
}
.unfold {
    margin: 0 auto;
}
</style>