baozhida-smart-distribution/src/views/common/topNav.vue

<template>
  <div class="card_head">
    <el-image style="height: 35px;width: 35px;flex: none;" :src="require('@/assets/logo3.png')"></el-image>
    <div class="head_title">智配送安全追溯AI管理平台</div>
    <!-- <i class="card_unpack" :class="iconFlag ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="getUnpack"></i> -->
    <div style="width: 1200px;flex: none;margin-left: 20px;">
      <el-menu mode="horizontal" :default-active="$route.path" class="el-menu-vertical-demo" router @open="handleOpen"
        @close="handleClose">
        <template v-for="menu in menus">
          <template v-if="menu.children && menu.children.length > 0">
            <el-submenu :index="menu.path" :key="menu.name">
              <template slot="title">
                <i :class="menu.meta.icon" class="menu_icon iconfont"></i>
                <span>{{ menu.meta.title }}</span>
              </template>
              <template v-for="subMenu in menu.children">
                <el-menu-item :index="subMenu.path" :key="subMenu.name">
                  <i :class="subMenu.meta.icon" class="menu_icon iconfont"></i>
                  <span slot="title">{{ subMenu.meta.title }}</span>
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="menu.path" :key="menu.name">
              <i :class="menu.meta.icon" class="menu_icon iconfont"></i>
              <span slot="title">{{menu.meta.title}}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TopNav',
    props: {
      iconFlag: {
        type: Boolean,
        default: () => false,
      },
      menus: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {

      }
    },
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
        this.$router.push(key)
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      getUnpack() {
        this.$emit('getUnpack', this.iconFlag)
      },
    },
  }
</script>

<style lang="scss">
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
    background-color: unset;
    color: #409EFF;
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: #409EFF;

    .menu_icon {
      color: #409EFF;
    }
  }

  .el-submenu__title i {
    color: #ffffff;
  }

  .el-menu--horizontal>.el-submenu:focus .el-submenu__title,
  .el-menu--horizontal>.el-submenu:hover .el-submenu__title {
    color: #ffffff;
  }

  .el-menu--horizontal .el-menu .el-menu-item,
  .el-menu--horizontal .el-menu .el-submenu__title {
    color: #ffffff;
  }

  .el-menu--horizontal .el-menu .el-menu-item.is-active,
  .el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title {
    color: #409EFF;
  }

  // 选中样式
  .el-menu--horizontal>.el-menu-item.is-active {
    position: relative !important;
    border-bottom: unset;
    color: #ffffff;
    overflow: hidden;
    background-image: linear-gradient(to top, rgba(23, 77, 135, .25), rgba(64, 158, 255, .3), rgba(64, 158, 255, .09));
  }

  .el-menu--popup {
    padding: unset;
    background-image: linear-gradient(to top, rgba(28, 59, 91, 0.8) 0%, rgba(28, 59, 91, 0.8) 100%);
    border: 1px solid #409EFF;
    position: relative;
  }

  .el-menu--horizontal .el-menu .el-menu-item,
  .el-menu--horizontal .el-menu .el-submenu__title {
    background-color: unset;
  }

  .el-menu--horizontal>.el-menu-item.is-active::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: calc(50% - 30px);
    right: 0;
    height: 40px;
    width: 60px;
    filter: blur(1em);
    background-image: radial-gradient(circle, #afe9ff, #409EFF, rgba(64, 158, 255, .5));
  }

  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
    position: relative !important;
    border-bottom: unset;
    color: #ffffff;
    overflow: hidden;
    background-image: linear-gradient(to top, rgba(64, 158, 255, .5), rgba(64, 158, 255, .3), rgba(64, 158, 255, .2));
  }

  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: calc(50% - 30px);
    right: 0;
    height: 40px;
    width: 60px;
    filter: blur(1em);
    background-image: radial-gradient(circle, #afe9ff, #409EFF, rgba(64, 158, 255, .5));
  }

  .el-dropdown {
    color: #ffffff;
  }

  .el-menu--horizontal>.el-menu-item {
    color: #ffffff;
    height: 58px;
  }

  .el-menu-item i {
    color: #ffffff;
  }

  .el-menu--horizontal>.el-submenu .el-submenu__title {
    color: #ffffff;
  }

  .el-menu.el-menu--horizontal {
    border: unset !important;
  }

  .el-menu {
    background-color: unset !important;
  }

  .card_head {
    display: flex;
    align-items: center;
  }

  .head_title {
    flex: none;
    font-weight: bold;
    font-size: 16px;
    // color: rgb(35, 49, 105);
    margin-left: 10px;
    background-image: -webkit-linear-gradient(top, #ffffff, #ffffff, #ffffff, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .card_unpack {
    cursor: pointer;
    font-size: 25px;
    margin-left: 10px;
  }

  .menu_icon {
    margin-right: 6px;
  }
</style>