Newer
Older
DH_Apicture / src / layout / components / Sidebar / Logo.vue
@zhangqy zhangqy on 29 Nov 2 KB first commit
  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" :href='hrefUrlHome'>
  11. <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
  12. <h1
  13. class="sidebar-title"
  14. :style="{
  15. color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor,
  16. }"
  17. >
  18. {{ title }}
  19. </h1>
  20. </a>
  21. <a v-else key="expand" class="sidebar-logo-link" :href='hrefUrlHome'>
  22. <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
  23. <h1
  24. class="sidebar-title"
  25. :style="{
  26. color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor,
  27. }"
  28. >
  29. {{ title }}
  30. </h1>
  31. </a>
  32. </transition>
  33. </div>
  34. </template>
  35.  
  36. <script setup>
  37. import variables from '@/assets/styles/variables.module.scss';
  38. // import logo from "@/assets/images/login/logo.png";
  39. import useSettingsStore from '@/store/modules/settings';
  40.  
  41. defineProps({
  42. collapse: {
  43. type: Boolean,
  44. required: true,
  45. },
  46. });
  47.  
  48. const title = ref('智慧外呼');
  49. const settingsStore = useSettingsStore();
  50. const sideTheme = computed(() => settingsStore.sideTheme);
  51. const hrefUrlHome=`${window.location.origin}/door`
  52. </script>
  53.  
  54. <style lang="scss" scoped>
  55. .sidebarLogoFade-enter-active {
  56. transition: opacity 1.5s;
  57. }
  58.  
  59. .sidebarLogoFade-enter,
  60. .sidebarLogoFade-leave-to {
  61. opacity: 0;
  62. }
  63.  
  64. .sidebar-logo-container {
  65. position: relative;
  66. width: 100%;
  67. height: 60px;
  68. line-height: 60px;
  69. background: #2b2f3a;
  70. text-align: center;
  71. overflow: hidden;
  72.  
  73. & .sidebar-logo-link {
  74. height: 100%;
  75. width: 100%;
  76.  
  77. & .sidebar-logo {
  78. width: 32px;
  79. height: 32px;
  80. vertical-align: middle;
  81. margin-right: 12px;
  82. }
  83.  
  84. & .sidebar-title {
  85. display: inline-block;
  86. margin: 0;
  87. color: #fff;
  88. line-height: 50px;
  89. vertical-align: middle;
  90. font-size: 22px;
  91. font-weight: bold;
  92. color: #ffffff;
  93. }
  94. }
  95.  
  96. &.collapse {
  97. .sidebar-logo {
  98. margin-right: 0px;
  99. }
  100. }
  101. }
  102. </style>