wiki/src/views/FirstPage/FirstPage.vue

<!--
  Copyright (c) 2020.
  author: bin
  email: binbin0314@126.com
  -->
<template>
  <div>
    <rotation />
    <div class="white py-10">
      <div class="inner">
        <div class="d-flex flex-nowrap justify-space-around">
          <div
            :key="item.id"
            @click="$router.push(item.path)"
            class="d-flex flex-column align-center pointer"
            v-for="item in arr1"
          >
            <img :src="item.url" />
            <span class="font-26 textColor mt-8">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="inner">
      <!-- floor2 -->
      <div class="d-flex flex-nowrap justify-space-around">
        <div
          :key="item.id"
          @click="$router.push(item.path)"
          class="d-flex flex-column align-center mr-2 pointer"
          v-for="item in arr2"
        >
          <img :src="item.url" />
          <div class="font-26 textColor title grey">{{ item.name }}</div>
        </div>
      </div>
      <!-- 行业资讯 -->
      <div class="d-flex flex-column" style="margin-top: 60px">
        <div class="new-title base-bg font-bold-30 white--text pointer">行业资讯</div>
        <div class="py-8 white">
          <div
            :key="index"
            @click="jumpDetails(list)"
            class="font-20 d-flex flex-nowrap justify-start px-10 py-4 pointer"
            v-for="(list, index) in lists"
          >
            <div class="textColor new-txt">{{ list.title }}</div>
            <div
              class="secondary new-time"
              v-if="list.time"
            >{{ $moment(+list.time * 1000).format('YYYY-MM-DD') }}</div>
          </div>
          <div
            @click="$router.push('/ItInformation')"
            class="font-16 pointer px-6 pt-3"
            style="text-align: right;color:#007cc1"
          >查看更多>></div>
        </div>
      </div>
      <!-- 创业学院 -->
      <div class="d-flex flex-column">
        <div class="baseColor font-bold-30 mt-2 py-8">创业学院</div>
        <img class="fill-width" src="~assets/index06.png" />
      </div>
    </div>
  </div>
</template>

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

export default {
  components: { Rotation },
  data() {
    return {
      str: '',
      arr1: [
        {
          id: 1,
          name: '创新政策',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/logo/index01.png',
          path: '/Policy',
        },
        {
          id: 2,
          name: '双创活动',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/logo/index02.png',
          path: '/Activity',
        },
        {
          id: 3,
          name: '服务超市',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/logo/index03.png',
          path: '/ServiceMarket/Institute',
        },
      ],
      arr2: [
        {
          id: 4,
          name: '数智开发',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/logo/index04.png',
          path: '/Develop',
        },
        {
          id: 5,
          name: '创新挑战',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/logo/index05.png',
          path: '/Challenge/Solicitation',
        },
      ],
      lists: [],
    };
  },
  created() {
    this.getIndustryInfoLists();
  },

  methods: {
    ...mapActions('home', ['getIndustryInfoList']),
    ...mapMutations('home', ['setActDetail']),

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

    // 跳转到详情界面
    jumpDetails(item) {
      this.setActDetail(item);
      this.$router.push('/ItInformation/ActDetails');
    },
  },
};
</script>

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

.title {
  width: 100%;
  text-align: center;
  height: 129px;
  line-height: 129px;
}

.new-title {
  width: 100%;
  text-align: center;
  height: 88px;
  line-height: 88px;
}

.new-txt {
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.new-time {
  width: 30%;
  text-align: right;
}
</style>