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

<template>
  <div style="padding-bottom: 50px">
    <rotation />
    <h-nav />
    <div class="inner">
      <bread-crumb :arr="arr" />
    </div>
    <div class="content-box">
      <div v-for="(item, index) in list" :key="index" style="margin-top: 50px; cursor: pointer" @click="jump(item.url)">
        <div v-if="index % 2 === 0" class="d-flex justify-space-between">
          <div class="introduce-box">
            <p class="introduce-title">{{ item.title }}</p>
            <p class="introduce-content">{{ item.content }}</p>
          </div>
          <img style="width: 452px" :src="item.imgUrl" />
        </div>
        <div v-else class="d-flex justify-space-between">
          <img style="width: 452px" :src="item.imgUrl" />
          <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 Rotation from 'components/Rotation/Rotation.vue';
import HNav from './../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
export default {
  name: 'News',
  components: { HNav, Rotation, BreadCrumb },
  data() {
    return {
      str: '这是政策界面',
      title: '创新资源平台',
      typeOfPlatform: '创新平台',
      arr: [
        { name: '创新平台', url: '/NewPlatform/NewCore' },
        { name: '创新资源平台', url: '' },
      ],
      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>