rt-sim-training-client/src/views/organization/index.vue

<template>
  <div>
    <div class="title_content">{{ $store.state.user.companyName + '教学管理' }}</div>
    <el-button type="text" class="lessonManageBack" @click="back">返回</el-button>
    <div class="lessonManageInfo">
      <el-menuclass="lessonManageMenu" default-active="2-1">
        <el-menu-item index="1" @click="clickMenu">
          <img :src="classIcon" class="teachMenu">
          <span class="teachMenuTitle" :style="{color: $route.path.includes('classManage')?'#5BDBFF': '#000'}">班级管理</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <img :src="lessonIcon" class="teachMenu">
            <span class="teachMenuTitle">课程管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1" class="lessonIcon" :style="{color: $route.path.includes('lessonManage')?'#5BDBFF': '#000'}" @click="clickMenu">发布课程管理</el-menu-item>
            <el-menu-item index="2-2" class="lessonIcon" :style="{color: $route.path.includes('draftLessonManage')?'#5BDBFF': '#000'}" @click="clickMenu">草稿课程管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="3" @click="clickMenu">
          <img :src="examIcon" class="teachMenu">
          <span slot="title" class="teachMenuTitle" :style="{color: $route.path.includes('examManage')?'#5BDBFF': '#000'}">考试管理</span>
        </el-menu-item>
        <el-menu-item index="4" @click="clickMenu">
          <img :src="ruleIcon" class="teachMenu">
          <span slot="title" :style="{color: $route.path.includes('ruleManage')?'#5BDBFF': '#000'}" class="teachMenuTitle">评价管理</span>
        </el-menu-item>
        </el-menu>
        <div class="lessonManageOther">
          <router-view />
        </div>
      </el-menuclass="lessonmanagemenu"></div>
  </div>
</template>

<script>
import ClassIcon from '@/assets/teachManage/class.png';
import LessonIcon from '@/assets/teachManage/lesson.png';
import ExamIcon from '@/assets/teachManage/exam.png';
import RuleIcon from '@/assets/teachManage/rule.png';

export default {
    name: 'Organization',
    data() {
        return {
            classIcon: ClassIcon,
            lessonIcon: LessonIcon,
            examIcon: ExamIcon,
            ruleIcon: RuleIcon,

            mapIdList: [],
            lessonList: [],
            classList: []

        };
    },
    computed: {

    },
    created() {

    },

    methods:{
        clickMenu(val) {
            if (val.index === '2-1') {
                this.$router.replace('/info/organization/lessonManage');
            } else if (val.index === '2-2') {
                this.$router.replace('/info/organization/draftLessonManage');
            } else if (val.index === '1') {
                this.$router.replace('/info/organization/classManage');
            } else if (val.index === '3') {
                this.$router.replace('/info/organization/examManage');
            } else if (val.index === '4') {
                this.$router.replace('/info/organization/ruleManage');
            }
        },
        back() {
            this.$router.go(-1);
        }
    }
};
</script>

<style scoped>
	.back_box {height: 20px;z-index: 36;width: 40px;text-align: center;position: absolute;right: 20px;top: -20px;}
	.title_content {width: 100%;margin: 20px 0 30px;text-align: center;font-size: 28px;font-weight: bold;}
  .teachMenu{width: 18px;height: 18px;margin-right: 8px;}
  .lessonIcon{font-size: 16px;}
  .teachMenuTitle{font-size: 18px;}
  .lessonManageBack{position: fixed;right: 20px;top: 70px;}
  .lessonManageOther{width: calc(100% - 200px);margin-left: 200px;}
  .lessonManageInfo{width: 96%;margin: 0 auto;overflow: hidden;}
  .lessonManageMenu{width: 200px;float: left;}
</style>