rt-sim-training-client/src/views/iscs/iscsDesign/index.vue

<template>
  <div class="app-wrapper">
	<div class="left-card" :class="{'hide': viewShow}">
		<div class="btn_right_box" @click="clickLeftBtn"><i :class="viewShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
		<div class="examList" style="width:100%">
			<demon-list ref="demonList" @createMap="createMap" />
		</div>
	</div>
    <transition>
      <router-view />
    </transition>
    <context-menu />
	<map-create ref="mapCreate" :line-code="lineCode" @refresh="refresh" />
  </div>
</template>

<script>
import demonList from './demonList';
import { launchFullscreen } from '@/utils/screen';
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
import MapCreate from './mapmanage/create';
import ContextMenu from './contextMenu';

export default {
    name: 'DesignPlatform',
    components: {
        demonList,
        MapCreate,
        ContextMenu
    },
    data() {
        return {
			lineCode: '',
			viewShow: false,
			widthLeft: 450
        };
    },
    computed: {
        width() {
            return this.$store.state.app.width;
        }
    },
    watch: {
        '$store.state.app.windowSizeCount': function() {
            this.resize();
        }
    },
    created() {
        this.resize();
    },
    mounted() {
        const againEnter = getSessionStorage('againEnter') || null;
        if (!againEnter) {
            launchFullscreen();
            setSessionStorage('againEnter', true);
        }
    },
    methods: {
        refresh() {
            this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
        },
        createMap() {
            this.$refs.mapCreate.show();
        },
        resize() {
            const width = this.$store.state.app.width;
            const height = this.$store.state.app.height - 90;
            this.$store.dispatch('config/resize', { width: width, height: height });
        },
        setMapResize(LeftWidth) {
            const width = this.$store.state.app.width;
            const height = this.$store.state.app.height - 90;
            this.$store.dispatch('config/resize', { width: width, height: height });
		},
		clickLeftBtn() {
            this.viewShow = !this.viewShow;
		}
    }
};
</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;
    }

	.left-card{
		width: 470px;
		height: 100%;
		position: absolute;
		left: 0;
		transform: translateX(-470px);
		transition: all 0.5s;
		background: #fff;
		z-index: 9;
		/deep/{
			.v-modal{
				opacity: 0;
			}
		}

		&.hide{
			transform: translateX(0);
		}

		.examList {
			float: left;
			height: 100%;
		}

		.btn_right_box{
			position: absolute;
			right: 0;
			top: 50%;
			padding: 8px 3px;
			background: #fff;
			z-index: 10;
			transform: translateX(22px);
			cursor: pointer;
			border-radius: 0 5px 05px 0;
		}
    }
</style>