index.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <div class="navbar">
  3. <span class="title" v-show="sidebar.opened">万达数字化运维平台</span>
  4. <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
  5. <div class="right-menu">
  6. <el-dropdown class="avatar-container right-menu-item hover-effect">
  7. <div class="avatar-wrapper">
  8. <span> yanruolan </span>
  9. <i class="el-icon-user-solid" />
  10. </div>
  11. <el-dropdown-menu slot="dropdown">
  12. <router-link to="/">
  13. <el-dropdown-item> 退出 </el-dropdown-item>
  14. </router-link>
  15. </el-dropdown-menu>
  16. </el-dropdown>
  17. </div>
  18. </div>
  19. </template>
  20. <script lang="ts">
  21. import { Component, Vue } from "vue-property-decorator";
  22. import { AppModule } from "@/store/modules/app";
  23. import { UserModule } from "@/store/modules/user";
  24. import Breadcrumb from "@/components/Breadcrumb/index.vue";
  25. import Hamburger from "@/components/Hamburger/index.vue";
  26. @Component({
  27. name: "Navbar",
  28. components: {
  29. Breadcrumb,
  30. Hamburger,
  31. },
  32. })
  33. export default class extends Vue {
  34. get sidebar() {
  35. return AppModule.sidebar;
  36. }
  37. get device() {
  38. return AppModule.device.toString();
  39. }
  40. get avatar() {
  41. return UserModule.avatar;
  42. }
  43. private toggleSideBar() {
  44. AppModule.ToggleSideBar(false);
  45. }
  46. private async logout() {
  47. await UserModule.LogOut();
  48. // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
  49. }
  50. }
  51. </script>
  52. <style lang="scss" scoped>
  53. .navbar {
  54. height: 50px;
  55. overflow: hidden;
  56. position: relative;
  57. background-color: #2b3643;
  58. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  59. z-index: 1002;
  60. .title {
  61. float: left;
  62. padding: 0 20px;
  63. margin: 0 auto;
  64. line-height: 46px;
  65. height: 100%;
  66. color: #fff;
  67. }
  68. .hamburger-container {
  69. color: #fff;
  70. line-height: 46px;
  71. height: 100%;
  72. float: left;
  73. width: 60px;
  74. //padding: 0 15px;
  75. cursor: pointer;
  76. transition: background 0.3s;
  77. -webkit-tap-highlight-color: transparent;
  78. &:hover {
  79. background: rgba(0, 0, 0, 0.025);
  80. }
  81. }
  82. .right-menu {
  83. float: right;
  84. height: 100%;
  85. line-height: 50px;
  86. &:focus {
  87. outline: none;
  88. }
  89. .right-menu-item {
  90. display: inline-block;
  91. padding: 0 8px;
  92. height: 100%;
  93. font-size: 18px;
  94. color: #5a5e66;
  95. vertical-align: text-bottom;
  96. &.hover-effect {
  97. cursor: pointer;
  98. transition: background 0.3s;
  99. &:hover {
  100. background: rgba(0, 0, 0, 0.025);
  101. }
  102. }
  103. }
  104. .avatar-container {
  105. margin-right: 30px;
  106. .avatar-wrapper {
  107. position: relative;
  108. color: #409eff;
  109. font-size: 18px;
  110. .user-avatar {
  111. cursor: pointer;
  112. width: 40px;
  113. height: 40px;
  114. border-radius: 10px;
  115. }
  116. .el-icon-caret-bottom {
  117. cursor: pointer;
  118. position: absolute;
  119. right: -20px;
  120. top: 25px;
  121. font-size: 12px;
  122. }
  123. }
  124. }
  125. }
  126. }
  127. </style>