<!--
  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 class="d-flex flex-column align-center">
            <img src="~assets/index01.png" />
            <span class="font-26 textColor mt-8">创新政策</span>
          </div>
          <div class="d-flex flex-column align-center">
            <img src="~assets/index02.png" />
            <span class="font-26 textColor mt-8">创新政策</span>
          </div>
          <div class="d-flex flex-column align-center">
            <img src="~assets/index03.png" />
            <span class="font-26 textColor mt-8">创新政策</span>
          </div>
        </div>
      </div>
    </div>

    <div class="inner">
      <!-- floor2 -->
      <div class="d-flex flex-nowrap justify-space-around">
        <div class="d-flex flex-column align-center mr-2">
          <img src="~assets/index04.png" />
          <div class="font-26 textColor title grey">数智开发</div>
        </div>
        <div class="d-flex flex-column align-center ml-2">
          <img src="~assets/index05.png" />
          <div class="font-26 textColor title grey">创新挑战</div>
        </div>
      </div>
      <!-- 行业资讯 -->
      <div class="d-flex flex-column" style="margin-top: 60px">
        <div class="new-title base-bg font-bold-30 white--text">行业资讯</div>
        <div class="py-8 white">
          <div :key="index" class="font-20 d-flex flex-nowrap justify-start px-10 py-4" 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).format('YYYY-MM-DD') }}</div>
          </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 } from 'vuex';
import Rotation from 'components/Rotation/Rotation.vue';
import {} from 'config/api';

export default {
  components: { Rotation },
  data() {
    return {
      str: '',
      lists: [],
    };
  },
  created() {
    this.getIndustryInfoLists();
  },

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

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