| 1 |
- {"remainingRequest":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js??ref--0-2!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\Sidebar.vue?vue&type=style&index=0&lang=scss&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\Sidebar.vue","mtime":1663828782923},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js","mtime":1540864632000}],"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\r\n@import '@assets/css/public-style.scss';\r\n.sidebar {\r\n width: rem(220);\r\n display: flex;\r\n flex-direction: column;\r\n background: #171f32;\r\n border-radius: 0px rem(30) rem(30) 0px;\r\n z-index: 2;\r\n .logo {\r\n width: 100%;\r\n height: rem(110);\r\n color: #ffffff;\r\n padding: rem(35) rem(10) 0 rem(20);\r\n border-bottom: 1px solid #2a335c;\r\n margin-bottom: rem(25);\r\n img {\r\n width: rem(90);\r\n height: rem(24);\r\n display: inline-block;\r\n vertical-align: middle;\r\n margin-right: rem(6);\r\n }\r\n .title {\r\n font-size: rem(16);\r\n font-weight: 500;\r\n display: inline-block;\r\n vertical-align: middle;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: rem(4);\r\n border: 1px solid rgba(255, 255, 255, 0.4);\r\n padding: 0px rem(7);\r\n }\r\n .point {\r\n width: rem(4);\r\n height: rem(4);\r\n display: inline-block;\r\n // margin-right: 5px;\r\n vertical-align: middle;\r\n text-align: center;\r\n }\r\n .text {\r\n width: rem(40);\r\n margin-left: rem(-14);\r\n }\r\n }\r\n .menu-wrap {\r\n overflow: auto;\r\n flex: 1;\r\n scrollbar-width: 0;\r\n }\r\n .menu-footer.dark {\r\n bottom: 0;\r\n left: 0;\r\n width: rem(220);\r\n height: rem(30);\r\n\r\n div {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 0px 0 rem(30) 0px;\r\n background-color: #171f32;\r\n border: none;\r\n }\r\n &.dark {\r\n background-color: #070f22 !important;\r\n z-index: 1;\r\n }\r\n\r\n &.light {\r\n background-color: #f4f7f9 !important;\r\n z-index: 1;\r\n }\r\n }\r\n .footer {\r\n position: absolute;\r\n bottom: rem(30);\r\n left: rem(20);\r\n z-index: 11;\r\n width: rem(30);\r\n height: rem(30);\r\n img {\r\n display: block;\r\n width: rem(24);\r\n height: rem(24);\r\n cursor: pointer;\r\n }\r\n }\r\n}\r\n.el-menu {\r\n border: none;\r\n}\r\n\r\n.sidebar-el-menu .el-submenu.is-opened > .el-submenu__title {\r\n //设置一级菜单点开后的状态\r\n color: #fff !important;\r\n background: rgb(44, 53, 74);\r\n border-radius: 0;\r\n}\r\n.sidebar-el-menu > .el-submenu.is-opened > .el-menu--inline > .el-submenu.is-opened > .el-submenu__title {\r\n color: #fff !important;\r\n}\r\n.sidebar-el-menu > div > .el-submenu.is-opened.is-active > .el-submenu__title {\r\n background: #2c354a !important;\r\n border-radius: rem(32) 0px 0px rem(32);\r\n color: $mainTextColor !important;\r\n border-right: 2px solid $mainTextColor;\r\n .el-submenu__icon-arrow::before {\r\n color: $mainTextColor;\r\n }\r\n}\r\n.el-menu-item.is-active {\r\n color: $mainTextColor;\r\n}\r\n.el-submenu.is-active > div > span {\r\n color: $mainTextColor;\r\n}\r\n\r\n.sidebar .logo.shrink {\r\n display: flex;\r\n font-size: rem(16);\r\n justify-content: center;\r\n // color: $mainTextColor;\r\n border-bottom: 2px solid #2a335c;\r\n margin-bottom: rem(20);\r\n align-items: flex-start;\r\n .text {\r\n width: rem(48);\r\n height: rem(48);\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: rem(4);\r\n border: 1px solid rgba(255, 255, 255, 0.4);\r\n text-align: center;\r\n }\r\n}\r\n\r\n.el-menu--collapse > .is-active {\r\n color: #2787f1;\r\n\r\n background: #2c354a;\r\n border-radius: rem(32) 0px 0px rem(32);\r\n}\r\n\r\n.el-menu--collapse > .is-active > .el-submenu__title {\r\n background: transparent !important;\r\n}\r\n.el-submenu > .el-submenu__title:hover {\r\n //设置一级菜单的鼠标经过时候的样式\r\n background: rgb(44, 53, 74) !important;\r\n border-radius: rem(32) 0px 0px rem(32) !important;\r\n}\r\n.el-menu-item:hover {\r\n border-radius: rem(32) 0px 0px rem(32);\r\n}\r\n",{"version":3,"sources":["Sidebar.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Sidebar.vue","sourceRoot":"src/components/common","sourcesContent":["<template>\r\n <div class=\"sidebar\" :style=\"collapse ? 'width:4.42708vw' : 'width:11.45833vw'\">\r\n <div class=\"logo\" v-if=\"!collapse\">\r\n <img src=\"@/assets/img/img_logo2.png\" />\r\n <div class=\"title\"><span class=\"point\"></span>{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>\r\n </div>\r\n <div class=\"logo shrink\" v-else>\r\n <div class=\"text\">{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>\r\n </div>\r\n <div class=\"menu-wrap no-scrollbar\">\r\n <el-menu\r\n class=\"sidebar-el-menu\"\r\n ref=\"sidebarelmenu\"\r\n :default-active=\"onRoutes\"\r\n :collapse=\"collapse\"\r\n background-color=\"#171F32\"\r\n text-color=\"#aaadba\"\r\n active-text-color=\"#0EAEFF\"\r\n unique-opened\r\n collapse-transition\r\n router\r\n :style=\"collapse ? 'width:4.375vw' : 'width:11.45833vw'\"\r\n >\r\n <menu-tree :menuList=\"menuList\" :collapse=\"collapse\" :openArray=\"openArray\"></menu-tree>\r\n </el-menu>\r\n </div>\r\n <div class=\"footer\">\r\n <img\r\n :class=\"[collapse ? 'expandhover' : 'packuphover']\"\r\n :src=\"collapse ? btnCollpaseright : btnCollpaseleft\"\r\n @click=\"collapseChage\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport MenuTree from './MenuTree.vue';\r\nexport default {\r\n data() {\r\n return {\r\n btnCollpaseright: require('@assets/img/btn_collpaseright.png'),\r\n btnCollpaseleft: require('@assets/img/btn_collpaseleft.png'),\r\n openList: []\r\n };\r\n },\r\n components: {\r\n MenuTree\r\n },\r\n computed: {\r\n onRoutes() {\r\n return this.$route.path;\r\n },\r\n collapse() {\r\n return this.$store.getters['getCollapse'];\r\n },\r\n menuList() {\r\n let list = this.$store.getters['getMenuList'];\r\n return list;\r\n },\r\n openArray() {\r\n return this.openList;\r\n },\r\n sessSetThisDetai() {\r\n let text = '';\r\n if (!!window.sessionStorage.getItem('setThisDetai')) {\r\n text = JSON.parse(window.sessionStorage.getItem('setThisDetai')).name;\r\n }\r\n return text;\r\n }\r\n },\r\n methods: {\r\n // 侧边栏折叠\r\n collapseChage() {\r\n this.$store.dispatch('collapse', !this.collapse);\r\n },\r\n thisfindMen(arr, indexPath) {\r\n let status = [];\r\n arr.map((v) => {\r\n if (v.children) {\r\n v.children.map((s) => {\r\n if ('/' + s.linkPath === indexPath) {\r\n status.push(v.linkPath, s.linkPath);\r\n }\r\n });\r\n } else {\r\n if ('/' + v.linkPath === indexPath) {\r\n status.push(v.linkPath);\r\n }\r\n }\r\n });\r\n return status;\r\n }\r\n },\r\n watch: {\r\n $route(newValue, oldValue) {\r\n this.openList = this.thisfindMen(this.$store.getters['getMenuList'], newValue.path);\r\n }\r\n },\r\n created() {\r\n this.openList = this.thisfindMen(this.$store.getters['getMenuList'], this.$route.path);\r\n },\r\n mounted() {\r\n // this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0;\r\n // console.log((this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0));\r\n }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@import '@assets/css/public-style.scss';\r\n.sidebar {\r\n width: rem(220);\r\n display: flex;\r\n flex-direction: column;\r\n background: #171f32;\r\n border-radius: 0px rem(30) rem(30) 0px;\r\n z-index: 2;\r\n .logo {\r\n width: 100%;\r\n height: rem(110);\r\n color: #ffffff;\r\n padding: rem(35) rem(10) 0 rem(20);\r\n border-bottom: 1px solid #2a335c;\r\n margin-bottom: rem(25);\r\n img {\r\n width: rem(90);\r\n height: rem(24);\r\n display: inline-block;\r\n vertical-align: middle;\r\n margin-right: rem(6);\r\n }\r\n .title {\r\n font-size: rem(16);\r\n font-weight: 500;\r\n display: inline-block;\r\n vertical-align: middle;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: rem(4);\r\n border: 1px solid rgba(255, 255, 255, 0.4);\r\n padding: 0px rem(7);\r\n }\r\n .point {\r\n width: rem(4);\r\n height: rem(4);\r\n display: inline-block;\r\n // margin-right: 5px;\r\n vertical-align: middle;\r\n text-align: center;\r\n }\r\n .text {\r\n width: rem(40);\r\n margin-left: rem(-14);\r\n }\r\n }\r\n .menu-wrap {\r\n overflow: auto;\r\n flex: 1;\r\n scrollbar-width: 0;\r\n }\r\n .menu-footer.dark {\r\n bottom: 0;\r\n left: 0;\r\n width: rem(220);\r\n height: rem(30);\r\n\r\n div {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 0px 0 rem(30) 0px;\r\n background-color: #171f32;\r\n border: none;\r\n }\r\n &.dark {\r\n background-color: #070f22 !important;\r\n z-index: 1;\r\n }\r\n\r\n &.light {\r\n background-color: #f4f7f9 !important;\r\n z-index: 1;\r\n }\r\n }\r\n .footer {\r\n position: absolute;\r\n bottom: rem(30);\r\n left: rem(20);\r\n z-index: 11;\r\n width: rem(30);\r\n height: rem(30);\r\n img {\r\n display: block;\r\n width: rem(24);\r\n height: rem(24);\r\n cursor: pointer;\r\n }\r\n }\r\n}\r\n.el-menu {\r\n border: none;\r\n}\r\n\r\n.sidebar-el-menu .el-submenu.is-opened > .el-submenu__title {\r\n //设置一级菜单点开后的状态\r\n color: #fff !important;\r\n background: rgb(44, 53, 74);\r\n border-radius: 0;\r\n}\r\n.sidebar-el-menu > .el-submenu.is-opened > .el-menu--inline > .el-submenu.is-opened > .el-submenu__title {\r\n color: #fff !important;\r\n}\r\n.sidebar-el-menu > div > .el-submenu.is-opened.is-active > .el-submenu__title {\r\n background: #2c354a !important;\r\n border-radius: rem(32) 0px 0px rem(32);\r\n color: $mainTextColor !important;\r\n border-right: 2px solid $mainTextColor;\r\n .el-submenu__icon-arrow::before {\r\n color: $mainTextColor;\r\n }\r\n}\r\n.el-menu-item.is-active {\r\n color: $mainTextColor;\r\n}\r\n.el-submenu.is-active > div > span {\r\n color: $mainTextColor;\r\n}\r\n\r\n.sidebar .logo.shrink {\r\n display: flex;\r\n font-size: rem(16);\r\n justify-content: center;\r\n // color: $mainTextColor;\r\n border-bottom: 2px solid #2a335c;\r\n margin-bottom: rem(20);\r\n align-items: flex-start;\r\n .text {\r\n width: rem(48);\r\n height: rem(48);\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: rem(4);\r\n border: 1px solid rgba(255, 255, 255, 0.4);\r\n text-align: center;\r\n }\r\n}\r\n\r\n.el-menu--collapse > .is-active {\r\n color: #2787f1;\r\n\r\n background: #2c354a;\r\n border-radius: rem(32) 0px 0px rem(32);\r\n}\r\n\r\n.el-menu--collapse > .is-active > .el-submenu__title {\r\n background: transparent !important;\r\n}\r\n.el-submenu > .el-submenu__title:hover {\r\n //设置一级菜单的鼠标经过时候的样式\r\n background: rgb(44, 53, 74) !important;\r\n border-radius: rem(32) 0px 0px rem(32) !important;\r\n}\r\n.el-menu-item:hover {\r\n border-radius: rem(32) 0px 0px rem(32);\r\n}\r\n</style>\r\n"]}]}
|
