更新

src/components/memberDetail.vue

@@ -31,7 +31,7 @@
 
 <script>
 import top from '@/layout/index/top.vue';
-import menuInfo from '@/layout/index/menuInfo.vue';
+import menuInfo from '@/layout/index/menuInfos.vue';
 import banner from '@/layout/member/banner.vue';
 import listLeft from '@/layout/list/listLeft.vue';
 import detailInfo from '@/layout/detail/detail.vue';

src/components/memberList.vue

@@ -31,7 +31,7 @@
 
 <script>
 import top from '@/layout/index/top.vue';
-import menuInfo from '@/layout/index/menuInfo.vue';
+import menuInfo from '@/layout/index/menuInfos.vue';
 import banner from '@/layout/member/banner.vue';
 import listLeft from '@/layout/list/listLeft.vue';
 import listRight from '@/layout/list/listRight.vue';

src/layout/index/menuInfo.vue

@@ -7,7 +7,7 @@
             :default-active="activeIndex1"
             class="el-menu-demo"
             mode="horizontal"
-            :style="`background-color:${backColor}`"
+            background-color="#0457c7"
             text-color="#fff"
             active-text-color="#fff"
             :router="true"
@@ -26,13 +26,6 @@
               <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-item index="2">政策法规</el-menu-item>
-            <el-menu-item index="3">网上大厅</el-menu-item>
-            <el-menu-item index="4">招聘信息</el-menu-item>
-            <el-menu-item index="5">就业指导</el-menu-item>
-            <el-menu-item index="6">党员之家</el-menu-item>
-            <el-menu-item index="7">调查问卷</el-menu-item>
-            <el-menu-item index="8">关于我们</el-menu-item> -->
           </el-menu>
         </div>
       </el-col>

src/layout/index/menuInfos.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="menuInfos">
+    <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="#c81b15"
+            text-color="#fff"
+            active-text-color="#fff"
+            :router="true"
+          >
+            <el-menu-item index="/">首页</el-menu-item>
+            <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>
+export default {
+  name: 'menuInfos',
+  props: {
+    menuList: null,
+    backColor: null,
+  },
+  components: {},
+  data: () => ({
+    activeIndex1: '1',
+  }),
+  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: 40px;
+  line-height: 40px;
+}
+/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
+  height: 40px;
+  line-height: 40px;
+}
+/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>