if (item.secondNav) {
item.navSecond.forEach(itemT => {
if (itemT.path === path) {
this.title = itemT.name
if (itemT.name === this.title) {
item.isActive = true // 当属于子菜单时，父菜单高亮
}
}
})
} else {
if (item.path === path) {
this.title = item.name
item.isActive = true
}
}
})
},
components: {
YFooter,
YHeader
},
watch: {
$route (to) {
let path = to.path.split('/')[2] this.nav.forEach(item => {
item.isActive = false
if (item.secondNav) {
item.navSecond.forEach(itemT => {
if (itemT.path === path) {
this.title = itemT.name
if (itemT.name === this.title) {
item.isActive = true // 当属于子菜单时，父菜单高亮
}
}
})
} else {
if (item.path === path) {
this.title = item.name
item.isActive = true
}
}
})
}
}
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../assets/style/mixin";
.main {
background: #fff;
color: #000;
}
a {
color: #000;
}
.w {
padding-top: 40px;
}
.img-code {
margin: 0px auto 12px;
}
.content {
display: flex;
height: 100%;
font-size: 16px;
}
.sidebar-bottom {
margin-top: 20px;
padding: 16px;
}
.content-center {
text-align: center;
}
.account-sidebar {
width: 210px;
border-radius: 6px;
.account-nav {
padding: 15px 0;
.active {
color: #0156AC;
}
.active a{
color: #0156AC;
}
li:hover {
a{
color: #0156AC;
}
}
li {
position: relative;
line-height: 48px;
.account-nav-primary {
padding: 0px 20px;
height: 48px;
span {
float: left;
}
i {
float: right;
line-height: 48px;
font-size: 14px;
}
}
.account-nav-second {
li {
list-style: disc;
list-style-position: inside;
height: 48px;
padding: 0 26px;
text-align: left;
color: #5B6976;
cursor: pointer;
span {
margin-left: -14px;
color: #A9B2BC;
}
&:hover{
color: #0156AC;
span {
color: #0156AC;
}
}
}
.active {
color: #0156AC;
span {
color: #0156AC;
}
}
}
a {
display: block;
}
&.current {
a {
position: relative;
z-index: 1;
height: 50px;
background-color: #98AFEE;
line-height: 50px;
color: #FFF;
}
}
}
}
}
.account-content {
margin-left: 24px;
flex: 1;
}
</style>
效果图：
