rt-sim-training-client/src/views/designPlatform/demonMenu.vue

<template>
  <div>
    <div class="display_top_draft">
      <!--      <div class="btn_hover" @click="menuClick">菜单</div>-->
      <el-button-group ref="button_group_box" class="button_group_box">
        <el-button size="small" @click="showList">实训列表</el-button>
      </el-button-group>
      <el-radio-group v-model="demoMode" :disabled="trainingSwitch" class="mode" size="small" style="margin-left: 20px;" @change="changeMode">
        <el-radio-button :label="TrainingMode.TEACH">{{ $t('display.lesson.teachingMode') }}</el-radio-button>
        <el-radio-button :label="TrainingMode.PRACTICE">{{ $t('display.lesson.practiceMode') }}</el-radio-button>
        <el-radio-button :label="TrainingMode.TEST">{{ $t('display.lesson.testMode') }}</el-radio-button>
      </el-radio-group>
    </div>
    <TrainingList ref="trainingList" @editBlob="editBlob" />
  </div>
</template>
<script>
import TrainingList from './trainingList.vue';
import { ScriptMode } from '@/scripts/ConstDic';
export default {
    name:'DemonMenu',
    components:{
        TrainingList
    },
    props:{
    },
    data() {
        return {
            hoverBtn: false,
            btnWidth: -600,
            demoMode: ScriptMode.TEACH,
            TrainingMode: ScriptMode
        };
    },
    computed:{
        group() {
            return this.$route.query.group;
        },
        mapId() {
            return this.$route.query.mapId;
        },
        lineCode() {
            return this.$route.query.lineCode;
        },
        trainingSwitch() {
            return this.$store.state.trainingNew.trainingSwitch;
        }
    },
    mounted() {
        this.$store.dispatch('trainingNew/changeTeachMode', this.demoMode);
    },
    methods:{
        // menuClick() {
        //     this.hoverBtn = !this.hoverBtn;
        //     if (this.hoverBtn) {
        //         this.btnWidth = 0; // 默认宽度
        //     } else {
        //         this.btnWidth = -600;
        //     }
        // },
        changeMode(val) {
            this.demoMode = val;
            this.$store.dispatch('trainingNew/changeTeachMode', this.demoMode);
        },
        showList() {
            this.$refs.trainingList.doShow();
        },
        editBlob() {

        }
    }
};
</script>
<style lang="scss" scoped>
.display_top_draft{
	position: absolute;
	left: 5px;
	top: 15px;
	height: 32px;
	overflow: hidden;
	//padding-left: 44px;
	z-index: 35;
	.btn_hover{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		color: #4e4d4d;
		font-size: 14px;
		background: #fff;
		padding: 8px;
		border-radius: 5px;
		display: block;
		cursor: pointer;
		float: left;
		height: 32px;
	}
	.button_group_box{
		float: left;
		transition: all 0.5s;
		overflow: hidden;
	}
}
.teach_mode {
	position: absolute;
	left: 5px;
	top: 55px;
	height: 32px;
	overflow: hidden;
	z-index: 35;
}
</style>