Logo.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <div
  3. class="sidebar-logo-container"
  4. :class="{ collapse: collapse }"
  5. :style="{
  6. backgroundColor:
  7. sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg,
  8. }"
  9. >
  10. <transition name="sidebarLogoFade">
  11. <!-- 如果是靖润 添加style样式background="#fff"-->
  12. <router-link
  13. v-if="collapse"
  14. key="collapse"
  15. class="sidebar-logo-link"
  16. :class="{ 'jingrun-logo': sysType == 2 }"
  17. to="/"
  18. >
  19. <!-- 途宝-->
  20. <img v-if="sysType != 2" :src="logo" class="sidebar-logo-mini" />
  21. <!-- 靖润-->
  22. <img v-if="sysType == 2" :src="jingrunLogo" class="sidebar-logo-mini" />
  23. <!-- <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> -->
  24. </router-link>
  25. <router-link v-else key="expand" class="sidebar-logo-link" to="/">
  26. <!-- 途宝-->
  27. <img v-if="sysType != 2" :src="logo" class="sidebar-logo" />
  28. <!-- 靖润logo-->
  29. <div style="width: 80%;height: 100%;background-color: #fff;float: left" v-if="company === ''">
  30. <img v-if="sysType == 2" :src="jingrunLogo" class="sidebar-logo" />
  31. </div>
  32. <div style="float: right;background-color: #fff" class="other" v-if="company === ''"></div>
  33. <!-- <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> -->
  34. </router-link>
  35. </transition>
  36. </div>
  37. </template>
  38. <script>
  39. import logoImg from "@/assets/logo/logo.png";
  40. import jingrunLogo from "@/assets/logo/jingrun-logo.png"
  41. import variables from "@/assets/styles/variables.scss";
  42. import Cookies from "js-cookie";
  43. export default {
  44. name: "SidebarLogo",
  45. props: {
  46. collapse: {
  47. type: Boolean,
  48. required: true,
  49. },
  50. },
  51. computed: {
  52. variables() {
  53. return variables;
  54. },
  55. sideTheme() {
  56. return this.$store.state.settings.sideTheme;
  57. },
  58. },
  59. data() {
  60. return {
  61. title: "途宝智慧云仓平台",
  62. logo: logoImg,
  63. jingrunLogo: jingrunLogo,
  64. company: '',
  65. sysType: "",
  66. };
  67. },
  68. mounted() {
  69. this.company = Cookies.get("companyName")
  70. this.sysType = Cookies.get("sysType");
  71. },
  72. };
  73. </script>
  74. <style lang="scss" scoped>
  75. .sidebarLogoFade-enter-active {
  76. transition: opacity 1.5s;
  77. }
  78. .sidebarLogoFade-enter,
  79. .sidebarLogoFade-leave-to {
  80. opacity: 0;
  81. }
  82. .sidebar-logo-container {
  83. position: relative;
  84. // width: 100%;
  85. height: 60px;
  86. line-height: 60px;
  87. background: #014da1 !important;
  88. text-align: center;
  89. overflow: hidden;
  90. & .sidebar-logo-link {
  91. height: 100%;
  92. width: 100%;
  93. & .sidebar-logo {
  94. height: 60px;
  95. vertical-align: middle;
  96. margin-right: 12px;
  97. }
  98. & .sidebar-logo-mini {
  99. width: 50px;
  100. vertical-align: middle;
  101. margin: auto;
  102. }
  103. & .sidebar-title {
  104. display: inline-block;
  105. margin: 0;
  106. color: #fff;
  107. font-weight: 600;
  108. line-height: 50px;
  109. font-size: 14px;
  110. font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  111. vertical-align: middle;
  112. }
  113. }
  114. &.collapse {
  115. .sidebar-logo {
  116. margin-right: 0px;
  117. }
  118. }
  119. }
  120. .other {
  121. width: 0;
  122. height: 0;
  123. border-bottom: 60px solid #014da1;
  124. border-left: 40px solid transparent;
  125. }
  126. .jingrun-logo {
  127. background-color: #fff;
  128. }
  129. </style>