{"remainingRequest":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\TransFlow\\src\\components\\common\\Whole.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\components\\common\\Whole.vue","mtime":1672881376061},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\css-loader\\dist\\cjs.js","mtime":1672881375404},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n   .aside{\n    overflow-y: scroll;\n  overflow-x: hidden;\n   background: url('../../assets/img/leftBg.png'); \n    max-height: 1000px;\n    background-size: 100%;\n  \n}\n.aside::-webkit-scrollbar {\n    display:none;\n  }\n.el-submenu__title:hover {\n    background-color: #3989fa!important;\n}\n.el-menu-item:focus, .el-menu-item:hover {\n    outline: 0;\n    background-color: #3989fa!important;\n} \n\n",{"version":3,"sources":["Whole.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwOA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Whole.vue","sourceRoot":"src/components/common","sourcesContent":["<template>\r\n  <div class=\"wrapper\">\r\n    <!-- 页面头部部分 -->\r\n    <!-- <div style=\"display:inline-block\"> -->\r\n    <el-aside style=\"width:13%;position: absolute;height: 100%;\" class=\"aside\">\r\n        <div class=\"logo\"><img src=\"@/assets/img/topTitle.png\" alt=\"\" width=\"100%\" height=\"100%\"></div>\r\n      <SideMenu :navMenus=\"leftMenus\"></SideMenu>\r\n    </el-aside> \r\n    <!-- </div> -->\r\n     \r\n    \r\n\r\n    <!-- 页面左侧二级菜单栏，和主体内容区域部分 -->\r\n     <!-- <el-container> -->\r\n        <div class=\"header\" >\r\n      <!-- <div class=\"logo\"><img src=\"@/assets/img/topTitle.png\" alt=\"\" width=\"100%\" height=\"100%\"></div> -->\r\n      <!-- 水平一级菜单 -->\r\n      <div style=\"float:left;\">\r\n        <!-- <el-menu \r\n          mode=\"horizontal\"\r\n          text-color=\"#000000\"\r\n          active-text-color=\"#3989fa\"\r\n          :default-active=\"toIndex\" \r\n          @select=\"handleSelect\">\r\n          <el-menu-item v-for=\"(item, index) in itemList\" :index=\"item.path\" :key=\"index\">\r\n            <span slot=\"title\">{{ item.title }}</span>\r\n          </el-menu-item>\r\n        </el-menu> -->\r\n      </div>\r\n      \r\n      <div class=\"header-right\">\r\n        <div class=\"header-user-con\">\r\n          <!-- 切换主题 -->\r\n          <div @click=\"handleChangeStyle()\">\r\n            <el-tooltip content=\"切换主题\" placement=\"bottom\">\r\n              <i :class=\"globalTheme ? 'el-icon-moon' : 'el-icon-sunny'\"></i>\r\n            </el-tooltip>\r\n          </div>\r\n          <!-- 用户头像 -->\r\n          <div class=\"user-avator\">\r\n            <img src=\"@/assets/img/img.jpg\"/>\r\n          </div>\r\n          <!-- 用户名下拉菜单 -->\r\n          <el-dropdown class=\"user-name\" trigger=\"click\" @command=\"handleCommand\">\r\n            <span class=\"el-dropdown-link\"> {{ username }} <i class=\"el-icon-caret-bottom\"></i></span>\r\n            <el-dropdown-menu slot=\"dropdown\">\r\n              <el-dropdown-item disabled>修改密码</el-dropdown-item>\r\n              <el-dropdown-item command=\"loginout\">退出登录</el-dropdown-item>\r\n            </el-dropdown-menu>\r\n          </el-dropdown>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <el-main>\r\n      \r\n      <router-view></router-view>\r\n    </el-main>\r\n     <!-- </el-container> -->\r\n    \r\n\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport SideMenu from '@/components/sidemenu/SideMenu';\r\nimport bus from \"@/utils/bus\";\r\nexport default {\r\n    components: {\r\n    SideMenu\r\n  },\r\n  data(){\r\n    return{\r\n      itemList: [    // 水平一级菜单栏的菜单\r\n        // { path: '/Home', title: '首页' },\r\n        { path: '/test1', title: '一级菜单1' },\r\n        { path: '/test2', title: '一级菜单2' },\r\n        { path: '/test3', title: '一级菜单3' },\r\n        { path: '/permission', title: '管理员权限' },\r\n        // { path: '/i18n', title: '国际化组件' }\r\n      ],\r\n       leftMenus: [\r\n                {\r\n                    title : '分析',\r\n                    path: 'AnalysisMain',\r\n                    icon : 'el-icon-data-line',\r\n                    // icon : require('@/assets/img/fenxi.png'),\r\n                },\r\n                {\r\n                    title : '控制中心',\r\n                    path: 'ControlCenter',\r\n                    icon:'el-icon-coin',\r\n                    children : [\r\n                        {\r\n                            title : '通用',\r\n                            path: 'test1-2',\r\n                             children : [\r\n                                {\r\n                                    title : '关于本机',\r\n                                    path: 'AboutMachine',\r\n\r\n                                },\r\n                                {\r\n                                    title : '网络',\r\n                                    path: 'network',\r\n\r\n                                },\r\n                                {\r\n                                    title : 'VPN',\r\n                                   path: 'VPN',\r\n\r\n                                },\r\n                                 {\r\n                                    title : '自定义操作',\r\n                                   path: 'CustomOperations',\r\n\r\n                                },\r\n                                 {\r\n                                    title : '健康检测',\r\n                                   path: 'HealthCheck',\r\n\r\n                                }\r\n                            ]\r\n                        },{\r\n                    title : '运行状态',\r\n                    path: 'StateOperation',\r\n                    // icon : 'el-icon-user-solid',\r\n                },{\r\n                    title : '接口',\r\n                    path: 'interface',\r\n                    // icon : 'el-icon-user-solid',\r\n                },{\r\n                    title : 'IP设置',\r\n                    path: 'IPSetting',\r\n                    // icon : 'el-icon-user-solid',\r\n                },\r\n                      \r\n                    ]\r\n                },{\r\n                    title : '系统设置',\r\n                    path: 'SystemSettings',\r\n                    icon : 'el-icon-s-tools',\r\n                    \r\n                    children : [\r\n                                {\r\n                                    title : '全局设置',\r\n                                    path: 'globalSettings',\r\n                                    // icon : 'bars',\r\n                                },\r\n                                {\r\n                                    title : '关于本机——导出设置',\r\n                                   path: 'ExportingSettings',\r\n                                    // icon : 'tool',\r\n                                },\r\n                                {\r\n                                    title : '关于本机——导入设置',\r\n                                   path: 'ImportSettings',\r\n                                    // icon : 'tool',\r\n                                },\r\n                                 {\r\n                                    title : '接口与服务器证书',\r\n                                   path: 'InterfaceServerCertificates',\r\n                                    // icon : 'tool',\r\n                                },\r\n                                 {\r\n                                    title : 'UDP服务设置',\r\n                                   path: 'UDPServiceSettings',\r\n                                    // icon : 'tool',\r\n                                }\r\n                            ]\r\n                },{\r\n                    title : '用户管理',\r\n                    path: 'UserManagement',\r\n                    icon : 'el-icon-user-solid',\r\n                    children : [\r\n                                {\r\n                                    title : '我的账号',\r\n                                    path: 'myId',\r\n                                    // icon : 'bars',\r\n                                },\r\n                                {\r\n                                    title : '账号管理',\r\n                                   path: 'IdManagement',\r\n                                    // icon : 'tool',\r\n                                },\r\n                            ]\r\n                },\r\n                {\r\n                    title : '通知/日志',\r\n                    path: 'logs',\r\n                    icon : 'el-icon-phone',\r\n                },\r\n                \r\n            ],\r\n      globalTheme: false,\r\n    }\r\n  },\r\n\r\n  computed: {\r\n    username(){\r\n      return localStorage.getItem('ms_username') || '';\r\n    },\r\n    toIndex(){  // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个\r\n      return '/' + this.$route.path.split('/')[1];\r\n    },\r\n  },\r\n  created() {\r\n    this.globalTheme = JSON.parse(localStorage.getItem('global_theme'));\r\n    bus.$emit('global_theme', this.globalTheme);  // 将 globalTheme 的值传给父组件\r\n  },\r\n  methods: {\r\n    handleSelect(path){  // 切换菜单栏\r\n      this.$router.push({\r\n        path: path\r\n      });\r\n    },\r\n    handleCommand(command){  // 用户名下拉菜单选择事件\r\n      if(command == 'loginout'){\r\n        localStorage.removeItem('ms_username');\r\n        this.$router.push({\r\n            path: '/Login'\r\n        });\r\n      }\r\n    },\r\n    handleChangeStyle(){  // 切换主题\r\n      this.globalTheme = !this.globalTheme;\r\n      localStorage.setItem('global_theme', this.globalTheme);  // 本地存储选择的 globalTheme\r\n      bus.$emit('global_theme', this.globalTheme);  // 将 globalTheme 的值传给父组件\r\n    }\r\n  }\r\n}\r\n</script>\r\n<style>\r\n   .aside{\r\n    overflow-y: scroll;\r\n  overflow-x: hidden;\r\n   background: url('../../assets/img/leftBg.png'); \r\n    max-height: 1000px;\r\n    background-size: 100%;\r\n  \r\n}\r\n.aside::-webkit-scrollbar {\r\n    display:none;\r\n  }\r\n.el-submenu__title:hover {\r\n    background-color: #3989fa!important;\r\n}\r\n.el-menu-item:focus, .el-menu-item:hover {\r\n    outline: 0;\r\n    background-color: #3989fa!important;\r\n} \r\n\r\n</style>\r\n<style scoped>\r\n.wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  background: #f0f0f0;\r\n}\r\n.logo {\r\n  \r\n  margin-left: 10px;\r\n    margin-top: 10px;\r\n    /* height: 60px; */\r\n    width: 80%;\r\n  \r\n}\r\n.header {\r\n    position: absolute;\r\n    -webkit-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n    width: 87%;\r\n    height: 70px;\r\n    right: 0px;\r\n    font-size: 22px;\r\n    top: 5px;\r\n}\r\n.header .logo {\r\n  float: left;\r\n  margin-left: 60px;\r\n  margin-top: 17.5px;\r\n  height: 29px;\r\n  width: 160px;\r\n  vertical-align: middle;\r\n  position: relative;\r\n}\r\n/* --------------- 用户头像区域的样式 ---------------- */\r\n.header-right {\r\n  float: right;\r\n  padding-right: 50px;\r\n}\r\n.header-user-con {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 70px;\r\n}\r\n.user-avator {\r\n  margin-left: 20px;\r\n}\r\n.user-avator img {\r\n  display: block;\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 50%;\r\n}\r\n.user-name {\r\n  margin-left: 10px;\r\n}\r\n.el-dropdown-link {\r\n  cursor: pointer;\r\n}\r\n.el-dropdown-menu__item {\r\n  text-align: center;\r\n}\r\n/* --------------- 水平一级菜单栏的样式--------------------- */\r\n.el-menu.el-menu--horizontal {\r\n  border-bottom: none !important;\r\n  float: left;\r\n  margin-left: 50px;\r\n  background: transparent;\r\n}\r\n.el-menu--horizontal > .el-menu-item.is-active {\r\n  /* border-bottom: 2px solid #3989fa;\r\n  color: #3989fa; */\r\n  font-weight: bold;\r\n}\r\n.el-menu--horizontal > .el-menu-item {\r\n  font-size: 16px;\r\n  margin: 0 15px;\r\n}\r\n</style>"]}]}