web-portal/src/layout/layout-part/top-menu.vue

<template lang="html">
  <div id="menus">
    <el-col :span="24" class="menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#850000"
        text-color="#fff"
        active-text-color="#fff"
        :router="true"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            学院概括
          </template>
          <el-menu-item index="2-1">学院简介</el-menu-item>
          <el-menu-item index="2-2">部门概括</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            创新创业
          </template>
          <el-menu-item index="3-1">创业法规</el-menu-item>
          <el-menu-item index="3-2">创业培训</el-menu-item>
          <el-menu-item index="3-3">创业案例</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            新闻公告
          </template>
          <el-menu-item index="4-1">最新新闻</el-menu-item>
          <el-menu-item index="4-2">就业新闻</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            招聘信息
          </template>
          <el-menu-item index="/talk/list/in">校内宣讲会</el-menu-item>
          <el-menu-item index="/talk/list/out">校外宣讲会</el-menu-item>
          <el-menu-item index="/jobfair/list/in">校内双选会</el-menu-item>
          <el-menu-item index="/jobfair/list/out">校外双选会</el-menu-item>
          <el-menu-item index="/jobinfo/list">在线招聘</el-menu-item>
          <el-menu-item index="/jobs/list/official">正式岗位</el-menu-item>
          <el-menu-item index="/jobs/list/internship">实习岗位</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            生源信息
          </template>
          <el-menu-item index="6-1">学院专业</el-menu-item>
          <el-menu-item index="6-2">生源速览</el-menu-item>
        </el-submenu>
        <el-menu-item index="7">政策法规</el-menu-item>
        <el-submenu index="8">
          <template slot="title">
            服务指南
          </template>
          <el-menu-item index="8-1">办事流程</el-menu-item>
          <el-menu-item index="8-2">常用下载</el-menu-item>
          <el-menu-item index="8-3">常见问题解答</el-menu-item>
        </el-submenu>
        <el-submenu index="9">
          <template slot="title">
            就业学生团队
          </template>
          <el-menu-item index="9-1">就业形象大使</el-menu-item>
          <el-menu-item index="9-2">就业助理团队</el-menu-item>
          <el-menu-item index="9-3">创新创业协会</el-menu-item>
        </el-submenu>
        <el-submenu index="10">
          <template slot="title">
            联系我们
          </template>
          <el-menu-item index="10-1">联系我们</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'menus',
  data: () => ({
    activeIndex: '1',
  }),
  methods: {},
};
</script>

<style lang="less" scoped>
.menu {
  position: relative;
  height: 40px;
}
/deep/.el-menu--horizontal > .el-menu-item {
  height: 40px;
  line-height: 40px;
  width: 110px;
  text-align: center;
}
.el-submenu {
  width: 110px;
  text-align: center;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  display: none;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 40px;
  line-height: 40px;
}
/deep/.el-menu--popup {
  min-width: 110px !important;
}
/deep/.el-menu--popup-bottom-start {
  margin-top: 0px;
}
/deep/.menu .el-menu.el-menu--horizontal {
  border-bottom: none;
  background: #850000;
}
/deep/.el-menu--horizontal > .el-menu-item.is-active {
  color: #fff;
  border-bottom: none;
}
</style>