From b431f01c44d1738b291540070bd466c840bad633 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com> Date: Fri, 29 Apr 2022 19:58:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98=E8=89=B2?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/index.scss | 3 - src/assets/styles/sidebar.scss | 49 ++++++----- src/assets/styles/variables.module.scss | 103 +++++++++++------------- src/components/TopNav/index.vue | 39 +++++---- src/layout/components/Navbar.vue | 4 +- src/layout/components/Sidebar/Logo.vue | 22 ++--- src/layout/components/Sidebar/index.vue | 19 ++--- src/layout/index.vue | 2 +- 8 files changed, 111 insertions(+), 130 deletions(-) diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 6615ddd..6423155 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -202,9 +202,6 @@ div:focus { .w100 { width: 100%; } -.el-dialog:not(.is-fullscreen) { - margin-top: 6vh !important; -} .pull-right { float: right !important; diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index b088553..0ee4870 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -1,16 +1,15 @@ #app { - .main-container { min-height: 100%; - transition: margin-left .28s; - margin-left: $base-sidebar-width; + transition: margin-left 0.28s; + margin-left: var(--base-sidebar-width); position: relative; } - // 展开sidebar状态设置svg-icon边距 - .openSidebar .layout-sidebar__container .svg-icon { - margin-right: 5px; - } + // 展开sidebar状态设置svg-icon边距 + .openSidebar .layout-sidebar__container .svg-icon { + margin-right: 5px; + } .hideSidebar { .layout-sidebar__container { width: 54px !important; @@ -31,21 +30,23 @@ .el-sub-menu { overflow: hidden; - - &>.el-sub-menu__title { + + & > .el-sub-menu__title { .el-sub-menu__icon-arrow { display: none; } } } - + // 折叠状态下 .el-menu--collapse { - [class^=el-icon] { + [class^='el-icon'] { width: auto; + font-size: medium; + margin-right: 0; } .el-sub-menu { - &>.el-sub-menu__title { - &>span { + & > .el-sub-menu__title { + & > span { height: 0; width: 0; overflow: hidden; @@ -58,7 +59,7 @@ } .el-menu--collapse .el-menu .el-sub-menu { - min-width: $base-sidebar-width !important; + min-width: var(--base-sidebar-width); } // mobile responsive @@ -68,21 +69,18 @@ } .layout-sidebar__container { - transition: transform .28s; - width: $base-sidebar-width !important; + transition: transform 0.28s; + width: var(--base-sidebar-width) !important; } &.hideSidebar { .layout-sidebar__container { - pointer-events: none; - transition-duration: 0.3s; - transform: translate3d(-$base-sidebar-width, 0, 0); + display: none; } } } .withoutAnimation { - .main-container, .layout-sidebar__container { transition: none; @@ -92,17 +90,16 @@ // when menu collapsed .el-menu--vertical { - - .nest-menu .el-sub-menu>.el-sub-menu__title, + .nest-menu .el-sub-menu > .el-sub-menu__title, .el-menu-item { &:hover { - // you can use $subMenuHover - background-color: $base-sub-menu-hover !important; + // 缩小状态下选中背景 + // background-color: var(--base-sub-menu-hover) !important; } } // the scroll bar appears when the subMenu is too long - >.el-menu--popup { + > .el-menu--popup { max-height: 100vh; overflow-y: auto; @@ -119,4 +116,4 @@ border-radius: 20px; } } -} \ No newline at end of file +} diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index 2a7ffa3..f1d6685 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -1,69 +1,62 @@ // base color $blue: #324157; -$light-blue: #3A71A8; -$red: #C03639; -$pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; -$yellow: #FEC171; -$panGreen: #30B08F; +$light-blue: #3a71a8; +$red: #c03639; +$pink: #e65d6e; +$green: #30b08f; +$tiffany: #4ab7bd; +$yellow: #fec171; +$panGreen: #30b08f; -:root { - --base-menu-color: #bfcbd9; - --base-menu-color-active: #f4f4f5; - --base-menu-background: #304156; - --base-logo-title-color: #ffffff; - --base-topBar-background: #ffffff; -} // 默认菜单主题风格 -$base-menu-color: #bfcbd9; -$base-menu-color-active: #f4f4f5; -$base-menu-background: #304156; -$base-logo-title-color: #ffffff; -$base-topBar-background: #ffffff; +:root { + --base-menu-color: #bfcbd9; + --base-menu-color-active: #f4f4f5; + --base-menu-background: #ffffff; + --base-logo-title-color: #ffffff; + --base-topBar-background: #ffffff; + --base-sidebar-width: 210px; +} +/***默认主题颜色配置***/ +[data-theme='theme-light'] { + --base-menu-color: #bfcbd9; + --base-menu-color-active: #f4f4f5; + // 菜单背景 + --base-menu-background: #ffffff; + // logo部分文字颜色 + --base-logo-title-color: #001529; + // 顶部导航栏背景色 + --base-topBar-background: #ffffff; + + //缩小状态下子菜单选中颜色 + --base-sub-menu-hover: #ccc; + + // el-ement ui 设置 +} +/***深色主题颜色配置***/ +[data-theme='theme-dark'] { + --base-menu-color: #bfcbd9; + --base-menu-color-active: #f4f4f5; + --base-menu-background: #304156; + --base-logo-title-color: #ffffff; + --base-topBar-background: #ffffff; + + //缩小状态下子菜单选中颜色 + --base-sub-menu-hover: #000; + + // el-ement ui 设置 + --el-fill-color-blank: #304156; + --el-text-color-primary: #ffffff; +} -$menuHover:#263445; // sidebar -$menuText:#bfcbd9; -$menuActiveText:#409EFF; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -$base-menu-light-color: rgba(0, 0, 0, 0.7); -$base-menu-light-background: #ffffff; -$base-logo-light-title-color: #001529; - -$base-sub-menu-background: #1f2d3d; -$base-sub-menu-hover: #001528; - -$--color-primary: #409EFF; -$--color-success: #67C23A; -$--color-warning: #E6A23C; -$--color-danger: #F56C6C; -$--color-info: #909399; - -$base-sidebar-width: 210px; - // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass /* js中import， import variables from '@/assets/styles/variables.module.scss' template中使用 eg：variables.menuColor */ -:export { - menuColor: $base-menu-color; - menuLightColor: $base-menu-light-color; - menuColorActive: $base-menu-color-active; - menuBackground: $base-menu-background; - menuLightBackground: $base-menu-light-background; - subMenuBackground: $base-sub-menu-background; - subMenuHover: $base-sub-menu-hover; - sideBarWidth: $base-sidebar-width; - logoTitleColor: $base-logo-title-color; - logoLightTitleColor: $base-logo-light-title-color; - // primaryColor: $--color-primary; - // successColor: $--color-success; - // dangerColor: $--color-danger; - // infoColor: $--color-info; - // warningColor: $--color-warning; -} \ No newline at end of file +// :export { +// } diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue index 435fd1d..72d8318 100644 --- a/src/components/TopNav/index.vue +++ b/src/components/TopNav/index.vue @@ -1,9 +1,9 @@