From df744014031c57bf69fd1d94767a3c6e07f2ecb8 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 31 十二月 2022 13:20:38 +0800
Subject: [PATCH] 1.横向竖向菜单模式切换功能
---
src/layout/components/Navbar.vue | 311 +++++++++++++++++++------------
src/layout/components/Sidebar/MenuItemEx.vue | 128 ++++++++++++
src/layout/index.vue | 8
src/settings.js | 4
src/styles/variables.scss | 17 +
src/layout/components/Sidebar/index.vue | 13
src/layout/components/Settings/index.vue | 11 +
src/store/modules/settings.js | 3
src/styles/sidebar.scss | 91 +++++++++
9 files changed, 448 insertions(+), 138 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 687336b..47c2260 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,113 +1,141 @@
<template>
- <!-- <div class="navbar">-->
- <div class="navbar" :style="{background: $store.state.settings.headBackgroundColorValue? '#304156':'#fff'}">
- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
- <breadcrumb class="breadcrumb-container" />
-
- <div class="right-menu">
-
- <!-- <template v-if="device!=='mobile'">-->
- <template>
- <search id="header-search" class="right-menu-item" />
- <!-- <error-log class="errLog-container right-menu-item hover-effect" />-->
- <screenfull id="screenfull" class="right-menu-item hover-effect" />
- <!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
- <!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
- <!-- </el-tooltip>-->
- </template>
-
- <el-dropdown class="avatar-container" trigger="click">
- <div class="avatar-wrapper">
- <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
- <div style="display: flex;align-items: center;margin-top: -5px">
-
- <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />
- <div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
- </div>
-
- <!-- <i class="el-icon-caret-bottom" />-->
- </div>
- <el-dropdown-menu slot="dropdown" class="user-dropdown" style="text-align: center">
- <!-- <router-link to="/">-->
- <!-- <el-dropdown-item>-->
- <!-- Home-->
- <!-- </el-dropdown-item>-->
- <!-- </router-link>-->
- <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
- <!-- <el-dropdown-item>Github</el-dropdown-item>-->
- <!-- </a>-->
- <!-- <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
- <!-- <el-dropdown-item>Docs</el-dropdown-item>-->
- <!-- </a>-->
- <el-dropdown-item @click.native="editPassword">
- <span style="display:block;">淇敼瀵嗙爜</span>
- </el-dropdown-item>
- <el-dropdown-item divided @click.native="logout">
- <span style="display:block;font-weight: bolder">閫�鍑�</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- <el-dialog
- title="淇敼瀵嗙爜"
- :visible.sync="dialogVisible"
- width="500px"
- :close-on-click-modal="false"
- @close="handleClose"
- @closed="handleClose"
+ <div>
+ <div
+ class="navbar"
+ :class="{'display_btw':$store.state.settings.menuIsHorizontal}"
+ :style="{background: $store.state.settings.headBackgroundColorValue? '#304156':'#fff'}"
>
- <el-form ref="dialogForm" :rules="formRules" :model="form" label-width="100px">
- <!-- <el-form-item label="鐢ㄦ埛缂栫爜锛�">-->
- <!-- <div>{{ usercode }}</div>-->
- <!-- </el-form-item>-->
- <!-- <el-form-item label="鐢ㄦ埛鍚嶇О锛�">-->
- <!-- <div> {{ username }}</div>-->
- <!-- </el-form-item>-->
- <el-form-item label="鍘熷瘑鐮侊細" prop="password">
- <el-input v-model="form.password" style="width: 220px;" />
- </el-form-item>
- <el-form-item label="鏂板瘑鐮侊細" prop="newpassword">
- <el-input v-model="form.newpassword" style="width: 220px;" />
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <div class="footerButton">
- <el-button @click="dialogVisibleCancel">杩斿洖</el-button>
- <el-button type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>
- </div>
- </span>
- </el-dialog>
+ <hamburger
+ v-if="!$store.state.settings.menuIsHorizontal"
+ :is-active="sidebar.opened"
+ class="hamburger-container"
+ @toggleClick="toggleSideBar"
+ />
+
+ <breadcrumb
+ class="breadcrumb-container"
+ :style="{marginLeft:$store.state.settings.menuIsHorizontal?'20px':''}"
+ />
+
+ <el-menu
+ v-if="$store.state.settings.menuIsHorizontal"
+ router
+ class="menuHorizontal el-menu-demo"
+ mode="horizontal"
+ :default-active="activeMenu"
+ :text-color="$store.state.settings.headBackgroundColorValue?'#fff':'#87909c'"
+ :background-color="$store.state.settings.headBackgroundColorValue?variables.menuBg:'#fff'"
+ :active-text-color="variables.menuActiveText"
+ @select="handleSelect"
+ >
+ <!-- menu-trigger="click"-->
+ <!-- :text-color="variables.menuText"-->
+ <menu-item-ex
+ v-for="route in permission_routes"
+ :key="route.path"
+ :item="route"
+ :base-path="route.path"
+ />
+ </el-menu>
+
+ <div class="right-menu">
+
+ <!-- <template v-if="device!=='mobile'">-->
+ <template>
+ <search id="header-search" class="right-menu-item" />
+ <!-- <error-log class="errLog-container right-menu-item hover-effect" />-->
+ <screenfull id="screenfull" class="right-menu-item hover-effect" />
+ <!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
+ <!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
+ <!-- </el-tooltip>-->
+ </template>
+
+ <el-dropdown class="avatar-container" trigger="click">
+ <div class="avatar-wrapper">
+ <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+ <div style="display: flex;align-items: center;margin-top: -5px">
+
+ <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />
+ <div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
+ </div>
+
+ <!-- <i class="el-icon-caret-bottom" />-->
+ </div>
+ <el-dropdown-menu slot="dropdown" class="user-dropdown" style="text-align: center">
+ <!-- <router-link to="/">-->
+ <!-- <el-dropdown-item>-->
+ <!-- Home-->
+ <!-- </el-dropdown-item>-->
+ <!-- </router-link>-->
+ <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
+ <!-- <el-dropdown-item>Github</el-dropdown-item>-->
+ <!-- </a>-->
+ <!-- <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
+ <!-- <el-dropdown-item>Docs</el-dropdown-item>-->
+ <!-- </a>-->
+ <el-dropdown-item @click.native="editPassword">
+ <span style="display:block;">淇敼瀵嗙爜</span>
+ </el-dropdown-item>
+ <el-dropdown-item divided @click.native="logout">
+ <span style="display:block;font-weight: bolder">閫�鍑�</span>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
+ <el-dialog
+ title="淇敼瀵嗙爜"
+ :visible.sync="dialogVisible"
+ width="500px"
+ :close-on-click-modal="false"
+ @close="handleClose"
+ @closed="handleClose"
+ >
+ <el-form ref="dialogForm" :rules="formRules" :model="form" label-width="100px">
+ <!-- <el-form-item label="鐢ㄦ埛缂栫爜锛�">-->
+ <!-- <div>{{ usercode }}</div>-->
+ <!-- </el-form-item>-->
+ <!-- <el-form-item label="鐢ㄦ埛鍚嶇О锛�">-->
+ <!-- <div> {{ username }}</div>-->
+ <!-- </el-form-item>-->
+ <el-form-item label="鍘熷瘑鐮侊細" prop="password">
+ <el-input v-model="form.password" style="width: 220px;" />
+ </el-form-item>
+ <el-form-item label="鏂板瘑鐮侊細" prop="newpassword">
+ <el-input v-model="form.newpassword" style="width: 220px;" />
+ </el-form-item>
+ </el-form>
+ <span slot="footer" class="dialog-footer">
+ <div class="footerButton">
+ <el-button @click="dialogVisibleCancel">杩斿洖</el-button>
+ <el-button type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>
+ </div>
+ </span>
+ </el-dialog>
+
+ </div>
</div>
+
</template>
<script>
+const SER_HZ = /^[\u4e00-\u9fa5]+$/
import { mapGetters } from 'vuex'
+import MenuItemEx from './Sidebar/MenuItemEx'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import { getCookie } from '@/utils/auth'
import { UpdateUserPassword } from '@/api/user'
import Search from '@/components/HeaderSearch'
import Screenfull from '@/components/Screenfull'
+import variables from '@/styles/variables.scss'
-const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
components: {
+ MenuItemEx,
Breadcrumb,
Hamburger,
Search,
Screenfull
- },
- computed: {
- ...mapGetters([
- 'sidebar',
- 'avatar',
- 'device'
- ])
- },
- created() {
- this.usercode = getCookie('navTabId')
- this.username = getCookie('username')
},
data() {
const validatePassword1 = (rule, value, callback) => {
@@ -150,7 +178,43 @@
}
}
},
+ created() {
+ this.usercode = getCookie('navTabId')
+ this.username = getCookie('username')
+ },
+ computed: {
+ ...mapGetters([
+ 'sidebar',
+ 'avatar',
+ 'permission_routes'
+ ]),
+ routes() {
+ return this.$router.options.routes
+ },
+ activeMenu() {
+ const route = this.$route
+ const { meta, path } = route
+ // if set path, the sidebar will highlight the path you set
+ if (meta.activeMenu) {
+ return meta.activeMenu
+ }
+ // const p = '/' + path.split('/')[1]
+ // console.log(p)
+ return path
+ },
+ variables() {
+ console.log(variables, 2333)
+ // 鍏堣緭鍑鸿繖涓獀ariables鍊� 鐒跺悗淇敼鍏跺睘鎬у��
+ variables.menuActiveText = this.$store.state.settings.theme
+ // background: rgb(48, 65, 86);
+ // variables.menuBg = this.$store.state.settings.headBackgroundColorValue && this.$store.state.settings.menuIsHorizontal ? `rgb(48,65,86)` : '#fff'
+ return variables
+ }
+ },
methods: {
+ handleSelect(key, keyPath) {
+ // console.log(key, keyPath)
+ },
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
@@ -174,7 +238,6 @@
password: this.form.password,
newpassword: this.form.newpassword
}
- console.log(data)
UpdateUserPassword(data).then(res => {
if (res.code === '200') {
this.$message.success('淇敼鎴愬姛锛�')
@@ -192,9 +255,11 @@
}
}
</script>
-
<style lang="scss" scoped>
-$main_color: #42b983;
+.display_btw {
+ display: flex;
+ justify-content: space-between;
+}
.navbar {
height: 50px;
@@ -220,6 +285,30 @@
.breadcrumb-container {
float: left;
+ width: 200px;
+ }
+
+ .menuHorizontal {
+ display: flex !important;
+ justify-content: center !important;
+
+ ::v-deep .svg-icon {
+ margin-right: 8px;
+ //margin-left: 8px !important;
+ }
+
+ ::v-deep .el-submenu__title > span {
+ //margin-right: 8px !important;
+ }
+
+ ::v-deep .submenu-title-noDropdown > span {
+ //margin-right: 8px !important;
+ }
+
+ ::v-deep .el-submenu__icon-arrow {
+ display: none;
+ }
+
}
.right-menu {
@@ -227,6 +316,7 @@
height: 100%;
line-height: 50px;
display: flex;
+ //min-width: 300px;
&:focus {
outline: none;
@@ -275,33 +365,12 @@
}
}
}
-
- //.footerButton {
- // display: flex;
- // justify-content: end;
- //}
- //
- //::v-deep .el-button--primary {
- // background-color: $main_color !important;
- // height: 30px;
- // display: flex;
- // align-items: center;
- // //border: 1px solid $main_color;
- // border: none;
- // padding: 0 20px;
- //}
- //
- //::v-deep .el-button--default {
- // background-color: #ffffff !important;
- // height: 30px;
- // display: flex;
- // align-items: center;
- // padding: 0 20px;
- //}
- //
- //::v-deep .el-input__inner {
- // height: 30px;
- // line-height: 30px;
- //}
}
</style>
+<style>
+.el-menu--horizontal .el-menu {
+ background-color: transparent !important;
+ margin-top: -2px;
+}
+
+</style>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 404c2b4..6d1c54a 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -19,6 +19,17 @@
inactive-text="娴呰壊"
/>
</div>
+ <div class="drawer-item" style="display: flex;justify-content: space-between">
+ <span>鑿滃崟妯″紡</span>
+ <el-switch
+ v-model="$store.state.settings.menuIsHorizontal"
+ style="display: block"
+ :active-color="$store.state.settings.theme"
+ inactive-color="#ccc"
+ active-text="妯睆"
+ inactive-text="绔栧睆"
+ />
+ </div>
<!-- 姝や笁涓姛鑳芥殏鏃朵笉鐢�-->
<!-- <div class="drawer-item">-->
diff --git a/src/layout/components/Sidebar/MenuItemEx.vue b/src/layout/components/Sidebar/MenuItemEx.vue
new file mode 100644
index 0000000..8c6278d
--- /dev/null
+++ b/src/layout/components/Sidebar/MenuItemEx.vue
@@ -0,0 +1,128 @@
+<template>
+ <div v-if="!item.hidden" :class="isNest === true ? 'dropdown' : 'noDropdown'">
+ <template
+ v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"
+ >
+ <app-link v-if="onlyOneChild.meta" :to="onlyOneChild.disabled ? '' : resolvePath(onlyOneChild.path)">
+ <el-menu-item
+ :index="resolvePath(onlyOneChild.path)"
+ :class="{'submenu-title-noDropdown':!isNest}"
+ :disabled="onlyOneChild.disabled"
+ >
+ <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+ </el-menu-item>
+ </app-link>
+ </template>
+
+ <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+ <template slot="title">
+ <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+ </template>
+ <menu-item-ex
+ v-for="child in item.children"
+ :key="child.path"
+ :is-nest="true"
+ :item="child"
+ :base-path="resolvePath(child.path)"
+ class="nest-menu"
+ />
+ </el-submenu>
+ </div>
+</template>
+
+<script>
+import path from 'path'
+import { isExternal } from '@/utils/validate'
+import Item from './Item'
+import AppLink from './Link'
+import FixiOSBug from './FixiOSBug'
+
+export default {
+ name: 'MenuItemEx',
+ components: { Item, AppLink },
+ mixins: [FixiOSBug],
+ props: {
+ // route object
+ item: {
+ type: Object,
+ required: true
+ },
+ isNest: {
+ type: Boolean,
+ default: false
+ },
+ basePath: {
+ type: String,
+ default: ''
+ }
+ },
+ data() {
+ // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
+ // TODO: refactor with render function
+ this.onlyOneChild = null
+ return {}
+ },
+ methods: {
+
+ hasOneShowingChild(children = [], parent) {
+ const showingChildren = children.filter(item => {
+ if (item.hidden) {
+ return false
+ } else {
+ // Temp set(will be used if only has one showing child)
+ this.onlyOneChild = item
+ return true
+ }
+ })
+
+ // When there is only one child router, the child router is displayed by default
+ if (showingChildren.length === 1) {
+ return true
+ }
+
+ // Show parent if there are no child router to display
+ if (showingChildren.length === 0) {
+ this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
+ return true
+ }
+
+ return false
+ },
+ resolvePath(routePath) {
+ if (isExternal(routePath)) {
+ return routePath
+ }
+ if (isExternal(this.basePath)) {
+ return this.basePath
+ }
+ return path.resolve(this.basePath, routePath)
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+//::v-deep .el-submenu__title:hover {
+// /* background-color: #ecf5ff; */
+// background-color: rgba(255, 255, 255, 0.3) !important;
+//}
+//
+//.nest-menu .el-menu-item {
+// color: rgb(255, 255, 255);
+// background-color: rgb(84, 92, 100);
+//}
+//
+//.nest-menu .el-menu-item:hover {
+// color: rgb(255, 255, 255);
+// background-color: rgba(84, 92, 100, 0.9);
+//}
+//
+//.dropdown {
+// cursor: pointer;
+//}
+//
+//.noDropdown {
+// float: left;
+// cursor: pointer;
+//}
+</style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index eb4bfcf..a9549df 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -3,16 +3,17 @@
<logo v-if="showLogo" :collapse="isCollapse" />
- <div v-if="$store.state.app.sidebar.opened" class="layoutLogo" />
+ <div v-if="$store.state.app.sidebar.opened&&!$store.state.settings.menuIsHorizontal" class="layoutLogo" />
<el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbarWrapperClass">
<el-menu
+ v-if="!$store.state.settings.menuIsHorizontal"
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
- :unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
+ :unique-opened="false"
mode="vertical"
>
<!-- <sidebar-item-->
@@ -32,7 +33,7 @@
</el-menu>
</el-scrollbar>
- <div style="position: absolute;bottom: 20px;left: 30px;">
+ <div v-if="!$store.state.settings.menuIsHorizontal" style="position: absolute;bottom: 20px;left: 30px;">
<div>
<el-button v-if="$store.state.app.sidebar.opened" type="text" style="font-size: 14px;cursor: pointer">
鏂板嚡杩埗閫燰1.0.01
@@ -127,9 +128,9 @@
//}
//#app .sidebar-container .el-submenu .el-menu-item.is-active {
- //background: $main_color !important;
- //color: #fff !important;
- //font-weight: bolder !important;
+//background: $main_color !important;
+//color: #fff !important;
+//font-weight: bolder !important;
//}
//
//#app .sidebar-container .el-submenu .el-menu-item:hover {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index f92bb9b..0f9328e 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,8 +1,12 @@
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
- <sidebar class="sidebar-container" />
- <div class="main-container">
+ <sidebar
+ :class="$store.state.settings.menuIsHorizontal?'sidebar-container-sideBarWidthIsMenuHorizontal':'sidebar-container'"
+ />
+ <div
+ :class="$store.state.settings.menuIsHorizontal?'main-container-sideBarWidthIsMenuHorizontal': 'main-container'"
+ >
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<tags-view v-if="needTagsView" />
diff --git a/src/settings.js b/src/settings.js
index 56bf826..50e6a26 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -26,6 +26,8 @@
*/
tagsView: true,
- headBackgroundColorValue: false // 澶撮儴鑳屾櫙棰滆壊
+ headBackgroundColorValue: false, // 澶撮儴鑳屾櫙棰滆壊
+
+ menuIsHorizontal: true// 鑿滃崟鏄惁鏄í灞�
}
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 247caa0..622867c 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,10 +1,11 @@
import defaultSettings from '@/settings'
import variables from '@/styles/element-variables.scss'
-const { showSettings, tagsView, fixedHeader, sidebarLogo, headBackgroundColorValue } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo, headBackgroundColorValue, menuIsHorizontal } = defaultSettings
const state = {
headBackgroundColorValue: headBackgroundColorValue, // 澶撮儴鑳屾櫙棰滆壊
+ menuIsHorizontal: menuIsHorizontal, // 鑿滃崟鏄惁鏄í灞�
theme: variables.theme,
showSettings: showSettings,
fixedHeader: fixedHeader,
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 94760cc..47f711f 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -7,6 +7,13 @@
position: relative;
}
+ .main-container-sideBarWidthIsMenuHorizontal {
+ min-height: 100%;
+ transition: margin-left .28s;
+ margin-left: $sideBarWidthIsMenuHorizontal;
+ position: relative;
+ }
+
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
@@ -66,6 +73,90 @@
border: none;
height: 100%;
width: 100% !important;
+ }
+
+ // menu hover
+ .submenu-title-noDropdown,
+ .el-submenu__title {
+ &:hover {
+ background-color: $menuHover !important;
+ }
+ }
+
+ .is-active>.el-submenu__title {
+ color: $subMenuActiveText !important;
+ }
+
+ & .nest-menu .el-submenu>.el-submenu__title,
+ & .el-submenu .el-menu-item {
+ min-width: $sideBarWidth !important;
+ background-color: $subMenuBg !important;
+
+ &:hover {
+ background-color: $subMenuHover !important;
+ }
+ }
+ }
+
+ .sidebar-container-sideBarWidthIsMenuHorizontal {
+ transition: width 0.28s;
+ width: $sideBarWidthIsMenuHorizontal !important;
+ background-color: $menuBg;
+ height: 100%;
+ position: fixed;
+ font-size: 0px;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1001;
+ overflow: hidden;
+
+ // reset element-ui css
+ .horizontal-collapse-transition {
+ transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+ }
+
+ .scrollbar-wrapper {
+ overflow-x: hidden !important;
+ }
+
+ .el-scrollbar__bar.is-vertical {
+ right: 0px;
+ }
+
+ .el-scrollbar {
+ height: 100%;
+ }
+
+ &.has-logo {
+ .el-scrollbar {
+ height: calc(100% - 50px);
+ }
+ }
+
+ .is-horizontal {
+ display: none;
+ }
+
+ a {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+ }
+
+ .svg-icon {
+ margin-right: 16px;
+ }
+
+ .sub-el-icon {
+ margin-right: 12px;
+ margin-left: -2px;
+ }
+
+ .el-menu {
+ border: none;
+ height: 100%;
+ width: 100% !important;
}
// menu hover
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index be55772..7901a7b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,15 +1,17 @@
// sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+$menuText: #bfcbd9;
+$menuActiveText: #409EFF;
+$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-$menuBg:#304156;
-$menuHover:#263445;
+$menuBg: #304156;
+$menuHover: #263445;
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+$subMenuBg: #1f2d3d;
+$subMenuHover: #001528;
$sideBarWidth: 210px;
+
+$sideBarWidthIsMenuHorizontal: 0; //褰撹彍鍗曟í灞忔椂鐨勪晶杈规爮楂樺害
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@@ -22,4 +24,5 @@
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
+ sideBarWidthIsMenuHorizontal:$sideBarWidthIsMenuHorizontal;
}
--
Gitblit v1.9.3