pbl-teacher-table/src/components/pages/liyuan/aiOffice.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
  },
  data() {
    return {
      role: this.$route.query.role,
      cardArray: [
        { title: '资料收集', icon: require('../../../assets/icon/liyuan/zlsj.svg'), type: 1, to: "/teadTest",role:0 },
        { title: '会议妙记', icon: require('../../../assets/icon/liyuan/hymj.svg'), type: 2, to: `/aigpt/#/cocoFlowConferenceTrick?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&role=${this.$route.query.role}&tType=${this.$route.query.tType}&org=${this.$route.query.org}&gotype=1`,role:0 },
        { title: '教师管理', icon: require('../../../assets/icon/liyuan/teamange.svg'), type: 1, to: "/teacher",role:1 },
        { title: '学生管理', icon: require('../../../assets/icon/liyuan/stumange.svg'), type: 1, to: "/Listudent",role:0 },
        { title: '办公表单', icon: require('../../../assets/icon/liyuan/workTest.svg'), type: 1, to: "/test",role:1 },
      ]
    }
  },
  computed:{
    // 进行权限判断一些只有管理员能看
    cardData(){
      return (val)=>{
          let com = val.filter(e=> e.role==0 || (this.role == 1 && e.role == 1) )
          return com
      }
    }
  }
}
</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>