sl-sfy-safety/src/layout/components/Logo/index.vue

<template>
  <div
    class="logo"
    :class="{
      'collapsed-login': isCollapsed,
    }"
  >
    <img src="~@/assets/images/skyeye-logo-img.png" alt="" :class="{ 'mr-2': !isCollapsed }" />
    <img
      v-show="!isCollapsed || navMode === 'horizontal' || (navMode === 'horizontal-mix' && mixMenu)"
      class="mt-0 title"
      src="~@/assets/images/skyeye-logo-text.png"
      alt=""
      :class="{ 'mr-2': !isCollapsed }"
    />
  </div>
</template>

<script lang="ts" setup>
  import { inject, computed, unref } from 'vue';
  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';

  const { getNavTheme, getMenuWidth, getMenuMinWidth, getNavMode, getMenuSetting } =
    useProjectSetting();
  const { getDarkTheme } = useDesignSetting();

  const isCollapsed = inject('collapsed');
  const navMode = getNavMode;

  const getBgColor = computed(() => {
    let isLight = getNavTheme.value === 'light';
    return getDarkTheme.value ? 'rgb(24, 24, 28)' : isLight ? '#fff' : '#001428';
  });

  const getColor = computed(() => {
    let isLight = getNavTheme.value === 'light';
    return isLight ? '#333' : '#FFFFFF';
  });

  const mixMenu = computed(() => {
    return unref(getMenuSetting).mixMenu;
  });

  const menuWidth = computed(() => {
    return getMenuWidth.value + 'px';
  });

  const minMenuWidth = computed(() => {
    return getMenuMinWidth.value + 'px';
  });
</script>

<style lang="scss" scoped>
  .logo {
    width: v-bind(menuWidth);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    line-height: 64px;
    overflow: hidden;
    white-space: nowrap;
    background: v-bind(getBgColor);
    color: v-bind(getColor);
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, left 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
      box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, border-color var(--el-transition-duration),
      background-color var(--el-transition-duration), color var(--el-transition-duration);

    img {
      width: auto;
      height: 32px;
    }

    .title {
      margin-bottom: 0;
    }
  }

  .collapsed-login {
    width: v-bind(minMenuWidth);
  }
</style>