{"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"]}]}