rt-sim-training-client/src/views/scriptManage/display/index.vue

<template>
  <div class="script-parent">
    <div class="script-card" :style="{width: widthLeft+'px'}">
      <tip-script-record ref="tipTaskRecord" :group="group" :width="widthLeft" />
    </div>
    <drap-left :width-left="widthLeft" :min="780" :max="980" @drapWidth="drapWidth" />
    <div class="script-display">
      <display ref="display" :size="size" />
    </div>
  </div>
</template>

<script>
import Display from '@/views/display/index';
import TipScriptRecord from './tipScriptRecord';
import drapLeft from '@/views/components/drapLeft/index';

export default {
	name: 'ScriptDisplay',
	components: {
		Display,
		TipScriptRecord,
		drapLeft
	},
	data() {
		return {
			widthLeft: 780,
			size: {
				width: document.documentElement.clientWidth - 780,
				height: document.documentElement.clientHeight
			},
			group: this.$route.query.group
		};
	},
	computed: {
	},
	watch: {
		'$store.state.app.windowSizeCount': function() {
			this.size = { width: this.$store.state.app.width - 780, height: this.$store.state.app.height};
		},
		widthLeft: function(val) {
			this.size = { width: this.$store.state.app.width - val, height: this.$store.state.app.height};
		}
	},
	methods: {
		drapWidth(width) {
			this.widthLeft = Number(width);
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .script-parent {
        display: flex;
        flex-flow: row;
        .script-card {
            width: 780px;
        }
    }
</style>