<template>
  <div class="menu-bottomBar">
    <el-menu
    class="menu-light"
    mode="horizontal"
    :default-active="$route.path"
    :router="true"
    background-color="#fff"
    text-color="#4F5869"
    active-text-color="#435DEB"
    >
       <template v-for="(route, index) in getRouters"  >
            <topBarItem  v-if="!route.hidden" :key="index"  :item="route" :basePath="route.path"/>
       </template>
    </el-menu>
  </div>
</template>
<script>
import topBarItem from './bottomBarItem.vue'
  export default {
    components:{
        topBarItem
    },
    computed: {
      getRouters() {
        return this.$router.options.routes
      },
      key() {
        return this.$route.path
      }
    },
    methods: {
     
    }
  }
</script>
<style lang="scss" scoped>
.menu-bottomBar >>>{
  // margin-bottom: 10px;
  .el-menu--horizontal{
    >.el-menu-item{
      height: 50px;
      line-height: 50px;
    }
    >.el-submenu .el-submenu__title{
      height: 50px;
      line-height: 50px;
    }
  }
  .menu-bottomBar-icon{
    margin-right: 10px;
  }
}
</style>