From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/pages/shuohuangMonitorAnalyze/components/leftNav.vue | 155 ++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 115 insertions(+), 40 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue index 0653bbd..2079885 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue @@ -1,107 +1,182 @@ <template> - <div class="left-nav"> + <div class="left-nav" :class="{ short: isCollapse }"> + <img class="icon" src="/images/shuohuang/railroad.png" /> <h1> - <img class="icon" :src="`${publicPath}images/shuohuang/railroad.png`" style="height: 40px;" /> - <span v-show="!isCollapse" style="padding-left: 6px;">鏈旈粍閾佽矾鏈鸿締鍒嗗叕鍙�</span> + <span v-show="!isCollapse" style="padding-left: 6px" + >涔樺姟鍛樺畨鍏ㄨ涓鸿瘑鍒郴缁�</span + > </h1> <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" - :collapse="isCollapse" + :default-active="activeIndex" @select="handleSelect" > - <el-menu-item index="1"> - <i class="el-icon-menu"></i> + <el-menu-item index="guideIndex" v-show="isAdmin"> + <i class="iconfont iconshouye"></i> <span slot="title">棣栭〉</span> </el-menu-item> <el-menu-item index="searchForVideoAnalyze"> - <i class="el-icon-menu"></i> + <i class="iconfont iconshipin2"></i> <span slot="title">瑙嗛鍒嗘瀽妫�绱�</span> </el-menu-item> - <el-menu-item index="taskManage"> - <i class="el-icon-menu"></i> + <el-menu-item index="taskManage" v-if="isAdmin"> + <i class="iconfont iconrenwu1"></i> <span slot="title">浠诲姟绠$悊</span> </el-menu-item> - <el-menu-item index="memberManage"> - <i class="el-icon-menu"></i> + <el-menu-item index="memberManage" v-if="isAdmin"> + <i class="iconfont iconrenyuanguanli"></i> <span slot="title">浜哄憳绠$悊</span> </el-menu-item> - <el-menu-item index="configManage"> - <i class="el-icon-menu"></i> + <el-menu-item index="configManage" v-if="isAdmin"> + <i class="iconfont iconicon-test4"></i> <span slot="title">閰嶇疆绠$悊</span> </el-menu-item> <el-submenu index="6"> <template slot="title"> - <i class="el-icon-menu"></i> + <i class="iconfont iconcunchu"></i> <span slot="title">杞偍绠$悊</span> </template> <el-menu-item index="transferMemo">瑙嗛杞偍璁板綍</el-menu-item> <el-menu-item index="transferDeviceManage">杞偍璁惧绠$悊</el-menu-item> + <el-menu-item index="lkgManage">LKJ鏁版嵁绠$悊</el-menu-item> </el-submenu> - <el-submenu index="7"> + <el-submenu index="7" v-if="isAdmin"> <template slot="title"> - <i class="el-icon-menu"></i> + <i class="iconfont iconkeshihua"></i> <span slot="title">鍙鍖栧ぇ灞�</span> </template> - <el-menu-item index="7-1">浠诲姟澶у睆</el-menu-item> - <el-menu-item index="7-2">闅愭偅澶у睆</el-menu-item> + <el-menu-item index="taskscreen">浠诲姟澶у睆</el-menu-item> + <el-menu-item index="hiddendangerscreen">闅愭偅澶у睆</el-menu-item> </el-submenu> </el-menu> </div> </template> <script> - //import railroadImg from '/images/shuohuang/railroad.png'; export default { props: { isCollapse: { type: Boolean, - default: true + default: true, }, menuChange: { - type: Function - } + type: Function, + }, }, - data () { + computed: { + isAdmin() { + if ( + sessionStorage.getItem("userInfo") && + sessionStorage.getItem("userInfo") !== "" + ) { + let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; + return loginName === "admin" || loginName === "basic"; + } + return false; + }, + }, + data() { return { publicPath: process.env.BASE_URL, - } + activeIndex: "guideIndex", + }; + }, + mounted() { + // if (this.isAdmin) { + // if (!!sessionStorage.getItem('leftNavAct')) { + // console.log("leftNavAct") + // this.activeIndex = sessionStorage.getItem('leftNavAct'); + // } + // } + this.activeIndex = this.isAdmin ? "guideIndex" : "searchForVideoAnalyze"; + + this.$emit("menuChange", this.activeIndex); }, methods: { - handleSelect(index,indePath){ - this.$emit('menuChange',index); + handleSelect(index, indePath) { + this.activeIndex = index; + sessionStorage.setItem("leftNavAct", this.activeIndex); + this.$emit("menuChange", index); }, - handleOpen () { - - }, - handleClose () { - - } - } -} + handleOpen() {}, + handleClose() {}, + }, +}; </script> <style lang="scss"> .left-nav { - background: #fff; + background-image: url(/images/shuohuang/鑳屾櫙.png); + height: 100vh; + width: 250px; + img { + margin-top: 80px; + margin-bottom: 10px; + height: 96px; + width: 96px; + } h1 { - display: flex; - align-items: center; height: 65px; padding: 0 20px; border-bottom: 1px solid #eee; - color: rgb(0, 150, 250); + border: none; + span { + color: #fff; + } } - .el-menu-vertical-demo:not(.el-menu--collapse){ + .iconfont { + padding-right: 10px; + } + .el-menu-vertical-demo:not(.el-menu--collapse) { + border: none; + padding-right: 0; + padding-left: 50px; width: 250px; + background: none; + } + .el-menu.el-menu--inline { + background: none; } .el-menu-item, .el-submenu__title { text-align: left; + font-weight: 700; + color: #fff; + + span { + color: #fff; + } + i { + color: #fff; + } + &:hover { + color: #0b41a7; + + span { + color: #0b41a7; + } + i { + color: #0b41a7; + } + } + border-radius: 10px 0 0 10px; } - height: 100vh; + .el-menu-item.is-active { + background-color: #ecf0fc; + color: #0b41a7; + + span { + color: #0b41a7; + } + } +} + +.short { + width: 0; + overflow: hidden; } </style> \ No newline at end of file -- Gitblit v1.8.0