realty/virgo.wzfrontend/console/src/layout/work.vue

<template>
	<div class="work-layout">
		<top-nav></top-nav>
		<div :class="isCollapse ? 'small-main work-layout-main':'work-layout-main'">
			<div class="app-main-box">
				<el-menu router :default-active="$route.path" :collapse="isCollapse" :collapse-transition="false">
					<sub-menu :menuData="menuList" :menuIndex="1"></sub-menu>
				</el-menu>
			</div>
			<div class="app-main-button" @click="set">
				<i class="iconfont huifont-shezhi"></i>
				<div>设置后台</div>
			</div>
			<div class="work-layout-main-tag" @click="isCollapse = !isCollapse">
				<i :class="'iconfont '+ (isCollapse ? 'huifont-xiala-right':'huifont-xiala-left')"></i>
			</div>
		</div>
		<bread-crumb :class="isCollapse ? 'small-crumb':''" :key="crumbKey"></bread-crumb>
		<div :class="isCollapse ? 'small-content work-layout-content':'work-layout-content'">
			<transition name="slide-fade">
				<router-view :key="key" />
			</transition>
		</div>
	</div>
</template>

<script>
	import subMenu from './components/subMenu'
	import topNav from './components/topNav'
	import breadCrumb from './components/breadCrumb'
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				menuList: [],
				isCollapse: false,
				crumbKey: false
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				this.menuList = this.$store.getters.menuData.filter(node => node.title !== '系统设置');
			},
			set() {
				let list = this.$store.getters.menuData.filter(node => node.title === '系统设置');
				if (list.length === 0) return this.$message.warning('您暂无系统设置权限');
				if (list[0].children.length === 0) return this.$message.warning('您暂无系统设置权限');
				this.$router.push(list[0].children[0].index);
			}
		},
		components: {
			subMenu,
			topNav,
			breadCrumb
		},
		computed: {
			key() {
				let list = this.$store.getters.menuData.filter(node => node.title === '系统设置');
				if (this.$route.path.indexOf('/work/system') > -1) return list[0].children[0].index;
				return this.$route.path;
			},
			...mapGetters(['menuData'])
		},
		watch: {
			menuData() {
				this.menuList = this.$store.getters.menuData.filter(node => node.title !== '系统设置');
				this.crumbKey = !this.crumbKey;
			}
		},
	}
</script>

<style lang="scss">
	.work-layout {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		background: $--background;

		.work-layout-main {
			position: fixed;
			left: 0;
			top: 53px;
			width: 164px;
			bottom: 0;
			background: $--box-background;
			padding: 8px 8px 0px 8px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			transition: all 0.4s;
			z-index: 99;

			.app-main-button {
				border-top: 1px solid #374156;
				padding: 16px 13px;
				display: flex;
				cursor: pointer;
				margin-top: 12px;
				align-items: center;

				i.huifont-shezhi {
					font-size: 24px;
					margin-right: 7px;
				}

				div {
					flex: 1;
					width: 0;
					overflow: hidden;
					font-weight: 400;
					word-spacing: break-all;
					height: 20px;
				}
			}

			.menu-title {
				font-weight: 400;
			}

			.el-menu--collapse {

				.el-submenu__icon-arrow,
				.menu-title {
					display: none;
				}
			}

			.work-layout-main-tag {
				position: absolute;
				top: 0;
				right: -24px;
				width: 24px;
				height: 24px;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 0px 24px 24px 0px;
				line-height: 24px;
				font-size: 12px;
				text-align: center;
				cursor: pointer;
				z-index: 99;
			}

			.app-main-box {
				flex: 1;
				height: 0;
				overflow-y: auto;
				overflow-x: hidden;
				-ms-overflow-style: none;
				/* 隐藏 IE 中的滚动条 */
				scrollbar-width: none;
				/* 隐藏 Firefox 中的滚动条 */
			}

			.app-main-box::-webkit-scrollbar {
				width: 0;
				/* 隐藏滚动条 */
			}

			.el-menu {
				width: 100%;
				height: 100%;
				background: $--box-background;
				border-right: none;

				.el-icon-arrow-down {
					font-family: "iconfont" !important;
					font-size: 16px;
				}

				.el-icon-arrow-down::before {
					content: "\e72d";
				}

				.el-menu-item,
				.el-submenu__title {
					border-radius: 5px;
					height: 48px;
					line-height: 46px;
					font-size: 14px;
					min-width: auto;
					color: $--color-common;
					margin: 3px 0;
					padding-right: 10px;

					i {
						color: $--color-common;
					}

					i.icon {
						font-size: 24px;
						margin-right: 8px;
					}

					&:hover,
					&.is-active,
					&:focus {
						background-color: $--color-primary;
						color: #fff;

						i,
						span {
							color: #fff;
						}
					}
				}

				.el-submenu__title {
					.el-submenu__icon-arrow {
						right: 10px;
					}
				}

				.menu-index-1 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 12px !important;
					}
				}

				.menu-index-2 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 40px !important;
					}
				}

				.menu-index-3 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 50px !important;
					}
				}

				.menu-index-3 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 60px !important;
					}
				}

				.menu-index-4 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 70px !important;
					}
				}

				.menu-index-5 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 80px !important;
					}
				}
			}
		}

		.small-main {
			width: 64px;
			padding: 8px 8px 0px 8px;
		}

		.work-layout-content {
			position: absolute;
			top: 89px;
			left: 176px;
			right: 12px;
			bottom: 12px;
			background: $--box-background;
			transition: left 0.4s;

			.slide-fade-enter-active {
				transition: all 0.1s ease;
			}

			.slide-fade-leave-active {
				transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
			}

			.slide-fade-enter,
			.slide-fade-leave-to {
				transform: translateX(10px);
				opacity: 0;
			}
		}

		.small-content {
			left: 76px;
		}

		.bread-crumb {
			position: absolute;
			top: 60px;
			left: 176px;
			right: 12px;
			transition: left 0.4s;
			z-index: 8;
		}

		.small-crumb {
			left: 76px;
		}
	}

	.el-menu--vertical {
		.el-menu--popup {
			min-width: 164px;
		}

		.el-menu {
			background: $--color-background;
			border-radius: 8px;

			.el-menu-item,
			.el-submenu__title {
				color: $--color-common;
				height: 48px;
				line-height: 48px;
			}

			.el-menu-item:hover,
			.el-menu-item:focus,
			.el-submenu__title:hover,
			.el-submenu__title:focus {
				background: $--color-background-hover;
				border-radius: 4px;
			}

			.menu-index-2 {
				padding: 0 8px;
				height: 48px;
				line-height: 48px;
			}
		}
	}
</style>