工作台及菜单样式修改

menu_style
jinna 3 months ago
parent 9487e9e954
commit 968cd2d396
  1. 62
      src/page/index/sidebar/index.vue
  2. 2
      src/page/index/top/top-menu.vue
  3. 3
      src/page/index/top/top-search.vue
  4. 9
      src/styles/top.scss
  5. 2
      src/views/productionSchedulingPlan/productRlue.vue

@ -17,19 +17,21 @@
:class="index == selectIndex ? 'active' : ''">
<div class="left_menu_item">
<i :class="item.source" ></i>
<span class="name_text">{{ item.name.substring(0,2) }}</span>
<span class="name_text">{{ item.name.substring(0,4) }}</span>
</div>
</div>
</div>
<div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children">
<div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children" @mouseleave="mouseleave(leftMenu[selectIndex])">
<div
v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
<div class="left_top">{{ leftMenu[selectIndex].name }} </div>
<div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id" @mouseleave="mounseLeave(leftMenu[selectIndex],item)">
<div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id" @mouseenter="mounseEnter(item)" @mouseleave="mounseLeave(leftMenu[selectIndex],item)">
<div class="right_menu_item">
<el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
popper-class="log-popover"
popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"
@hide="hidePopover(leftMenu[selectIndex],item)">
<template #reference>
<div class="right_menu_item_box" @click='clickPage(item)'>
<div>{{ item.name }}</div>
@ -119,7 +121,7 @@ export default {
path: item.path,
query: item.query,
});
// this.$store.commit('SET_SELECTED_INDEX', item.parentId + '');
this.$store.commit('SET_SELECTED_INDEX', item.parentId + '');
}
},
mouseEnter(item,index){
@ -130,24 +132,46 @@ export default {
this.showRight = false
}
},
mounseLeave(item,item1){
console.log('item----------------------',item)
console.log('item1----------------------',item1)
console.log('tmp-------------------',item.children.find(item1 => item1.children))
if(!item1.children){
hidePopover(item,item1){
console.log('33333333333333333333333',item1)
if(item1.children){
if(item.id != this.selectedIndex){
let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
if(tmp && tmp.children){
this.showRight = true
}else{
this.showRight = false
}
}
}
},
mouseleave(item){
console.log('item-------------------',item)
if(item.children.find(item1 => item1.children)){
console.log('111111111111111111')
}else{
if(item.id != this.selectedIndex){
let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
}
}
},
mounseLeave(item,item1){
console.log('222222222222222222222222222')
// console.log('item----------------------',item)
// console.log('item1----------------------',item1)
// console.log('tmp-------------------',item.children.find(item1 => item1.children))
// if(!item1.children){
// if(item.id != this.selectedIndex){
// let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
// let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
// this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
// }
// }
},
mounseEnter(item){
console.log('item0000000000000000000000000',item)
this.showRight = true
},
handleClick(item){
console.log('item000000000000000000000000',item)
if(!item.children){
@ -166,7 +190,7 @@ export default {
<style lang="scss" scoped>
.left_menu_box{
width: 48px !important;
width: 70px !important;
&.right_box{
width: 200px !important;
@ -174,11 +198,11 @@ export default {
}
}
.no_child {
width: 48px;
width: 70px;
}
.children {
width: 48px;
width: 70px;
height: 100%;
&:hover{
@ -245,7 +269,7 @@ export default {
color: var(--header-bkColor-hover);
padding-top: 5px;
text-align: center;
width: 45px;
width: 100%;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;

@ -2,7 +2,7 @@
<div>
<el-menu class="top-menu custom-menu" :default-active="activeIndex" mode="horizontal" ellipsis
style="width: 900px" >
style="width: 900px" v-if="setting.styleRadio != '3'">
<!-- <el-menu-item index="0" @click="openHome(itemHome)">
<template #title>
<i :class="itemHome.source" style="padding-right: 5px"></i>

@ -1,6 +1,7 @@
<template>
<el-autocomplete
class="top-search"
:class="setting.styleRadio == 3 ? 'search_radio' : ''"
popper-class="my-autocomplete"
v-model="value"
:fetch-suggestions="querySearch"
@ -47,7 +48,7 @@ export default {
childrenKey() {
return this.website.menu.children;
},
...mapGetters(['menu']),
...mapGetters(['menu','setting']),
},
methods: {
getMenuList() {

@ -57,6 +57,15 @@
box-shadow: none;
background-color: transparent;
}
&.search_radio{
.el-input__wrapper {
font-size: 13px;
border: none;
box-shadow: none;
background-color: #fff !important;
}
}
}
.top-bar__img {

@ -116,7 +116,7 @@ export default {
total: 0,
},
option: {
size: 'small',
size: 'medium',
tip: false,
simplePage: true,
searchShow: true,

Loading…
Cancel
Save