wiki/src/views/Hatch/Children/Tutor.vue

<!--
  Copyright (c) 2020.
  author: song
  email: 15235360226@163.com
  -->

<template>
  <div class="pa-10 white" v-if="teachers && teachers.length > 0">
    <div :key="teacher.categoryId" class="mb-4" v-for="teacher in teachers">
      <p class="font-bold-20 title-color">{{ teacher.categoryName }}</p>
      <div class="d-flex flex-wrap mb-10" v-if="teacher.services && teacher.services.length">
        <div
          :class="(index + 1) % 4 === 0 ? 'teacher-box1' : ''"
          :key="index"
          class="teacher-box font-24 mb-3"
          v-for="(item, index) in teacher.services"
        >
          <div :class="index === 0 ? 'teacher-item-active' : ''" @click="showProfile = true" class="teacher-item font-24 mb-3">
            <div class="font-26 teacher-title mb-5">{{ item.name }}</div>
            <div class="font-14 teacher-txt">
              会组成按理事会章程执行，经理 层设总经理 1 名、会组成按理事 会章程执行，经理层设总经理 1 名导师。
            </div>
            <div class="d-flex flex-row justify-center py-5">
              <span></span>
            </div>
            <div class="d-flex flex-row justify-center">
              <img src="~assets/teacher01.png" v-if="index === 0" />
              <img src="~assets/teacher02.png" v-else />
            </div>
          </div>
          <a-modal :footer="null" :title="item.name" :visible="showProfile" @cancel="handleCancel" @ok="handleCancel" width="50%">
            <p class="line-height-30">会组成按理事会章程执行，经理 层设总经理 1 名、会组成按理事 会章程执行，经理层设总经理 1 名导师。</p>
          </a-modal>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import { selTeacher } from 'config/api';

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

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

  methods: {
    handleCancel() {
      this.showProfile = false;
    },

    // 查询 导师
    async handleTeacher() {
      try {
        const res = await selTeacher();
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.teachers = data;
          for (let i = 0; i < this.teachers.length; i++) {
            const element = this.teachers[i];
            for (let j = 0; j < element.services.length; j++) {
              for (let k = 0; k < element.services.length - j; k++) {
                if (element.services[k].order && element.services[k].order > element.services[k + 1].order) {
                  let a = {};
                  a = element.services[k + 1].order;
                  element.services[k + 1].order = element.services[k].order;
                  element.services[k].order = a;
                }
              }
            }
          }
        } else {
        }
      } catch (error) {}
    },
  },
};
</script>

<style lang="stylus" scoped>
.teacher-box {
  width: 22%;
  margin-right: 4%;
}

.teacher-box1 {
  margin-right: 0;
}

.teacher-item {
  width: 100%;
  padding: 24px 12px 30px;
  background: #f8f8f8;
  color: rgba(80, 80, 80, 0.7);
  text-align: center;

  .teacher-title {
    text-align: center;
    color: rgba(80, 80, 80, 0.4);
  }

  .teacher-txt {
    text-align: justify;
    height: 85px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  span {
    display: inline-block;
    width: 28px;
    height: 3px;
    background: #E77816;
  }
}

.teacher-item-active {
  background: #E77816;
  color: #fff;

  .teacher-title {
    color: #fff;
  }

  span {
    background: #fff;
  }
}
</style>