gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: setting菜单交互调整

Browse Source
This commit is contained in:
chenjinsong
2024-11-21 15:13:11 +08:00
parent b567592cfe
commit e4b20edb7a
2 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/css/components/components/layout/layout.scss
View File

@@ -88,12 +88,12 @@
} }
.cn-menu__left { .cn-menu__left {
flex: 1; flex: 1;
padding: 12px 0 10px 20px; padding: 12px 0 10px 0;
max-width: 290px; max-width: 290px;
border-right: 1px solid var(--el-border-color); border-right: 1px solid var(--el-border-color);
.left-menu { .left-menu {
padding: 8px 0; padding: 8px 0 8px 20px;
font-size: 14px; font-size: 14px;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
cursor: pointer; cursor: pointer;
@@ -101,6 +101,9 @@
&:hover { &:hover {
color: var(--el-color-primary); color: var(--el-color-primary);
} }
&.left-menu--setting {
background-color: #f0f0f0;
}
.cn-icon:first-of-type { .cn-icon:first-of-type {
font-size: 17px; font-size: 17px;
} }

10
src/components/layout/Header.vue
View File

@@ -141,7 +141,13 @@
@close="closeDrawer" @close="closeDrawer"
> >
<div class="cn-menu__left" v-if="otherMenu" @mouseleave="mouseleaveLeftMenu"> <div class="cn-menu__left" v-if="otherMenu" @mouseleave="mouseleaveLeftMenu">
<div class="left-menu" v-for="menu in otherMenu" :key="menu.id" @click="jumpOther(menu.route,'','',0)" @mouseenter="mouseleaveItemMenu(menu.code)"> <div
class="left-menu"
:class="isShowSetting && menu.code==='setting' ? 'left-menu--setting' : ''"
v-for="menu in otherMenu"
:key="menu.id"
@click="jumpOther(menu.route,'','',0)"
@mouseenter="mouseleaveItemMenu(menu.code)">
<i :class="menu.icon"></i> <i :class="menu.icon"></i>
<span>{{ $t(menu.i18n || menu.name) }}</span> <span>{{ $t(menu.i18n || menu.name) }}</span>
<i class="cn-icon cn-icon-right" v-show="menu.code==='setting'"></i> <i class="cn-icon cn-icon-right" v-show="menu.code==='setting'"></i>
@@ -188,7 +194,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="cn-menu__middle" v-if="isShowSetting" @mouseenter="mouseleaveItemMenu('setting')"> <div class="cn-menu__middle" v-else @mouseenter="mouseleaveItemMenu('setting')">
<div class="middle-menus middle-menus--network-analytics"> <div class="middle-menus middle-menus--network-analytics">
<div class="middle-menus__header">{{ $t('overall.setting') }}</div> <div class="middle-menus__header">{{ $t('overall.setting') }}</div>
<div class="middle-menus__body" v-if="settingMenu && settingMenu.children"> <div class="middle-menus__body" v-if="settingMenu && settingMenu.children">