rt-sim-training-client/src/views/trainingPlatform/index.vue

<template>
  <div class="app-wrapper">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
        <demon-list ref="demonList" :height="height" @goRoutePath="goRoutePath" />
      </div>
      <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
      <transition>
        <router-view :style="{ position:'relative', left:widthLeft+'px', width: (width - widthLeft)+'px'}" :product-list="productList" />
      </transition>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import demonList from './demonList';
import drapLeft from '@/views/components/drapLeft/index';
import { launchFullscreen } from '@/utils/screen';
import localStore from 'storejs';
import { getSessionStorage, setSessionStorage } from '@/utils/auth';

export default {
    name: 'TrainingPlatform',
    components: {
        demonList,
        drapLeft
    },
    data() {
        return {
            listShow: true,
            widthLeft: 450,
            productList: []
        };
    },
    computed: {
        ...mapGetters([
            'lessonbar'
        ]),
        height() {
            return this.$store.state.app.height - 50;
        },
        width() {
            return this.$store.state.app.width;
        },
        userId() {
            return this.$store.state.user.id;
        }
    },
    watch: {
        'lessonbar.opened': function (val) {
            this.listShow = val;
        }
    },
    mounted() {
        this.widthLeft = Number(localStore.get('LeftWidth')) ? Number(localStore.get('LeftWidth')) : 450;
    },
    methods: {
        refresh() {
            this.$refs && this.$refs.demonList && this.$refs.demonList.refresh();
        },
        drapWidth(width) {
            this.widthLeft = Number(width);
        },
        goRoutePath(data) {
            const againEnter = getSessionStorage('againEnter') || null;
            if (!againEnter) {
                launchFullscreen();
                const path = localStore.get('trainingPlatformRoute' + this.userId);
                if (path && path.startsWith('/trainingPlatform')) {
                    this.$router.push(path);
                } else if (data && data[0]) {
                    this.$router.push(`/trainingPlatform/permission/${data[0].id}`);
                }
                setSessionStorage('againEnter', true);
            }
        }
    }
};
</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;
    }

    .examList {
        position: fixed;
        top: 61px;
        height: 100%;
    }
	/deep/ .scrollbar-wrapper{
		overflow-x: hidden;
	}
	/deep/ .el-scrollbar__bar.is-horizontal {
		display: none;
	}
</style>