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

<template>
  <div class="teacherDevelop">
    <topBar title="课程建设" detail="智能课程管理 · 数字化教学资源 · 协同教研平台"></topBar>
    <div class="cardBox">
      <card v-for="item in 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 {
      cardArray: [
        { title: '课程管理', icon: require('../../../assets/icon/liyuan/niandukaohe.svg'), type: 1, to: "/course" },
        { title: '课程中心', icon: require('../../../assets/icon/liyuan/gerendangan.svg'), type: 2, to: `http://localhost:8082/#/index?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&org=${this.$route.query.org}&tType=${this.$route.query.tType}&cid=&screenType=3&gotype=1` },
        { title: 'AI应用', icon: require('../../../assets/icon/liyuan/jiaoshihuaxiang.svg'), type: 2, to: `//app.cocorobo.cn/#/?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&org=${this.$route.query.org}&role=${this.$route.query.role}&tab=0` },
        { title: '工作空间', icon: require('../../../assets/icon/liyuan/ketangguancha.svg'), type: 1, to:`//app.cocorobo.cn/#/?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&org=${this.$route.query.org}&role=${this.$route.query.role}&tab=1` },
        { title: '知识库', icon: require('../../../assets/icon/liyuan/zhinengbiaodan.svg'), type: 1, to: `//app.cocorobo.cn/#/?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&org=${this.$route.query.org}&role=${this.$route.query.role}&tab=2`  },
        { title: '协同建构', icon: require('../../../assets/icon/liyuan/zhinengbiaodan.svg'), type: 1, to: "/synergyCourse" },
      ]
    }
  },
}
</script>

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

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