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

<template>
  <div class="header">
    <div class="headerNavi">
      <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>
      <UserArea class="topButton"></UserArea>
    </div>
    <RecentPages class="recent"></RecentPages>
  </div>
</template>
<script>
import menuData from "@/common/menuData";
import CustomMenu from "./CustomMenu.vue";
import Clock from "./Clock.vue";
import UserArea from './UserArea.vue'
import RecentPages from "../RecentPages/index.vue";

export default {
  name: "HeaderMenu",
  data() {
    return {
      menuLeft: [],
      menuRight: [],
      activeIndex: "l-0"
    };
  },
  components: {
    CustomMenu,
    Clock,
    UserArea,
    RecentPages
  },
  emit: ["change"],
  created() {
    this.activeIndex = this.$route.meta.menuId;
    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]);
  },
  mounted(){
    // this.activeIndex = "l_2-0-3";
    // console.log(this.activeIndex);
  },
  methods: {
    onChange(item, activeIndex) {
      this.activeIndex = activeIndex;
      // this.$router.push(item.name);
      this.$emit("onChange", item)
    }
  }
};
</script>
<style lang="less" scoped>
.header{
  .headerNavi { height: 68px;
    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;
    }

    .topButton{
      width: 180px;
    }

    .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;
      }
    }
  }
  .recent{
    height: 32px;
  }
}
</style>