ts-program/src/views/IncubationPlatform/Children/Tutor.vue

<template>
  <div>
    <banner :show-page="showPage" />
    <h-nav />
    <div class="inner">
      <bread-crumb :arr="arr" />
      <div class="py-5 my-5" v-if="teachers && teachers.length>0">
        <div :key="teacher.categoryId" class="mb-4" v-for="teacher in teachers">
          <p class="font-bold-24 title-color">{{ teacher.categoryName }}</p>
          <div class="d-flex flex-wrap mb-10" v-if="teacher.services && teacher.services.length">
            <div
              :class="(index+1)%5===0? 'teacher-item1' : ''"
              :key="index"
              class="teacher-item font-24 mb-3"
              v-for="(item,index) in teacher.services"
            >{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from 'components/Banner/Banner.vue';
import HNav from './../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
import RichText from 'components/Introduce/RichText.vue';
import { selTeacher } from 'config/api';

export default {
  name: 'Tutor',
  components: { Banner, HNav, BreadCrumb, RichText },
  data() {
    return {
      title: '创业导师',
      showPage: 44,
      arr: [
        { name: '孵化平台', url: '/IncubationPlatform/MakerSpace' },
        { name: '创业导师', url: '' },
      ],
      teachers: {},
    };
  },

  created() {
    this.handleTeacher();
  },

  methods: {
    // 查询 导师
    async handleTeacher() {
      try {
        const res = await selTeacher();
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.teachers = data;
        } else {
          this.$message.error(msg);
        }
      } catch (error) {
        this.$message.error(error);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.inner {
  margin: 40px auto;
}

.teacher-item {
  width: 12%;
  margin-right: 10%;
  text-indent: 1em;
}

.teacher-item1 {
  margin-right: 0;
}
</style>