jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index.vue

<template>
  <nav class="header">
    <Clock class="time"></Clock>
    <!-- 左侧菜单 -->
    <CustomMenu :menuData="menuLeft" @onChange="onChange" prefix="l" :activeIndex="activeIndex" class="leftMenu">
    </CustomMenu>
    <!-- 中间标题 -->
    <div class="vis-title">
      <img class="logo-img" src="../../images/logo.png" />
      <img class="title-img" src="../../images/title.png" />
    </div>
    <!-- 右侧菜单 -->
    <CustomMenu :menuData="menuRight" @onChange="onChange" prefix="r" :activeIndex="activeIndex" class="rightMenu">
    </CustomMenu>
    <div class="user">
      <img class="icon_001" src="../../images/icon/icon_001.png" />
      <span class="name">admin</span>
      <img class="icon_002" src="../../images/icon/icon_002.png" />
      <span class="icon">|</span>
      <img class="icon_003" src="../../images/icon/icon_003.png" />
      <span class="icon">|</span>
      <img class="icon_004" src="../../images/icon/icon_004.png" />
    </div>
  </nav>
</template>
<script>
import menuData from "@/common/menuData";
import CustomMenu from "./CustomMenu.vue";
import Clock from "./Clock.vue";
/**
 *
 */

export default {
  name: "HeaderMenu",
  data() {
    return {
      menuLeft: [],
      menuRight: [],
      activeIndex: "l-0"
    };
  },
  components: {
    CustomMenu,
    Clock
  },
  emit: ["change"],
  created() {
    this.menuLeft = [];
    this.menuRight = [];
    menuData.forEach(item => {
      if (item.position == "left") {
        this.menuLeft.push(item);
      } else {
        this.menuRight.push(item);
      }
    });
    // this.changeMenu(this.menuLeft[0]);
  },
  methods: {
    onChange(item, activeIndex) {
      this.activeIndex = activeIndex;
      console.log(this.activeIndex);
      // this.$router.push(item.name);
      this.$emit("onChange", item)
    }
  }
};
</script>
<style lang="less">
.header {
  display: flex;
  //   justify-content: space-between;
  align-items: center;
  background: url("../../images/header-bg.png") no-repeat;
  background-size: 100% 100%;

  .time {
    width: 120px;
    margin-right: 20px;
  }



  .vis-title {
    flex: 1;
    width: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo-img {
      display: inline-block;
      //   margin-left: 100px;
      width: 48px;
      height: 37px;
    }

    .title-img {
      display: inline-block;
      margin-left: 10px;
      width: 373px;
      height: 28px;
    }
  }

  .leftMenu {
    width: 560px;
  }

  .rightMenu {
    width: 500px;
  }

  .user {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    line-height: 16px;

    .name {
      display: inline-block;
      margin: 0 10px;
    }

    .icon {
      display: inline-block;
      margin: 0 13px;
    }

    .icon-001 {
      display: inline-block;
      width: 12px;
      height: 14px;
    }

    .icon-002 {
      display: inline-block;
      width: 9px;
      height: 5px;
    }

    .icon-003 {
      display: inline-block;
      width: 18px;
      height: 16px;
    }

    .icon-004 {
      display: inline-block;
      width: 15px;
      height: 15px;
    }
  }
}
</style>