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" />
            </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;
            }
        },
        watch: {
            'lessonbar.opened': function (val) {
                this.listShow = val;
            }
        },
        mounted() {
            const againEnter = getSessionStorage('againEnter') || null;
            if (!againEnter){
                launchFullscreen();
                setSessionStorage('againEnter',true);
            }

            this.widthLeft = Number(localStore.get('LeftWidth'));
        },
        methods: {
            refresh() {
                this.$refs && this.$refs.demonList && this.$refs.demonList.refresh();
            },
            drapWidth(width) {
                this.widthLeft = Number(width);
            }
        }
    };
</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%;
    }
</style>