diff options
| author | chenjinsong <[email protected]> | 2024-11-21 15:13:11 +0800 |
|---|---|---|
| committer | chenjinsong <[email protected]> | 2024-11-21 15:13:11 +0800 |
| commit | e4b20edb7a0bda90f70e32d8ba86a1ccccb3aa8e (patch) | |
| tree | ee7232f8e972e35ce257cdef9b088d1078b80e2e | |
| parent | b567592cfe942e1c8fac370b4ca5e88356a643de (diff) | |
fix: setting菜单交互调整
| -rw-r--r-- | src/assets/css/components/components/layout/layout.scss | 7 | ||||
| -rw-r--r-- | src/components/layout/Header.vue | 10 |
2 files changed, 13 insertions, 4 deletions
diff --git a/src/assets/css/components/components/layout/layout.scss b/src/assets/css/components/components/layout/layout.scss index 40870b27..938fa721 100644 --- a/src/assets/css/components/components/layout/layout.scss +++ b/src/assets/css/components/components/layout/layout.scss @@ -88,12 +88,12 @@ } .cn-menu__left { flex: 1; - padding: 12px 0 10px 20px; + padding: 12px 0 10px 0; max-width: 290px; border-right: 1px solid var(--el-border-color); .left-menu { - padding: 8px 0; + padding: 8px 0 8px 20px; font-size: 14px; color: var(--el-text-color-primary); cursor: pointer; @@ -101,6 +101,9 @@ &:hover { color: var(--el-color-primary); } + &.left-menu--setting { + background-color: #f0f0f0; + } .cn-icon:first-of-type { font-size: 17px; } diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 33dd7076..89fe1f2e 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -141,7 +141,13 @@ @close="closeDrawer" > <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> <span>{{ $t(menu.i18n || menu.name) }}</span> <i class="cn-icon cn-icon-right" v-show="menu.code==='setting'"></i> @@ -188,7 +194,7 @@ </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__header">{{ $t('overall.setting') }}</div> <div class="middle-menus__body" v-if="settingMenu && settingMenu.children"> |