<template>
  <div>
    <div class="nav-list">
      <el-row v-for="menu in menus" :key="menu.name">
        <el-col :span="3" class="nav-title">{{ menu.title }}</el-col>
        <el-col :span="21">
          <router-link :to="submenu.path" v-for="submenu in menu.child" :key="submenu.path" class="nav-item">
            {{submenu.title}}
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { ElRow, ElCol } from 'element-plus'
import menus from '../config/menu'

@Options({
  name: 'Welcome',
  components: { ElRow, ElCol }
})
export default class Welcome extends Vue {
  menus = menus
}
</script>
<style lang="less" scoped>
.nav-list {
  .nav-title {
    font-size: 16px;
    line-height: 66px;
    text-align: right;
    padding-right: 20px;
  }
  .nav-item {
    display: inline-block;
    width: 200px;
    font-size: 16px;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    text-decoration: none;
    color: var(--el-color-primary);
  }
}
</style>