<template>
  <div class="QdmAside">
    <el-container class="main">
      <div class="layout-left" v-if="genre === 'norm'">
        <div class="logo" :class="isCollapse ? '' : 'logoClone'" :style="'width:' + width + 'px;'" @click="goHome">
          <img :src="logo" />
          <el-select
          v-if="leftSelect && isCollapse"
		      :class="leftCol"
		      v-model="leftNewvalue"
		      :disabled="leftDisabled"
		      :collapse-tags="leftMultiple"
		      :multiple="leftMultiple"
		      :filterable="leftFilterable"
		      :placeholder="leftPlaceholder"
		      @change="leftSelectChange">
		      	<el-option v-if="leftAllStatus" label="全部" :value="leftAllValue"></el-option>
		        <el-option
		          v-for="(item, index) in leftList"
		          :key="index"
		          :label="item.label"
		          :value="item.value">
		        </el-option>
          </el-select>
          <span v-else-if="!leftSelect && isCollapse">{{ systemName }}</span>
        </div>
        <el-aside :class="isCollapse ? '' : 'asideClone'" :style="'width:' + width + 'px;'">
          <el-menu
          class="el-menu-vertical-demo"
          mode="vertical"
          :active-text-color="activeTextColor"
          :text-color="textColor"
          unique-opened
          router
          :default-active="activeIndex"
          :collapse="!isCollapse"
          popper-class="menupopperclass"
          :collapse-transition="false"
          >
            <el-submenu :index="item.id" v-for="(item, index) in menuList" :key="index" v-show="item.show !== 0">
              <div class="isCollapseDiv" v-if="!isCollapse">
                <i class="titleIcon iconfont" :class="item.icon"></i>
                <slot>{{ item.name }}</slot>
              </div>
              <template v-slot:title>
                <i class="titleIcon iconfont" :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                v-for="(items, indexs) in item.childrens"
                :key="indexs"
                :index="items.url">
                {{ items.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
      </div>
      <div class="layout-left layout-left-latest" v-if="genre === 'latest'">
        <el-aside :class="isCollapse ? '' : 'asideClone'" :style="'width:' + width + 'px;'">
          <el-menu
          class="el-menu-vertical-demo"
          :class="genre === 'latest' ? 'el-menu-vertical-latest' : ''"
          mode="vertical"
          :active-text-color="activeTextColor"
          :text-color="textColor"
          unique-opened
          router
          :default-active="activeIndex"
          :collapse="!isCollapse"
          popper-class="menupopperclass"
          :collapse-transition="false">
            <div :class="isCollapse ? 'indexMenuItem' : 'indexMenuItem isCollapseindexMenuItem'">
              <i class="titleIcon iconfont" :class="indexIcon"></i>
              <span v-if="isCollapse">{{ indexText }}</span>
              <i class="el-icon-upload2" @click.stop="isCollapse = !isCollapse"></i>
            </div>
            <el-submenu :index="item.id" v-for="(item, index) in menuList" :key="index" v-show="item.show !== 0">
              <div class="isCollapseDiv" v-if="!isCollapse">
                <i class="titleIcon iconfont" :class="item.icon"></i>
                <slot>{{ item.name }}</slot>
              </div>
              <template v-slot:title>
                <i class="titleIcon iconfont" :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                v-for="(items, indexs) in item.childrens"
                :key="indexs"
                :index="items.url">
                {{ items.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
      </div>
      <div v-if="genre === 'latest'" class="latestlogo" @click="goHome">
        <img :src="logo" />
        <div>
          <span>{{ systemName }}</span>
          <span class="separate"></span>
          <i class="el-icon-menu" @click.stop="showFn"></i>
        </div>
      </div>
      <div class="box topLeftBox" v-if="show">
        <div v-for="(item, index) in sysList" :key="index" @click="changeSys(item)">
          <img :src="item.icon" />
          <span>{{ item.label }}</span>
        </div>
      </div>
      <div class="layout-right">
        <el-container>
          <el-header class="header" :class="tabShow ? 'tabheader' : ''"
          :style="'background:' + rightBackground + ';'">
            <i class="el-icon-s-fold" @click="isCollapse = false" v-if="isCollapse && genre === 'norm'"></i>
            <i class="el-icon-s-unfold" @click="isCollapse = true" v-if="!isCollapse && genre === 'norm'"></i>
            <div class="customHtml" v-html="customHtml"></div>
            <div v-show="controlHtml" class="controlHtml" :class="inline ? 'inline' : ''" :style="multiple ? 'height: auto;' : 'height: 30px;'">
              <el-select
              :class="col"
              v-model="newvalue"
              :disabled="disabled"
              :collapse-tags="multiple"
              :multiple="multiple"
              :filterable="filterable"
              :placeholder="placeholder"
              @change="selectChange"
              clearable>
                <el-option v-if="allStatus" label="全部" :value="allValue"></el-option>
                <el-option
                  v-for="(item, index) in list"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <img :src="portrait" />
                  {{ name }}
                </span>
                <template v-slot:dropdown>
                  <el-dropdown-menu class="dropdownMain">
                    <el-dropdown-item disabled>
                      <i class="el-icon-user"></i>
                      {{ name }}
                    </el-dropdown-item>
                    <el-dropdown-item @click="UpdatePasswordFn">
                      <i class="el-icon-unlock"></i>
                      修改密码
                    </el-dropdown-item>
                    <el-dropdown-item @click="logOut">
                      <i class="el-icon-s-release"></i>
                      退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                  </template>
              </el-dropdown>
            </div>
          </el-header>
          <!--<el-tabs class="layoutTabs" v-show="tabShow" v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="tabclick">
            <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="index"
            :label="item.title"
            :name="item.name">
            </el-tab-pane>
          </el-tabs>-->
          <pageTab v-show="tabShow" @updateFn="updateFn" @includeListFn="includeListFn" @excludeListFn="excludeListFn" :keep-alive-component-instance="keepAliveComponentInstance" />
          <el-main class="rightMain">
          	<div ref="keepAliveContainer">
	            <router-view v-if="tabShow" v-slot="{ Component }">
	              <transition name="router-fade" mode="out-in">
	              	<keep-alive :include="includeList" :exclude="excludeList">
	                  <component :is="Component"/>
	                </keep-alive>
	              </transition>
	            </router-view>
	            <!--<router-view v-if="!tabShow && keepList.length > 0" v-slot="{ Component }">
	              <transition name="router-fade" mode="out-in">
	                <keep-alive :key="$route.fullPath">
	                  <component :is="Component"/>
	                </keep-alive>
	              </transition>
	            </router-view>-->
	            <router-view v-else v-slot="{ Component }">
	              <transition name="router-fade" mode="out-in">
	                <component :is="Component"/>
	              </transition>
	            </router-view>
            </div>
          </el-main>
        </el-container>
      </div>
    </el-container>
  </div>
</template>
<script>
import pageTab from './pageTab'
export default {
  name: "QdmAside",
  components: { pageTab },
  props: {
    name: {
      type: String,
      default: ''
    },
    systemName: {
      type: String,
      default: ''
    },
    logo: {
      type: String,
      default: ''
    },
    portrait: {
      type: String,
      default: ''
    },
    customHtml: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 171
    },
    background: {
      type: String,
      default: '#001529'
    },
    rightBackground: {
    	type: String,
    	default: '#fff'
    },
    activeTextColor: {
      type: String,
      default: '#fff'
    },
    textColor: {
      type: String,
      default: '#fff'
    },
    homeUrl: {
      type: String,
      default: ''
    },
    activeIndex: {
      type: String,
      default: ''
    },
    menuList: {
      type: Array,
      default: () => {
        return []
      }
    },
    tabShow: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    controlHtml: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    col: {
      type: String,
      default: 'small'
    },
    inline: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'text'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    allStatus: {
      type: Boolean,
      default: false
    },
    allValue: {
      type: String,
      default: ''
    },
    keepList: {
      type: Array,
      default: () => {
        return []
      }
    },
    leftValue: {
      type: String,
      default: ''
    },
    leftSelect: {
      type: Boolean,
      default: false
    },
    leftList: {
      type: Array,
      default: () => {
        return []
      }
    },
    leftPlaceholder: {
      type: String,
      default: '请选择'
    },
    leftCol: {
      type: String,
      default: 'small'
    },
    leftDisabled: {
      type: Boolean,
      default: false
    },
    leftMultiple: {
      type: Boolean,
      default: false
    },
    leftFilterable: {
      type: Boolean,
      default: false
    },
    leftAllStatus: {
      type: Boolean,
      default: false
    },
    leftAllValue: {
      type: String,
      default: ''
    },
    genre: {
      type: String,
      default: 'norm'
    },
    indexIcon: {
      type: String,
      default: ''
    },
    indexText: {
      type: String,
      default: '首页'
    },
    sysList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      isCollapse: true,
      editableTabsValue: '0',// 标签初始
      editableTabs: [],
      tabIndex: 0,
      tabList: [],
      updateUrl: '',
      newvalue: this.value,
      leftNewvalue: this.leftValue,
      show: false,
      keepAliveComponentInstance: null,
      excludeList: [],
      includeList: []
    }
  },
  mounted() {
  	if (this.$refs.keepAliveContainer) {
      this.keepAliveComponentInstance = this.$refs.keepAliveContainer.childNodes[0].__vue__;//获取keep-alive的控件实例对象
    }
    for(let i = 0;i < document.getElementsByClassName('el-menu-item').length;i++) {
      document.getElementsByClassName('el-menu-item')[i].style.width = this.width + 'px'
    }
    for(let i = 0;i < document.getElementsByClassName('layout-left').length;i++) {
      document.getElementsByClassName('layout-left')[i].style.background = this.background
    }
	  this.$router.push({
	    path: this.activeIndex
	  })
//  if(this.tabShow) {
//  	this.editableTabs.push({
//	    	title: this.$route.meta.title,
//	      name: this.activeIndex,
//	      id: this.$route.name
//	    })
//  	this.tabList.push(this.$route.name)
//  	this.editableTabs.forEach((item, index) => {
//	    	if(item.id === 'layout') {
//	    		this.editableTabs.splice(index, 1)
//	    	}
//	    })
//  }
  },
  methods: {
    updateFn() {
      this.excludeList = []
    },
    includeListFn(key) {
      this.includeList.push(key)
    },
    excludeListFn(key) {
      this.excludeList.push(key)
    },
  	leftSelectChange() {
      this.$emit('leftSelectReturn', this.leftNewvalue)
    },
    selectChange() {
      this.$emit('selectReturn', this.newvalue)
    },
    changeSys(obj) {
      this.$emit('changeSysReturn', obj)
      this.show = false
    },
    goHome() {
      this.$router.push({
        path: this.homeUrl
      })
    },
//  removeTab(targetName) {
//  	if(this.editableTabs) {
//  		this.editableTabs.forEach((item, index) => {
//	        if(item.name === targetName) {
//	          this.editableTabs.splice(index, 1)
//	          if(index === 0) {
//	            if(this.editableTabs.length > 1) {
//	              this.$router.push({
//	                path: this.editableTabs[index + 1].name
//	              })
//	              this.editableTabsValue = this.editableTabs[index + 1].name
//	            } else {
//	              this.$router.push({
//	                path: this.editableTabs[this.editableTabs.length - 1].name
//	              })
//	              this.editableTabsValue = this.editableTabs[this.editableTabs.length - 1].name
//	            }
//	          }else {
//	            this.$router.push({
//	              path: this.editableTabs[index - 1].name
//	            })
//	            this.editableTabsValue = this.editableTabs[index - 1].name
//	          }
//	        }
//	      })
//  	}
//  },
//  tabclick(val) {
//    this.$router.push({
//      path: val.name
//    })
//    this.tabList.push(this.updateUrl)
//  },
//  addTab(val) {
//    let num = 0
//    this.editableTabs.forEach(item => {
//      if(val.path === item.name) {
//        num += 1
//      }
//    })
//    if(num > 0) {
//      this.editableTabsValue = val.path
//      num = 0
//    } else {
//      this.editableTabs.push({
//        title: this.$route.meta.title,
//        name: val.path,
//        id: this.$route.name
//      })
//      if(val.query.update === 'proceed') {
//      	this.updateUrl = this.$route.name
//      } else {
//      	this.tabList.push(this.$route.name)
//      }
//      this.editableTabsValue = val.path
//    }
//  },
    UpdatePasswordFn() {
      this.$emit('updatePasswordReturn')
    },
    logOut() {
      this.$emit('logOutReturn')
    },
    showFn() {
      this.show = !this.show
    }
  },
  watch: {
    $route(to){
      this.$emit('activeIndexReturn', to.meta.flag || to.path)
//    if(this.tabShow) {
//      this.addTab(to)
//    }
    },
    value(val) {
  		this.newvalue = val
  	}
  }
}
</script>
<style lang="less">
@import '../../css/common.less';
@import '../../css/width.less';
@import '../../css/margin.less';
.QdmAside {
	overflow: hidden;
  .main {
    overflow: hidden;
    .el-menu {
      background: none;
    }
    .layout-left {
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
      .logo {
        height: 45px;
        line-height: 45px;
        position: relative;
        cursor: pointer;
        color: #fff;
        >img {
          width: 33px;
          height: 33px;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
          left: 13px;
          top: 6px;
        }
        >span {
          font-size: 18px;
          position: absolute;
          left: 55px;
          font-weight: bold;
          display: inline-block;
          height: 45px;
          line-height: 45px;
        }
        &.logoClone {
          width: 64px !important;
        }
        .el-select {
          width: 62%;
          float: right;
          margin-right: 3%;
          .el-input__inner {
            background: rgba(255, 255, 255, 0);
            border-radius: 0;
				    border: 0;
				    padding-left: 0;
				    font-size: 15px;
				    color: #fff;
				    line-height: 45px;
				    height: 45px;
				    font-weight: bold;
          }
          .el-input__suffix {
          	.el-input__icon {
          		line-height: 45px;
          	}
          	.el-select__caret {
          		color: #fff;
          	}
          }
        }
      }
      .el-aside {
        overflow: hidden !important;
        .el-menu {
          border-right: 0;
        }
        &.asideClone {
          width: 64px !important;
        }
        .el-submenu {
          .el-submenu__title {
            .el-submenu__icon-arrow {
              -webkit-transform: rotateZ(-90deg);
              -ms-transform: rotate(-90deg);
              transform: rotateZ(-90deg);
              line-height: 16px;
            }
          }
        }
        .el-submenu.is-opened {
          .el-submenu__title {
            .el-submenu__icon-arrow {
              -webkit-transform: rotateZ(0deg);
              -ms-transform: rotate(0deg);
              transform: rotateZ(0deg);
            }
          }
        }
      }
      .homeMenuItem {
        height: 40px;
        line-height: 40px;
        text-align: left;
        font-weight: 400;
        font-size: 14px;
        .homeMenuItemi {
          font-weight: 400;
          font-size: 14px;
          color: #fff;
          margin-left: 5px;
        }
        span {
          margin-left: 10px;
        }
      }
      .el-submenu {
        .el-submenu__title {
          padding-left: 20px !important;
          height: 45px;
          line-height: 45px;
          text-align: left;
          font-weight: 400;
          font-size: 14px;
          >.titleIcon {
            font-weight: 400;
            font-size: 18px;
            margin-right: 10px;
          }
          >i {
            color: #fff;
          }
          &:hover {
            background-color: #202f4e;
          }
        }
        >ul {
          >li {
            .el-menu-item-group__title {
              padding: 0 !important;
            }
            .el-menu-item {
              padding: 0 !important;
              height: 40px;
              line-height: 40px;
              text-align: left;
              padding-left: 45px !important;
              &:hover {
                background-color: #202f4e;
              }
              &.is-active {
              	background-color: hsla(0,0%,100%,.2);
              }
            }
          }
        }  
      }
      &.layout-left-latest {
        margin-top: 45px;
        .logo {
          position: relative;
          >span {
            font-weight: 400;
            font-size: 16px;
            span {
              margin: 0 15px;
              border-left: 1px solid rgba(255, 255, 255, 0.3);
              height: 16px;
              display: inline-block;
            }
          }
          >i {
            font-weight: 400;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            font-size: 18px;
          }
        }
        .el-submenu {
          .el-submenu__title {
          	font-size: 13px;
            &:hover {
              background-color:rgba(240, 244, 255, 1);
              >span {
                color: #3370FF;
              }
            }
            >i {
              color: #264097;
              font-size: 16px;
              &.el-icon-arrow-down {
              	color: #BEBEBE;
              	font-size: 12px;
              	right: 10px;
              }
            }
          }
          >ul {
            >li {
              .el-menu-item {
              	border-left: 4px solid #fff;
              	font-size: 13px;
                &:hover {
                  background-color: rgba(255, 255, 255, 0.3);
                }
                &.is-active {
	              background: #F0F4FF;
	              border-left: 4px solid #3370FF;
	            }
              }
            }
          }
        }
        .el-submenu.is-opened {
          .el-submenu__title {
            .el-submenu__icon-arrow {
              -webkit-transform: rotateZ(180deg);
              -ms-transform: rotate(180deg);
              transform: rotateZ(180deg);
            }
          }
        }
      }
    }
    .layout-right {
      width: 100%;
      text-align: left;
      overflow: auto;
      .el-container {
      	height: 100vh;
      }
      .header {
        box-sizing: border-box;
        background: rgba(255,255,255,1);
        box-shadow: 0px 1px 2px 0px rgba(56,52,144,0.1);
        z-index: 999;
        border-radius: 0px;
        height: 45px !important;
        line-height: 45px !important;
        padding: 0;
        position: relative;
        padding-left: 6px;
    		width: 100%;
        >i {
          color: #596B8CFF;
          cursor: pointer;
          font-size: 24px;
          margin-top: 10px;
        }
        >span {
          font-weight: 400;
          color: rgba(122,136,166,1);
          font-size: 14px;
          margin-left: 12px;
        }
        >div {
          position: absolute;
          right: 17px;
          top: 0;
          line-height: 55px;
          // width: 144px;
          >span {
            margin-right: 10px;
            position: absolute;
            left: -10px;
            i {
              font-size: 20px;
              font-weight: bold;
              color: #171818FF;
              cursor: pointer;
            }
          }
          .el-dropdown {
            float: right;
            height: 30px;
            margin-top: 7.5px;
            line-height: 30px;
            min-width: 55px;
            max-width: 85px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            border-radius: 15px;
            text-align: center;
            color: #324B75;
            font-size: 14px;
            padding-left: 36px;
            padding-right: 10px;
            cursor: pointer;
            i {
              font-size: 14px;
              margin-left: 5px;
              color: #9FB3D5;
            }
            img {
              width: 30px;
              height: 30px;
              border: 50%;
              position: absolute;
              left: 0;
            }

            >span {
              z-index: 999;
            }
          }
          &.customHtml {
            right: 330px;
            width: 15%;
            line-height: 45px;
            text-align: right;
          }
          &.inline {
            float: left;
          }
          &.controlHtml {
            margin-right: 10px;
            height: 30px;
            right: 130px;
            top: 7.5px;
            .el-input__suffix {
            	line-height: 30px !important;
            }
            >span {
              display: block;
              height: 30px;
              float: left;
              line-height: 30px;
              padding-right: 8px;
              font-size: 12px;
              >i {
                color: #F5222D;
                margin-right: 5px;
                padding-left: 3px;
              }
            }
            .el-select, .el-input {
              float: left;
              font-size: 12px;
              line-height: 45px;
              .el-input__inner {
                height: 30px !important;
                line-height: 30px;
                font-size: 12px;
              }
              .el-input__icon {
                line-height: 22px;
              }
              &.large {
                width: 320px;
              }
              &.medium {
                width: 250px;
              }
              &.small {
                width: 180px;
              }
              &.mini {
                width: 100px;
              }
              &.listCol {
                .el-tag {
                  &:last-child {
                    width: 40px;
                  }
                } 	
              }
              .el-tag {
                width: 50%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              } 	
            }
          }
        }
      }
      .layoutTabs {
        line-height: 30px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        box-shadow: 3px 2px 8px 0px rgba(5,2,14,0.2);
        background: #fff;
        .el-tabs__header {
          margin: 0;
          border-bottom: 0px;
          .el-tabs__nav {
            border-radius: 3px 3px 0 0;
          }
          .el-tabs__nav-wrap {
          	margin-bottom: 0;
          }
          .el-tabs__item {
            height: 34px;
            line-height: 34px;
            border-bottom: 0;
            font-size: 13px;
            &.is-active {
            	border-bottom-color:rgba(255,255,255,.1);
            	color: #4d73da;
            }
            .el-icon-close {
            	line-height: 13px;
            }
          }
        }
      }
	    .el-tabs--card{
		    .el-tabs__header {
		    	border-bottom: 0px !important;
		    	margin-bottom: 0 !important;
		    	.el-tabs__item {
		    		border-bottom: 0px !important;
		    	}
		    }
	    }
      .rightMain {
        padding: 10px;
        width: 100%;
        .el-checkbox__input {
          &.is-checked {
            .el-checkbox__inner {
              background-color: #4170fe;
              border-color: #4170fe;
            }
          }
        }
      }
    }
  }
}
.latestlogo {
  position: absolute;
  left: 0;
  background: #2666CC;
  width: 171px;
  height: 34px;
  padding: 5.5px 10px;
  color: #fff;
  z-index: 9999;
  >img {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    float: left;
    margin-right: 6px;
  }
  div {
    position: relative;
    float: left;
    text-align: left;
    line-height: 34px;
    width: calc(100% - 40px);
    font-size: 13px;
    >.separate {
      position: absolute;
      right: 16px;
      top: 10px;
      height: 13px;
      background: rgba(255, 255, 255, 0.3);
      display: block;
      width: 1px;
    }
    >i {
      position: absolute;
      right: -10px;
      top: 7px;
      font-size: 18px;
      cursor: pointer;
    }
  }
}
.topLeftBox {
  position: absolute;
  left: 20px;
  top: 45px;
  width: 330px;
  padding: 23px 28px;
  background: #FFFFFF;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  z-index: 9;
  >div {
    width: 33%;
    text-align: center;
    float: left;
    padding: 13px 0 11px;
    cursor: pointer;
    >img {
      width: 36px;
      height: 36px;
      display: block;
      margin: 0 auto;
      border-radius: 5px;
      margin-bottom: 8px;
    }
    >span {
      font-size: 14px;
      color: #333;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 100%;
    }
  }
}
.dropdownMain {
  border-radius: 0;
  padding: 0;
  .el-dropdown-menu__item {
    height: 34px;
    line-height: 34px;
    padding: 0;
    padding-left: 35px;
    padding-right: 15px;
    min-width: 65px;
    position: relative;
    border-left: 5px solid #4D73DA;
    font-size: 13px;
    color: #333;
    >i {
      font-size: 16px;
      margin-left: 5px;
      position: absolute;
      left: 8px;
      line-height: 33px;
    }
    &:nth-child(2) {
      border-left-color: #37B2F5;
    }
    &:nth-child(3) {
      border-left-color: #F7F9FF;
    }
  }
  .popper__arrow {
    display: none;
  }
}
.indexMenuItem {
  padding-left: 20px !important;
  height: 45px !important;
  line-height: 45px !important;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  color: #333 !important;
  padding-right: 10px;
  i {
    &.el-icon-upload2 {
      float: right;
      line-height: 42px;
      font-size: 14px;
      color: #2666CC;
      transform: rotate(-90deg);
      width: auto;
      margin-right: 0;
      font-weight: bold;
      cursor: pointer;
    }
    &.titleIcon {
      color: #264097;
      font-weight: 400;
      font-size: 18px;
      margin-right: 10px;
    }
  }
  &.isCollapseindexMenuItem {
    i {
      &.el-icon-upload2 {
        margin-right: 18px;
        transform: rotate(90deg);
      }
      &.titleIcon {
        display: none;
      }
    }
  }
  &.is-active {
    i {
      &.el-icon-upload2 {
        color: #2666CC;
      }
      &.titleIcon {
        color: #264097;
      }
    }
  }
}
.el-menu--vertical {
  .el-menu--popup {
    /*margin: 5px;*/
    padding: 5px 10px 0;
    font-size: 16px;
    border-radius: 0;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    margin-left: 0;
    color: #fff;
    background: rgb(0, 21, 41);
    .el-menu-item-group {
      >ul {
        border-top: 1px solid #fff;
        >li {
          float: left;
          padding: 0 15px;
          line-height: 30px;
          height: 30px;
        }
      }
    }
    .isCollapseDiv {
      >i {
        margin-right: 8px;
      }
      font-size: 14px;
    }
  }
  .el-menu-item-group__title {
    padding: 3px;
  }
}
::-webkit-scrollbar-track-piece {
  background-color:#fff;
}
::-webkit-scrollbar {
	width:3px;
	height:9px;
	border-radius: 0px;
}
::-webkit-scrollbar-thumb {
	background-color:#E3E3E9FF;
	background-clip:padding-box;
	min-height:8px;
	border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background-color:#ecf4ff;
}
</style>