优化ui
This commit is contained in:
不做码农
parent
421c7b6a60
commit
3a113693a8
@ -45,51 +45,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// to fixed https://github.com/ElemeFE/element/issues/2461
|
||||
// .el-dialog {
|
||||
// transform: none;
|
||||
// left: 0;
|
||||
// position: relative;
|
||||
// margin: 0 auto;
|
||||
// }
|
||||
|
||||
// refine element ui upload
|
||||
// .upload-container {
|
||||
// .el-upload {
|
||||
// width: 100%;
|
||||
|
||||
// .el-upload-dragger {
|
||||
// width: 100%;
|
||||
// height: 200px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// dropdown
|
||||
// .el-dropdown-menu {
|
||||
// a {
|
||||
// display: block
|
||||
// }
|
||||
// }
|
||||
|
||||
// fix date-picker ui bug in filter-item
|
||||
// .el-range-editor.el-input__inner {
|
||||
// display: inline-flex !important;
|
||||
// }
|
||||
|
||||
// to fix el-date-picker css style
|
||||
// .el-range-separator {
|
||||
// box-sizing: content-box;
|
||||
// }
|
||||
|
||||
// .el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// .el-dropdown .el-dropdown-link {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
// fix 2.2.0 版本label标签不居中
|
||||
.el-form-item--small .el-form-item__label {
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
// element ui 移动端组件适配
|
||||
.el-icon {
|
||||
@ -122,10 +81,10 @@
|
||||
--el-dialog-width: 100% !important;
|
||||
--el-dialog-margin-top: 0 !important;
|
||||
}
|
||||
.el-dialog:not(.is-fullscreen){
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.el-drawer{
|
||||
.el-drawer {
|
||||
width: 85% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,13 +10,13 @@
|
||||
.openSidebar .layout-sidebar__container .svg-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.hideSidebar {
|
||||
.layout-sidebar__container {
|
||||
width: 54px !important;
|
||||
}
|
||||
|
||||
.openSidebar .scrollbar-wrapper:not(.el-menu--collapse) {
|
||||
width: var(--base-sidebar-width);
|
||||
}
|
||||
.hideSidebar {
|
||||
.main-container {
|
||||
margin-left: 54px;
|
||||
margin-left: var(--base-sidebar-left);
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown {
|
||||
@ -58,10 +58,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-sub-menu {
|
||||
min-width: var(--base-sidebar-width);
|
||||
}
|
||||
|
||||
// mobile responsive
|
||||
.mobile {
|
||||
.main-container {
|
||||
@ -70,7 +66,6 @@
|
||||
|
||||
.layout-sidebar__container {
|
||||
transition: transform 0.28s;
|
||||
width: var(--base-sidebar-width) !important;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
@ -80,12 +75,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// .withoutAnimation {
|
||||
// .main-container,
|
||||
// .layout-sidebar__container {
|
||||
// transition: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// when menu collapsed
|
||||
@ -95,17 +84,8 @@
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@ $panGreen: #30b08f;
|
||||
--base-logo-title-color: #ffffff;
|
||||
--base-topBar-background: #ffffff;
|
||||
--base-topBar-color: #5a5e66;
|
||||
--base-sidebar-width: 210px;
|
||||
--base-sidebar-width: 200px;
|
||||
--base-sidebar-left: 64px;
|
||||
}
|
||||
/***默认主题颜色配置***/
|
||||
[data-theme='theme-light'] {
|
||||
|
||||
@ -94,12 +94,12 @@ function setLayout() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-menu {
|
||||
// display: inline-table;
|
||||
.el-menu-item {
|
||||
vertical-align: center;
|
||||
}
|
||||
}
|
||||
// .el-menu {
|
||||
// // display: inline-table;
|
||||
// .el-menu-item {
|
||||
// vertical-align: center;
|
||||
// }
|
||||
// }
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
|
||||
@ -10,8 +10,7 @@
|
||||
:active-text-color="theme"
|
||||
:collapse-transition="false"
|
||||
background-color="transparent"
|
||||
mode="vertical"
|
||||
>
|
||||
mode="vertical">
|
||||
<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
@ -47,7 +46,6 @@ const activeMenu = computed(() => {
|
||||
|
||||
.layout-sidebar__container {
|
||||
transition: width 0.28s;
|
||||
width: var(--base-sidebar-width);
|
||||
background-color: var(--base-menu-background);
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
@ -70,39 +68,13 @@ const activeMenu = computed(() => {
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 去掉el-menu边框
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
// background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title {
|
||||
// color: $subMenuActiveText !important;
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: var(--base-sidebar-width) !important;
|
||||
// background-color: $base-menu-background !important;
|
||||
|
||||
&:hover {
|
||||
// background-color: $base-sub-menu-hover !important;
|
||||
}
|
||||
.el-sub-menu .el-menu-item {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user