vue顶部菜单栏实现小结

<!--home-->
<template>
  <div class="homeContainer">
    <div
      style="
        display: flex;
        height: 60px;
        line-height: 60px;
        align-items: center;
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          margin-left: 30px;
          cursor: pointer;
        "
      >
        <img
          src="http://rivermap-file.oss-cn-hangzhou.aliyuncs.com/lj/WeServerManage/logo-weserver.png"
          style="width: 40px; height: 40px; margin-right: 10px"
        />
        <div>xxx平台</div>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          margin-left: auto;
          margin-right: 20px;
        "
      >
        <a href="https://www.baidu.com/" rel="external nofollow"  rel="external nofollow"  target="_blank">
          <li>外链百度</li>
        </a>
        <li>菜单1</li>
        <el-avatar
          size="small"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png "
          style="margin: 0 5px"
        ></el-avatar>
        <li>admin</li>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "home",
  props: {},
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.homeContainer {
  background-color: #017bc4;
  li {
    list-style-type: none;
    padding: 0 10px;
    cursor: pointer;
    &:hover {
      background-color: rgba(0, 0, 0, 0.124);
    }
  }
}
</style>

<!--home-->
<template>
  <div class="homeContainer">
    <div
      style="
        display: flex;
        height: 60px;
        line-height: 60px;
        align-items: center;
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          margin-left: 30px;
          cursor: pointer;
        "
      >
        <img
          src="http://rivermap-file.oss-cn-hangzhou.aliyuncs.com/lj/WeServerManage/logo-weserver.png"
          style="width: 40px; height: 40px; margin-right: 10px"
        />
        <div>xxx平台</div>
      </div>
      <el-menu
        default-active="2-4-2"
        mode="horizontal"
        background-color="#017bc4"
        text-color="white"
        active-text-color="orange"
        style="margin-left: 30px"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">测试</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
      </el-menu>
      <div class="header_right">
        <a href="https://www.baidu.com/" rel="external nofollow"  rel="external nofollow"  target="_blank">
          <li>外链百度</li>
        </a>
        <li>菜单1</li>
        <el-avatar
          size="small"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png "
          style="margin: 0 5px"
        ></el-avatar>
        <li>admin</li>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "home",
  props: {},
  data() {
    return {
      activeIndex2: "1",
    };
  },
  methods: {},
};
</script>
<style>
/* 取消过渡效果 */
.el-menu-item {
  transition-duration: 0s;
}
</style>
<style lang="scss" scoped>
.homeContainer {
  background-color: #017bc4;
  .header_right {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
    li {
      list-style-type: none;
      padding: 0 10px;
      cursor: pointer;
      &:hover {
        background-color: rgba(0, 0, 0, 0.205);
      }
    }
  }
}
</style>