|
@@ -12,26 +12,23 @@
|
|
|
</div>
|
|
|
<p class="title">{{ item.name }}</p>
|
|
|
</div>
|
|
|
+ <MenusActive :menuData="menuData" v-if="mouseenterIndex == index" />
|
|
|
</div> -->
|
|
|
<div class="menus-tabs">
|
|
|
<el-menu default-active="2" class="el-menu-vertical-demo">
|
|
|
<div
|
|
|
v-for="(item, index) in reactiveData.routes"
|
|
|
:key="index"
|
|
|
- class="menuDiv"
|
|
|
+ class="menu_item_box"
|
|
|
@mouseenter="handleMouseEnter(item, index)"
|
|
|
@mouseleave="handleMouseLeave(item, index)"
|
|
|
v-show="item.name != '个人档案'"
|
|
|
>
|
|
|
- <el-menu-item @click="menuClick(item, index)" :index="String(index)">
|
|
|
- <icon :icon="item.icon" />
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- <span
|
|
|
- class="project_corner"
|
|
|
- v-if="['个人中心'].includes(item.name) && projectCorner > 0"
|
|
|
- >
|
|
|
- {{ projectCorner }}
|
|
|
- </span>
|
|
|
+ <el-menu-item @click="menuClick(item, index)" :index="String(index)" class="menu_item">
|
|
|
+ <div class="icon">
|
|
|
+ <img :src="getAssetsFile(item['icon'])" />
|
|
|
+ </div>
|
|
|
+ <p class="title">{{ item.name }}</p>
|
|
|
</el-menu-item>
|
|
|
<MenusActive :menuData="menuData" v-if="mouseenterIndex == index" />
|
|
|
</div>
|
|
@@ -123,7 +120,6 @@ const reactiveData: any = reactive({
|
|
|
const initMenus = async () => {
|
|
|
let locals: any = localStorage.getItem('roleRouters')
|
|
|
let roleRouters = JSON.parse(JSON.parse(locals).v)?.[0]?.children
|
|
|
- console.log(roleRouters)
|
|
|
let childArr = roleRouters?.slice(0, roleRouters?.length)
|
|
|
reactiveData.routes = childArr
|
|
|
}
|
|
@@ -158,11 +154,12 @@ onMounted(() => {
|
|
|
height: 100%;
|
|
|
background: #fff;
|
|
|
}
|
|
|
-.menuDiv {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
.menus-tabs {
|
|
|
.menu_item_box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 6rem;
|
|
|
.icon {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
@@ -176,9 +173,14 @@ onMounted(() => {
|
|
|
font-size: 13px;
|
|
|
color: #333;
|
|
|
text-align: center;
|
|
|
- margin-top: 2px;
|
|
|
+ margin-top: 6px;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
+ .menu_item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|