web-center/src/layout/index/menuInfo.vue

<template>
  <div id="menuInfo">
    <el-row>
      <el-col :span="24" :style="`background-color:${backColor}`">
        <div class="w_1200">
          <el-menu
            :default-active="activeIndex1"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#0457c7"
            text-color="#fff"
            active-text-color="#fff"
            :router="true"
          >
            <el-menu-item index="/">网站首页</el-menu-item>
            <!-- <el-menu-item index="/member">党员之家</el-menu-item> -->
            <template>
              <el-submenu index="/jobs">
                <template slot="title">
                  {{ jobsMenu.title }}
                </template>
                <el-menu-item v-for="(sub, subIndex) in jobsMenu.children" :key="subIndex" :index="sub.path">{{ sub.title }}</el-menu-item>
              </el-submenu>
            </template>
            <template v-for="(item, index) in menuList">
              <el-submenu :index="`${index}`" :key="index" v-if="item.type !== 'url' && item.type !== 'content'">
                <template slot="title">
                  {{ item.title }}
                </template>
                <template v-for="(sub, subIndex) in item.children">
                  <el-menu-item :index="sub.path" :key="subIndex" v-if="sub.type !== 'url'">{{ sub.title }}</el-menu-item>
                  <el-menu-item :index="``" :key="subIndex" @click="turnTo(sub.url)" v-else> {{ sub.title }}</el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item v-else-if="item.type === 'content'" :index="item.path" :key="index">{{ item.title }}</el-menu-item>
              <el-menu-item v-else :index="``" :key="index" @click="turnTo(item.url)">{{ item.title }}</el-menu-item>
            </template>
          </el-menu>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { masterMenu } from '@/config/jobs-menu';
export default {
  name: 'menuInfo',
  props: {
    menuList: null,
    backColor: null,
  },
  components: {},
  data: () => ({
    activeIndex1: '1',
    jobsMenu: masterMenu,
  }),
  created() {},
  computed: {},
  methods: {
    turnTo(url) {
      window.open(url);
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
/deep/.el-menu--horizontal > .el-menu-item {
  height: 50px;
  line-height: 50px;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 50px;
  line-height: 50px;
}
/deep/.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
}
/deep/.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
  background-color: #1b6edd5f !important;
}
</style>