green.v0.3/src/views/NewPlatform/Children/Transfer.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.name }}</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>
    <fruit />
  </div>
</template>

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

export default {
  name: 'Transfer',
  components: { SenNav, Fruit, BreadCrumb },
  data() {
    return {
      str: '这是知识产权与技术转移转化服务平台',
      title: '知识产权与技术转移转化服务平台',
      typeOfPlatform: '创新社区',
      arr: [
        { name: '创新社区', url: '/NewPlatform/Index' },
        { name: '创新资源平台', url: '/NewPlatform/Index#mao2' },
        { name: '知识产权与技术转移转化服务平台', url: '' },
      ],
      list: [],
      achList: [],
      fruitIpt: '',
    };
  },
  watch: {
    fruitIpt(val) {
      const obj = {
        content: this.fruitIpt,
        isBtn: 0,
      };
      this.setAchIpt(obj);
    },
  },
  created() {
    this.getType();
    this.setAchList([]);
  },
  methods: {
    ...mapMutations('home', ['setAchList', 'setAchIpt']),
    // 获取类型列表
    async getType() {
      try {
        const params = { param: { model: 0 } };
        const res = await selModel(params);
        const { code, mst, data } = res.data;
        if (code === 200) {
          this.list = data;
          for (var i = 0; i < this.list.length; i++) {
            this.list[i].isActive = false;
          }
          // console.log(this.list);
        }
      } catch (error) {
        // console.log(error);
      }
    },
    // 点击搜索
    searchFruit() {
      const obj = {
        content: this.fruitIpt,
        isBtn: 1,
      };
      this.setAchIpt(obj);
    },
    // 选中类型时触发
    choose(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);
        }
      }
      this.setAchList(this.achList);
    },
  },
};
</script>

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

.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;
    }
  }
}
</style>