Newer
Older
KaiFengPC / src / layout / components / Sidebar / Logo.vue
@zhangdeliang zhangdeliang on 24 May 2 KB update
  1. <template>
  2. <div
  3. class="sidebar-logo-container"
  4. :class="{ collapse: collapse }"
  5. :style="{
  6. backgroundColor: sideTheme === 'theme-dark' ? variables.menuLogoBackground : variables.menuLightBackground,
  7. }"
  8. >
  9. <transition name="sidebarLogoFade">
  10. <a v-if="collapse" key="collapse" class="sidebar-logo-link" @click="gotoMain">
  11. <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
  12. 开封海绵城市综合管理平台
  13. </h1>
  14. </a>
  15. <a v-else key="expand" class="sidebar-logo-link" @click="gotoMain">
  16. <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
  17. 开封海绵城市综合管理平台
  18. </h1>
  19. </a>
  20. </transition>
  21. </div>
  22. </template>
  23.  
  24. <script setup>
  25. import variables from '@/assets/styles/variables.module.scss';
  26. import useSettingsStore from '@/store/modules/settings';
  27.  
  28. defineProps({
  29. collapse: {
  30. type: Boolean,
  31. required: true,
  32. },
  33. });
  34.  
  35. const settingsStore = useSettingsStore();
  36. const sideTheme = computed(() => settingsStore.sideTheme);
  37. const router = useRouter();
  38.  
  39. function gotoMain() {
  40. router.push('/door');
  41. }
  42. </script>
  43.  
  44. <style lang="scss" scoped>
  45. .sidebarLogoFade-enter-active {
  46. transition: opacity 1.5s;
  47. }
  48.  
  49. .sidebarLogoFade-enter,
  50. .sidebarLogoFade-leave-to {
  51. opacity: 0;
  52. }
  53.  
  54. .sidebar-logo-container {
  55. position: relative;
  56. width: 100%;
  57. height: 60px;
  58. line-height: 60px;
  59. background: #2b2f3a;
  60. text-align: center;
  61. overflow: hidden;
  62.  
  63. & .sidebar-logo-link {
  64. height: 100%;
  65. width: 100%;
  66.  
  67. & .sidebar-logo {
  68. width: 32px;
  69. height: 32px;
  70. vertical-align: middle;
  71. margin-right: 12px;
  72. }
  73.  
  74. & .sidebar-title {
  75. display: inline-block;
  76. margin: 0;
  77. color: #fff;
  78. line-height: 50px;
  79. vertical-align: middle;
  80. font-size: 22px;
  81. font-family: Source Han Sans CN;
  82. font-weight: bold;
  83. color: #ffffff;
  84. }
  85. }
  86.  
  87. &.collapse {
  88. .sidebar-logo {
  89. margin-right: 0px;
  90. }
  91. }
  92. }
  93. </style>