rt-sim-training-client/src/layout/index.vue

<template>
  <div class="app-wrapper" :class="classObj">
    <div class="main-container">
      <navbar />
      <section class="app-main" :style="{height: height+'px'}">
        <!-- <el-scrollbar wrap-class="scrollbar-wrapper app_scrollbar_box"> -->
        <transition name="fade" mode="out-in">
          <router-view />
        </transition>
        <!-- </el-scrollbar> -->
      </section>
      <el-footer style="height:30px;text-align:right;line-height: 30px;">
        <span style="font-size:14px;">Copyright ©2018 北京玖琏科技有限公司 京ICP备18028522号</span>
      </el-footer>
    </div>
  </div>
</template>

<script>
import { Navbar } from './components'; // Sidebar

export default {
	name: 'Layout',
	components: {
		Navbar
	},
	data() {
		return {
		};
	},
	computed: {
		sidebar() {
			return this.$store.state.app.sidebar;
		},
		device() {
			return this.$store.state.app.device;
		},
		classObj() {
			return {
				withoutAnimation: this.sidebar.withoutAnimation,
				mobile: this.device === 'mobile'
			};
		},
		width() {
			return this.$store.state.app.width;
		},
		height() {
			return this.$store.state.app.height - 90;
		}
	},
	created() {
		this.watchRouterUpdate();
	},
	methods: {
		handleClickOutside() {
			this.$store.dispatch('CloseSideBar', { withoutAnimation: false });
		},
		watchRouterUpdate() {
			this.$router.beforeEach((to, from, next) => {
				next();
			});
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .app-wrapper {
        @include clearfix;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

	.app-main{
		overflow-y: auto;
	}

    .drawer-bg {
        background: #000;
        opacity: 0.3;
        width: 100%;
        left: 0;
        top: 0;
        height: 100%;
        position: absolute;
        z-index: 999;
    }
</style>
<style rel="stylesheet/scss" lang="scss">
	.app_scrollbar_box{
		.el-scrollbar__view{
			height: 100%;
		}
	}

	// 定义公共card样式
	.joylink-card{
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		color: #303133;
		transition: .3s;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	}

	// 谷歌、safari、qq浏览器、360浏览器滚动条样式
	// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
	::-webkit-scrollbar {
		width: 6px;
		// height: 110px;
		background-color: #FFFFFF;
	}
	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		border-radius: 10px;
		background-color: #FFFFFF;;
	}
	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: #eaeaea;
	}
	/*滑块效果*/
	::-webkit-scrollbar-thumb:hover {
		border-radius: 5px;
		// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		background: rgba(0,0,0,0.4);
	}
	/*IE滚动条颜色*/
	html {
		scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
		scrollbar-highlight-color:#000;
		scrollbar-3dlight-color:#000;
		scrollbar-darkshadow-color:#000;
		scrollbar-Shadow-color:#adadad;/*滑块边色*/
		scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
		scrollbar-track-color:#eeeeee;/*背景颜色*/
	}
</style>