60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
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>
|