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.url)" class="base-bg mr-8 d-flex pointer">
                <div class="server-box pa-5 mb-3 d-flex flex-column white--text fill-width">
                  <span class="font-big">{{ server.chinese }}</span>
                  <span class="font-small">{{ server.english }}</span>
                  <span class="font-small">SERVICE</span>
                  <div class="d-flex flex-nowrap">
                    <div class="flex-1"></div>
                    <a-icon class="font-24" type="arrow-right" />
                  </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
            :key="platform.id"
            @click="$router.push(platform.url)"
            class="second-base-bg white--text platform-box mb-8 d-flex flex-column justify-center align-center pointer"
            v-for="platform in platforms"
          >
            <div class="font-small font-bold">{{ platform.firstName }}</div>
            <div class="font-small font-bold">{{ platform.secondName }}</div>
          </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', url: '/NewPlatform/NewService' },
        { id: '02', chinese: '孵化服务', english: 'INCUBATION', url: '/IncubationPlatform/Services' },
        { id: '03', chinese: '产业服务', english: 'INDUSTRIAL', url: '/Industry/Serve' },
      ],
      platforms: [
        {
          id: '04',
          firstName: '创新挑战',
          secondName: '',
          url: '/Challenge/Solicitation',
        },
        {
          id: '05',
          firstName: '科技资源开放共享',
          secondName: '服务平台',
          url: '/NewPlatform/Share',
        },
        {
          id: '06',
          firstName: '知识产权与技术',
          secondName: '转移转化服务平台',
          url: '/NewPlatform/Transfer',
        },
        {
          id: '07',
          firstName: '知识培训与科技人才',
          secondName: '服务平台',
          url: '/NewPlatform/NewService',
        },
      ],
      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 {
  height: 100px;
}

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

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

.server-box span {
  transition: all 0.2s ease 0s;
}

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

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

.server-box:hover div {
  transform: translate(0, -3px);
}
</style>