Logo.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <div class="sidebar-logo-container" :class="{'collapse':collapse}">
  3. <transition name="sidebarLogoFade">
  4. <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
  5. <img v-if="logo" :src="logo" class="sidebar-logo">
  6. <h1 v-else class="sidebar-title">{{ title }} </h1>
  7. </router-link>
  8. <router-link v-else key="expand" class="sidebar-logo-link" to="/">
  9. <img v-if="logo" :src="logo" class="sidebar-logo">
  10. <h1 class="sidebar-title">{{ title }} </h1>
  11. </router-link>
  12. </transition>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: 'SidebarLogo',
  18. props: {
  19. collapse: {
  20. type: Boolean,
  21. required: true
  22. }
  23. },
  24. data() {
  25. return {
  26. title: 'Vue Admin Template',
  27. logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
  28. }
  29. }
  30. }
  31. </script>
  32. <style lang="scss" scoped>
  33. .sidebarLogoFade-enter-active {
  34. transition: opacity 1.5s;
  35. }
  36. .sidebarLogoFade-enter,
  37. .sidebarLogoFade-leave-to {
  38. opacity: 0;
  39. }
  40. .sidebar-logo-container {
  41. position: relative;
  42. width: 100%;
  43. height: 50px;
  44. line-height: 50px;
  45. background: #2b2f3a;
  46. text-align: center;
  47. overflow: hidden;
  48. & .sidebar-logo-link {
  49. height: 100%;
  50. width: 100%;
  51. & .sidebar-logo {
  52. width: 32px;
  53. height: 32px;
  54. vertical-align: middle;
  55. margin-right: 12px;
  56. }
  57. & .sidebar-title {
  58. display: inline-block;
  59. margin: 0;
  60. color: #fff;
  61. font-weight: 600;
  62. line-height: 50px;
  63. font-size: 14px;
  64. font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  65. vertical-align: middle;
  66. }
  67. }
  68. &.collapse {
  69. .sidebar-logo {
  70. margin-right: 0px;
  71. }
  72. }
  73. }
  74. </style>