index.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
  3. <img :src="siteLogo" class="layout-logo-medium-img" />
  4. <span style="font-size: x-large">{{ getSystemConfig['login.site_title'] || themeConfig.globalTitle }}</span>
  5. </div>
  6. <div class="layout-logo-size" v-else @click="onThemeConfigChange">
  7. <img :src="siteLogo" class="layout-logo-size-img" />
  8. </div>
  9. </template>
  10. <script setup lang="ts" name="layoutLogo">
  11. import { computed } from 'vue';
  12. import { storeToRefs } from 'pinia';
  13. import { useThemeConfig } from '/@/stores/themeConfig';
  14. import logoMini from '/@/assets/logo-mini.svg';
  15. import { SystemConfigStore } from "/@/stores/systemConfig";
  16. import _ from "lodash-es";
  17. // 定义变量内容
  18. const storesThemeConfig = useThemeConfig();
  19. const { themeConfig } = storeToRefs(storesThemeConfig);
  20. // 设置 logo 的显示。classic 经典布局默认显示 logo
  21. const setShowLogo = computed(() => {
  22. let { isCollapse, layout } = themeConfig.value;
  23. return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
  24. });
  25. // logo 点击实现菜单展开/收起
  26. const onThemeConfigChange = () => {
  27. if (themeConfig.value.layout === 'transverse') return false;
  28. themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
  29. };
  30. const systemConfigStore = SystemConfigStore()
  31. const { systemConfig } = storeToRefs(systemConfigStore)
  32. const getSystemConfig = computed(() => {
  33. return systemConfig.value
  34. })
  35. const siteLogo = computed(() => {
  36. if (!_.isEmpty(getSystemConfig.value['login.site_logo'])) {
  37. return getSystemConfig.value['login.site_logo']
  38. }
  39. return logoMini
  40. });
  41. </script>
  42. <style scoped lang="scss">
  43. .layout-logo {
  44. width: 220px;
  45. height: 50px;
  46. display: flex;
  47. align-items: center;
  48. justify-content: center;
  49. box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
  50. color: var(--el-color-primary);
  51. font-size: 16px;
  52. cursor: pointer;
  53. animation: logoAnimation 0.3s ease-in-out;
  54. span {
  55. white-space: nowrap;
  56. display: inline-block;
  57. }
  58. &:hover {
  59. span {
  60. color: var(--color-primary-light-2);
  61. }
  62. }
  63. &-medium-img {
  64. width: 40px;
  65. margin-right: 5px;
  66. }
  67. }
  68. .layout-logo-size {
  69. width: 100%;
  70. height: 50px;
  71. display: flex;
  72. cursor: pointer;
  73. animation: logoAnimation 0.3s ease-in-out;
  74. &-img {
  75. width: 40px;
  76. margin: auto;
  77. }
  78. &:hover {
  79. img {
  80. animation: logoAnimation 0.3s ease-in-out;
  81. }
  82. }
  83. }
  84. </style>