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

fix: header顶部menu样式调整

Browse Source
This commit is contained in:
刘洪洪
2024-11-20 19:51:26 +08:00
parent ec617f22bd
commit d4f6764273
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,9 +99,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
span { color: var(--el-color-primary);
text-decoration: underline;
}
} }
.cn-icon:first-of-type { .cn-icon:first-of-type {
font-size: 17px; font-size: 17px;

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

@@ -140,11 +140,11 @@
:show-close="false" :show-close="false"
@close="closeDrawer" @close="closeDrawer"
> >
<div class="cn-menu__left" v-if="otherMenu"> <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)"> <div class="left-menu" 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"></i> <i class="cn-icon cn-icon-right" v-show="menu.code==='setting'"></i>
</div> </div>
</div> </div>
<div class="cn-menu__middle" v-if="!isShowSetting"> <div class="cn-menu__middle" v-if="!isShowSetting">
@@ -187,7 +187,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="cn-menu__middle" v-if="isShowSetting"> <div class="cn-menu__middle" v-if="isShowSetting" @mouseenter="mouseleaveItemMenu('setting')" @mouseleave="mouseleaveRightMenu">
<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">
@@ -494,8 +494,10 @@ export default {
const newQuery = query const newQuery = query
// 重刷界面后url里参数带空格的部分会被转为+，此处将+再转为空格。后续观察是否存在原本参数带+被误转的 // 重刷界面后url里参数带空格的部分会被转为+，此处将+再转为空格。后续观察是否存在原本参数带+被误转的
Object.keys(newQuery).forEach(item => { Object.keys(newQuery).forEach(item => {
if (newQuery[item] && newQuery[item].indexOf('+') > -1) { if (newQuery[item] && _.isString(newQuery[item])) {
newQuery[item] = newQuery[item].replaceAll('+', ' ') if (newQuery[item].indexOf('+') > -1) {
newQuery[item] = newQuery[item].replaceAll('+', ' ')
}
} }
}) })
const newUrl = urlParamsHandler(window.location.href, query, newQuery) const newUrl = urlParamsHandler(window.location.href, query, newQuery)
@@ -929,6 +931,15 @@ export default {
this.isShowSetting = false this.isShowSetting = false
clearTimeout(timer) clearTimeout(timer)
}, 400) }, 400)
},
mouseleaveLeftMenu () {
this.isShowSetting = false
},
mouseleaveItemMenu (code) {
this.isShowSetting = code === 'setting'
},
mouseleaveRightMenu () {
this.isShowSetting = false
} }
} }
} }