'更新navbar'

src/assets/scss/common.scss

@@ -5,6 +5,8 @@
 }
 body {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  // font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  // font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
   font-size: $--font-size-base;
   line-height: $base--line-height;
   color: $--color-text-primary;
@@ -15,8 +17,8 @@ a {
   text-decoration: none;
   &:focus,
   &:hover {
-    color: $--color-primary;
-    text-decoration: underline;
+    color: #fff;
+    // text-decoration: underline;
   }
 }
 img {
@@ -217,6 +219,17 @@ img {
     &__brand {
       &-lg {
         display: none;
+        // margin: 0;
+        // color: #fff;
+        // width: 189px;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // white-space: nowrap;
+        // font-weight: 500;
+        // line-height: 50px;
+        // font-size: 14px;
+        // font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+        // vertical-align: middle;
       }
       &-mini {
         display: inline-block;
@@ -268,7 +281,9 @@ img {
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
   &--colorful {
     .aui-navbar__body {
+      // navbar body颜色
       background-color: transparent;
+      // background-color: #304156;
     }
     .aui-navbar__menu {
       > .el-menu-item,
@@ -278,6 +293,7 @@ img {
         &:hover {
           color: #fff;
           background-color: mix(#000, $--color-primary, 15%);
+          // background-color: #001528;
         }
       }
       > .el-menu-item.is-active,
@@ -285,7 +301,7 @@ img {
         color: #fff;
         &:focus,
         &:hover {
-          color: #fff;
+          color: #263445;
         }
       }
       .el-menu-item i,
@@ -332,7 +348,16 @@ img {
     color: #fff;
     overflow: hidden;
     transition: width .3s;
-    &-lg,
+    &-lg {
+      width: 238px;
+      height: 100%;
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 20px;
+      margin-top: 7px;
+    }
     &-mini {
       max-width: 100%;
       color: #fff;
@@ -392,9 +417,10 @@ img {
       * {
         vertical-align: initial;
       }
+      // 
       .aui-navbar__icon-menu {
         vertical-align: middle;
-        font-size: 16px;
+        font-size: 22px;
       }
       .el-dropdown {
         color: $--color-text-secondary;
@@ -463,7 +489,8 @@ img {
   bottom: 0;
   z-index: 1020;
   width: $sidebar--width;
-  background-color: #fff;
+  // background-color: #fff;
+  background-color:#304156;
   box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);
   overflow: hidden;
   transition: width .3s;
@@ -471,23 +498,28 @@ img {
     background-color: $sidebar--background-color-dark;
     .aui-sidebar__menu,
     > .el-menu--popup {
-      background-color: $sidebar--background-color-dark;
+      // background-color: $sidebar--background-color-dark;
+      background-color: #304156;;
       .el-menu-item,
       .el-submenu > .el-submenu__title {
-        color: $sidebar--text-color-dark;
+        // color: $sidebar--text-color-dark;
+        color: #f4f4f5;
         &:focus,
         &:hover {
           color: mix(#fff, $sidebar--text-color-dark, 50%);
-          background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
+          // background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
+          background-color:#0B253F;
         }
       }
       .el-menu,
       .el-submenu.is-opened {
-        background-color: mix(#000, $sidebar--background-color-dark, 15%);
+        // background-color: mix(#000, $sidebar--background-color-dark, 15%);
+        background-color:#0B253F;
       }
       .el-menu-item.is-active,
       .el-submenu.is-active > .el-submenu__title {
-        color: mix(#fff, $sidebar--text-color-dark, 80%);
+        // color: mix(#fff, $sidebar--text-color-dark, 80%);
+        color: #409EFF;
       }
     }
   }

src/assets/scss/variables.scss

@@ -5,9 +5,11 @@ $base--line-height: 1.15;
 $navbar--height: 50px;
 
 // Sidebar
-$sidebar--width: 300px;
+// $sidebar--width: 300px;
+$sidebar--width: 248px;
 $sidebar--width-fold: 64px;
-$sidebar--background-color-dark: #263238;
+// $sidebar--background-color-dark: #263238;
+$sidebar--background-color-dark: #001529;
 $sidebar--text-color-dark: #8a979e;
 $sidebar--menu-item-height: 48px;
 

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: '';

src/element-ui/theme-variables.scss

@@ -16,7 +16,8 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
 /* Color
 -------------------------- */
 /// color|1|Brand Color|0
-$--color-primary: #409EFF !default;
+// $--color-primary: #409EFF !default;
+$--color-primary: #001529 !default;
 /// color|1|Background Color|4
 $--color-white: #FFFFFF !default;
 /// color|1|Background Color|4

src/icons/svg/international.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M83.287 103.01c-1.57-3.84-6.778-10.414-15.447-19.548-2.327-2.444-2.182-4.306-1.338-9.862v-.64c.553-3.81 1.513-6.05 14.313-8.087 6.516-1.018 8.203 1.57 10.589 5.178l.785 1.193a12.625 12.625 0 0 0 6.43 5.207c1.134.524 2.53 1.164 4.421 2.24 4.596 2.53 4.596 5.41 4.596 11.753v.727a26.91 26.91 0 0 1-5.178 17.454 59.055 59.055 0 0 1-19.025 11.026c3.49-6.546.814-14.313 0-16.553l-.146-.087zM64 5.12a58.502 58.502 0 0 1 25.484 5.818 54.313 54.313 0 0 0-12.859 10.327c-.93 1.28-1.716 2.473-2.472 3.579-2.444 3.694-3.637 5.352-5.818 5.614a25.105 25.105 0 0 1-4.219 0c-4.276-.29-10.094-.64-11.956 4.422-1.193 3.23-1.396 11.956 2.444 16.495.66 1.077.778 2.4.32 3.578a7.01 7.01 0 0 1-2.066 3.229 18.938 18.938 0 0 1-2.909-2.91 18.91 18.91 0 0 0-8.32-6.603c-1.25-.349-2.647-.64-3.985-.93-3.782-.786-8.03-1.688-9.019-3.812a14.895 14.895 0 0 1-.727-5.818 21.935 21.935 0 0 0-1.396-9.25 8.873 8.873 0 0 0-5.557-4.946A58.705 58.705 0 0 1 64 5.12zM0 64c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64C28.654 0 0 28.654 0 64z"/></svg>

src/store/index.js

@@ -9,7 +9,7 @@ export default new Vuex.Store({
   namespaced: true,
   state: {
     // 导航条, 布局风格, default(白色) / colorful(鲜艳)
-    navbarLayoutType: 'colorful',
+    navbarLayoutType: '',
     // 侧边栏, 布局皮肤, default(白色) / dark(黑色)
     sidebarLayoutSkin: 'dark',
     // 侧边栏, 折叠状态

src/views/main-navbar.vue

@@ -1,11 +1,20 @@
 <template>
 	<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
+		<!-- <hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
 		<div class="aui-navbar__header">
-			<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
-				<a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
-				<a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
+			<h1 class="aui-navbar__brand" @click="$router.push({ name: 'sys-log-login' })">
+				<a class="aui-navbar__brand-lg" href="javascript:;">
+					<img src="../assets/img/cnbm.png" style="width: 36px; height: 36px; position: relative; top: 0em; margin-right: 12px" alt="" />
+					{{ $t('brand.lg') }}
+				</a>
+				<!-- <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a> -->
+				<!-- 缩放时LOGO -->
+				<a class="aui-navbar__brand-mini" href="javascript:;">
+					<img src="../assets/img/cnbm.png" style="width: 36px; height: 36px; position: relative; top: 0em" alt="" />
+				</a>
 			</h1>
 		</div>
+		<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
 		<div class="aui-navbar__body">
 			<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
 				<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
@@ -31,6 +40,14 @@
 					</a>
 				</el-menu-item> -->
 				<el-menu-item index="3">
+					<!-- <el-dropdown :style="showTitle ? 'color: #fff' : '#000'" class="hover-effect" trigger="click">
+						<el-badge :hidden="alarmNum > 0 ? false : true" :value="alarmNum" class="item" style="line-height: 0; margin: 0 10px; vertical-align: -3px" @click.native="handleAlarm">
+							<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
+						</el-badge>
+						<el-dropdown-menu slot="dropdown">
+							<el-dropdown-item>暂无数据</el-dropdown-item>
+						</el-dropdown-menu>
+					</el-dropdown> -->
 					<el-dropdown placement="bottom" :show-timeout="0" @command="handleCommand">
 						<span class="el-dropdown-link">
 							<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
@@ -69,6 +86,7 @@
 	</nav>
 </template>
 <script>
+// import Hamburger from '@/components/Hamburger'
 import Cookies from 'js-cookie'
 import screenfull from 'screenfull'
 import UpdatePassword from './main-navbar-update-password'
@@ -83,6 +101,7 @@ export default {
 	},
 	components: {
 		UpdatePassword
+		// Hamburger
 	},
 	methods: {
 		// 获取当前语言环境

src/views/pages/login.vue

@@ -200,6 +200,7 @@ export default {
 						})
 
 						this.$router.replace({ name: 'home' })
+            this.$router.replace({ name: 'sys-log-login' })
 					})
 					.catch(err => {
 						this.$message({