pbl-teacher-table/src/components/pages/liyuan/teacherDevelop.vue

<template>
  <div class="teacherDevelop">
    <topBar title="教师发展" detail="教师年度考核 · 教师成长画像 · AI课堂观察"></topBar>
    <div class="cardBox">
      <card v-for="item in cardData(cardArray)" :key="item.title" :title="item.title" :icon="item.icon" :to="item.to" :type="item.type"></card>
    </div>
  </div>
</template>

<script>
import topBar from './components/topBar'
import card from './components/card.vue';
export default {
  components: {
    topBar,
    card
  },
  computed:{
    // 进行权限判断一些只有管理员能看
    cardData(){
      return (val)=>{
          let com = val.filter(e=> e.role==0 || (this.role == 1 && e.role == 1) )
          return com
      }
    }
  },
  data() {
    return {
      role: this.$route.query.role,

      cardArray: [
        { title: '年度考核', icon: require('../../../assets/icon/liyuan/niandukaohe.svg'), type: 1, to: "/examineL",role:0 },
        { title: '个人档案', icon: require('../../../assets/icon/liyuan/gerendangan.svg'), type: 1, to: "/userInfoL",role:0 },
        { title: '教师画像', icon: require('../../../assets/icon/liyuan/jiaoshihuaxiang.svg'), type: 1, to: "/portraitL",role:0 },
        { title: '课堂观察', icon: require('../../../assets/icon/liyuan/ketangguancha.svg'), type: 1, to: "/classroomObservation",role:0 },
        { title: '智能表单', icon: require('../../../assets/icon/liyuan/zhinengbiaodan.svg'), type: 1, to: "/test",role:1 },
      ]
    }
  },
}
</script>

<style scoped>
.teacherDevelop{
  width: 100%;
  height: 100%;
  padding: 40px 90px;
  box-sizing: border-box;
  background: #FAFAFA;
}

.cardBox{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}
</style>