'更新navbar'

src/components/Breadcrumb/index.vue

@@ -0,0 +1,93 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditTime: 2021-01-28 16:26:15
+ * @LastEditors: gtz
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\components\Breadcrumb\index.vue
+-->
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="isredirect">{{ item.meta.title }}</span>
+        <span v-else class="no-redirect">{{ item.meta.title }}</span>
+        <!-- @click.prevent="handleLink(item)" -->
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route(route) {
+      // if you go to the redirect page, do not update the breadcrumbs
+      if (route.path.startsWith('/redirect/')) {
+        return
+      }
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      // const first = matched[0]
+
+      // if (!this.isDashboard(first)) {
+      //   matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+      // }
+
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 48px;
+  margin-left: 8px;
+  .isredirect {
+    color: rgba(0, 0, 0, 0.65);
+  }
+  .no-redirect {
+    color: #8C8C8C;
+    cursor: text;
+  }
+}
+</style>

src/components/Hamburger/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div style="padding: 5px 15px 5px 32px;" @click="toggleClick">
+    <svg-icon style="width: 24px; height: 24px" class="item-icon hamburger" :class="{'is-active':isActive}" icon-class="hamburgerBtn" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/components/small-title/index.vue

@@ -45,7 +45,8 @@ $mgr: 6px;
 		line-height: $height;
 		color: #000;
 		font-weight: 500;
-		font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
+		// font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
+		font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
 
 		&::before {
 			content: '';