Logo.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <div
  3. class="sidebar-logo-container"
  4. :class="{ collapse: collapse }"
  5. :style="{
  6. backgroundColor:
  7. sideTheme === 'theme-dark'
  8. ? variables.menuBackground
  9. : variables.menuLightBackground,
  10. }"
  11. >
  12. <transition name="sidebarLogoFade">
  13. <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
  14. <img :src="realSrc(company.companyLogo)" class="sidebar-logo" />
  15. <h1
  16. class="sidebar-title"
  17. :style="{
  18. color:
  19. sideTheme === 'theme-dark'
  20. ? variables.logoTitleColor
  21. : variables.logoLightTitleColor,
  22. }"
  23. >
  24. {{ company.companyFullName || "管理系统" }}
  25. </h1>
  26. </router-link>
  27. <router-link v-else key="expand" class="sidebar-logo-link" to="/">
  28. <img :src="realSrc(company.companyLogo)" class="sidebar-logo" />
  29. <h1
  30. class="sidebar-title"
  31. :style="{
  32. color:
  33. sideTheme === 'theme-dark'
  34. ? variables.logoTitleColor
  35. : variables.logoLightTitleColor,
  36. }"
  37. >
  38. {{ company.companyFullName || "管理系统" }}
  39. </h1>
  40. </router-link>
  41. </transition>
  42. </div>
  43. </template>
  44. <script>
  45. import logoImg from "@/assets/logo/logo.png";
  46. import variables from "@/assets/styles/variables.scss";
  47. import { mapGetters } from "vuex";
  48. export default {
  49. name: "SidebarLogo",
  50. props: {
  51. collapse: {
  52. type: Boolean,
  53. required: true,
  54. },
  55. },
  56. computed: {
  57. ...mapGetters(["company"]),
  58. variables() {
  59. return variables;
  60. },
  61. sideTheme() {
  62. return this.$store.state.settings.sideTheme;
  63. },
  64. },
  65. data() {
  66. return {
  67. title: process.env.VUE_APP_TITLE,
  68. logo: logoImg,
  69. };
  70. },
  71. methods: {
  72. realSrc(src) {
  73. if (!src) {
  74. return logoImg;
  75. }
  76. return process.env.VUE_APP_BASE_API + src;
  77. },
  78. },
  79. };
  80. </script>
  81. <style lang="scss" scoped>
  82. .sidebarLogoFade-enter-active {
  83. transition: opacity 1.5s;
  84. }
  85. .sidebarLogoFade-enter,
  86. .sidebarLogoFade-leave-to {
  87. opacity: 0;
  88. }
  89. .sidebar-logo-container {
  90. position: relative;
  91. width: 100%;
  92. height: 50px;
  93. line-height: 50px;
  94. background: #2b2f3a;
  95. // text-align: center;
  96. padding-left: 10%;
  97. overflow: hidden;
  98. & .sidebar-logo-link {
  99. height: 100%;
  100. width: 100%;
  101. & .sidebar-logo {
  102. width: 32px;
  103. height: 32px;
  104. border-radius: 50%;
  105. vertical-align: middle;
  106. margin-right: 5px;
  107. }
  108. & .sidebar-title {
  109. display: inline-block;
  110. margin: 0;
  111. color: #fff;
  112. font-weight: 600;
  113. line-height: 50px;
  114. font-size: 12px;
  115. font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  116. vertical-align: middle;
  117. white-space: pre;
  118. }
  119. }
  120. &.collapse {
  121. text-align: center;
  122. padding-left: 0;
  123. .sidebar-logo {
  124. margin-right: 0px;
  125. }
  126. }
  127. }
  128. </style>