135 lines
2.6 KiB
Vue
135 lines
2.6 KiB
Vue
<!-- -->
|
|
<template>
|
|
<div class="navBar">
|
|
<transition name="fade" mode="out-in">
|
|
<ul v-if="isNav" class='navBar-left'>
|
|
<li
|
|
v-for="(i,index) in routeList"
|
|
:key="index"
|
|
:class="{active:title.includes(i.name)}"
|
|
@click="handleToRouter(i.name)"
|
|
>
|
|
{{i.meta.title}}</li>
|
|
</ul>
|
|
<nav-header v-if="!isNav"/>
|
|
<!-- <div class="noNav" v-if="!isNav">
|
|
<div class="noNav-left">
|
|
<i @click="handleBack" class="el-icon-arrow-left"></i>
|
|
</div>
|
|
<div>{{name}}</div>
|
|
</div> -->
|
|
</transition>
|
|
<div class="navBar-right" v-if="isNav">
|
|
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import routeList from '@/router/kpi_route'
|
|
import NavHeader from './NavHeader'
|
|
export default {
|
|
name: 'NavBar',
|
|
data () {
|
|
return {
|
|
routeList: routeList[0].children.filter(i => i.meta.isNav),
|
|
activeIndex: '1',
|
|
activeIndex2: '1'
|
|
}
|
|
},
|
|
components: {
|
|
NavHeader
|
|
},
|
|
computed: {
|
|
isNav () {
|
|
return !!this.$route.meta.isNav
|
|
},
|
|
title () {
|
|
return this.$route.fullPath
|
|
}
|
|
},
|
|
beforeMount () {},
|
|
mounted () {
|
|
},
|
|
methods: {
|
|
handleToRouter (item) {
|
|
if (this.title.includes(item)) return
|
|
this.$router.push({name: item})
|
|
},
|
|
handleSelect (key, keyPath) {
|
|
console.log(key, keyPath)
|
|
}
|
|
},
|
|
watch: {
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
.navBar::before{
|
|
content: '';
|
|
width: 100%;
|
|
height: 4px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.navBar{
|
|
position: relative;
|
|
z-index: 4;
|
|
width: 100%;
|
|
height: @headerHeight;
|
|
box-sizing: border-box;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #ffffff;
|
|
padding: 0 40px;
|
|
box-shadow: 0 1px 6px 0 rgba(0,0,0,.12), 0 1px 6px 0 rgba(0,0,0,.12);
|
|
&-right{
|
|
img{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
&-left{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
li{
|
|
padding-right: 20px;
|
|
cursor:pointer;
|
|
}
|
|
}
|
|
}
|
|
.active{
|
|
color: #09f;
|
|
}
|
|
|
|
</style>
|
|
<style lang='less' scoped>
|
|
.appamin{
|
|
background: transparent;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
padding: 60px 80px 0;
|
|
}
|
|
|
|
</style>
|
|
<style lang="less">
|
|
.fade-enter {
|
|
opacity: 0;
|
|
transform: translateX(10px);
|
|
}
|
|
.fade-leave{
|
|
transform: translateX(10px);
|
|
opacity: 1;
|
|
}
|
|
.fade-leave-active,.fade-enter-active {
|
|
transition:all 0.1s;
|
|
}
|
|
</style>
|