hkyy/admin-frame/naf/frame/header/navbar.vue.bak

<template>
  <div class="banner">
    <el-menu class="nav-menu" mode="horizontal" background-color="transparent" text-color="#fff" active-text-color="#ffd04b">
      <naf-menu-item
        v-for="(item, idx) in menuItems"
        :key="idx"
        :index="idx.toString()"
        :title="item.title"
        :options="item.options"
        :children="item.children"
        :target="item.target"
        :prefix="routerPrefix"
      >
      </naf-menu-item>
    </el-menu>
    <naf-user />
  </div>
</template>
<script>
import NafMenuItem from '../menu-item';
import NafUser from './user';

export default {
  components: {
    NafMenuItem,
    NafUser,
  },
  props: {
    menuItems: Array,
    routerPrefix: { type: String, default: '' },
  },
};
</script>
<style lang="less" scoped>
.banner {
  // flex: 1;
  // display: flex;
  // flex-direction: row;
  padding: 0 20px;
  width: 58%;
  clear: both;
}
.nav-menu {
  // flex: 1;
  float: left;
  border-bottom: 0;
  background: none;
  height: 70%;
  top: 0;
}
.el-menu-item {
  height: 100%;
  line-height: 6.8rem;
  font-size: 1rem;
  font-weight: 600;
}
.el-menu-item:hover {
  background: #21c3f2 !important;
}
</style>