<template>
  <div
    ref="navbar"
    class="navbar"
    :style="designStyle"
    :class="['ec-navbar', 'ec-navbar--' + navbarLayoutType]"
  >
    <!--    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
    <div
      class="ec-navbar__body clearfix"
      style="overflow:hidden"
    >
      <el-menu
        class="ec-navbar__menu left"
        mode="horizontal"
      >
        <el-menu-item
          class="ec-navbar__switch"
          @click="toggleSideBar"
        >
          <i :class="!sidebar.opened ? 'fa fa-indent' : 'fa fa-outdent'" />
        </el-menu-item>
        <!--        <el-menu-item @click="refresh">-->
        <!--          <i :class="'el-icon-refresh-right'" />-->
        <!--        </el-menu-item>-->
      </el-menu>
      <breadcrumb
        v-if="defaultLayout === 'left'"
        id="breadcrumb-container"
        class="breadcrumb-container"
      />

      <div
        id="el-menu-horizontal-warp"
        class="el-menu-horizontal-warp"
      >
        <el-scrollbar
          ref="elMenuHorizontalScrollRef"
          @wheel.native.prevent="onElMenuHorizontalScroll"
        >
          <el-menu
            v-if="defaultLayout === 'top'"
            ref="topMenu"
            class="ec-navbar__menu ele-header-nav ele-scrollbar-hide"
            :default-active="topMenuActiveIndex"
            mode="horizontal"
          >
            <template v-for="menu in topMenuList">
              <el-menu-item
                v-if="menu.isShow"
                :key="menu.id"
                :ref="menu.id"
                :collapse="true"
                class="el_menu_item"
                :index="menu.id"
                :menu="menu"
                @click="showLeftMenu(menu, '111')"
              >
                <!--          <i :class="`${menu.meta && menu.meta.icon || ''} ec-sidebar__menu-icon`" style="display: inline-block!important;" />-->
                <item
                  v-if="menu.meta"
                  :icon="menu.meta && menu.meta.icon"
                  icon-class="ec-sidebar__menu-icon"
                  :title="menu.meta.title"
                />
                <!--          {{ menu.meta && menu.meta.title || menu.name }}-->
              </el-menu-item>
            </template>

            <el-submenu v-if="isShowMore && topMenuList">
              <template slot="title">{{ $t('ec.navbar.more') }}</template>
              <template v-for="item in topMenuList">
                <el-menu-item
                  v-if="!item.isShow"
                  :key="item.id"
                  :ref="item.id"
                  class="more"
                  :index="item.id"
                  :menu="item"
                  @click="showLeftMenu(item, '222')"
                >
                  <item
                    v-if="item.meta"
                    :icon="item.meta && item.meta.icon"
                    icon-class="ec-sidebar__menu-icon"
                    :title="item.meta.title"
                  />
                </el-menu-item>
              </template>
            </el-submenu>

            <el-submenu
              v-if="topHideMenuList.length !== 0"
              class="el-menu-item el_menu_item"
              index="2"
            >
              <template slot="title">{{ $t('ec.navbar.more') }}</template>
              <el-menu-item
                v-for="menu in topHideMenuList"
                :key="menu.id"
                :ref="menu.id"
                class="more"
                :index="menu.id"
                :menu="menu"
                @click="showLeftMenu(menu, '333')"
              >
                <item
                  v-if="menu.meta"
                  :icon="menu.meta && menu.meta.icon"
                  icon-class="ec-sidebar__menu-icon"
                  :title="menu.meta.title"
                />
              </el-menu-item>
            </el-submenu>

          </el-menu>
        </el-scrollbar>
      </div>

      <el-menu
        ref="right"
        class="ec-navbar__menu ec-navbar__menu--right"
        mode="horizontal"
      >
        <template v-if="device!=='mobile'">
          <el-menu-item
            v-for="menu in topFixedLeftMenuList"
            :key="menu.id"
            :menu="menu"
            @click="showLeftMenu(menu, '444')"
          >
            <!--          <i :class="`${menu.meta && menu.meta.icon || ''} ec-sidebar__menu-icon`" style="display: inline-block!important;" />-->
            <item
              v-if="menu.meta"
              :icon="menu.meta && menu.meta.icon"
              :type="menu.iconType"
              :title="menu.showName && menu.meta.title || ''"
            />
          </el-menu-item>

          <el-menu-item v-if="appLink">
            <el-dropdown
              class="qrcode-container"
              trigger="click"
            >
              <a class="text-white">
                <span>
                  <img
                    width="15px"
                    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjYgMjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI2IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI2LDEuOWMwLTAuMi0wLjEtMC4zLTAuMS0wLjVjLTAuMi0wLjctMC43LTEuMS0xLjQtMS4zQzI0LjMsMC4xLDI0LDAsMjMuOCwwYzAsMC0wLjEsMC0wLjEsMGgtMi45DQoJCQljMCwwLjEtMC4xLDAuMS0wLjEsMC4xYy0wLjEsMC0wLjIsMC0wLjIsMGMtMS4zLDAtMi41LDAtMy44LDBjMCwwLTAuMSwwLTAuMSwwYzAsMCwwLjEsMCwwLjEsMGMxLjMsMCwyLjUsMCwzLjgsMA0KCQkJYzAuMSwwLDAuMiwwLDAuMiwwYzAuMSwwLDAuMSwwLDAuMS0wLjFjMCwwLjEtMC4xLDAtMC4yLDBjLTEuMywwLTIuNiwwLTMuOSwwYy0wLjMsMC0wLjYsMC0wLjksMC4xYy0wLjQsMC4xLTAuNywwLjMtMSwwLjYNCgkJCWMtMC4zLDAuNC0wLjUsMC45LTAuNSwxLjRjMCwyLjQsMCw0LjcsMCw3LjFjMCwwLjMsMCwwLjYsMC4xLDAuOWMwLjEsMC40LDAuMywwLjgsMC42LDFjMC40LDAuMywwLjksMC41LDEuNCwwLjUNCgkJCWMyLjQsMCw0LjksMCw3LjMsMGMwLjMsMCwwLjYsMCwwLjktMC4xYzAuNi0wLjIsMS4xLTAuNSwxLjMtMS4yYzAuMS0wLjIsMC4xLTAuNCwwLjEtMC41YzAsMCwwLDAsMCwwTDI2LDEuOUMyNiwyLDI2LDEuOSwyNiwxLjl6DQoJCQkgTTE2LjQsMTEuN2MtMC4yLDAtMC40LDAtMC42LTAuMWMtMC42LTAuMi0xLTAuNS0xLjItMS4xYy0wLjItMC40LTAuMi0wLjktMC4yLTEuNGMwLTIuMywwLTQuNiwwLTYuOGMwLTAuMiwwLTAuNSwwLjEtMC43DQoJCQljMC4yLTAuNiwwLjUtMS4xLDEuMS0xLjNjMC4xLDAsMC4yLTAuMSwwLjMtMC4xYy0wLjEsMC0wLjIsMC0wLjMsMC4xYy0wLjYsMC4yLTEsMC43LTEuMSwxLjNjLTAuMSwwLjItMC4xLDAuNS0wLjEsMC43DQoJCQljMCwyLjMsMCw0LjYsMCw2LjhjMCwwLjUsMCwwLjksMC4yLDEuNGMwLjIsMC42LDAuNiwwLjksMS4yLDEuMUMxNiwxMS42LDE2LjIsMTEuNywxNi40LDExLjdMMTYuNCwxMS43eiBNMjQuNiw5LjcNCgkJCWMwLDAuNC0wLjMsMC42LTAuNywwLjZjLTEuMywwLTIuNSwwLTMuOCwwaC0zLjdjLTAuMSwwLTAuMywwLTAuNC0wLjFjLTAuMy0wLjEtMC4zLTAuNC0wLjMtMC42YzAtMS4zLDAtMi41LDAtMy44VjIuMg0KCQkJYzAtMC4yLDAtMC40LDAuMi0wLjZjMC4yLTAuMSwwLjMtMC4xLDAuNS0wLjFjMi41LDAsNSwwLDcuNSwwYzAuMSwwLDAuMywwLDAuNCwwLjFjMC4yLDAuMSwwLjQsMC4zLDAuNCwwLjUNCgkJCUMyNC42LDQuNiwyNC42LDcuMSwyNC42LDkuN3ogTTEwLjksMC40QzEwLjUsMC4yLDEwLjEsMC4xLDkuNiwwYy0wLjEsMC0wLjIsMC0wLjIsMGMwLDAsMCwwLDAsMEg2LjVjMCwwLDAsMCwwLDANCgkJCUM2LjQsMCw2LjMsMCw2LjMsMEM1LDAsMy44LDAsMi41LDBDMi40LDAsMi4zLDAsMi4yLDBjMCwwLDAsMC0wLjEsMEMyLjEsMCwyLDAsMS45LDBjLTAuNiwwLTEuMiwwLjMtMS41LDAuOEMwLjEsMS4xLDAsMS41LDAsMS44DQoJCQljMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDB2Ny45YzAuMSwwLDAuMSwwLDAuMSwwLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDBjMCwwLjMsMC4xLDAuNiwwLjIsMC45YzAuMywwLjcsMSwxLjEsMS43LDEuMQ0KCQkJYzIuNSwwLDQuOSwwLDcuNCwwYzAuMywwLDAuNiwwLDAuOS0wLjFjMC45LTAuMiwxLjQtMC45LDEuNC0xLjhjMC0yLjUsMC01LDAtNy41YzAtMC4yLDAtMC4zLDAtMC41QzExLjYsMS4yLDExLjMsMC44LDEwLjksMC40eg0KCQkJIE0xLjQsMmMwLTAuMywwLjItMC41LDAuNS0wLjZjMC4xLDAsMC4zLDAsMC40LDBoNy4yYzAuMSwwLDAuMywwLDAuNCwwLjFjMC4yLDAuMSwwLjQsMC4yLDAuNCwwLjV2Ny43YzAsMC4zLTAuMSwwLjUtMC40LDAuNQ0KCQkJYy0wLjEsMC0wLjMsMC4xLTAuNCwwLjFjLTEuMiwwLTIuNSwwLTMuNywwYy0xLjIsMC0yLjUsMC0zLjcsMGMtMC4yLDAtMC40LDAtMC42LTAuMkMxLjQsMTAsMS40LDkuOSwxLjQsOS43DQoJCQlDMS40LDcuMiwxLjQsNC42LDEuNCwyeiBNMC4xLDEuNWMwLDAsMCwwLjEsMCwwLjFDMC4xLDEuNiwwLjEsMS42LDAuMSwxLjVjMC0wLjEsMC4xLTAuMiwwLjEtMC4yQzAuMSwxLjQsMC4xLDEuNCwwLjEsMS41eg0KCQkJIE0xMS42LDkuN2MwLDAuOS0wLjUsMS41LTEuMywxLjhjLTAuMywwLjEtMC42LDAuMS0wLjksMC4xYy0yLjUsMC01LDAtNy40LDBjLTAuNSwwLTEtMC4yLTEuNC0wLjZjLTAuMS0wLjItMC4yLTAuNC0wLjMtMC41DQoJCQljMC4xLDAuMiwwLjIsMC40LDAuMywwLjVjMC40LDAuNCwwLjksMC42LDEuNCwwLjZjMi41LDAsNSwwLDcuNCwwYzAuMywwLDAuNiwwLDAuOS0wLjFDMTEuMSwxMS4zLDExLjYsMTAuNiwxMS42LDkuNw0KCQkJYzAtMi41LDAtNSwwLTcuNWMwLTAuMiwwLTAuNC0wLjEtMC42YzAsMCwwLDAsMCwwYzAuMSwwLjIsMC4xLDAuNCwwLjEsMC42QzExLjYsNC43LDExLjYsNy4yLDExLjYsOS43eiBNMTAuNCwxNC40DQoJCQljLTAuNC0wLjItMC45LTAuMi0xLjQtMC4yYy0wLjgsMC0xLjUsMC0yLjMsMGMtMC42LDAtMS4zLDAtMS45LDBjLTAuOSwwLTEuOCwwLTIuNywwYy0wLjIsMC0wLjQsMC0wLjYsMC4xDQoJCQljLTAuNiwwLjEtMS4xLDAuNS0xLjMsMS4xYy0wLjEsMC4yLTAuMSwwLjQtMC4yLDAuNmMwLjEtMC4xLDAuMS0wLjIsMC4xLTAuM2MwLjEtMC41LDAuNC0wLjksMC44LTEuMWMwLjMtMC4yLDAuNy0wLjMsMS4xLTAuMw0KCQkJYzEuMSwwLDIuMiwwLDMuMywwYzEuMSwwLDIuMy0wLjEsMy40LDBjMC40LDAsMC44LDAsMS4xLDAuMWMwLjQsMCwwLjcsMC4yLDEsMC40Yy0wLjMtMC4yLTAuNi0wLjQtMS0wLjRjLTAuNCwwLTAuOC0wLjEtMS4xLTAuMQ0KCQkJYy0xLjEsMC0yLjMsMC0zLjQsMGMtMS4xLDAtMi4yLDAtMy4zLDBjLTAuNCwwLTAuNywwLjEtMS4xLDAuM2MtMC40LDAuMi0wLjcsMC42LTAuOCwxLjFjMCwwLjEsMCwwLjItMC4xLDAuM1YyNA0KCQkJYzAuMSwwLjIsMC4xLDAuNCwwLjEsMC42YzAuMiwwLjcsMC42LDEuMSwxLjMsMS4zQzEuNywyNiwxLjksMjYsMi4xLDI2YzAsMCwwLDAsMCwwYy0wLjIsMC0wLjQsMC0wLjctMC4xDQoJCQljLTAuNy0wLjItMS4xLTAuNi0xLjMtMS4zQzAuMSwyNC40LDAuMSwyNC4yLDAsMjRjMCwwLjIsMCwwLjQsMC4xLDAuNWMwLjIsMC44LDAuOCwxLjQsMS42LDEuNGMwLjIsMCwwLjQsMCwwLjYsMGMwLDAsMCwwLDAsMA0KCQkJaDAuMWMwLDAsMCwwLDAsMGMwLTAuMSwwLjEsMCwwLjIsMGMyLjIsMCw0LjUsMCw2LjcsMGMwLjMsMCwwLjYsMCwwLjktMC4xYzAuNC0wLjEsMC44LTAuMywxLjEtMC42YzAuMy0wLjQsMC41LTAuOCwwLjUtMS4zDQoJCQljMC0yLjUsMC01LDAtNy42YzAtMC4yLDAtMC40LTAuMS0wLjZDMTEuNCwxNS4yLDExLDE0LjcsMTAuNCwxNC40eiBNOS43LDI0LjVjLTAuMywwLTAuNiwwLTAuOCwwYy0yLjMsMC00LjUsMC02LjgsMA0KCQkJYy0wLjQsMC0wLjctMC4yLTAuNy0wLjdjMC0yLjUsMC01LDAtNy41YzAtMC40LDAuMi0wLjYsMC42LTAuNmMyLjUtMC4xLDQuOSwwLDcuNCwwYzAuMiwwLDAuNCwwLDAuNiwwLjFjMC4yLDAuMSwwLjMsMC4yLDAuMywwLjUNCgkJCWMwLDEuMywwLDIuNSwwLDMuOGMwLDEuMywwLDIuNSwwLDMuOEMxMC4zLDI0LjMsMTAsMjQuNSw5LjcsMjQuNXogTTIzLjgsMGMwLjIsMCwwLjQsMCwwLjYsMC4xYzAuNywwLjIsMS4yLDAuNiwxLjQsMS4zDQoJCQljMC4xLDAuMiwwLjEsMC4zLDAuMSwwLjV2MGMwLTEtMC44LTEuOC0xLjctMS45Yy0wLjIsMC0wLjQsMC0wLjYsMEMyMy43LDAuMSwyMy44LDAsMjMuOCwweiBNMTYuNiwxNC41Yy0wLjItMC4xLTAuMy0wLjEtMC41LTAuMQ0KCQkJYy0wLjMsMC0wLjYsMC4zLTAuNiwwLjZ2MC45YzAsMC4zLDAsMC42LDAsMC45YzAsMC4yLDAsMC4zLDAuMiwwLjRjMC4yLDAuMiwwLjQsMC4yLDAuNiwwLjJjMC4zLDAsMC42LTAuMywwLjYtMC42DQoJCQljMC0wLjYsMC0xLjIsMC0xLjhDMTYuOSwxNC44LDE2LjgsMTQuNywxNi42LDE0LjV6IE0yNC41LDE4LjZjLTAuMy0wLjEtMC44LDAuMi0wLjgsMC42YzAsMSwwLDIsMCwzdjNjMCwwLjEsMCwwLjEsMCwwLjINCgkJCWMwLjEsMC4zLDAuNSwwLjUsMC44LDAuNWMwLjQtMC4xLDAuNi0wLjIsMC42LTAuN2MwLTEuOSwwLTMuOCwwLTUuN0MyNS4xLDE4LjksMjUsMTguNywyNC41LDE4LjZ6IE0yMS41LDRjMCwwLTAuMSwwLTAuMSwwDQoJCQljMCwwLDAsMC0wLjEsMGgtMWMwLDAsMCwwLTAuMSwwYy0wLjQsMC0wLjksMC0xLjMsMGMtMC4yLDAtMC4zLDAtMC41LDAuMWMtMC4xLDAuMS0wLjIsMC4yLTAuMywwLjRjMCwwLDAsMC4xLDAsMC4xdjIuNg0KCQkJYzAsMCwwLDAsMCwwLjFjMCwwLjEsMC4xLDAuMywwLjIsMC40YzAuMSwwLjEsMC4zLDAuMiwwLjUsMC4yYzAuOCwwLDEuNiwwLDIuNCwwYzAuMSwwLDAuMiwwLDAuMywwQzIxLjksNy42LDIyLDcuNCwyMiw3LjFWNC43DQoJCQljMC0wLjEsMC0wLjEsMC0wLjJDMjIsNC4yLDIxLjgsNCwyMS41LDR6IE0xNi4yLDE4LjZjLTAuNCwwLTAuNywwLjMtMC43LDAuN3Y1LjhjMCwwLjQsMC4zLDAuNywwLjcsMC43YzAuNCwwLDAuNy0wLjIsMC43LTAuNw0KCQkJYzAtMS45LDAtMy45LDAtNS44QzE2LjksMTguOSwxNi42LDE4LjYsMTYuMiwxOC42eiBNNy4yLDE4LjVjMCwwLTAuMSwwLTAuMSwwYzAsMCwwLDAtMC4xLDBoLTFjMCwwLDAsMC0wLjEsMGMtMC40LDAtMC45LDAtMS4zLDANCgkJCWMtMC4yLDAtMC4zLDAtMC41LDAuMUM0LjEsMTguNiw0LDE4LjgsNCwxOC45YzAsMCwwLDAuMSwwLDAuMXYyLjZjMCwwLDAsMCwwLDAuMUM0LDIxLjgsNCwyMS45LDQuMSwyMmMwLjEsMC4xLDAuMywwLjIsMC41LDAuMg0KCQkJYzAuOCwwLDEuNiwwLDIuNCwwYzAuMSwwLDAuMiwwLDAuMywwYzAuMy0wLjEsMC40LTAuMywwLjQtMC42di0yLjRjMC0wLjEsMC0wLjEsMC0wLjJDNy42LDE4LjcsNy40LDE4LjUsNy4yLDE4LjV6IE0yMC43LDIwLjENCgkJCWMtMC40LDAuMS0wLjYsMC4yLTAuNiwwLjdjMCwxLjQsMCwyLjgsMCw0LjJjMCwwLjUsMC4yLDAuNywwLjYsMC44YzAuNCwwLjEsMC44LTAuMiwwLjgtMC42di00LjNjMCwwLDAtMC4xLDAtMC4xDQoJCQlDMjEuNCwyMC4zLDIxLDIwLjEsMjAuNywyMC4xeiBNMjAuNiwxNC41Yy0wLjMsMC4xLTAuNSwwLjMtMC41LDAuN3YzYzAsMC40LDAuMSwwLjcsMC42LDAuOGMwLjMsMC4xLDAuOC0wLjIsMC44LTAuNg0KCQkJYzAtMC41LDAtMS4xLDAtMS42YzAtMC41LDAtMSwwLTEuNkMyMS41LDE0LjUsMjEsMTQuNCwyMC42LDE0LjV6IE00LDcuNGMwLDAuMSwwLjEsMC4zLDAuMiwwLjRDNC4zLDcuOSw0LjQsOCw0LjYsOA0KCQkJQzUuNCw4LDYuMiw4LDcsOGMwLjEsMCwwLjIsMCwwLjMsMGMwLjMtMC4xLDAuNC0wLjMsMC40LTAuNlY0LjljMC0wLjEsMC0wLjEsMC0wLjJDNy43LDQuNSw3LjUsNC4zLDcuMiw0LjJjMCwwLTAuMSwwLTAuMSwwDQoJCQljMCwwLDAsMC0wLjEsMGgtMWMwLDAsMCwwLTAuMSwwYy0wLjQsMC0wLjksMC0xLjMsMGMtMC4yLDAtMC4zLDAtMC41LDAuMUM0LjEsNC40LDQsNC42LDQsNC43YzAsMCwwLDAuMSwwLDAuMUw0LDcuNA0KCQkJQzQsNy40LDQsNy40LDQsNy40eiBNMjMuOCwxNi45YzAuMSwwLjMsMC40LDAuNSwwLjgsMC41YzAuNC0wLjEsMC42LTAuMywwLjYtMC43YzAtMC41LDAtMS4xLDAtMS42YzAtMC4xLDAtMC4yLTAuMS0wLjMNCgkJCWMtMC4xLTAuMi0wLjMtMC40LTAuNi0wLjRjLTAuNSwwLTAuOCwwLjMtMC43LDAuOGMwLDAuMiwwLDAuNSwwLDAuN3YwLjhDMjMuOCwxNi44LDIzLjgsMTYuOSwyMy44LDE2Ljl6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo="
                  >
                  <span class="text">下载APP</span>
                </span>
              </a>
              <el-dropdown-menu
                slot="dropdown"
                class="qrcode-dropdown"
              >
                <div class="qrcode">
                  使用智慧公路APP，灵活快速处理业务
                  <img :src="require('ecip-web/assets/img/ewm_old.png')">
                  扫码立即体验
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>

          <el-menu-item v-if="supportPinyinSearch">
            <search
              id="header-search"
              ref="search"
              @on-toggle="fixTopMenu"
            />
          </el-menu-item>

          <el-menu-item v-if="errorLogs.length>0">
            <error-log class="errLog-container" />
          </el-menu-item>
          <el-menu-item v-if="fullscreen !== false">
            <screenfull id="screenfull" />
          </el-menu-item>
          <el-menu-item v-if="enableLang !== false">
            <lang-select />
          </el-menu-item>
          <el-menu-item
            v-if="showAbout !== false"
            style="padding:0 5px"
          >
            <About />
          </el-menu-item>
          <sidebar-item
            v-for="route in topMenu"
            :key="route.id || route.path"
            class="topMenu hover-effect"
            :item="route"
            :tooltip="false"
            :base-path="getRouteBasePath(route)"
          />
          <!--<el-tooltip :content="$t('ec.navbar.size')" effect="dark" placement="bottom">
            <size-select id="size-select" class="right-menu-item hover-effect" />
          </el-tooltip>-->

          <!--<lang-select class="right-menu-item hover-effect" />-->

        </template>
        <!--<el-menu-item>
          <template slot="title">
            <color-picker />
          </template>
        </el-menu-item>-->
        <el-menu-item class="ec-navbar__avatar">
          <el-dropdown
            show-timeout="0"
            placement="bottom"
          >
            <span class="el-dropdown-link">
              <img
                v-if="!avatar"
                src="~@/assets/img/avatar.png"
              >
              <img
                v-if="avatar"
                :src="avatar"
              >{{ userName }}
            </span>
            <el-dropdown-menu
              slot="dropdown"
              class="avator-drop"
            >
              <el-dropdown-item
                v-if="showPerson"
                @click.native="$router.push('/personalCenter')"
              >{{
                $t('ec.navbar.profile')
              }}
              </el-dropdown-item>
              <el-dropdown-item
                v-if="showChangePwd"
                @click.native="updatePasswordHandle()"
              >{{
                $t('ec.navbar.changePwd')
              }}
              </el-dropdown-item>
              <el-dropdown-item
                divided
                @click.native="cleanCache()"
              >{{ $t('ec.navbar.cleanCache') }}</el-dropdown-item>
              <el-dropdown-item
                divided
                @click.native="logout()"
              >{{ $t('ec.navbar.logOut') }}{{
                isRunAs ? '代理身份' : ''
              }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
        <el-menu-item v-if="notification !== false">
          <template
            slot="title"
            v-if="noticeTabs"
          >
            <notice-icon
              class="action notice"
              :tabs="noticeTabs"
            />
          </template>
        </el-menu-item>
        <el-menu-item
          v-for="menu in topFixedRightMenuList"
          :key="menu.id"
          :menu="menu"
          @click="showLeftMenu(menu, '555')"
        >
          <item
            v-if="menu.meta"
            :icon="menu.meta && menu.meta.icon"
            :title="menu.showName && menu.meta.title || ''"
          />
        </el-menu-item>
        <el-menu-item
          v-if="showSettings"
          class="settings"
          @click="showRightPanel"
        >
          <i class="fa fa-ellipsis-v" />
        </el-menu-item>
      </el-menu>
    </div>

    <update-password ref="updatePassword" />
    <update-password-compulsion ref="updatePasswordCompulsion" />
  </div>
</template>

<script>
import screenfull from 'screenfull'
import { mapGetters, mapState } from 'vuex'
import { getReceivedData, getTodoList } from 'ecip-web/api/vue/notice/noticeApi'
import Breadcrumb from 'ecip-web/components/Breadcrumb'
// import Hamburger from 'ecip-web/components/Hamburger'
import ErrorLog from 'ecip-web/components/ErrorLog'
import Screenfull from 'ecip-web/components/Screenfull'
import About from 'ecip-web/components/About'
import {
  enableLang,
  fullscreen,
  notification,
  supportPinyinSearch
} from '@/settings'
// import SizeSelect from 'ecip-web/components/SizeSelect'
import LangSelect from 'ecip-web/components/LangSelect'
import Search from 'ecip-web/components/HeaderSearch'
import NoticeIcon from 'ecip-web/components/NoticeIcon'
import Item from './Sidebar/Item'
import SidebarItem from './Sidebar/SidebarItem'
import UpdatePassword from 'ecip-web/layout/components/UpdatePassword'
import UpdatePasswordCompulsion from 'ecip-web/layout/components/UpdatePasswordCompulsion'
import { isExternal } from 'ecip-web/utils/validate'

const toChangePwdEnabled = window._CONFIG['toChangePwdEnabled'] === undefined ? true : window._CONFIG['toChangePwdEnabled']

const fixedMenu = window._CONFIG['fixedMenu']
const topMenu = window._CONFIG['topMenu']
const showRoleName = window._CONFIG['showRoleName']
const showPerson = window._CONFIG['showPerson']
const showAbout = window._CONFIG['about']
const showChangePwd = window._CONFIG['changePwd']

const exNoticeBar = window._CONFIG['noticeBar']
export default {
  components: {
    Item,
    SidebarItem,
    Breadcrumb,
    // Hamburger,
    ErrorLog,
    Screenfull,
    // SizeSelect,
    LangSelect,
    About,
    Search,
    NoticeIcon,
    UpdatePassword,
    UpdatePasswordCompulsion
  },
  data() {
    return {
      toChangePwdEnabled,
      showPerson: showPerson === true || showPerson === undefined,
      showAbout: typeof showAbout !== 'undefined' ? showAbout : false,
      showChangePwd:
        typeof showChangePwd !== 'undefined' ? showChangePwd : true,
      topMenu,
      notification,
      fullscreen,
      enableLang,
      supportPinyinSearch,
      appLink: window._CONFIG['appLink'],
      activeIndex: '',
      topFixedLeftMenuList: [],
      topFixedRightMenuList: [],
      topMenuList: [],
      topHideMenuList: [],
      allMenuList: [],
      screenWidth: document.body.clientWidth,
      noticeTabs: '',
      isShowMore: false,
      timer: '',
      menuPath: []
    }
  },
  computed: {
    ...mapState({
      showSettings: (state) => state.settings.showSettings
    }),
    ...mapGetters(['sidebar', 'avatar', 'device']),
    isRunAs() {
      return this.$store.state.user.isRunAs
    },
    errorLogs() {
      return this.$store.getters.errorLogs
    },
    navbarLayoutType() {
      if (this.$store.state.settings.darkTheme) {
        return ''
      }
      return this.$store.state.settings.navbarLayoutType
    },
    sidebarLayoutSkin() {
      return this.$store.state.settings.sidebarLayoutSkin
    },
    designStyle() {
      const {
        defaultTheme,
        startColor,
        endColor,
        directionColor,
        gradientBol
      } = this
      let txt = ''

      let r = ''
      let sc = ''
      let ec = ''
      if (gradientBol.includes('value')) {
        const obj = JSON.parse(gradientBol)

        r = obj.value
      } else {
        r = gradientBol === '' ? '1' : gradientBol
      }

      if (startColor.includes('value')) {
        const obj = JSON.parse(startColor)

        sc = obj.value
      } else {
        sc = startColor === '' ? '1' : startColor
      }

      if (endColor.includes('value')) {
        const obj = JSON.parse(endColor)

        ec = obj.value
      } else {
        ec = endColor === '' ? '1' : endColor
      }

      if (r === '2') {
        txt = `background: linear-gradient(${
          directionColor || 90
        }deg, ${sc}, ${ec})`
      } else {
        txt = `background-color:${defaultTheme};`
      }

      // console.log('txt-navbar', txt)

      // `background:${defaultTheme};
      // background: linear-gradient(190deg, ${startColor}, ${endColor})`
      return txt
    },
    topMenuActiveIndex: {
      get() {
        return this.$store.state.app.topMenuActiveIndex
      },
      set(val) {
        this.$store.commit('app/SET_TOP_MENU_ACTIVE_INDEX', val)
      }
    },
    userName: {
      get() {
        if (showRoleName === true && this.$store.state.user.userInfo.roleName) {
          return `${this.$store.state.user.name}（${this.$store.state.user.userInfo.roleName}）`
        }
        return this.$store.state.user.name
      }
    },
    realName: {
      get() {
        return this.$store.state.user.realName
      }
    },
    avatar: {
      get() {
        return this.$store.state.user.avatar
      }
    },
    startColor() {
      return this.$store.state.settings.startColor || ''
    },
    endColor() {
      return this.$store.state.settings.endColor || ''
    },
    directionColor() {
      return this.$store.state.settings.directionColor || ''
    },
    gradientBol() {
      return this.$store.state.settings.gradientBol || ''
    },
    defaultTheme() {
      if (this.$store.state.settings.darkTheme) {
        return ''
      }
      return this.$store.state.settings.defaultTheme
    },
    defaultLayout() {
      return this.$store.state.settings.defaultLayout
    },
    menuActiveName: {
      get() {
        return this.$store.state.app.menuActiveName
      },
      set(val) {
        this.$store.commit('app/SET_MENU_ACTIVE_NAME', val)
      }
    }
  },
  watch: {
    '$store.state.app.topMenuActiveIndex': {
      handler(val) {
        this.topMenuList.forEach((menu) => {
          if (menu.id === val) {
            this.showLeftMenu(menu, '666')
          }
        })
        this.topHideMenuList.forEach((menu) => {
          if (menu.id === val) {
            this.showLeftMenu(menu, '777')
          }
        })
      },
      deep: true
    },
    defaultLayout(val) {
      if (
        this.defaultLayout === 'top' &&
        this.device !== 'mobile' &&
        this.allMenuList.length > 0
      ) {
        let needSetLeft = true
        this.allMenuList.forEach((item) => {
          if (item.id === this.topMenuActiveIndex) {
            this.showLeftMenu(item, '888')
            needSetLeft = false
          }
        })
        if (needSetLeft) {
          this.topMenuActiveIndex = this.allMenuList[0].id
          this.showLeftMenu(this.allMenuList[0], '99')
        }
        this.fixTopMenu()
      } else {
        this.topMenuList = []
        this.topHideMenuList = []
        this.topFixedLeftMenuList = []
        this.topFixedRightMenuList = []
        this.$store.commit('app/SET_LEFT_MENU_CATEGORY', '')
        this.$store.commit('app/SET_LEFT_MENU_LIST', this.allMenuList)
        this.$store.commit('app/SET_LEFT_MENU_BASE_PATH', '')
      }
    }
  },
  async created() {
    this.allMenuList = JSON.parse(sessionStorage.getItem('allMenuList') || '[]')
    if (
      this.defaultLayout === 'top' &&
      this.device !== 'mobile' &&
      this.allMenuList.length > 0
    ) {
      const route = this.$route
      // console.log('route:', route)
      const topParentId = route.meta && route.meta.topParentId
      // console.log('topParentId:', topParentId)
      let activeIndex = 0
      if (topParentId) {
        for (let i = 0; i < this.allMenuList.length; i++) {
          const menu = this.allMenuList[i]
          if (menu.id === topParentId) {
            activeIndex = i
            break
          }
        }
      }
      this.topMenuActiveIndex = this.allMenuList[activeIndex].id
      // 修改点：20230615
      // this.showLeftMenu(this.allMenuList[activeIndex], '1010')
      // this.topMenuActiveIndex = this.allMenuList[0].id
      // this.showLeftMenu(this.allMenuList[0])
    } else {
      this.$store.commit('app/SET_LEFT_MENU_LIST', this.allMenuList)
      this.$store.commit('app/SET_LEFT_MENU_BASE_PATH', '')
    }

    const tab = [
      {
        title: this.$t('ec.notice.notice'),
        index: 0,
        count: 0,
        list: [],
        url: '/sysrNoticeReceivedView',
        emptyText: this.$t('ec.notice.noticeEmpty'),
        // emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg'
        emptyImage: require('ecip-web/assets/404_images/empty.png'),
        name: 'notice'
      },
      {
        title: this.$t('ec.notice.internal'),
        count: 0,
        index: 1,
        list: [],
        url: '/sysrNoticeMyInboxView',
        emptyText: this.$t('ec.notice.internalEmpty'),
        emptyImage: require('ecip-web/assets/404_images/empty.png'),
        name: 'inBox'
      },
      {
        title: this.$t('ec.notice.todoList'),
        index: 2,
        count: 0,
        list: [],
        url: '/todoList',
        emptyText: this.$t('ec.notice.todoListEmpty'),
        emptyImage: require('ecip-web/assets/404_images/empty.png'),
        name: 'bmp'
      }
    ]

    const nameCot = exNoticeBar || ['notice', 'inBox']
    this.noticeTabs = []
    tab.forEach((item, index) => {
      if (nameCot.findIndex((name) => name === item.name) !== -1) {
        this.noticeTabs.push(item)
        this.getNotice(item.name)
      }
    })
    if (this.$store.state.user.toChangePwd && toChangePwdEnabled) {
      this.updatePasswordCompulsionHandle()
    }
  },
  beforeDestroy() {
    this.$events.$off('toggleSearch')
  },
  mounted() {
    if (this.defaultLayout === 'top' && this.device !== 'mobile') {
      this.fixTopMenu()
    }
  },
  methods: {
    getRouteBasePath(route) {
      if (isExternal(route.path) || route.path.startsWith('/')) {
        return route.path
      }
      return route.path
    },
    // 设置横向滚动条可以鼠标滚轮滚动
    onElMenuHorizontalScroll(e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 40
      this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft =
        this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft +
        eventDelta / 4
    },
    // 初始化数据，页面刷新时，滚动条滚动到对应位置
    initElMenuOffsetLeft() {
      this.$nextTick(() => {
        const els = document.querySelector(
          '.el-menu.el-menu--horizontal li.is-active'
        )
        if (!els) return false
        this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft =
          els.offsetLeft
      })
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
      if (this.defaultLayout === 'top' && this.device !== 'mobile') {
        this.fixTopMenu()
      }
    },
    refresh() {},
    logout() {
      this.$confirm(`是否退出${this.isRunAs ? '代理身份' : '登录'}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await this.$store.dispatch('user/logout')
          if (this.isRunAs) {
            window.location.replace(process.env.BASE_URL || '/')
            return
          }
          // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
          this.$router.push(`/login`)
        })
        .catch(() => {})
    },
    fixTopMenu() {
      if (this.defaultLayout !== 'top' || this.device === 'mobile') {
        return
      }
      const topFixedLeftMenuList = []
      const topFixedRightMenuList = []
      const topMenuList = []
      this.allMenuList.forEach((item, index) => {
        if (!item.hidden) {
          const code = item.meta && item.meta.code
          let isFix = false
          if (code && fixedMenu && fixedMenu.length > 0) {
            const fix = fixedMenu.find((i) => i.code === code)
            if (fix) {
              isFix = true
              if (fix.icon) {
                item.meta.icon = fix.icon
              }
              if (fix.name) {
                item.meta.title = fix.name
              }
              if (fix.location === 'right') {
                topFixedRightMenuList.push(Object.assign({}, item, fix))
              } else {
                topFixedLeftMenuList.push(Object.assign({}, item, fix))
              }
            }
          }
          if (isFix) {
            return
          }

          this.$set(item, 'isShow', true)
          this.$set(item, 'domWidth', 0)
          topMenuList.push(item)
          // if (index < size - 1) {
          //   this.topMenuList.push(item)
          // } else {
          //   this.topHideMenuList.push(item)
          // }
          if (this.topMenuActiveIndex && item.id == this.topMenuActiveIndex) {
            // 修改点：20230615
            // this.showLeftMenu(item, '111-1111')
          }
        }
      })
      this.topMenuList = topMenuList
      this.topFixedLeftMenuList = topFixedLeftMenuList
      this.topFixedRightMenuList = topFixedRightMenuList

      this.$nextTick(() => {
        this.onResizeFn()
      })
      // this.$nextTick(()=>{
      //     this.onResizeFn()
      // })
      // 监听div大小变化
      const div = document.getElementById('el-menu-horizontal-warp')

      // 修改点：20230615
      if (div && div.onresize) {
        div.onresize = null
        div.onresize = () => {
          this.onResizeFn()
        }
      }

      /* this.$nextTick(() => {
        setTimeout(async() => {
          // const width = window.getComputedStyle(this.$refs.navbar).width
          this.topFixedLeftMenuList = []
          this.topFixedRightMenuList = []
          const topMenuList = []
          this.allMenuList.forEach((item, index) => {
            if (!item.hidden) {
              const code = item.meta && item.meta.code
              let isFix = false
              if (code && fixedMenu && fixedMenu.length > 0) {
                const fix = fixedMenu.find(i => i.code === code)
                if (fix) {
                  isFix = true
                  if (fix.icon) {
                    item.meta.icon = fix.icon
                  }
                  if (fix.name) {
                    item.meta.title = fix.name
                  }
                  if (fix.location === 'right') {
                    this.topFixedRightMenuList.push(Object.assign({}, item, fix))
                  } else {
                    this.topFixedLeftMenuList.push(Object.assign({}, item, fix))
                  }
                }
              }
              if (isFix) {
                return
              }
              topMenuList.push(item)
              // if (index < size - 1) {
              //   this.topMenuList.push(item)
              // } else {
              //   this.topHideMenuList.push(item)
              // }
              if (this.topMenuActiveIndex && item.id == this.topMenuActiveIndex) {
                this.showLeftMenu(item)
              }
            }
          })
          await this.$nextTick()
          const width = window.getComputedStyle(document.querySelector('.ec-navbar__body')).width
          const leftWidth = 93
          // const rightWidth = this.$refs.search.show ? 470 : 250
          const rightWidth = window.getComputedStyle(document.querySelector('.ec-navbar__menu--right')).width
          // console.log(width)
          // console.log(rightWidth)
          // const size = parseInt(((!this.sidebar.opened ? 156 : 0) + parseInt(width) - parseInt(rightWidth) - 64) / 125) - 1
          const size = parseInt((parseFloat(width) - leftWidth - parseFloat(rightWidth)) / 110)
          // console.log('topMenuSize:', size)
          this.topMenuList = topMenuList.slice(0, size - 1)
          this.topHideMenuList = topMenuList.slice(size - 1)
          // console.log(this.topMenuList)
          // console.log(this.topHideMenuList)
          // console.log(this.topFixedLeftMenuList)
        }, 200)

        // console.log(this.topMenuList)
      })*/
    },
    onResizeFn() {
      this.setMenuLayoutFn()
    },
    setMenuLayoutFn() {
      if (!this.$refs.topMenu) {
        return
      }
      let menuCot = this.$refs.topMenu.$el.children
      let allMenuWidth = 0
      let moreDiv = 0
      const navBarWidth =
        parseInt(
          window.getComputedStyle(
            document.getElementById('el-menu-horizontal-warp')
          ).width
        ) - 50
      if (menuCot && menuCot.length) {
        // 计算前去掉更多按钮
        if (this.isShowMore) {
          menuCot = Array.from(menuCot)
          menuCot.splice(menuCot.length - 1, 1)
          moreDiv = parseInt(window.getComputedStyle(menuCot[0]).width)
        }
        // 宽度
        menuCot.forEach((item, index) => {
          !this.topMenuList[index].domWidth &&
            (this.topMenuList[index].domWidth = parseInt(
              window.getComputedStyle(item).width
            ))
          allMenuWidth += this.topMenuList[index].domWidth
        })

        if (allMenuWidth > navBarWidth) {
          this.isShowMore = true
          let w = 0
          this.topMenuList.forEach((item) => {
            w += item.domWidth
            item.isShow = w + moreDiv <= navBarWidth
          })
        } else {
          this.isShowMore = false
          this.topMenuList.forEach((item) => {
            item.isShow = true
          })
        }
      }
    },
    showRightPanel() {
      this.$emit('showRightPanel', true)
    },
    showLeftMenu(menu, val) {
      const a = window.parent.frames

      // return

      // 修复问题2023-09-28：当配置资源管理时，配置url时，使用不带http的地址，同时勾选跳转方式为新窗口，会导致没有从当前地址栏端口开始拼接配置的url；如需让配置的url带有#，需要自己配置url的时候加上
      if (menu.meta && menu.meta.isExternal && menu.path) {
        window.open(menu.path, '_blank')
        return
      }

      // if (menu.meta && menu.meta.isExternal && menu.path) {
      //   let to = menu.path
      //   if (to && to.indexOf('http') === -1) {
      //     const str = window.location.href
      //     const index = str.indexOf('/#/')
      //     // console.log('now href:', str)
      //     let url = ''
      //     if (index !== -1) {
      //       const result = str.substring(0, index + 2)
      //       url = result + to
      //     } else {
      //       url = str + to
      //     }
      //     to = url
      //   }
      //   window.open(to, '_blank')
      //   return
      // }
      if (menu.meta && menu.path && isExternal(menu.path)) {
        if (menu.isBlank) {
          window.open(menu.path, '_blank')
        } else {
          screenfull.toggle()
          window.location = menu.path
        }
        return
      }

      this.$store.commit('app/SET_SHOW_TAGS', menu)
      this.$store.commit('app/SET_SHOW_SIDEBAR', menu)
      // debugger
      if (!menu.childern || menu.childern.length === 0) {
        if (menu.meta && menu.meta.isIframe) {
          // this.$store.commit('app/SET_SHOW_TAGS', menu.meta.showTags)
          // this.$store.commit('app/SET_SHOW_SIDEBAR', menu.meta.showSidebar)
          const name = menu.meta.code
          this.$router.push(`/iframe?name=${name}&src=${menu.meta.iframeUrl}`)
        }
      }
      this.topMenuActiveIndex = menu.id
      // console.log('topMenuActiveIndex: ', this.topMenuActiveIndex)
      this.$store.commit('app/SET_LEFT_MENU_LIST', menu.children)
      this.$store.commit('app/SET_LEFT_MENU_CATEGORY', menu.name)
      this.$store.commit('app/SET_LEFT_MENU_BASE_PATH', menu.path)
    },
    async getNotice(name) {
      const barItem = this.getNoticeTabByName(name)
      switch (name) {
        case 'notice':
          // 通知
          const noticeData = await getReceivedData(
            Object.assign(
              {},
              {
                size: 10,
                current: 1
              }
            ),
            { sysrNoticeDetail: { readStatus: 'unread' }, sendWay: 1 }
          )
          barItem.count = noticeData.data.total
          barItem.list = noticeData.data.records
          break
        case 'inBox':
          // 站内信
          const mailData = await getReceivedData(
            Object.assign(
              {},
              {
                size: 10,
                current: 1
              }
            ),
            { sendWay: 5, sysrNoticeDetail: { readStatus: 'unread' } }
          )
          barItem.count = mailData.data.total
          barItem.list = mailData.data.records
          break
        case 'bmp':
          this.getTodoList(name)
          break
      }
    },
    getTodoList(name) {
      getTodoList(
        Object.assign({}, { size: 10, current: 1, assignee: this.username }, {})
      )
        .then((res) => {
          this.getNoticeTabByName(name).count = res.data.total
          const records = res.data.records
          for (let z = 0; z < records.length; z++) {
            records[z]['isJump'] = false
            records[z]['title'] = records[z]['vars']['title']
            records[z]['content'] = records[z]['procDef.name']
            records[z]['sendTime'] = records[z]['task.createTime']
          }
          // console.log(records)
          this.getNoticeTabByName(name).list = records
        })
        .catch((e) => {
          // this.loading = false
        })
    },
    // 修改密码
    updatePasswordHandle() {
      this.$nextTick(() => {
        this.$refs.updatePassword.init()
      })
    },
    // 修改密码
    updatePasswordCompulsionHandle() {
      this.$nextTick(() => {
        this.$refs.updatePasswordCompulsion.init()
      })
    },
    cleanCache() {
      this.$confirm(`清除缓存后需重新登录，请问是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        window.localStorage.clear()
        window.location.reload()
      })
    },
    getNoticeTabByName(name) {
      const index = this.noticeTabs.findIndex((item) => item.name === name)
      return this.noticeTabs[index]
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu-horizontal-warp {
  flex: 1;
  overflow: hidden;
  margin-right: 30px;
  ::v-deep(.el-scrollbar__bar.is-vertical) {
    display: none;
  }
  ::v-deep(a) {
    width: 100%;
  }
  .el-menu.el-menu--horizontal {
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  ::v-deep {
    .el-scrollbar {
      height: 100%;
      //width: 100%;
    }

    .el-scrollbar__wrap {
      //overflow: auto;
      height: 100%;
      overflow: hidden !important;
      max-height: 100%;
      margin-bottom: 0 !important;
      margin-right: 0 !important;
    }

    .el-scrollbar__view {
      display: flex;
    }

    //.ele-header-nav {
    //  flex: 1;
    //  overflow: auto;
    //  white-space: nowrap;
    //  scroll-behavior: smooth;
    //}
  }

  .ec-navbar__menu > .el_menu_item {
    overflow: inherit;
  }
}

.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .ec-navbar__body {
    //justify-content: space-around;
    //height: 50px;
    display: flex;
    align-items: center;
    padding-right: 15px;
    overflow: hidden;
  }

  .el-menu.el-menu--horizontal {
    background-color: transparent;
    border: none;
  }

  ::v-deep .ec-navbar__menu--right span.title {
    margin-left: 7px;
  }

  .ec-navbar__body .el-menu.el-menu--horizontal > .el-menu-item,
  .ec-navbar__body .el-menu.el-menu--horizontal > .el-submenu {
    float: none;
    display: inline-block;
  }

  .ec-navbar__menu ::v-deep .el-badge__content.is-fixed {
    top: 15px;
    /*border:none;*/
  }

  .left {
    margin-left: 5px;
  }

  .el-icon-refresh-right {
    font-size: 16px;
    width: auto;
  }

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  &:focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: #5a5e66;
    vertical-align: text-bottom;

    &.hover-effect {
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }
  .topMenu ::v-deep .el-menu-item {
    cursor: pointer;
    transition: background 0.3s;
    color: #fff;
    background-color: transparent;
    border: none;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }
  .qrcode-container a {
    color: #fff;
  }
  .qrcode-container a:hover {
    color: #fff;
  }
  .qrcode-container a img {
    vertical-align: middle;
  }
  .qrcode-container .text {
    margin-left: 7px;
  }

  .ec-navbar__menu.ec-navbar__menu--right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.qrcode {
  padding: 15px 40px 10px;
  line-height: 30px;
  text-align: center;
}
.qrcode img {
  display: block;
  width: 60%;
  margin: 0 auto;
}
.avator-drop {
  width: 150px !important;
  top: 45px !important;
}
</style>
