{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\components\\common\\Whole.vue?vue&type=style&index=0&id=21667c1a&scoped=true&lang=css&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\components\\common\\Whole.vue","mtime":1671074748350},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\css-loader\\index.js","mtime":1671074743092},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1671074747916},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\postcss-loader\\src\\index.js","mtime":1671074746320},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1671074747916}],"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.wrapper {\n  width: 100%;\n  height: 100%;\n  background: #f0f0f0;\n}\n.header {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: 70px;\n  font-size: 22px;\n}\n.header .logo {\n  float: left;\n  margin-left: 60px;\n  margin-top: 17.5px;\n  height: 29px;\n  width: 160px;\n  vertical-align: middle;\n}\n/* --------------- 用户头像区域的样式 ---------------- */\n.header-right {\n  float: right;\n  padding-right: 50px;\n}\n.header-user-con {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 70px;\n}\n.user-avator {\n  margin-left: 20px;\n}\n.user-avator img {\n  display: block;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n.user-name {\n  margin-left: 10px;\n}\n.el-dropdown-link {\n  cursor: pointer;\n}\n.el-dropdown-menu__item {\n  text-align: center;\n}\n/* --------------- 水平一级菜单栏的样式--------------------- */\n.el-menu.el-menu--horizontal {\n  border-bottom: none !important;\n  float: left;\n  margin-left: 50px;\n  background: transparent;\n}\n.el-menu--horizontal > .el-menu-item.is-active {\n  /* border-bottom: 2px solid #3989fa;\n  color: #3989fa; */\n  font-weight: bold;\n}\n.el-menu--horizontal > .el-menu-item {\n  font-size: 16px;\n  margin: 0 15px;\n}\n",{"version":3,"sources":["Whole.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Whole.vue","sourceRoot":"src/components/common","sourcesContent":["<template>\n  <div class=\"wrapper\">\n    <!-- 页面头部部分 -->\n    <div class=\"header\">\n      <div class=\"logo\">后台管理系统</div>\n      <!-- 水平一级菜单 -->\n      <div style=\"float:left;\">\n        <!-- <el-menu \n          mode=\"horizontal\"\n          text-color=\"#000000\"\n          active-text-color=\"#3989fa\"\n          :default-active=\"toIndex\" \n          @select=\"handleSelect\">\n          <el-menu-item v-for=\"(item, index) in itemList\" :index=\"item.path\" :key=\"index\">\n            <span slot=\"title\">{{ item.title }}</span>\n          </el-menu-item>\n        </el-menu> -->\n      </div>\n      \n      <div class=\"header-right\">\n        <div class=\"header-user-con\">\n          <!-- 切换主题 -->\n          <div @click=\"handleChangeStyle()\">\n            <el-tooltip content=\"切换主题\" placement=\"bottom\">\n              <i :class=\"globalTheme ? 'el-icon-moon' : 'el-icon-sunny'\"></i>\n            </el-tooltip>\n          </div>\n          <!-- 用户头像 -->\n          <div class=\"user-avator\">\n            <img src=\"@/assets/img/img.jpg\"/>\n          </div>\n          <!-- 用户名下拉菜单 -->\n          <el-dropdown class=\"user-name\" trigger=\"click\" @command=\"handleCommand\">\n            <span class=\"el-dropdown-link\"> {{ username }} <i class=\"el-icon-caret-bottom\"></i></span>\n            <el-dropdown-menu slot=\"dropdown\">\n              <el-dropdown-item disabled>修改密码</el-dropdown-item>\n              <el-dropdown-item command=\"loginout\">退出登录</el-dropdown-item>\n            </el-dropdown-menu>\n          </el-dropdown>\n        </div>\n      </div>\n    </div>\n\n    <!-- 页面左侧二级菜单栏，和主体内容区域部分 -->\n    <el-main>\n      <router-view></router-view>\n    </el-main>\n\n  </div>\n</template>\n\n<script>\nimport bus from \"@/utils/bus\";\nexport default {\n  data(){\n    return{\n      itemList: [    // 水平一级菜单栏的菜单\n        // { path: '/Home', title: '首页' },\n        { path: '/test1', title: '一级菜单1' },\n        { path: '/test2', title: '一级菜单2' },\n        { path: '/test3', title: '一级菜单3' },\n        { path: '/permission', title: '管理员权限' },\n        // { path: '/i18n', title: '国际化组件' }\n      ],\n      globalTheme: false,\n    }\n  },\n  computed: {\n    username(){\n      return localStorage.getItem('ms_username') || '';\n    },\n    toIndex(){  // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个\n      return '/' + this.$route.path.split('/')[1];\n    },\n  },\n  created() {\n    this.globalTheme = JSON.parse(localStorage.getItem('global_theme'));\n    bus.$emit('global_theme', this.globalTheme);  // 将 globalTheme 的值传给父组件\n  },\n  methods: {\n    handleSelect(path){  // 切换菜单栏\n      this.$router.push({\n        path: path\n      });\n    },\n    handleCommand(command){  // 用户名下拉菜单选择事件\n      if(command == 'loginout'){\n        localStorage.removeItem('ms_username');\n        this.$router.push({\n            path: '/Login'\n        });\n      }\n    },\n    handleChangeStyle(){  // 切换主题\n      this.globalTheme = !this.globalTheme;\n      localStorage.setItem('global_theme', this.globalTheme);  // 本地存储选择的 globalTheme\n      bus.$emit('global_theme', this.globalTheme);  // 将 globalTheme 的值传给父组件\n    }\n  }\n}\n</script>\n\n<style scoped>\n.wrapper {\n  width: 100%;\n  height: 100%;\n  background: #f0f0f0;\n}\n.header {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  height: 70px;\n  font-size: 22px;\n}\n.header .logo {\n  float: left;\n  margin-left: 60px;\n  margin-top: 17.5px;\n  height: 29px;\n  width: 160px;\n  vertical-align: middle;\n}\n/* --------------- 用户头像区域的样式 ---------------- */\n.header-right {\n  float: right;\n  padding-right: 50px;\n}\n.header-user-con {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 70px;\n}\n.user-avator {\n  margin-left: 20px;\n}\n.user-avator img {\n  display: block;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n.user-name {\n  margin-left: 10px;\n}\n.el-dropdown-link {\n  cursor: pointer;\n}\n.el-dropdown-menu__item {\n  text-align: center;\n}\n/* --------------- 水平一级菜单栏的样式--------------------- */\n.el-menu.el-menu--horizontal {\n  border-bottom: none !important;\n  float: left;\n  margin-left: 50px;\n  background: transparent;\n}\n.el-menu--horizontal > .el-menu-item.is-active {\n  /* border-bottom: 2px solid #3989fa;\n  color: #3989fa; */\n  font-weight: bold;\n}\n.el-menu--horizontal > .el-menu-item {\n  font-size: 16px;\n  margin: 0 15px;\n}\n</style>"]}]}