rt-sim-training-client/src/views/iscs/iscsSystem/index.vue

<template>
  <div class="iscs-system-box">
    <div v-if="lineCode=='07'" style="height:100%">
      <menu-bar v-if="!$route.query.group" />
      <top-nav v-if="!$route.query.group" />
      <group-nav v-if="$route.query.group" />
      <div class="content-box iscs_content_box" :class="{'displayIscs': $route.query.group}">
        <router-view />
      </div>
    </div>
    <div v-if="lineCode=='02'" style="height:100%">
      <station-nav v-if="$route.query.group" />
      <div class="content-box-station iscs_content_box" :class="{'displayStationIscs': $route.query.group}">
        <router-view />
      </div>
      <menu-bottom />
    </div>
    <!-- <bottom /> -->
  </div>
</template>

<script>
import TopNav from './nav.vue';
import GroupNav from './groupNav.vue';
import StationNav from './stationNav.vue';
import MenuBar from './menuBar.vue';
import MenuBottom from './menuBottom.vue';
// import bottom from './bottom.vue';

export default {
    components: {
        TopNav,
        GroupNav,
        MenuBar,
        StationNav,
        MenuBottom
        // bottom
    },
    data() {
        return {
            mode: 'standFAS'
        };
    },
    computed:{
        lineCode() {
            return this.$route.query.lineCode;
        }
    },
    methods: {
    }
};
</script>

<style lang="scss" scoped>
.iscs-system-box{
    // position: relative;
    height: 100%;
    overflow-y: auto;
}
.content-box{
    width: 100%;
    height: 100%;
    padding: 75px 0 0;
    background: #45607B;
}
.content-box-station{
	width: 100%;
    height: 100%;
    padding: 65px 0 50px 0;
    background: #45607B;
}
.displayIscs{
	padding: 95px 0 0;
}

.displayStationIscs{
	padding: 65px 0 50px 0;
}

	// 谷歌、safari、qq浏览器、360浏览器滚动条样式
	// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
	.iscs_content_box ::-webkit-scrollbar {
		width: 6px;
		height: 6px;
		// height: 110px;
		background-color: #FFFFFF;
	}
	/*定义滚动条轨道 内阴影+圆角*/
	.iscs_content_box ::-webkit-scrollbar-track {
		// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		border-radius: 10px;
		background-color: #FFFFFF;;
	}
	/*定义滑块 内阴影+圆角*/
	.iscs_content_box ::-webkit-scrollbar-thumb {
		border-radius: 10px;
		// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: #cacaca;
	}
	/*滑块效果*/
	.iscs_content_box ::-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>