train-dirtea/src/views/home/classmenu.vue

<template>
  <div id="classmenu">
    <van-row>
      <van-col :span="24" class="style">
        <van-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </van-col>
        <!-- <el-col :span="24">
          <el-image :src="topImage"></el-image>
        </el-col> -->
        <van-col :span="24">
          <el-col :span="8" class="list" v-for="(item, index) in menuList" :key="index" @click.native="turnTo(item.name)">
            <i :class="item.icon"></i>
            <p>{{ item.name }}</p>
          </el-col>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
export default {
  name: 'classmenu',
  props: {},
  components: { NavBar },
  data: () => ({
    title: '',
    isleftarrow: '',
    navShow: true,
    menuList: [
      { name: '课程信息', icon: 'iconfont iconkecheng' },
      { name: '个人信息', icon: 'iconfont icongeren' },
      { name: '问卷调查', icon: 'iconfont icondibudaohanglan-' },
      { name: '班级信息', icon: 'iconfont iconbanjixinxi' },
      { name: '班级名单', icon: 'iconfont iconmingdan' },
      { name: '班级成绩', icon: 'iconfont iconchengji' },
      { name: '请假管理', icon: 'iconfont iconqingjia' },
      { name: '考勤管理', icon: 'iconfont iconkaoqin' },
      { name: '学生评分', icon: 'iconfont iconpingfenqia' },
      { name: '学生作业', icon: 'iconfont iconxueshengzuoye' },
    ],
    topImage: require('@/assets/logo.png'),
  }),
  created() {},
  computed: {
    ...mapState(['user', 'classid']),
  },
  methods: {
    turnTo(name) {
      if (name === '课程信息') this.$router.push({ path: '/home/index' });
      if (name === '个人信息') this.$router.push({ path: '/user/personalDetail', query: { id: this.user.userid } });
      if (name === '问卷调查') this.$router.push({ path: '/question/index' });
      if (name === '班级信息') this.$router.push({ path: '/user/classInfos' });
      if (name === '班级名单') this.$router.push({ path: '/class/classStuList', query: { id: this.classid } });
      if (name === '班级成绩') this.$router.push({ path: '/class/achieve', query: { classid: this.classid } });
      if (name === '请假管理') this.$router.push({ path: '/user/teaLeave' });
      if (name === '考勤管理') this.$router.push({ path: '/user/attendance' });
      if (name === '学生评分') this.$router.push({ path: '/user/score' });
      if (name === '学生作业') this.$router.push({ path: '/task/index' });
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow = to.meta.isleftarrow;
    },
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  min-height: 570px;
}
.list {
  text-align: center;
  background-color: #fff;
  margin: 15px 10px 0 10px;
  width: 27%;
  border-radius: 5px;
  padding: 15px 0 0 0;
  .iconfont {
    font-size: 40px;
  }
  p {
    font-size: 16px;
    font-family: 楷体;
    font-weight: bold;
  }
}
.list:first-child {
  .iconfont {
    color: #f55467;
  }
  p {
    color: #f55467;
  }
}
.list:nth-child(2) {
  .iconfont {
    color: #f7b52c;
  }
  p {
    color: #f7b52c;
  }
}
.list:nth-child(3) {
  .iconfont {
    color: #6cd4f5;
  }
  p {
    color: #6cd4f5;
  }
}
.list:nth-child(4) {
  .iconfont {
    color: #40cc93;
  }
  p {
    color: #40cc93;
  }
}
.list:nth-child(5) {
  .iconfont {
    color: #3259ce;
  }
  p {
    color: #3259ce;
  }
}
.list:nth-child(6) {
  .iconfont {
    color: #a49273;
  }
  p {
    color: #a49273;
  }
}
.list:nth-child(7) {
  .iconfont {
    color: #ff8a65;
  }
  p {
    color: #ff8a65;
  }
}
.list:nth-child(8) {
  .iconfont {
    color: #ff5f7a;
  }
  p {
    color: #ff5f7a;
  }
}
.list:nth-child(9) {
  .iconfont {
    color: #0590df;
  }
  p {
    color: #0590df;
  }
}
.list:nth-child(10) {
  .iconfont {
    color: #f3dd24;
  }
  p {
    color: #f3dd24;
  }
}
</style>