<!--
 * @Author: wally
 * @email: 18603454788@163.com
 * @Date: 2021-01-13 17:21:29
 * @LastEditors: wally
 * @LastEditTime: 2021-01-20 09:56:56
-->
<template>
  <div>
    <h-nav />
    <div class="inner my-1">
      <bread-crumb :arr="arr" />
    </div>
    <div class="newBox">
      <banner :show-page="showPage" />
      <new-model :btnType="btnType" class="btn" ref="childModel" />
    </div>
    <div style="padding-bottom: 50px">
      <div class="inner d-flex flex-nowrap justify-space-between">
        <div :key="index" @click="jump(item.url)" class="content-box" v-for="(item, index) in list">
          <img :src="item.imgUrl" />
          <div class="con-title">{{ item.title }}</div>
          <div class="con-con">{{ item.content }}</div>
          <!-- <div class="d-flex justify-space-between" v-if="index % 2 === 0">
          <div class="introduce-box">
            <p class="introduce-title">{{ item.title }}</p>
            <p class="introduce-content">{{ item.content }}</p>
          </div>
          <img :src="item.imgUrl" style="width: 452px" />
        </div>
        <div class="d-flex justify-space-between" v-else>
          <img :src="item.imgUrl" style="width: 452px" />
          <div class="introduce-box">
            <p class="introduce-title">{{ item.title }}</p>
            <p class="introduce-content">{{ item.content }}</p>
          </div>
          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from 'components/Banner/Banner.vue';
import HNav from './../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
import NewModel from './../components/NewModel.vue';

export default {
  name: 'News',
  components: { HNav, Banner, BreadCrumb, NewModel },
  data() {
    return {
      str: '这是政策界面',
      title: '创新资源平台',
      typeOfPlatform: '创新平台',
      arr: [
        { name: '创新平台', url: '/NewPlatform/NewCore' },
        { name: '创新资源平台', url: '' },
      ],
      btnType: 'default',
      showPage: 32,
      list: [
        {
          title: '科技资源开放共享服务平台',
          content: '研发试验、检验检测、资源共享',
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210120/ccf39757579647cd975ddaebfc571d93.png',
          url: '/NewPlatform/Share',
        },
        {
          title: '知识产权与技术转移转化服务平台',
          content: '知识产权、成果转化、技术转移',
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/4f9b898da25e48d3b73b47345ed14a9a.jpg',
          url: '/NewPlatform/Transfer',
        },
        {
          title: '知识培训与科技人才服务平台',
          content: '技术培训、管理培训、知识讲座',
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/f5fb570cfd7547279138a591818325e0.jpg',
          url: '/NewPlatform/Develop',
        },
      ],
    };
  },
  methods: {
    jump(url) {
      this.$router.push(url);
    },
  },
};
</script>

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

.content-box {
  padding: 0 !important;
  width: 30%;
  height: auto !important;
  margin: 50px 0;
  cursor: pointer;
  position: relative;

  img {
    width: 100%;
  }
}

.con-title {
  position: absolute;
  bottom: 23px;
  color: #ffffff;
  font-size: 1.6rem;
  text-align: center;
  width: 100%;
  background-image: linear-gradient(rgba(#545454, 0), rgba(0, 0, 0, 0.6));
}

@media only screen and (max-width: 1650px) {
  .con-title {
    font-size: 1.3rem;
  }
}

.con-con {
  background: white;
  box-shadow: 0 0 6px #ccc;
  height: 26%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.newBox {
  position: relative;
}

.btn {
  position: absolute;
  top: 26%;
  left: 330px;
}

@media only screen and (max-width: 1650px) {
  .btn {
    position: absolute;
    top: 23%;
    left: 233px;
  }
}
</style>
