check-work/src/views/FirstPage/FirstPage.vue

<!--
  Copyright (c) 2020.
  author: bin
  email: binbin0314@126.com
  -->
<template>
  <div>
    <rotation />
    <div class="inner">
      <a-row>
        <a-col :span="18">
          <a-row>
            <a-col :key="server.id" :span="8" v-for="server in services">
              <div @click="$router.push(server.path)" class="mr-8 d-flex pointer">
                <div class="server-box d-flex fill-width">
                  <img :src="server.url" style="width:100%" />
                </div>
              </div>
            </a-col>
          </a-row>
          <a-row class="mt-8 mr-8">
            <a-col :span="8" class="fill-width d-flex flex-nowrap flex-row justify-space-between">
              <div
                :key="platform.id"
                @click="$router.push(platform.path)"
                class="platform-box"
                v-for="platform in platforms"
              >
                <div class="d-flex flex-column align-center pointer">
                  <img :src="platform.url" style="width:60%" />
                  <div class="platform-txt mt-3">{{ platform.firstName }}</div>
                  <div class="platform-txt">{{ platform.secondName }}</div>
                </div>
              </div>
            </a-col>
          </a-row>
          <!-- <a-row class="mt-8">
            <a-col :span="12">
              <div class="white mr-8 d-flex flex-column justify-center">
                <index-new-list :i="0" :lists="lists" />
              </div>
            </a-col>
            <a-col :span="12">
              <div class="white mr-8 d-flex flex-column justify-center">
                <index-new-list :i="1" :lists="lists" />
              </div>
            </a-col>
          </a-row>-->
        </a-col>
        <a-col :span="6">
          <div class="white mr-8 d-flex flex-column justify-center">
            <index-new-list :i="1" :lists="lists" />
          </div>
        </a-col>
      </a-row>
      <a-row class="mt-8">
        <a-col :span="24">
          <div class="white mr-8 d-flex flex-column justify-center">
            <index-new-list :i="0" :lists="lists" />
          </div>
        </a-col>
        <!-- <a-col :span="12">
          <div class="white mr-8 d-flex flex-column justify-center">
            <index-new-list :i="1" :lists="lists" />
          </div>
        </a-col>-->
      </a-row>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Rotation from 'components/Rotation/Rotation.vue';
import IndexNewList from 'components/Index/IndexNewList.vue';
import { frontSearchFriend, frontSearchCompany } from 'config/api';

export default {
  components: { Rotation, IndexNewList },
  data() {
    return {
      services: [
        {
          id: '01',
          chinese: '创新服务',
          english: 'INNOVATIVE',
          path: '/NewPlatform/NewService',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210119/index06.png',
        },
        {
          id: '02',
          chinese: '孵化服务',
          english: 'INCUBATION',
          path: '/IncubationPlatform/Services',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210119/index07.png',
        },
        {
          id: '03',
          chinese: '产业服务',
          english: 'INDUSTRIAL',
          path: '/Industry/Serve',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210119/index08.png',
        },
      ],
      platforms: [
        {
          id: '04',
          firstName: '创新挑战',
          secondName: '',
          path: '/Challenge/Solicitation',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210119/index01.png',
        },
        {
          id: '05',
          firstName: '科技资源',
          secondName: '开放共享服务平台',
          path: '/NewPlatform/Share',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210119/index02.png',
        },
        {
          id: '06',
          firstName: '知识产权与技术',
          secondName: '转移转化服务平台',
          path: '/NewPlatform/Transfer',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210119/index03.png',
        },
        {
          id: '07',
          firstName: '知识培训',
          secondName: '科技人才服务平台',
          path: '/NewPlatform/Develop',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210119/index04.png',
        },
        // {
        //   id: '08',
        //   firstName: '知识平台',
        //   secondName: '',
        //   path: '/Knowledge',
        //   url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210119/index05.png',
        // },
      ],
      lists: [
        {
          id: 1,
          name: '行业资讯',
          news: [],
        },
        {
          id: 2,
          name: '活动公告',
          news: [],
        },
      ],
    };
  },
  computed: mapState('home', ['actList', 'actIpCon', 'actCurrent']),
  created() {
    this.getData1();
    this.getData2();
    this.getIndustryInfoLists();
    this.getFrontLists();
  },
  methods: {
    ...mapActions('home', ['getIndustryInfoList', 'getFrontList']),

    // 查询衍生企业
    async getData1() {
      const params = {
        param: {
          pageNum: 1,
          pageSize: 5,
          type: 1,
          typeOfPlatform: 1,
        },
      };
      const res = await frontSearchFriend(params);
      const { data, code, msg } = res.data;
      if (code === 200) {
        // console.log(data);
      } else {
        // console.log(msg);
      }
    },

    // 查询合作伙伴
    async getData2() {
      const params = {
        param: {
          pageNum: 1,
          pageSize: 5,
          type: 2,
          typeOfPlatform: 2,
        },
      };
      const res = await frontSearchCompany(params);
      const { data, code, msg } = res.data;
      if (code === 200) {
        // console.log(data);
      } else {
        // console.log(msg);
      }
    },

    // 获取行业资讯列表
    async getIndustryInfoLists() {
      const params = {
        param: {
          pageNum: 1,
          pageSize: 3,
        },
      };
      const res = await this.getIndustryInfoList(params);
      this.lists[0].news = res.list;
    },

    // 获取活动公告列表
    async getFrontLists() {
      const params = {
        param: {
          activityType: [],
          pageNum: 1,
          pageSize: 3,
          title: '',
        },
      };
      const res = await this.getFrontList(params);
      this.lists[1].news = res.list;
    },
  },
};
</script>

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

.platform-box {
  width: 20%;

  .platform-txt {
    font-size: 20px;
  }

  @media only screen and (max-width: 1400px) {
    .platform-txt {
      font-size: 18px;
    }
  }
}

.platform-box div {
  transition: all 0.2s ease 0s;
}

.platform-box:hover div {
  transform: translate(0, -3px);
}

.server-box:hover img {
  transform: translate(0, -3px);
}

.server-box img {
  transition: all 0.2s ease 0s;
}
</style>