green.v0.3/src/views/NewPlatform/Children/Develop.vue

<template>
  <div>
    <sen-nav />
    <div class="inner my-1">
      <bread-crumb :arr="arr" />
    </div>
    <div>
      <div class="banner-box">
        <a-carousel :autoplay-speed="time" autoplay>
          <div class="img-box">
            <img src="~assets/banner/banner4.png" />
          </div>
        </a-carousel>

        <!-- 文字内容 -->
        <div class="banner-con">
          <h1 class="about-title">科技人才服务平台</h1>
          <div class="about-font">
            依托“山西绿谷营养与健康研究院”的科技创新资源，荟萃大健康领域内顶级专家（团队）资源，
            以科技企业技术及科技需求为导向，打通校企对接合作通道，对外提供技术顾问、技术培训、技能知识讲座等专业服务。
          </div>
        </div>
      </div>
      <!-- <div class="search-background">
        <div class="d-flex">
          <div class="flex-3 flex-wrap">
            <span class="ins-title">导师分类：</span>
            <span v-if="list && list.length">
              <span
                :class="item.isActive ? 'act-color' : ''"
                :key="index"
                @click="choose(index)"
                class="ins-name"
                v-for="(item, index) in list"
              >{{ item.categoryName }}</span>
            </span>
          </div>
          <div class="flex-1 align-center">
            <a-input-search
              @search="searchFruit"
              class="item-search"
              enter-button="搜索"
              placeholder="搜索导师"
              v-model="fruitIpt"
            />
          </div>
        </div>
      </div> -->
    </div>
    <!-- <tutors :ach-list="achList" :fruit-ipt="fruitIpt" :platform="platform" ref="child" /> -->
  </div>
</template>

<script>
import SenNav from './components/SenNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
import { mapMutations } from 'vuex';
import { selTutor } from 'config/api';
import Tutors from 'components/PlatformList/Tutors.vue';

export default {
  name: 'Develop',
  components: { SenNav, BreadCrumb, Tutors },
  data() {
    return {
      title: '科技人才服务平台',
      typeOfPlatform: '创新社区',
      arr: [
        { name: '创新社区', url: '/NewPlatform/Index' },
        { name: '创新资源平台', url: '/NewPlatform/Index#mao2' },
        { name: '科技人才服务平台', url: '' },
      ],
      list: [],
      achList: [],
      fruitIpt: '',
      platform: 1,
    };
  },

  watch: {
    fruitIpt(val) {
      const obj = {
        content: this.fruitIpt,
        isBtn: 0,
      };
      this.setAchIpt(obj);
    },
  },

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

  methods: {
    ...mapMutations('home', ['setAchIpt']),
    /**
     * 获取导师分类
     * @param {string} categoryName 分类名称
     * @param {number} recStatus 分类状态
     */
    async getType() {
      try {
        const params = { param: { categoryName: '', recStatus: 0 } };
        const res = await selTutor(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.list = data;
          for (var i = 0; i < this.list.length; i++) {
            this.list[i].isActive = false;
          }
        }
      } catch (error) {
        console.log(error);
      }
    },

    // 点击搜索
    searchFruit() {
      this.$refs.child.getData();
    },

    // 选中类型时触发
    async choose(index) {
      await this.setType(index);
      await this.$refs.child.getData('teacherType', this.achList);
    },

    setType(index) {
      const that = this;
      that.achList = [];
      const { list } = this;
      list[index].isActive = !list[index].isActive;
      this.list = [...list];
      for (let i = 0; i < list.length; i++) {
        if (list[i].isActive) {
          this.achList.push(list[i].id);
        }
      }
    },
  },
};
</script>

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

.search-background {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  height: auto;
  padding: 0 20px;
  width: 82%;
  margin: 40px auto;
  line-height: 44px;
}

.item-search {
  width: 100%;
  height: 32px;
}

.ins-title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
}

.ins-name {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  padding: 0 10px;
  cursor: pointer;
}

.act-color {
  color: #13ACC4 !important;
}

.banner-box {
  width: 82%;
  margin: 0 auto;
  position: relative;

  .banner-con {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;

    .about-title {
      color: white;
      font-size: 50px;
      font-weight: 600;
    }

    .about-font {
      color: white;
      font-size: 18px;
      line-height: 40px;
      text-align: left;
    text-indent: 2em;
    }
  }
}
</style>