renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: navbar菜单active样式调整

Browse Source
This commit is contained in:
rd
2025-07-25 15:38:04 +08:00
parent ebbcddc407
commit 6237c56510
3 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/_base/navbar/components/navbar-menu/index.vue
View File

@ -9,7 +9,12 @@
<icon-caret-down size="16" class="arco-icon-down !mr-0" /> <icon-caret-down size="16" class="arco-icon-down !mr-0" />
</a-button> </a-button>
<template #content> <template #content>
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDropdownClick(child)"> <a-doption
v-for="(child, ind) in item.children"
:key="ind"
@click="handleDropdownClick(child)"
:class="{ active: child.includeRouteNames.includes(route.name) }"
>
<span class="menu-item-text"> {{ child.name }}</span> <span class="menu-item-text"> {{ child.name }}</span>
</a-doption> </a-doption>
</template> </template>
@ -26,10 +31,12 @@
</template> </template>
<script setup> <script setup>
import { useRoute } from 'vue-router';
import { useSidebarStore } from '@/stores/modules/side-bar'; import { useSidebarStore } from '@/stores/modules/side-bar';
import router from '@/router'; import router from '@/router';
const sidebarStore = useSidebarStore(); const sidebarStore = useSidebarStore();
const route = useRoute();
const selectedKey = computed(() => { const selectedKey = computed(() => {
return [String(sidebarStore.activeMenuId)]; return [String(sidebarStore.activeMenuId)];
@ -37,6 +44,7 @@ const selectedKey = computed(() => {
const menuList = computed(() => { const menuList = computed(() => {
return sidebarStore.menuList; return sidebarStore.menuList;
}); });
const handleDropdownClick = (item) => { const handleDropdownClick = (item) => {
router.push({ name: item.routeName }); router.push({ name: item.routeName });
}; };
@ -59,11 +67,11 @@ const handleDropdownClick = (item) => {
display: flex; display: flex;
height: 40px; height: 40px;
width: 100%; width: 100%;
padding: 10px 24px; padding: 10px 0;
align-items: center; align-items: center;
.menu-item-text { .menu-item-text {
color: var(--Text-2, #3c4043); color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular'; font-family: $font-family-regular;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -71,10 +79,12 @@ const handleDropdownClick = (item) => {
} }
} }
&:not(.arco-dropdown-option-disabled):hover { &:not(.arco-dropdown-option-disabled):hover {
background-color: transparent; background: var(--BG-200, #f2f3f5);
.arco-dropdown-option-content { }
border-radius: 8px; &.active {
background: var(--BG-200, #f2f3f5); background: var(--Brand-Brand-1, #f0edff) !important;
.menu-item-text {
color: var(--Brand-Brand-6, #6d4cfe) !important;
} }
} }
} }

2
src/components/_base/navbar/components/task-center-modal/style.scss
View File

@ -23,7 +23,7 @@
.label { .label {
margin-right: 12px; margin-right: 12px;
color: #211f24; color: #211f24;
font-family: 'PuHuiTi-Regular'; font-family: $font-family-regular;
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;

2
src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss
View File

@ -22,7 +22,7 @@
.label { .label {
margin-right: 12px; margin-right: 12px;
color: #211f24; color: #211f24;
font-family: 'PuHuiTi-Regular'; font-family: $font-family-regular;
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;