<template>
  <div class="nav-box">
    <div class="text">华际科技官网系统</div>
    <el-menu
    background-color="#304056"
    text-color="#ffffff"
    active-text-color="#409eff"
    :default-active="$route.path"
    router>
        <el-menu-item v-for="(item,i) in list" :key="i"
        :index="item.path"><i :class="`el-icon-`+ item.meta.icon"></i>{{item.meta.title}}</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        list:[],
      }
    },

    created() {
      this.$router.options.routes.forEach((v,i)=>{
        if(v.name == 'AdminHome'){
          this.list = v.children
        }
      })
    },
  }
</script>

<style scoped lang="scss">
  .nav-box{
    width: 180px;
    height: 100vh;
    background: #304056;
    .text{
      width: 180px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      letter-spacing: 1px;
      font-weight: 600;
      i{
        margin-right: 5px;
      }
    }
    :deep(.el-menu-item){
        width: 180px;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
      }
  }
</style>
