cloud-web-corejs 1.0.0 → 1.0.2

package/src/layout/components/Sidebar/index.vue

@@ -0,0 +1,1198 @@
+<template>
+  <div :class="{ 'has-logo': showLogo }">
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
+
+    <div class="hamburger-box" ref="hamhurger" @click="openUserInfo">
+      <!-- <hamburger :is-active="sidebar.opened" @toggleClick="toggleSideBar" /> -->
+      <div>
+        <p class="name"><i class="iconfont icon-ziyuan"></i><span>{{ userInfo.nickName }}</span></p>
+      </div>
+    </div>
+    <div class="business-name" ref="business">
+      <el-tooltip :enterable="false" effect="dark" :content="companyInfo.companyName" :placement="direction">
+        <p>{{ companyInfo.companyName }}</p>
+      </el-tooltip>
+    </div>
+    <div class="fase-box" ref="fase" @mouseleave="$emit('selfClose')" @mouseenter="$emit('selfEnter')">
+      <langTool></langTool>
+      <div class="item" @click="openCompanyDialog">
+        <el-tooltip :enterable="false" effect="dark" content="切换组织" :placement="direction">
+          <i class="el-icon-set-up"/>
+        </el-tooltip>
+      </div>
+      <div class="item">
+        <el-tooltip :enterable="false" effect="dark" content="流程待办" :placement="direction">
+          <i class="iconfont icon-liuchengdaiban" @click="$router.push('/basic/wf/wf_manage/list')"/>
+        </el-tooltip>
+      </div>
+      <div class="item" @click="logout()">
+        <el-tooltip :enterable="false" effect="dark" content="退出" :placement="direction">
+          <i class="el-icon-switch-button"/>
+        </el-tooltip>
+      </div>
+    </div>
+    <template v-for="router1 in viewRouter">
+      <template v-for="router2 in router1.children">
+        <div
+          class="second-list"
+          :key="router1.id + 't'+router2.id"
+          :class="{ on: router2.id == nowNavID }"
+          @mouseenter="stopFlag = 1"
+          @mouseleave="showNav()"
+          v-show="router2.id == nowNavID"
+          :ref="'seconMenus' + router2.id"
+        >
+          <i class="ico-arrow"></i>
+          <div>
+            <div class="tit"><i :class="getMenuClass(router2,2)"></i><span>{{ getMenuName(router2) }}</span></div>
+            <dl v-for="(router3,index3) in router2.children" :key="'router3'+index3">
+
+              <div class="item" v-if="!router3.hidden" @click="rourteTo(router3,router1)">
+                <!--<i class="el-icon-caret-right"></i>-->
+                <i :class="getMenuClass(router3,3)"></i>
+                <a>{{ getMenuName(router3) }}</a>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </template>
+    </template>
+    <el-menu
+      class="menu-box"
+      :class="{'lang-zh':$i18n.locale=='zh'}"
+      text-color="#fff"
+      active-text-color="#fff"
+      :unique-opened="true"
+      @mouseleave="showNav()"
+      ref="seconMenus"
+    >
+      <el-scrollbar wrap-class="scrollbar-wrapper" id="menuUl">
+        <el-submenu v-for="menuModule in menuModules" :index="''+menuModule.id" :key="'menuModule'+menuModule.id">
+          <template slot="title" @click="rourteTo(menuModule)">
+            <i :class="getMenuClass(menuModule,1)"></i>
+            <span>{{ getMenuName(menuModule) }}</span>
+          </template>
+          <el-menu-item v-for="(router1, index1) in menuModule.children" :key="index1" :index="''+router1.id"
+                        :class="getMenuClass(router1,2)"
+                        @mouseenter.native="showNav(router1, $event)" @mouseleave.native="showNav()"
+                        @click="rourteTo(router1)">
+            {{ getMenuName(router1) }}
+            <i class="el-icon-caret-right" v-if="router1.children.length > 0"/>
+          </el-menu-item>
+        </el-submenu>
+      </el-scrollbar>
+    </el-menu>
+    <div class="menu-btn">
+      <i class="el-icon-arrow-up" @click="toUpMove()"></i>
+      <i class="el-icon-arrow-down" @click="toDownMove()"></i>
+    </div>
+    <div id="tta" style="position: absolute;height: 100%;top: 0;right: 0;z-index: 9999;width: 800px;left: 100%;"
+         v-if="showMenuModal"></div>
+    <el-dialog
+      title="切换组织"
+      width="355px"
+      custom-class="dialog-style list-dialog"
+      v-if="showCompanyDialog"
+      :visible.sync="showCompanyDialog"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="false"
+      v-el-drag-dialog
+      v-el-dialog-center
+      @close="changeCompanyClose"
+    >
+      <div class="cont">
+        <el-input placeholder="搜索" class="search-btn" v-model="filterText"></el-input>
+        <el-tree
+          :props="defaultProps"
+          :load="loadNode"
+          node-key="id"
+          ref="tree"
+          highlight-current
+          lazy
+          :expand-on-click-node="true"
+          @node-click="handleNodeClick"
+          class="organization-tree"
+          icon-class="el-icon-arrow-right"
+          :filter-node-method="filterNode"
+        ></el-tree>
+      </div>
+      <!-- <span slot="footer" class="dialog-footer">
+				<el-button type="primary" plain class="button-sty" @click="changeCompanyClose">
+					<i class="el-icon-close el-icon"></i>
+					取 消
+				</el-button>
+				<el-button type="primary" @click="changeCompany" class="button-sty">
+					<i class="el-icon-check el-icon"></i>
+					确 定
+				</el-button>
+			</span> -->
+    </el-dialog>
+
+    <infoIframeDialog v-if="showInfoIframeDialog" :visiable.sync="showInfoIframeDialog"
+                      :dataId="userInfo.id"></infoIframeDialog>
+    <userInfo v-if="showUserInfoDialog" :visiable.sync="showUserInfoDialog" :_dataId="userInfo.id" topValue="128px"
+              @reload="userInfoReload"></userInfo>
+
+    <onlineTalk></onlineTalk>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from 'vuex';
+import variables from '@/styles/variables.scss';
+import userInfo from '@base/views/user/user/info.vue';
+import onlineTalk from "@base/components/onlineTalk";
+import {
+  getToken
+} from '@base/utils/auth';
+import indexUtil from "@base/utils/index.js"
+import settingConfig from "@/settings";
+import langTool from "../langTool.vue";
+
+
+export default {
+  data() {
+    return {
+      direction: 'bottom',
+      defaultOpenedsArray: [],
+      viewRouter: [],
+      showMenuModal: false,
+      menuheight: {
+        height: ''
+      },
+      defaultProps: {
+        label: 'label', //这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
+        children: [],
+        isLeaf: 'leaf'
+      },
+      filterText: null,
+      showCompanyDialog: false,
+      choose_company_info: '',
+      userInfo: {},
+      companyInfo: {},
+      showUserInfoDialog: false,
+      hoverStatus: false,
+      nowNavID: 'null',
+      stopFlag: 0,
+      showInfoIframeDialog: false,
+      currentMenu: null,
+      menuModules: [],
+      firstMenuHeight: 0, // 第一个菜单的高度
+      eveyMenuHeight: 48, // 每一个菜单的高度
+    };
+  },
+  components: {userInfo, onlineTalk, langTool},
+  computed: {
+    ...mapGetters(['permission_routes', 'sidebar', 'sidebarRouters']),
+    activeMenu() {
+      const route = this.$route;
+      const {meta, path} = route;
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu;
+      }
+      return path;
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo;
+    },
+    variables() {
+      return variables;
+    },
+    /*isCollapse() {
+      if (this.sidebar.opened) {
+        this.direction = 'bottom';
+      } else {
+        this.direction = 'right-start';
+      }
+      return !this.sidebar.opened;
+    }*/
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    indexUtil.initI18nMessage('menus')
+  },
+  mounted() {
+    this.getUserInfo();
+    setTimeout(() => {
+      this.filterRoute();
+    }, 100);
+    this.countHeight();
+    let query = this.$route.query;
+    if (query && query.flag == 1) {
+      this.showCompanyDialog = true;
+    }
+  },
+  methods: {
+    getMenuName(item) {
+      let locale = this.$i18n?.locale;
+      let zhTitle = (item.meta ? item.meta.title : '');
+      let enTitle = (item.meta ? item.meta.enTitle : '');
+      let title;
+      if (locale == "en") {
+        title = enTitle || zhTitle;
+      } else {
+        title = zhTitle
+      }
+      if (!enTitle || locale !== "en") {
+        title = zhTitle
+      }
+      if (this.$t) {
+        title = this.$t(title)
+      }
+
+      return title;
+    },
+    jumpOutLink(route) {
+      let path = route.url || route.path;
+      if (route.type == 4 && path) {
+        if (path.indexOf('token={token}') >= 0) {
+          path = path.replace('token={token}', 'token=' + getToken())
+        }
+        window.open(path);
+      }
+    },
+    changeModules(row, cRow) {
+      if (!row.route) return;
+      localStorage.setItem('currentMenuId', row.id);
+      let route = row.route ? '/' + row.route : '';
+      sessionStorage.setItem('reUrl', cRow.path)
+      sessionStorage.setItem('reCid', row.id)
+      location.href = route + '/index.html/#/home';
+
+      // location.reload();
+    },
+    filterRoute() {
+      var oldRoutes = JSON.parse(JSON.stringify(this.sidebarRouters));
+      var nRoute1s = [];
+      oldRoutes.forEach((route1, index1) => {
+        let nRoute2s = [];
+        if (!route1.hidden) {
+          route1.children.forEach((route2, index2) => {
+            let nRoute3s = [];
+            if (!route2.hidden) {
+              route2.children.forEach((route3, index3) => {
+                if (!route3.hidden) {
+                  nRoute3s.push(route3);
+                }
+              });
+            }
+            if (route2.type == 4 || route2.url || nRoute3s.length > 0) {
+              route2.children = nRoute3s;
+              nRoute2s.push(route2);
+            }
+          });
+        }
+        if (route1.type == 4 || route1.url || nRoute2s.length > 0) {
+          route1.children = nRoute2s;
+          nRoute1s.push(route1);
+        }
+      });
+      this.viewRouter = nRoute1s || [];
+      this.menuModules = nRoute1s || [];
+
+      let reUrl = sessionStorage.getItem('reUrl');
+      let reCid = sessionStorage.getItem('reCid');
+      if (reUrl) {
+        this.$nextTick(() => {
+          this.$refs.seconMenus.open(reCid);
+        })
+        this.$router.push(reUrl);
+        sessionStorage.removeItem('reUrl');
+        sessionStorage.removeItem('reCid');
+      }
+    },
+    filterRoute1() {
+      var oldRoutes = JSON.parse(JSON.stringify(this.sidebarRouters));
+      var nRoute1s = [];
+      oldRoutes.forEach((route1, index1) => {
+        let nRoute2s = [];
+        if (!route1.hidden && route1.route) {
+          route1.children.forEach((route2, index2) => {
+            let nRoute3s = [];
+            if (!route2.hidden) {
+              route2.children.forEach((route3, index3) => {
+                if (!route3.hidden) {
+                  nRoute3s.push(route3);
+                }
+              });
+            }
+            if (nRoute3s.length > 0) {
+              route2.children = nRoute3s;
+              nRoute2s.push(route2);
+            }
+          });
+        }
+        if (nRoute2s.length > 0) {
+          route1.children = nRoute2s;
+          nRoute1s.push(route1);
+        }
+      });
+      let rows = nRoute1s;
+      if (rows.length) {
+        let currentMenu;
+        if (nRoute1s.length) {
+          var currentMenuId = localStorage.getItem('currentMenuId');
+          if (currentMenuId) {
+            currentMenu = nRoute1s.find(row => row.id == currentMenuId);
+          }
+          if (!currentMenu) {
+            currentMenu = nRoute1s[0];
+          }
+          this.viewRouter = currentMenu.children;
+        }
+        this.currentMenu = currentMenu;
+        this.menuModules = rows || [];
+
+        /*if (currentMenu) {
+          if (currentMenu.route != WEB_PREFIX.substring(1, WEB_PREFIX.length)) {
+            this.changeModules(currentMenu, 1);
+          } else {
+            localStorage.setItem('currentMenuId', currentMenu.id);
+          }
+        } else {
+          localStorage.removeItem('currentMenuId');
+        }*/
+      }
+    },
+    rourteTo(route) {
+      let path = route.url || route.path;
+      if (!path) {
+        return
+      }
+      this.showMenuModal = true;
+      setTimeout(() => {
+        this.showMenuModal = false;
+      }, 200);
+      try {
+        if (route.linkType == 4) {
+          this.jumpOutLink(route)
+        } else if (route.linkType == 3) {
+          this.$router.push({path: path, query: {url: route.outLink, route: route.route}});
+        } else {
+          this.$router.push(path);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    logout() {
+      this.$store.dispatch('user/logout2').then(res => {
+        this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+      });
+    },
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar');
+    },
+    countHeight() {
+      var h = this.$refs.hamhurger.offsetHeight + this.$refs.fase.offsetHeight + this.$refs.business.offsetHeight;
+      this.menuheight.height = window.innerHeight - h + 'px';
+    },
+    handleNodeClick(data, node, v) {
+      if (!data.hasChild) {
+        this.choose_company_info = data;
+        this.changeCompany();
+      } else {
+        this.choose_company_info = {};
+      }
+    },
+    // 异步树叶子节点懒加载逻辑
+    loadNode(node, resolve) {
+      let companyCode = node && node.data && node.data.companyCode ? node.data.companyCode || '' : '';
+      let url = !companyCode ? USER_PREFIX + '/user_company_info/getAllList' : USER_PREFIX + '/user_company_info/getChildren';
+
+      this.$http({
+        url: url,
+        method: 'post',
+        data: {
+          parentCompanyCode: companyCode
+        },
+        success: res => {
+          let datas = res.objx || [];
+          let parentLabel = companyCode ? node.label : null;
+          datas.forEach(item => {
+            item.leaf = !item.hasChild;
+            let label = item.companyName;
+            /*if(companyCode){
+              label = label + '('+companyTypeMap[item.companyType]+')'
+            }*/
+            item.label = label;
+            item.parentLabel = parentLabel;
+          });
+
+          if (node.level === 0) {
+            if (datas.length > 0 && datas[0].hasChild) {
+              this.$nextTick(() => {
+                let nodedata = node.childNodes[0];
+                nodedata.expanded = true;
+                nodedata.loadData();
+              });
+            }
+          }
+          resolve(datas);
+        }
+      });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      let flag1 = data.label.indexOf(value) !== -1;
+      let flag2 = data.parentLabel && data.parentLabel.indexOf(value) !== -1;
+      return flag1 || flag2;
+    },
+    openCompanyDialog() {
+      this.filterText = null;
+      this.showCompanyDialog = true;
+    },
+    getWebPrefix(callback) {
+      this.$http({
+        url: USER_PREFIX + '/auth/getWebPrefix',
+        method: `post`,
+        data: {},
+        isLoading: true,
+        success: res => {
+          let webPrefix = res.objx
+          callback && callback(webPrefix)
+        }
+      });
+    },
+    changeCompany() {
+      let row = this.choose_company_info;
+      let query = this.$route.query;
+      let flag = query && query.flag == 1 ? 1 : null;
+      this.showCompanyDialog = false;
+      if (row && row.companyCode) {
+        this.$baseLoading({target: document.body, fullscreen: true});
+        this.$http({
+          url: USER_PREFIX + '/auth/switchCompany',
+          method: 'post',
+          data: {stringOne: row.companyCode},
+          isLoading: true,
+          success: res => {
+            this.getWebPrefix((prefix) => {
+              let webPrefix = prefix ? ("/" + prefix) : window.MAIN_WEB_PREFIX;
+              sessionStorage.removeItem("out-token");
+              this.$store.dispatch('user/changeCompanyInfo', row);
+              this.$store.dispatch('tagsView/delAllViews');
+              window.location.href = webPrefix + '/index.html';
+            });
+          }
+        });
+      } else {
+        if (flag == 1) {
+          this.$router.push({
+            path: '/'
+          });
+        }
+      }
+    },
+    changeCompanyClose() {
+      let query = this.$route.query;
+      let flag = query && query.flag == 1 ? 1 : null;
+      if (flag == 1) {
+        this.$router.push({
+          path: '/'
+        });
+      }
+      this.showCompanyDialog = false;
+    },
+    getUserInfo() {
+      this.$http({
+        url: USER_PREFIX + '/user/currentUser',
+        method: 'post',
+        success: res => {
+          let userInfo = res.objx;
+          this.headPhotoUrl = userInfo.headPhotoUrl ? userInfo.headPhotoUrl : require('@/resources/images' + '/default-header.png');
+          this.userInfo = userInfo;
+        }
+      });
+
+      this.$http({
+        url: USER_PREFIX + '/company_info/getCurrent',
+        method: `post`,
+        success: res => {
+          this.companyInfo = res.objx || {};
+        }
+      });
+    },
+    openUserInfo() {
+      this.showUserInfoDialog = true;
+      // this.showInfoIframeDialog = true;
+    },
+    userInfoReload() {
+      this.showUserInfoDialog = true;
+    },
+    showNav(route, event) {
+      let id = route && route.id ? route.id : null;
+      if (id != null) {
+        if (!route.children || !route.children.length) {
+          return;
+        }
+        this.stopFlag = 1;
+        this.nowNavID = id;
+        this.$nextTick(() => {
+          var wh = window.innerHeight;
+          let dom = event.target;
+          let domAttr = dom.getBoundingClientRect();
+          // var sh1 = dom.offsetTop;
+          var sh1 = domAttr.top;
+          let $snav = this.$refs['seconMenus' + id][0];
+          let snavAttr = $snav.getBoundingClientRect();
+
+          // var sh2 = $snav.outerHeight;
+          var sh2 = snavAttr.height;
+          var sh = wh - (sh1 + sh2);
+
+          var hd = 20;
+          var xhd = sh - hd; //移动距离+固定值
+          if (sh >= 0) {
+
+            $snav.style['margin-top'] = sh1 + 'px';
+          } else if (sh < 0) {
+            let bd = sh1 + sh;
+
+            $snav.style['margin-top'] = bd + 'px';
+            $snav.querySelector(".ico-arrow").style['margin-top'] = (sh1 - bd) + 'px';
+          }
+        });
+      } else {
+        this.stopFlag = 0;
+        setTimeout(() => {
+          if (this.stopFlag == 0) {
+            this.nowNavID = id;
+          }
+        }, 200);
+      }
+    },
+    jumpTo(row, firstRow) {
+      let route = firstRow.route ? '/' + firstRow.route : '';
+      if (route == WEB_PREFIX) {
+        this.$router.push({
+          path: row.path
+        });
+      } else {
+        this.changeModules(firstRow, row);
+      }
+    },
+    toDownMove() {
+      let containter = document.getElementById('menuUl').querySelector(".scrollbar-wrapper");
+      let menuscrollTop = containter.scrollTop
+      let scrollHeight = containter.scrollHeight
+      let val = menuscrollTop + this.eveyMenuHeight;
+      if (val < scrollHeight) {
+        containter.scrollTop = val
+      } else {
+        containter.scrollTop = scrollHeight
+      }
+    },
+    toUpMove() {
+      let containter = document.getElementById('menuUl').querySelector(".scrollbar-wrapper");
+      let menuscrollTop = containter.scrollTop
+      let val = menuscrollTop - this.eveyMenuHeight;
+      if (val > 0) {
+        containter.scrollTop = val
+      } else {
+        containter.scrollTop = 0
+      }
+    },
+    getMenuClass(menu, flag) {
+      let res = "";
+      if (menu.menuImg) {
+        res = "iconfont " + menu.menuImg;
+      } else if (flag == 1) {
+        res = "iconfont icon-jinggao";//一级默认图标
+      } else if (flag == 2) {
+        res = "iconfont icon-circle";//二级默认图标
+      } else if (flag == 3) {
+        res = "iconfont icon-thirdMemu";//三级级默认图标
+      }
+
+      if (flag == 2) {
+        if (menu.id == this.nowNavID) {
+          res += " on";
+        }
+      }
+
+      return res;
+    },
+  }
+};
+</script>
+<style lang="scss">
+@import '~@/styles/variables.scss';
+
+.hamburger-box {
+  background-color: #0000004d;
+  height: 42px;
+  /* line-height: 30px; */
+  text-align: center;
+  /* box-shadow: 0 2px 6px rgb(0 0 0 / 10%); */
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.65);
+
+  > div {
+    color: #fff;
+    font-size: 13px;
+    margin-bottom: 4px;
+    cursor: pointer;
+    height: 36px;
+    border-radius: 7px;
+    margin: 6px 10px 6px 8px;
+    overflow: hidden;
+    background: #2a6494;
+  }
+
+  p {
+    color: #fff;
+    font-size: 13px;
+    margin-bottom: 4px;
+    cursor: pointer;
+    /* border: solid 1px #ffffff61; */
+    display: block;
+    line-height: 27px;
+    /* width: 88%; */
+    margin-top: 6px;
+    border-radius: 7px;
+    margin: 6px 10px 6px 8px;
+    background: #2a6494;
+
+    i {
+      font-size: 14px;
+      vertical-align: middle;
+      margin: 0 4px 0 6px;
+      height: 36px;
+      line-height: 36px;
+      width: 21px;
+    }
+
+    span {
+      width: 94px;
+      display: table-cell;
+      height: 32px;
+      word-break: break-word;
+      line-height: 16px;
+      overflow: hidden;
+      vertical-align: middle;
+    }
+
+    &.name {
+      display: table-row;
+      margin: 0;
+    }
+  }
+}
+
+.business-name {
+  height: 47px;
+  color: #ffffffb8;
+  background: #0000004d;
+  /* padding-top: 12px; */
+  font-size: 12px;
+  /* padding-left: 5px; */
+  display: table-cell;
+  vertical-align: middle;
+  width: 140px;
+  padding: 6px 10px;
+  text-align: center;
+
+  p {
+    margin: 0;
+  }
+}
+
+.fase-box {
+  color: #fff;
+  /* border-bottom: solid 1px rgba(255, 255, 255, 0.12); */
+  border-top: solid 1px rgba(255, 255, 255, 0.12);
+  background: #225076;
+  padding: 4px 0 8px;
+  width: 100%;
+  z-index: 999;
+  position: relative;
+  /* display: flex;*/
+  //text-align: left !important;
+  // &:hover {
+  // 	color: $baseColor;
+  // 	background-color: #fbfdfe;
+  // 	.fase-list {
+  // 		display: block;
+  // 	}
+  // }
+  .item {
+    flex: 1;
+    text-align: center;
+    font-size: 16px;
+    height: 40px;
+    line-height: 40px;
+    cursor: pointer;
+    display: inline-block;
+    min-width: 30px;
+  }
+
+  .fase-list {
+    position: absolute;
+    left: 100%;
+    color: $baseColor;
+    background-color: #fbfdfe;
+    border: solid 1px $baseColor;
+    border-left: none;
+    top: -0.5px;
+    padding: 10px 0 10px 24px;
+    height: 43px;
+    width: 413px;
+    display: none;
+
+    .l-item {
+      display: inline-block;
+      font-size: 12px;
+      margin-right: 36px;
+      line-height: 20px;
+      cursor: pointer;
+
+      i {
+        vertical-align: middle;
+        margin-right: 4px;
+        font-size: 15px;
+        margin-bottom: 2px;
+      }
+
+      &:hover {
+        border-bottom: solid 1px $baseColor;
+      }
+    }
+  }
+}
+
+.openSidebar .fase-box {
+  text-align: center;
+  //padding: 0;
+}
+
+#app .sidebar-container {
+  overflow: visible;
+  z-index: 1003;
+
+  &.hover {
+    z-index: 1003;
+  }
+
+  &.hover1 .fase-box {
+    width: 138px;
+    color: $baseColor;
+    background-color: #fbfdfe;
+    border-color: $baseColor;
+  }
+
+  .el-menu.menu-box {
+    height: calc(100vh - 173px);
+    font-size: 13px;
+    z-index: -1;
+    position: relative;
+    background-color: rgba(0, 0, 0, .2);
+    word-break:break-word;
+    .el-submenu {
+      overflow: hidden; //有点电脑分辨率问题
+      .el-submenu__title {
+        padding: 0 11px !important;
+        height: 48px;
+        line-height: 48px;
+
+        i {
+          color: #fff;
+          font-size: 13px;
+          margin-right: 0;
+          width: 18px;
+
+          &.iconfont {
+            margin-right: 5px;
+            font-size: 19px;
+            float: left;
+          }
+
+          &.el-submenu__icon-arrow {
+            right: 3px;
+            text-align: center;
+            font-size: 12px;
+            margin-top: -5px;
+            display: none;
+          }
+        }
+        > span{
+          height:48px;display: table-cell;width:114px;vertical-align: middle;font-size: 13px;white-space: normal;line-height: 16px;
+        }
+      }
+
+      &.is-opened .el-submenu__title {
+        //background-color: rgba(27, 66, 97) !important;
+      }
+    }
+
+    .el-submenu {
+      .el-menu {
+        background: rgba(0, 0, 0, 0.35) !important;
+        box-shadow: 0px -5px 8px #00000014 inset;
+        //padding:4px 0;
+      }
+
+      .el-menu-item {
+        height: auto;
+        line-height: 1.4;
+        padding-left: 33px !important;
+        font-size: 12px;
+        opacity: 0.8;
+        margin: 10px 0 10px 14px;
+        padding: 7px 2px 7px 0px;
+        border-radius: 8px;
+        text-align: left;
+        min-width: 81px !important;
+        white-space: normal;
+        margin-right: 10px;
+        word-break:break-word;
+
+        &:before {
+          position: absolute;
+          top: 50%;
+          height: 20px;
+          margin-top: -10px;
+          line-height: 20px;
+          left: 7px;
+          font-size: 18px;
+        }
+
+        [class^=el-icon-] {
+          font-size: 12px;
+          color: #FFF;
+          position: absolute;
+          right: 2px;
+          top: 50%;
+          margin-top: -5px;
+          width: 14px;
+          zoom: 0.8;
+          display: none;
+        }
+
+        &:hover, &.on {
+          opacity: 1;
+          background-color: #FBFDFE !important;
+          color: $baseColor !important;
+
+          .el-icon-arrow-right {
+            color: $baseColor
+          }
+        }
+      }
+    }
+    &.lang-zh{
+      font-size:14px;
+      .el-submenu {
+        .el-submenu__title {
+          > span{font-size:14px;text-align:center}
+          i.iconfont{margin-right:2px;}
+        }
+        .el-menu-item{font-size:13px}
+      }
+
+    }
+  }
+}
+
+.main-container {
+  z-index: 1002;
+}
+
+.menu-btn {
+  background-color: #0000001c;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  box-shadow: 0 -10px 6px rgb(0 0 0 / 10%);
+  display: flex;
+  color: #FFF;
+  font-size: 16px;
+
+  i {
+    display: inline-block;
+    flex: 1;
+    line-height: 30px;
+    cursor: pointer;
+    border-right: solid 1px rgba(0, 0, 0, 0.2);
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+  }
+}
+
+/*.menu-box {
+  background-color: #0000002e !important;
+  font-size: 14px;
+  z-index: -1;
+  position: relative;
+  &.hover .el-scrollbar {
+    width: 1000px;
+  }
+  .el-scrollbar {
+    .el-scrollbar__view {
+      padding-top: 1px;
+    }
+    .el-scrollbar__bar.is-vertical {
+      left: 104px;
+    }
+  }
+  .first-item {
+    position: relative;
+    width: 104px;
+    &:nth-child(-n + 6) .second-list {
+      bottom: inherit !important;
+      top: -40.5px !important;
+    }
+    &:nth-child(1) .second-list {
+      top: 0 !important;
+    }
+    &:nth-last-child(-n + 6) .second-list {
+      bottom: -1%;
+      top: inherit;
+    }
+    .f-name {
+      height: 55px;
+      line-height: 55px;
+      padding-left: 9px;
+      color: #fff;
+      cursor: pointer;
+      position: relative;
+      padding-right: 6px;
+      -webkit-transition: all 0.2s ease-in;
+      -moz-transition: all 0.2s ease-in;
+      -o-transition: all 0.2s ease-in;
+      transition: all 0.2s ease-in;
+      width: 104px;
+      i.el-icon-arrow-right {
+        position: absolute;
+        right: 3px;
+        top: 21.5px;
+        width: 14px;
+        height: 14px;
+      }
+      .el-icon-s-opportunity {
+        opacity: 0.92;
+        font-size: 13px;
+		vertical-align: middle;
+		margin-right: 2px;
+      }
+      span{display: inline-block;width: calc(100% - 20px);vertical-align: middle;line-height: 1.2;}
+    }
+
+    &:hover,
+    &.current {
+      .f-name {
+        background-color: #fbfdfe;
+        color: $baseColor;
+      }
+      .second-list {
+        display: block;
+      }
+    }
+  }
+}
+
+
+*/
+.second-list {
+  display: none;
+  position: absolute;
+  left: $sideBarWidth;
+  padding-left: 2px;
+  top: 0.5px;
+  // &:before {
+  //   content: "";
+  //   top: 22px;
+  //   bottom: 22px;
+  //   background-color: $baseColor;
+  //   width: 2px;
+  //   position: absolute;
+  //   left: 24px;
+  // }
+  > div {
+    background: #fbfdfe;
+    border: solid 1px $baseColor;
+    top: -0.5px;
+    padding: 24px 0;
+    border-radius: 8px;
+    margin-left: 9px;
+    max-height: calc(84vh);
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 458px;
+  }
+
+  .ico-arrow {
+    border-top: solid 7px transparent;
+    border-bottom: solid 7px transparent;
+    border-right: solid 7px $baseColor;
+    position: absolute;
+    left: 2px;
+    top: 8px;
+  }
+
+  &.on {
+    display: block;
+  }
+
+  .tit {
+    width: auto;
+    /* text-align: center; */
+    /* background: #22507614; */
+    color: $baseColor;
+    /* border: dashed 1px #1d4667; */
+    padding: 0 0 10px;
+    /* border-radius: 6px; */
+    /* margin: 5px auto; */
+    margin: 0 22px;
+    display: block;
+    border-bottom: solid 1px #eee;
+
+    i, span {
+      opacity: 1;
+      vertical-align: middle;
+      margin-right: 7px;
+      font-size: 18px;
+    }
+
+    span {
+      font-size: 14px
+    }
+  }
+
+  dl {
+    padding: 8px 16px 3px 24px;
+    margin-top: 0;
+    margin-bottom: 0;
+    display: inline-block;
+    width: 50%;
+    position: relative;
+    word-break: break-all;
+
+    &:after {
+      content: "";
+      width: 1px;
+      height: 14px;
+      background: #e4e4e4;
+      display: inline-block;
+      position: absolute;
+      right: -5px;
+      top: 50%;
+      margin-top: -3px;
+    }
+
+    .s-name {
+      color: $baseColor;
+      display: inline-block;
+      width: 190px;
+      font-size: 14px;
+      vertical-align: top;
+      margin-top: 11px;
+      text-align: right;
+
+      i {
+        margin-left: 5px;
+
+        &.icon {
+          font-size: 13px;
+          opacity: 0.92;
+          margin-left: 2px;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    .item {
+      position: relative;
+      border: dashed 1px #FFF;
+      border-radius: 6px;
+      display: block;
+      padding: 6px 8px 6px 27px;
+      cursor: pointer;
+
+      &:hover {
+        border-color: $baseColor;
+        color: $baseColor;
+
+        i, a {
+          color: $baseColor;
+        }
+      }
+
+      // &:after {
+      //   content: "";
+      //   width: 1px;
+      //   height: 12px;
+      //   background: #dcdcdc;
+      //   position: absolute;
+      //   right: -25px;
+      //   top: 2px
+      // }
+
+      i {
+        opacity: 0.8;
+        margin-right: 8px;
+        vertical-align: middle;
+        position: absolute;
+        left: 4px;
+        top: 50%;
+        margin-top: -11px;
+        height: 22px;
+        line-height: 22px;
+        font-size: 16px;
+      }
+
+      a {
+        color: rgba(0, 0, 0, 0.82);
+        display: inline-block;
+        font-size: 13px;
+        position: relative;
+        overflow: initial !important;
+        -webkit-transition: all 0.2s ease-in;
+        -moz-transition: all 0.2s ease-in;
+        -o-transition: all 0.2s ease-in;
+        transition: all 0.2s ease-in;
+        width: auto !important;
+        vertical-align: middle;
+        word-break: break-word;
+        &:hover {
+          color: $baseColor;
+
+          // &:after {
+          //   content: '';
+          //   position: absolute;
+          //   bottom: -4px;
+          //   left: 0;
+          //   right: 0;
+          //   border-bottom: solid 1px $baseColor;
+          // }
+        }
+      }
+    }
+
+    &:last-child {
+      .list-box {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+// .el-submenu .el-menu {
+//   height: auto !important;
+// }
+</style>