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

<template>
  <div
    class="logo"
    :class="{
      'collapsed-login': isCollapsed,
    }"
  >
    <img v-if="isCollapsed" src="~@/assets/images/skyeye-logo-img.png" alt="" :class="{ 'mr-2': !isCollapsed }" />
    <div v-else class="openWrapper">
      <div>
        <img src="~@/assets/images/skyeye-logo-img.png" alt="" class="logoOpen" />
      </div>
      <div class="titleWrapper">
        {{ title }}
      </div>
    </div>
    <!-- <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';
  import { useGlobSetting } from '@/hooks/setting';

  // NavMode的设置按钮已禁用 这里用不上 之后有需要再放开
  const { getNavTheme, getMenuWidth, getMenuMinWidth, getNavMode, getMenuSetting } = useProjectSetting();
  const { getDarkTheme } = useDesignSetting();

  const isCollapsed = inject('collapsed');
  const { title } = useGlobSetting();
  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;
    // padding-left: 20px;
    // padding-right: 20px;
    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: 157px;
      height: auto;
      margin: auto;
    }

    .title {
      margin-bottom: 0;
    }
  }

  .collapsed-login {
    width: v-bind(minMenuWidth);
    padding-left: 2px;
    padding-right: 2px;
  }

  .logo .logoOpen {
    width: 50px;
  }
  .titleWrapper {
    line-height: 30px;
    font-weight: bold;
  }

  .openWrapper {
    width: v-bind(menuWidth);
    overflow: hidden;
  }

  .titleWrapper {
    // justify-content: left;
    text-align: center;
    margin-left: 12px;
    margin-right: 12px;
    overflow: hidden;
  }
</style>