@@ -5,6 +5,8 @@ | |||||
} | } | ||||
body { | 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: 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; | font-size: $--font-size-base; | ||||
line-height: $base--line-height; | line-height: $base--line-height; | ||||
color: $--color-text-primary; | color: $--color-text-primary; | ||||
@@ -15,8 +17,8 @@ a { | |||||
text-decoration: none; | text-decoration: none; | ||||
&:focus, | &:focus, | ||||
&:hover { | &:hover { | ||||
color: $--color-primary; | |||||
text-decoration: underline; | |||||
color: #fff; | |||||
// text-decoration: underline; | |||||
} | } | ||||
} | } | ||||
img { | img { | ||||
@@ -217,6 +219,17 @@ img { | |||||
&__brand { | &__brand { | ||||
&-lg { | &-lg { | ||||
display: none; | 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 { | &-mini { | ||||
display: inline-block; | display: inline-block; | ||||
@@ -268,7 +281,9 @@ img { | |||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05); | box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05); | ||||
&--colorful { | &--colorful { | ||||
.aui-navbar__body { | .aui-navbar__body { | ||||
// navbar body颜色 | |||||
background-color: transparent; | background-color: transparent; | ||||
// background-color: #304156; | |||||
} | } | ||||
.aui-navbar__menu { | .aui-navbar__menu { | ||||
> .el-menu-item, | > .el-menu-item, | ||||
@@ -278,6 +293,7 @@ img { | |||||
&:hover { | &:hover { | ||||
color: #fff; | color: #fff; | ||||
background-color: mix(#000, $--color-primary, 15%); | background-color: mix(#000, $--color-primary, 15%); | ||||
// background-color: #001528; | |||||
} | } | ||||
} | } | ||||
> .el-menu-item.is-active, | > .el-menu-item.is-active, | ||||
@@ -285,7 +301,7 @@ img { | |||||
color: #fff; | color: #fff; | ||||
&:focus, | &:focus, | ||||
&:hover { | &:hover { | ||||
color: #fff; | |||||
color: #263445; | |||||
} | } | ||||
} | } | ||||
.el-menu-item i, | .el-menu-item i, | ||||
@@ -332,7 +348,16 @@ img { | |||||
color: #fff; | color: #fff; | ||||
overflow: hidden; | overflow: hidden; | ||||
transition: width .3s; | 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 { | &-mini { | ||||
max-width: 100%; | max-width: 100%; | ||||
color: #fff; | color: #fff; | ||||
@@ -392,9 +417,10 @@ img { | |||||
* { | * { | ||||
vertical-align: initial; | vertical-align: initial; | ||||
} | } | ||||
// | |||||
.aui-navbar__icon-menu { | .aui-navbar__icon-menu { | ||||
vertical-align: middle; | vertical-align: middle; | ||||
font-size: 16px; | |||||
font-size: 22px; | |||||
} | } | ||||
.el-dropdown { | .el-dropdown { | ||||
color: $--color-text-secondary; | color: $--color-text-secondary; | ||||
@@ -463,7 +489,8 @@ img { | |||||
bottom: 0; | bottom: 0; | ||||
z-index: 1020; | z-index: 1020; | ||||
width: $sidebar--width; | width: $sidebar--width; | ||||
background-color: #fff; | |||||
// background-color: #fff; | |||||
background-color:#304156; | |||||
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05); | box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05); | ||||
overflow: hidden; | overflow: hidden; | ||||
transition: width .3s; | transition: width .3s; | ||||
@@ -471,23 +498,28 @@ img { | |||||
background-color: $sidebar--background-color-dark; | background-color: $sidebar--background-color-dark; | ||||
.aui-sidebar__menu, | .aui-sidebar__menu, | ||||
> .el-menu--popup { | > .el-menu--popup { | ||||
background-color: $sidebar--background-color-dark; | |||||
// background-color: $sidebar--background-color-dark; | |||||
background-color: #304156;; | |||||
.el-menu-item, | .el-menu-item, | ||||
.el-submenu > .el-submenu__title { | .el-submenu > .el-submenu__title { | ||||
color: $sidebar--text-color-dark; | |||||
// color: $sidebar--text-color-dark; | |||||
color: #f4f4f5; | |||||
&:focus, | &:focus, | ||||
&:hover { | &:hover { | ||||
color: mix(#fff, $sidebar--text-color-dark, 50%); | 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-menu, | ||||
.el-submenu.is-opened { | .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-menu-item.is-active, | ||||
.el-submenu.is-active > .el-submenu__title { | .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; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -5,9 +5,11 @@ $base--line-height: 1.15; | |||||
$navbar--height: 50px; | $navbar--height: 50px; | ||||
// Sidebar | // Sidebar | ||||
$sidebar--width: 300px; | |||||
// $sidebar--width: 300px; | |||||
$sidebar--width: 248px; | |||||
$sidebar--width-fold: 64px; | $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--text-color-dark: #8a979e; | ||||
$sidebar--menu-item-height: 48px; | $sidebar--menu-item-height: 48px; | ||||
@@ -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> |
@@ -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> |
@@ -45,7 +45,8 @@ $mgr: 6px; | |||||
line-height: $height; | line-height: $height; | ||||
color: #000; | color: #000; | ||||
font-weight: 500; | 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 { | &::before { | ||||
content: ''; | content: ''; | ||||
@@ -16,7 +16,8 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; | |||||
/* Color | /* Color | ||||
-------------------------- */ | -------------------------- */ | ||||
/// color|1|Brand Color|0 | /// color|1|Brand Color|0 | ||||
$--color-primary: #409EFF !default; | |||||
// $--color-primary: #409EFF !default; | |||||
$--color-primary: #001529 !default; | |||||
/// color|1|Background Color|4 | /// color|1|Background Color|4 | ||||
$--color-white: #FFFFFF !default; | $--color-white: #FFFFFF !default; | ||||
/// color|1|Background Color|4 | /// color|1|Background Color|4 | ||||
@@ -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> |
@@ -9,7 +9,7 @@ export default new Vuex.Store({ | |||||
namespaced: true, | namespaced: true, | ||||
state: { | state: { | ||||
// 导航条, 布局风格, default(白色) / colorful(鲜艳) | // 导航条, 布局风格, default(白色) / colorful(鲜艳) | ||||
navbarLayoutType: 'colorful', | |||||
navbarLayoutType: '', | |||||
// 侧边栏, 布局皮肤, default(白色) / dark(黑色) | // 侧边栏, 布局皮肤, default(白色) / dark(黑色) | ||||
sidebarLayoutSkin: 'dark', | sidebarLayoutSkin: 'dark', | ||||
// 侧边栏, 折叠状态 | // 侧边栏, 折叠状态 | ||||
@@ -1,11 +1,20 @@ | |||||
<template> | <template> | ||||
<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`"> | <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"> | <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> | </h1> | ||||
</div> | </div> | ||||
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> --> | |||||
<div class="aui-navbar__body"> | <div class="aui-navbar__body"> | ||||
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal"> | <el-menu class="aui-navbar__menu mr-auto" mode="horizontal"> | ||||
<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold"> | <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold"> | ||||
@@ -31,6 +40,14 @@ | |||||
</a> | </a> | ||||
</el-menu-item> --> | </el-menu-item> --> | ||||
<el-menu-item index="3"> | <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"> | <el-dropdown placement="bottom" :show-timeout="0" @command="handleCommand"> | ||||
<span class="el-dropdown-link"> | <span class="el-dropdown-link"> | ||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"> | <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"> | ||||
@@ -69,6 +86,7 @@ | |||||
</nav> | </nav> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
// import Hamburger from '@/components/Hamburger' | |||||
import Cookies from 'js-cookie' | import Cookies from 'js-cookie' | ||||
import screenfull from 'screenfull' | import screenfull from 'screenfull' | ||||
import UpdatePassword from './main-navbar-update-password' | import UpdatePassword from './main-navbar-update-password' | ||||
@@ -83,6 +101,7 @@ export default { | |||||
}, | }, | ||||
components: { | components: { | ||||
UpdatePassword | UpdatePassword | ||||
// Hamburger | |||||
}, | }, | ||||
methods: { | methods: { | ||||
// 获取当前语言环境 | // 获取当前语言环境 | ||||
@@ -200,6 +200,7 @@ export default { | |||||
}) | }) | ||||
this.$router.replace({ name: 'home' }) | this.$router.replace({ name: 'home' }) | ||||
this.$router.replace({ name: 'sys-log-login' }) | |||||
}) | }) | ||||
.catch(err => { | .catch(err => { | ||||
this.$message({ | this.$message({ | ||||