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'}">
        <transition name="fade" mode="out-in">
          <router-view />
        </transition>
      </section>
      <el-footer class="footers" style="height:30px;">
        <div v-if="!bottomColumnOnlyConInfo.includes(project)" style="font-size:14px;float:left;">{{ $t('global.companyInfo') }} &nbsp;{{ $t('global.companyTel') }}</div>
        <div style="font-size:14px;float:right;height: 30px;line-height: 30px;">{{ bottomColumnOnlyConInfo.includes(project)? companyInfo : $t('global.companyICP') }}</div>
        <img v-if="bottomIcon" style="float:right;height: 26px;margin: 2px 10px;" :src="bottomIcon">
      </el-footer>
    </div>
    <div>
      <el-dialog
        :title="$t('tip.hint')"
        custom-class="dialogMessage"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="closeDialog"
      >
        <span>{{ dialogMessage }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeDialog">{{ $t('global.confirm') }}</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Navbar } from './components'; // Sidebar
import { getSessionStorage } from '@/utils/auth';
import { loginInfo, BottomColumnOnlyConInfo} from '@/scripts/ProjectConfig';

export default {
    name: 'Layout',
    components: {
        Navbar
    },
    data() {
        return {
            dialogVisible: false,
            bottomColumnOnlyConInfo: BottomColumnOnlyConInfo
        };
    },
    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;
        },
        project() {
            return getSessionStorage('project');
        },
        dialogMessage() {
            return this.$store.state.app.dialogMessage;
        },
        companyInfo() {
            return loginInfo[getSessionStorage('project')].bottomColumn;
        },
        bottomIcon() {
            return loginInfo[getSessionStorage('project')].bottomIcon;
        }
    },
    watch:{
        '$store.state.app.dialogMessage':function(val) {
            if (val == '') {
                this.dialogVisible = false;
            } else {
                this.dialogVisible = true;
            }
        }
    },
    created() {
        this.watchRouterUpdate();
    },
    methods: {
        handleClickOutside() {
            this.$store.dispatch('CloseSideBar', { withoutAnimation: false });
        },
        watchRouterUpdate() {
            this.$router.beforeEach((to, from, next) => {
                next();
            });
        },
        closeDialog() {
            this.$store.dispatch('app/SET_DIALOG_MESSAGE', '');
        }
    }
};
</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;
	}
	.footers{
		line-height: 30px;
		position: absolute;
		width: 100%;
		bottom: 0;
		background: #fff;
		border-top: 1px #ebeef5 solid;
	}
</style>
<style rel="stylesheet/scss" lang="scss">
	.app_scrollbar_box{
		.el-scrollbar__view{
			height: 100%;
		}
	}
    .el-dialog.dialogMessage{
        width:400px !important;
    }

	// 定义公共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: 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>