You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.8 KiB
115 lines
2.8 KiB
<!-- @format -->
|
|
<template>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a
|
|
class="nav-item h0"
|
|
:class="{ 'nav-item-current': isRouteLinkActive('/login') }"
|
|
href="/nervui-main/dashboard">
|
|
<span class="flag"></span>
|
|
<i class="iconfont"></i>
|
|
<span class="nav-title h5">总览</span>
|
|
</a>
|
|
</li>
|
|
<li v-for="item in appRecords" :key="item.index">
|
|
<a class="nav-item h0" :href="item.url" v-if="item.isRedirect">
|
|
<span class="flag"></span>
|
|
<i class="iconfont" v-html="item.icon"></i>
|
|
<span class="nav-title h5">{{ item.label }}</span>
|
|
</a>
|
|
|
|
<a
|
|
class="nav-item h0"
|
|
v-if="!item.isRedirect"
|
|
:class="{ 'nav-item-current': isRouteLinkActive(item.url) }">
|
|
<span class="flag"></span>
|
|
<i class="iconfont" v-html="item.icon"></i>
|
|
<span class="nav-title h5">{{ item.label }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
export default defineComponent({
|
|
name: 'NsSider',
|
|
components: {},
|
|
props: {
|
|
appRecords: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
methods: {
|
|
isRouteLinkActive(routerLink: string) {
|
|
let module = routerLink.split('/')[1];
|
|
let uri = window.location.pathname;
|
|
return uri.indexOf(module) != -1;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less">
|
|
nav {
|
|
background: @layout-nav-background;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 48px;
|
|
bottom: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
width: @nav-width;
|
|
z-index: 99;
|
|
transition: width 0.2s;
|
|
ul {
|
|
padding: 0;
|
|
li {
|
|
list-style: none;
|
|
.nav-item {
|
|
display: inline-block;
|
|
width: 200px;
|
|
position: relative;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
color: @layout-nav-color;
|
|
.iconfont {
|
|
display: inline-block;
|
|
// vertical-align: middle;
|
|
width: 48px;
|
|
text-align: center;
|
|
font-family: iconfont !important;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
line-height: 48px;
|
|
// color: #52616f;
|
|
}
|
|
&:hover {
|
|
background: @layout-nav-hover;
|
|
}
|
|
}
|
|
.nav-item-current {
|
|
background: @layout-nav-hover;
|
|
color: @layout-nav-check-color !important;
|
|
.iconfont {
|
|
color: #00acff !important;
|
|
}
|
|
.flag {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
border-left: 2px solid #00acff;
|
|
width: 2px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
nav:hover {
|
|
width: @nav-open-width;
|
|
}
|
|
</style>
|
|
|