From 6f830703a2607c33e5d25d6d17d0e453fc2fac2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=91=A8=E6=97=AD?= Date: Tue, 13 Jul 2021 09:25:46 +0800 Subject: [PATCH] perf(menu): Optimize the style of the bottom collapse button in the Mix menu layout (#896) --- CHANGELOG.zh_CN.md | 1 + src/layouts/default/sider/MixSider.vue | 16 +++++++++------- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 0ca0b606c37..d86650252a2 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,6 +1,7 @@ ### ✨ Features - **NoticeList** 添加分页、超长自动省略、标题点击事件、标题删除线等功能 +- **MixSider** 优化 Mix 菜单布局时 底部折叠按钮 的样式,与其它菜单布局时的风格保持一致 ### 🐛 Bug Fixes diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue index 00f700c731d..5fd37c4b704 100644 --- a/src/layouts/default/sider/MixSider.vue +++ b/src/layouts/default/sider/MixSider.vue @@ -15,7 +15,7 @@ > - +
    @@ -86,7 +86,6 @@ import { SimpleMenu, SimpleMenuTag } from '/@/components/SimpleMenu'; import { Icon } from '/@/components/Icon'; import { AppLogo } from '/@/components/Application'; - import Trigger from '../trigger/HeaderTrigger.vue'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useDragLine } from './useLayoutSider'; import { useGlobSetting } from '/@/hooks/setting'; @@ -97,6 +96,7 @@ import clickOutside from '/@/directives/clickOutside'; import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '/@/router/menus'; import { listenerRouteChange } from '/@/logics/mitt/routeChange'; + import LayoutTrigger from '../trigger/index.vue'; export default defineComponent({ name: 'LayoutMixSider', @@ -105,7 +105,7 @@ AppLogo, SimpleMenu, Icon, - Trigger, + LayoutTrigger, SimpleMenuTag, }, directives: { @@ -486,17 +486,19 @@ bottom: 0; left: 0; width: 100%; - padding: 6px; - padding-left: 12px; - font-size: 18px; + font-size: 14px; color: rgba(255, 255, 255, 0.65); + text-align: center; cursor: pointer; - background-color: @sider-dark-bg-color; + background-color: @trigger-dark-bg-color; + height: 36px; + line-height: 36px; } &.light &-trigger { color: rgba(0, 0, 0, 0.65); background-color: #fff; + border-top: 1px solid #eee; } &-menu-list {