| | |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="secondMenuDiv" |
| | | class="secondMenuDiv subpage_Div" |
| | | v-show="index == showFlag ? true :false" |
| | | > |
| | | <div |
| | |
| | | </div> |
| | | |
| | | </div> |
| | | <div |
| | | @click="switchLang" |
| | | class="userLanguage" |
| | | > |
| | | <div class="userLanguage"> |
| | | <div class="userImage user2"></div> |
| | | <div class="TextLanguage"> |
| | | <el-link |
| | | @click="switchLang" |
| | | :underline="false" |
| | | class="elLink" |
| | | >{{$t("common.language")}}</el-link> |
| | | </div> |
| | | <!-- <div class="TextLanguage"> |
| | | <el-link |
| | | @click="themeChange" |
| | | :underline="false" |
| | | class="elLink" |
| | | > 主题切换</el-link> |
| | | </div> --> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | import colorChange from '../views/maintenance/colorChange.vue'; |
| | | import { containsCoordinate } from 'ol/extent'; |
| | | import Vue from 'vue'; |
| | | import $ from 'jquery' |
| | | export default { |
| | | name: 'navMenu', |
| | | //import引入的组件需要注入到对象中才能使用 |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | |
| | | themeColor: true, |
| | | oriData: [], //原始树数据 |
| | | dirData: [], //el树数据 |
| | |
| | | changeSelectdiv: false, |
| | | listMenu: [], |
| | | showFlag: null, |
| | | language: true |
| | | language: true, |
| | | |
| | | }; |
| | | }, |
| | | created() { }, |
| | |
| | | }, |
| | | computed: {}, |
| | | methods: { |
| | | themeChange() { |
| | | this.$store.state.themeflag = !this.$store.state.themeflag; |
| | | if (this.$store.state.themeflag == true) { |
| | | $("#app").addClass("Black_theme"); |
| | | |
| | | } else { |
| | | $("#app").removeClass("Black_theme"); |
| | | } |
| | | |
| | | }, |
| | | async getCookies() { |
| | | var boolean = this.getTimeCookies(); |
| | | if (boolean != true) { |
| | |
| | | const data = await getPerms(); |
| | | this.$store.state.permsEntity = data.result; |
| | | } |
| | | |
| | | this.$store.state.uname = JSON.parse( |
| | | localStorage.getItem('LFToken') |
| | | ).uname; |
| | | this.$store.state.unid = JSON.parse( |
| | | localStorage.getItem('LFToken') |
| | | ).userid; |
| | | this.$router.push('/'); |
| | | }, |
| | | getTimeCookies() { |
| | |
| | | } |
| | | }, |
| | | setLiClick(res, index) { |
| | | |
| | | setTimeout(() => { |
| | | this.changeliSelect = res.cnName; |
| | | if (res.url.indexOf('http') != -1) { |
| | | if (this.$store.reporturl == null) { |
| | | if (location.href.indexOf('/WareInspection') == -1) { |
| | | this.$store.reporturl = res.url; |
| | | this.$router.push('/WareInspection'); |
| | | } else { |
| | |
| | | |
| | | that.setMenuTree(menuLists); |
| | | } else { |
| | | this.$message({ |
| | | message: '暂无菜单栏数据', |
| | | type: 'warning' |
| | | }); |
| | | this.$message({ |
| | | message: '暂无菜单栏数据', |
| | | type: 'warning' |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | |
| | | res[i].show = false; //控制显隐 |
| | | if (res[i].perms == null) { |
| | | const result = await selectMenuRecursive({ id: res[i].id }); |
| | | |
| | | |
| | | if (result.code == 200) { |
| | | res[i].children = result.result.filter((value) => { |
| | | return value.pid == res[i].id; |
| | |
| | | return father.pid == 1; // 返回一级菜单 |
| | | }); |
| | | } else { |
| | | this.$message({ |
| | | message: '暂无菜单栏数据', |
| | | type: 'warning' |
| | | }); |
| | | this.$message({ |
| | | message: '暂无菜单栏数据', |
| | | type: 'warning' |
| | | }); |
| | | } |
| | | }, |
| | | logOut() { |
| | |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="less" scoped> |
| | | //@import url(); 引入公共css类 |
| | | .NavBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | background-image: linear-gradient(rgb(34, 33, 33), rgb(27, 31, 78)); |
| | | .topBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | align-items: center; |
| | | .topTitle { |
| | | width: 435px; |
| | | height: 70px; |
| | | background: url("../assets/img/LOGO.png") no-repeat center; |
| | | } |
| | | .topMenu { |
| | | width: auto; |
| | | |
| | | flex: 1; |
| | | height: 100px; |
| | | .menuContent { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | .contentDiv { |
| | | margin-left: 1%; |
| | | } |
| | | } |
| | | .ImgMenu { |
| | | width: 100%; |
| | | height: auto; |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | .menuImage { |
| | | width: 70px; |
| | | height: 70px; |
| | | } |
| | | .menulabel { |
| | | font-size: 14px; |
| | | font-family: Source Han Sans CN; |
| | | font-weight: 500; |
| | | color: #ffffff; |
| | | text-align: center; |
| | | width: 120px; |
| | | } |
| | | .changeStyle { |
| | | color: #fec801; |
| | | } |
| | | .m1 { |
| | | background: url("../assets/img/menu/menu11.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m2 { |
| | | background: url("../assets/img/menu/menu21.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m3 { |
| | | background: url("../assets/img/menu/menu31.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m4 { |
| | | background: url("../assets/img/menu/menu41.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m5 { |
| | | background: url("../assets/img/menu/menu51.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m6 { |
| | | background: url("../assets/img/menu/menu61.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m7 { |
| | | background: url("../assets/img/menu/qwyzt.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m11 { |
| | | background: url("../assets/img/menu/menu12.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m21 { |
| | | background: url("../assets/img/menu/menu22.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m31 { |
| | | background: url("../assets/img/menu/menu32.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m41 { |
| | | background: url("../assets/img/menu/menu42.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m51 { |
| | | background: url("../assets/img/menu/menu52.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m61 { |
| | | background: url("../assets/img/menu/menu62.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .m71 { |
| | | background: url("../assets/img/menu/qwyzt-h.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | } |
| | | |
| | | .topUser { |
| | | height: 70px; |
| | | |
| | | .userName { |
| | | margin: 0px 10px; |
| | | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | height: 30px; |
| | | } |
| | | .userLanguage { |
| | | margin: 0px 10px; |
| | | margin-top: 10px; |
| | | |
| | | display: flex; |
| | | |
| | | height: 30px; |
| | | } |
| | | .userImage { |
| | | width: 30px; |
| | | height: 30px; |
| | | float: left; |
| | | margin-right: 10px; |
| | | } |
| | | .user1 { |
| | | background: url("../assets/img/user.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .user2 { |
| | | background: url("../assets/img/EN.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | .userText { |
| | | font-size: 15px; |
| | | |
| | | line-height: 30px; |
| | | font-family: Microsoft YaHei; |
| | | font-weight: 400; |
| | | color: #ffffff; |
| | | text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35); |
| | | } |
| | | .TextLanguage { |
| | | font-size: 15px; |
| | | |
| | | line-height: 30px; |
| | | font-family: Microsoft YaHei; |
| | | font-weight: 400; |
| | | color: #ffffff; |
| | | text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35); |
| | | } |
| | | } |
| | | .elLink { |
| | | margin-left: 5px; |
| | | font-size: 15px; |
| | | margin-bottom: 4px; |
| | | } |
| | | } |
| | | |
| | | .secondMenuDiv { |
| | | position: absolute; |
| | | z-index: 1024; |
| | | margin-top: 10px; |
| | | border: 1px solid white; |
| | | border-radius: 5px; |
| | | div { |
| | | line-height: 30px; |
| | | background: #303030; |
| | | padding: 10px; |
| | | font-size: 18px; |
| | | font-family: Microsoft YaHei; |
| | | font-weight: 400; |
| | | color: #ffffff; |
| | | line-height: 49px; |
| | | min-width: 120px; |
| | | } |
| | | .changeLiStyle { |
| | | color: #fec801; |
| | | background: linear-gradient(180deg, #002992, #080472); |
| | | } |
| | | } |
| | | |
| | | /deep/.el-link.el-link--default:hover { |
| | | color: #409eff !important; |
| | | } |
| | | /deep/ .el-link.el-link--default { |
| | | color: white !important; |
| | | } |
| | | /deep/ ul.el-menu-vertical-demo.el-menu { |
| | | // 添加背景颜色 |
| | | background-image: rgba(255, 255, 255, 0.1) !important; |
| | | } |
| | | |
| | | /deep/ li.el-menu-item.is-active { |
| | | // 添加样式,只针对导航栏首菜单 |
| | | background-color: transparent; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | |