check-work/src/views/IncubationPlatform/Children/MakerSpace.vue

<template>
  <div>
    <banner :show-page="showPage" />
    <h-nav />
    <div class="inner">
      <bread-crumb :arr="arr" />
      <div>
        <div
          :key="index"
          @click="jump(item.url,item.type)"
          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>
  </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: 'MakerSpace',
  components: { BreadCrumb, HNav, Banner },
  data() {
    return {
      showPage: 41,
      arr: [
        { name: '孵化平台', url: '/IncubationPlatform/MakerSpace' },
        { name: '众创空间', url: '' },
      ],
      list: [
        {
          title: '实体空间',
          content:
            '山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，' +
            '致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业...',
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210106/9059bddfe0254a269bf8f575c917b199.png',
          url: '/IncubationPlatform/MakerSpace/EntitySpace',
          type: 1,
        },
        {
          title: '虚拟空间',
          content:
            '山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，' +
            '致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业...',
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210106/73cba2c598e24bc99d4b988185138f44.png',
          url: '/IncubationPlatform/MakerSpace/EntitySpace',
          type: 2,
        },
        {
          title: '加入我们',
          content:
            '山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，' +
            '致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业...',
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210106/88a52985a48c4780a76507b06798b00f.png',
          url: '',
          type: 1,
        },
      ],
    };
  },
  methods: {
    jump(url, type) {
      const { query } = this.$route;
      this.$router.replace({ path: url, query: { type } });
    },
  },
};
</script>

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