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
        };
    },
    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>