<template> <div class="left-menu"> <img class="logo" :src="iconUrl"/> <div class="menu-block"> <div class="menu-content" v-for="data in menuList" @click="toPath(data)"> <i :class="'iconfont '+data.icon"></i> {{data.value}} </div> </div> </div> </template> <script> import iconUrl from '../../assets/logos.png' export default { name: "leftMenu", data(){ return { iconUrl:iconUrl, menuList:this.$store.state.menuList } }, methods:{ changeMenuType:function(){ this.$store.state.menuType = !this.$store.state.menuType }, toPath:function (data) { this.$router.push({name:data.routerName}) if(this.$store.state.openedTab.indexOf(data) < 0){ this.$store.state.openedTab.push(data); } } }, } </script> <style scoped lang="less"> @import "../../util/public"; .left-menu{ height: 100%; user-select:none; transition: all .5s; position: relative; background: @bg-b; font-size: 12px; text-align: center; color: @main-font-color; .logo{ margin-top: 20px; width: 80%; } .menu-block { padding-top: 20px; .menu-content { padding: 15px 0; cursor: pointer; transition: all .3s; &:hover { background-color: @gold-color-light; color: @black-line; } i { font-size: 24px; margin-bottom: 10px; display: block; } } } } </style>