check-work/src/views/NewPlatform/Children/Platform.vue

<template>
  <div style="padding-bottom: 50px">
    <banner :show-page="showPage" />
    <h-nav />
    <div class="inner">
      <bread-crumb :arr="arr" />
    </div>
    <div class="content-box">
      <div
        :key="index"
        @click="jump(item.url)"
        style="margin-top: 50px; cursor: pointer"
        v-for="(item, index) in list"
      >
        <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>
</template>

<script>
import Banner from 'components/Banner/Banner.vue';
import HNav from './../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
export default {
  name: 'News',
  components: { HNav, Banner, BreadCrumb },
  data() {
    return {
      str: '这是政策界面',
      title: '创新资源平台',
      typeOfPlatform: '创新平台',
      arr: [
        { name: '创新平台', url: '/NewPlatform/NewCore' },
        { name: '创新资源平台', url: '' },
      ],
      showPage: 32,
      list: [
        {
          title: '科技资源开放共享服务平台',
          content: '研发试验、检验检测、资源共享',
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
          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;
}
</style>