rt-sim-training-client/src/views/designPlatform/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" :width="widthLeft" />
      </div>
      <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
      <transition>
        <router-view :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: 'DesignPlatform',
	components: {
		demonList,
		drapLeft
	},
	data() {
		return {
			listShow: true,
			widthLeft: Number(localStore.get('LeftWidth')) || 450,
			productList: [],
			skinCode: '',
			currentWidth: ''
		};
	},
	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;
		},
		widthLeft(val) {
			this.setMapResize(val);
		},
		'$store.state.app.windowSizeCount': function() {
			this.resize();
		}
	},
	mounted() {
		this.currentWidth=this.$store.state.app.width - this.widthLeft;
		const againEnter = getSessionStorage('againEnter') || null;
		if (!againEnter) {
			launchFullscreen();
			setSessionStorage('againEnter', true);
		}
		this.resize();
		this.widthLeft = Number(localStore.get('LeftWidth'));
	},
	methods: {
		refresh() {
			this.$refs && this.$refs.demonList && this.$refs.demonList.refresh();
		},
		drapWidth(width) {
			this.widthLeft = Number(width);
		},
		resize() {
			this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
			const width = this.$store.state.app.width - 521 - this.widthLeft;
			const height = this.$store.state.app.height - 90;
			this.$store.dispatch('config/resize', { width: width, height: height });
		},
		setMapResize(LeftWidth) {
			this.currentWidth=this.$store.state.app.width - this.widthLeft;
			const widths = this.$store.state.app.width - 521 - LeftWidth;
			const heights = this.$store.state.app.height - 90;
			this.$store.dispatch('config/resize', { width: widths, height: heights });
		}

	}
};
</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;
        float: left;
        height: 100%;
    }
</style>