WebHeader.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <template>
  2. <el-row type="flex" class="header-bg" justify="center">
  3. <el-col :span="20" style="display: flex; align-items: center">
  4. <div class="col-logo">
  5. <a href="/">
  6. <div style="display: flex; flex-direction: row; align-items: center">
  7. <div v-if="siteData.frontLogo">
  8. <!-- <img
  9. :src="siteData.frontLogo"
  10. :alt="siteData.siteName"
  11. style="height: 40px"
  12. /> -->
  13. <div class="logoBox">
  14. <img
  15. v-if="siteData.backLogo"
  16. :src="siteData.backLogo"
  17. class="sidebar-logo"
  18. style="height: 40px"
  19. />
  20. <h1 class="sidebar-title">{{ siteData.siteName }}</h1>
  21. </div>
  22. </div>
  23. <div v-else class="site-tt">{{ siteData.siteName }}</div>
  24. </div>
  25. </a>
  26. </div>
  27. <div class="col-menu">
  28. <div>
  29. <el-button
  30. v-for="item in menuList"
  31. :key="item.url"
  32. :class="isActive(item.url)"
  33. size="small"
  34. round
  35. @click="navClick(item.url)"
  36. >
  37. {{ item.title }}
  38. </el-button>
  39. </div>
  40. </div>
  41. <div class="right-user">
  42. <div class="top-avatar">
  43. <img v-if="avatar != null && avatar !== ''" :src="avatar" />
  44. <img v-else src="@/assets/web/avatar.png" />
  45. </div>
  46. <div>{{ realName }}</div>
  47. <a v-if="roleType === 2" class="alink" @click="toAdmin">管理中心</a>
  48. <a @click="logout">退出</a>
  49. </div>
  50. </el-col>
  51. </el-row>
  52. </template>
  53. <script>
  54. import { mapGetters } from "vuex";
  55. export default {
  56. data() {
  57. return {
  58. menuList: [
  59. {
  60. url: "/web/course",
  61. title: "课程学习",
  62. },
  63. {
  64. url: "/web/index",
  65. title: "在线考试",
  66. },
  67. {
  68. url: "/web/repo",
  69. title: "题库训练",
  70. },
  71. {
  72. url: "/web/notice",
  73. title: "系统公告",
  74. },
  75. {
  76. url: "/web/uc",
  77. title: "用户中心",
  78. },
  79. ],
  80. activeIndex: "/web/course",
  81. };
  82. },
  83. computed: {
  84. ...mapGetters(["avatar", "realName", "siteData", "roleType"]),
  85. },
  86. created() {
  87. this.focusMenu();
  88. },
  89. methods: {
  90. // 选定菜单
  91. focusMenu() {
  92. const activeMenu = this.$route.meta.activeMenu;
  93. if (activeMenu) {
  94. this.activeIndex = activeMenu;
  95. return;
  96. }
  97. const path = this.$route.path.split("/");
  98. const prefix = path[0] + "/" + path[1] + "/" + path[2];
  99. console.log(prefix);
  100. this.activeIndex = prefix;
  101. },
  102. isActive(url) {
  103. if (this.activeIndex === url) {
  104. return "nav active";
  105. }
  106. return "nav";
  107. },
  108. navClick(url) {
  109. this.activeIndex = url;
  110. this.$router.push({ path: url });
  111. },
  112. async logout() {
  113. const that = this;
  114. this.$confirm("确实要退出吗?", "提示", {
  115. confirmButtonText: "确定",
  116. cancelButtonText: "取消",
  117. type: "info",
  118. })
  119. .then(() => {
  120. that.$store.dispatch("user/logout").then(() => {
  121. that.$router.push("/login");
  122. });
  123. })
  124. .catch(() => {});
  125. },
  126. handleUc() {
  127. this.$router.push({ name: "UserCenter" });
  128. },
  129. toAdmin() {
  130. this.$router.push({ path: "/admin/dashboard" });
  131. },
  132. },
  133. };
  134. </script>
  135. <style lang="scss" scoped>
  136. .header-bg {
  137. height: 60px;
  138. background: #4377fb;
  139. }
  140. .right-user {
  141. display: flex;
  142. justify-content: flex-end;
  143. flex-direction: row;
  144. line-height: 60px;
  145. align-items: center;
  146. width: 250px;
  147. }
  148. .site-tt {
  149. font-weight: 700;
  150. font-size: 20px;
  151. color: #eee;
  152. flex-grow: 1;
  153. text-align: left;
  154. padding-left: 10px;
  155. }
  156. .right-user a,
  157. .right-user div {
  158. color: #efefef;
  159. font-size: 14px;
  160. font-weight: 500;
  161. margin-right: 10px;
  162. }
  163. .right-user a:last-child {
  164. margin-right: 0px !important;
  165. }
  166. .right-user a:hover {
  167. color: #ffd550;
  168. }
  169. /deep/ .alink {
  170. color: #ffd550 !important;
  171. }
  172. /deep/ .alink:hover {
  173. color: #f94e3e !important;
  174. }
  175. .nav {
  176. color: #fff;
  177. border: none;
  178. background: transparent;
  179. font-weight: 500;
  180. font-size: 16px;
  181. padding: 5px 10px 5px 10px;
  182. margin-right: 10px;
  183. }
  184. .active {
  185. color: #000055;
  186. background: #ffd550;
  187. }
  188. .nav:hover {
  189. color: #000055;
  190. background: #ffd550;
  191. }
  192. .col-logo {
  193. display: flex;
  194. align-items: center;
  195. justify-content: flex-start;
  196. height: 60px;
  197. max-width: 200px;
  198. }
  199. .col-menu {
  200. flex-grow: 1;
  201. align-items: center;
  202. text-align: center;
  203. }
  204. /deep/ .top-avatar {
  205. text-align: right;
  206. display: flex;
  207. align-items: center;
  208. margin-right: 5px !important;
  209. }
  210. /deep/ .top-avatar div {
  211. display: flex;
  212. align-items: center;
  213. margin-right: -10px !important;
  214. }
  215. /deep/ .top-avatar img {
  216. width: 30px;
  217. height: 30px;
  218. border-radius: 15px;
  219. }
  220. .logoBox {
  221. display: flex;
  222. justify-content: flex-start;
  223. align-items: center;
  224. position: relative;
  225. .sidebar-logo {
  226. margin-right: 0px;
  227. }
  228. .sidebar-title {
  229. position: absolute;
  230. left: 48px;
  231. display: inline-block;
  232. margin: 0;
  233. color: #fff;
  234. font-weight: 600;
  235. line-height: 50px;
  236. font-size: 18px;
  237. font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  238. vertical-align: middle;
  239. white-space: nowrap;
  240. }
  241. }
  242. </style>