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

<template>
  <div class="trainingPlatform" :style="'padding-left:'+(widthLeft)+'px'">
    <div class="trainingPubMapList" :style="{width: widthLeft+'px'}">
      <demon-list ref="demonList" @goRoutePath="goRoutePath" />
      <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
    </div>
    <transition>
      <router-view />
    </transition>
  </div>
</template>

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

export default {
    name: 'TrainingPlatform',
    components: {
        demonList,
        drapLeft
    },
    data() {
        return {
            widthLeft: 450
        };
    },
    computed: {
        width() {
            return this.$store.state.app.width;
        }
    },
    mounted() {
        this.widthLeft = Number(localStore.get('LeftWidth')) ? Number(localStore.get('LeftWidth')) : 450;
    },
    methods: {
        drapWidth(width) {
            this.widthLeft = Number(width);
        },
        goRoutePath(data) {
            const againEnter = getSessionStorage('againEnter') || null;
            if (!againEnter && !this.$route.query.thirdJump) {
                this.$router.push(`/trainingPlatform/permission/${data[0].id}?lineCode=${data[0].lineCode}`);
                setSessionStorage('againEnter', true);
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .trainingPlatform {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    .trainingPubMapList {
        position:absolute;
        left:0;
        top:0;
        height: 100%;
    }
</style>