diff --git a/index.html b/index.html index 85e0823..d873e07 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index 54a6a00..101cbf5 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -28,13 +28,6 @@ } } -.fixed-width { - .el-button--mini { - padding: 7px 10px; - width: 60px; - } -} - .status-col { .cell { padding: 0 10px; @@ -55,6 +48,14 @@ vertical-align: middle; } +.el-header { + --el-header-padding: 0 0px !important; + --el-header-height: 50px !important; +} +// el 2.2.0 text button +.el-button.is-text { + color: var(--el-color-primary) !important; +} @media screen and (max-width: 500px) { .el-message { min-width: 300px !important; diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 75414b4..eb56874 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -7,10 +7,6 @@ @import './waves.scss'; @import './black.scss'; -label { - font-weight: 700; -} - html, body, #app { @@ -97,22 +93,18 @@ div:focus { } } -//main-container全局样式 -.app-container { - padding: 20px; -} - .text-center { text-align: center; } .link-type, .link-type:focus { - color: #337ab7; + color: var(--el-color-primary); cursor: pointer; &:hover { - color: rgb(32, 160, 255); + // color: rgb(32, 160, 255); + opacity: 0.3; } } @@ -270,3 +262,8 @@ div:focus { .table-td-thumb { width: 56px; } + +.flex-center { + flex-direction: column; + overflow: hidden; +} diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index fff1a07..3fded0f 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -1,33 +1,45 @@ #app { - .main-container { - min-height: 100%; - transition: margin-left 0.28s; - margin-left: var(--base-sidebar-width); + .layout-sidebar__container { + transition: width 0.28s ease; + background-color: var(--base-menu-background); + height: 100%; position: relative; + font-size: 0px; + z-index: 1001; + display: flex; + flex-direction: column; + -webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%); + box-shadow: 2px 0 14px rgb(0 21 41 / 10%); + .scrollbar-wrapper { + overflow-x: hidden; + } + + .el-scrollbar { + flex: 1; + } + + .el-scrollbar__bar.is-vertical { + right: 0px; + } + // 去掉el-menu边框 + .el-menu { + border: none; + } } // 展开sidebar状态设置svg-icon边距 - .openSidebar .layout-sidebar__container .svg-icon { - margin-right: 10px; + .openSidebar { + .layout-sidebar__container .svg-icon { + margin-right: 10px; + } } - .openSidebar .scrollbar-wrapper:not(.el-menu--collapse) { - width: var(--base-sidebar-width); - } + // 隐藏侧边栏样式 .hideSidebar { - .main-container { - margin-left: var(--base-sidebar-left); + .el-aside { + --el-aside-width: 60px; } - - .submenu-title-noDropdown { - padding: 0 !important; - position: relative; - - .el-tooltip { - padding: 0 !important; - } - } - + // 隐藏箭头 .el-sub-menu { overflow: hidden; @@ -47,7 +59,7 @@ .el-sub-menu { & > .el-sub-menu__title { & > span { - height: 0; + height: 3000px; width: 0; overflow: hidden; visibility: hidden; @@ -66,6 +78,7 @@ .layout-sidebar__container { transition: transform 0.28s; + position: fixed; } &.hideSidebar { @@ -74,7 +87,6 @@ } } } - } // when menu collapsed diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index 05a75b9..dc8f8ee 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -14,8 +14,10 @@ $panGreen: #30b08f; --base-logo-title-color: #ffffff; --base-topBar-background: #ffffff; --base-topBar-color: #5a5e66; - --base-sidebar-width: 200px; - --base-sidebar-left: 64px; + --base-sidebar-width: 220px; + --base-sidebar-left: 64px; + + --el-aside-width: 220px; } /***默认主题颜色配置***/ [data-theme='theme-light'] { diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index 18c201e..01cb87f 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -33,6 +33,7 @@ const toggleClick = () => { vertical-align: middle; width: 20px; height: 20px; + fill: var(--base-color-white); } .hamburger.is-active { diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue deleted file mode 100644 index 4c3069f..0000000 --- a/src/layout/components/AppMain.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue index 8416639..9ae03d0 100644 --- a/src/layout/components/Settings/index.vue +++ b/src/layout/components/Settings/index.vue @@ -47,12 +47,12 @@ -
+
{{ $t('layout.show') }} Logo diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue index 7e0dd41..8c46979 100644 --- a/src/layout/components/Sidebar/SidebarItem.vue +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -1,29 +1,30 @@