front-end/hd/src/pages/layout/index.vue

<template>
	<div class="wrapper">
		<div class="wrapper-top">
			<topbar></topbar>
		</div>
		<!--  -->
		<div class="wrapper-bottom">
			<div class="wrapper-left">
				<slider></slider>
			</div>

			<!-- <div class="wrapper-right"> -->
			<!-- <div class="wrapper-right__navbar">
				<topbar></topbar>
				</div>-->

			<div class="wrapper-right__container">
				<!-- <process></process> -->

				<div class="content-view">
					<!-- <keep-alive>
						<router-view v-if="$route.meta.keepAlive"></router-view>
					</keep-alive>

					<router-view v-if="!$route.meta.keepAlive"></router-view> -->
					<router-view></router-view>
				</div>
			</div>
			<!-- </div> -->
		</div>

		<chat></chat>
	</div>
</template>

<script>
import Topbar from './topbar/index';
import Slider from './slider/index';
import Chat from '@/components/chat';
// import Process from './process/index';
// import { mapGetters } from 'vuex';

export default {
	components: {
		Topbar,
		Slider,
		Chat
		// Process
	},

	computed: {
		// ...mapGetters(['menuCollapse'])
	}
};
</script>

<style lang="stylus" scoped>
.wrapper {
	background-color: #f7f7f7;
	height: 100vh;
	width: 100vw;
	// display: flex;
	overflow: hidden;

	.wrapper-top {
		width: 100%;
	}

	.wrapper-bottom {
		display: flex;
		height: calc(100% - 60px)
	}

	.wrapper-left {
		background-color: #fff;
		overflow: hidden;
		height: 100%;
		width: 190px;
	}

	// .wrapper-right {
	// 	height: 100%;
	// 	width: calc(100% - 255px);

		.wrapper-right__container {
			height: 100%;
			width: calc(100% - 210px);
			// width: 100%;
			box-sizing: border-box;
			overflow: hidden;

			.scope-process {
				padding: 10px;
			}

			.content-view {
				height: calc(100% - 10px);
				width: 100%;
				box-sizing: border-box;
				overflow-x: hidden;
				overflow-y: auto;
				padding: 0 10px;
				border-radius: 3px;
				margin-top: 10px;

				// & > div, & > section {
				// 	height: 100%;
				// }
			}
		}
	// }

	// &.collapse {
	// 	.wrapper-left {
	// 		width: 64px;
	// 	}

	// 	.wrapper-right {
	// 		width: calc(100% - 64px);
	// 	}
	// }
}
</style>