diff --git a/fuintAdmin/src/assets/styles/sidebar.scss b/fuintAdmin/src/assets/styles/sidebar.scss index c9341a8c5..857834e04 100644 --- a/fuintAdmin/src/assets/styles/sidebar.scss +++ b/fuintAdmin/src/assets/styles/sidebar.scss @@ -1,9 +1,11 @@ + #app { .main-container { min-height: 100%; transition: margin-left .28s; - margin-left: $base-sidebar-width; + //margin-left: $base-sidebar-width; + margin-left: var(--sidebar-width); position: relative; } @@ -82,6 +84,8 @@ // menu hover .submenu-title-noDropdown, .el-submenu__title { + //height: if($isCollapse,60px,48px) !important; + height: var(--sidebar-height); &:hover { background-color: rgba(0, 0, 0, 0.06) !important; } @@ -90,8 +94,9 @@ & .theme-dark .is-active > .el-submenu__title { color: white !important; background: linear-gradient( 229deg, #FF8646 0%, #FFA360 100%) !important; - border-top-left-radius: 8px !important; /* 左上圆角 */ - border-top-right-radius: 8px !important; /* 右上圆角 */ + //border-top-left-radius: 8px !important; /* 左上圆角 */ + //border-top-right-radius: 8px !important; /* 右上圆角 */ + border-radius: 8px; i { color: #fff !important; } @@ -115,7 +120,7 @@ } } - .el-menu-item.is-active { + .el-menu-item .is-active { color: #FF9655 !important; //菜单点击上的背景颜色 background: linear-gradient( 229deg, #FFEFE5 0%, #FFEFE5 100%) !important; @@ -212,11 +217,18 @@ } } + .el-menu-item.is-active { + color: white !important; + //菜单点击上的背景颜色 + background: linear-gradient( 229deg, #FF9655 0%, #FF9655 100%) !important; + } .nest-menu .el-submenu>.el-submenu__title, .el-menu-item { + background-color: #FFFAF6 !important; &:hover { // you can use $subMenuHover - background-color: rgba(0, 0, 0, 0.06) !important; + color: #FFA46B !important; + background-color: #FFEBDD !important; } } diff --git a/fuintAdmin/src/assets/styles/variables.scss b/fuintAdmin/src/assets/styles/variables.scss index 47eabb896..2145c8278 100644 --- a/fuintAdmin/src/assets/styles/variables.scss +++ b/fuintAdmin/src/assets/styles/variables.scss @@ -7,6 +7,7 @@ $green: #30B08F; $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; +$isCollapse: true; // 默认菜单主题风格 $base-menu-color:#727171;// 菜单全部字体颜色 @@ -35,5 +36,6 @@ $base-sidebar-width: 200px; subMenuHover: $base-sub-menu-hover; sideBarWidth: $base-sidebar-width; logoTitleColor: $base-logo-title-color; - logoLightTitleColor: $base-logo-light-title-color + logoLightTitleColor: $base-logo-light-title-color; + isCollapse: $isCollapse; } diff --git a/fuintAdmin/src/components/Hamburger/index.vue b/fuintAdmin/src/components/Hamburger/index.vue index 368b00215..5be110406 100644 --- a/fuintAdmin/src/components/Hamburger/index.vue +++ b/fuintAdmin/src/components/Hamburger/index.vue @@ -1,14 +1,21 @@ @@ -34,6 +41,7 @@ export default { .hamburger { display: inline-block; vertical-align: middle; + color: #00aaff; width: 20px; height: 20px; } diff --git a/fuintAdmin/src/components/TopNav/index.vue b/fuintAdmin/src/components/TopNav/index.vue index ae3631c1b..4015eaa41 100644 --- a/fuintAdmin/src/components/TopNav/index.vue +++ b/fuintAdmin/src/components/TopNav/index.vue @@ -6,9 +6,12 @@ @select="handleSelect" > @@ -19,8 +22,10 @@ :index="item.path" :key="index" v-if="index >= visibleNumber" - > - {{ item.meta.title }} + + {{ item.meta.title }} + @@ -28,7 +33,7 @@ + diff --git a/fuintAdmin/src/layout/components/Sidebar/index.vue b/fuintAdmin/src/layout/components/Sidebar/index.vue index e19c0e9e5..7a375b751 100644 --- a/fuintAdmin/src/layout/components/Sidebar/index.vue +++ b/fuintAdmin/src/layout/components/Sidebar/index.vue @@ -1,29 +1,56 @@ @@ -55,6 +82,14 @@ export default { return variables; }, isCollapse() { + if (!this.sidebar.opened){ + document.documentElement.style.setProperty('--sidebar-width', '70px'); + document.documentElement.style.setProperty('--sidebar-height', '60px'); + }else { + document.documentElement.style.setProperty('--sidebar-width', '200px'); + document.documentElement.style.setProperty('--sidebar-height', '48px'); + } + return !this.sidebar.opened; }, storeName() { diff --git a/fuintAdmin/src/main.js b/fuintAdmin/src/main.js index 3d576506e..07ed4f8ae 100644 --- a/fuintAdmin/src/main.js +++ b/fuintAdmin/src/main.js @@ -57,6 +57,8 @@ Vue.prototype.handleTree = handleTree Vue.prototype.imgurl = 'http://192.168.0.138:8008' // Vue.prototype.pcUrl = 'http://192.168.0.178:83/' Vue.prototype.pcUrl = 'https://cashier.youkerr.com/' +const Collapse= false +Vue.prototype.isCollapse = Collapse // 全局组件挂载 Vue.component('DictTag', DictTag)