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

<template>
  <div>
    <banner :show-page="showPage" />
    <div class="inner" style="margin-top:40px">
      <a-breadcrumb>
        <a-breadcrumb-item>绿谷生物</a-breadcrumb-item>
        <a-breadcrumb-item :key="index" v-for="(item,index) in serviceArr">
          <router-link :to="item.url">{{ item.name }}</router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="posi-name">
      <p class="service-name">{{ obj.name }}</p>
      <p class="service-eng">SERVICE</p>
    </div>
    <div class="inner service-box">
      <!-- <div style="margin-bottom: 40px" v-dompurify-html="obj.content"></div> -->
      <div
        style="margin-bottom: 40px"
      >山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业融通、线上线下相结合的融合发展机制和开放式创新创业平台，培育打造全链条一体化新型社会研发机构和创新创业生态系统，构筑专业化、集群化、园区化、产业发展新模式和新业态。公司秉持“创新、开放、协同、融合”发展理 念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放 式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。</div>
      <div>
        <!-- <a-button>直接申请</a-button> -->
        <intention-model :type-data="typeData" style="float: left; margin-right: 20px" />
        <!-- <a-button type="primary">加入购物车</a-button> -->
        <add-shopping :type-data="typeData" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { selContent } from 'config/api';
import IntentionModel from 'components/Introduce/IntentionModel.vue';
import Banner from 'components/Banner/Banner.vue';
import AddShopping from 'components/Introduce/AddShopping.vue';
export default {
  name: 'ServiceDet',
  components: { IntentionModel, Banner, AddShopping },
  data() {
    return {
      showPage: 100,
      obj: {
        name: '',
        id: '',
        content: '',
      },
      typeData: {
        type: 0,
        Id: '',
      },
    };
  },
  computed: mapState('home', ['serviceArr']),

  async created() {
    this.typeData.Id = this.$route.params.id;
    await this.getData(this.$route.params.id);
  },

  methods: {
    async getData(id) {
      try {
        const params = { param: { id } };
        const res = await selContent(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          console.log(data);
          this.obj = data;
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.service-box {
  margin: 60px auto;
  min-height: 400px;
  padding: 20px;
  background: #fff;
}

.posi-name {
  position: absolute;
  left: 20%;
  top: 300px;
  color: #fff;
  text-align: center;
}

.service-name {
  font-size: 40px;
  margin-bottom: 0 !important;
}

.service-eng {
  font-size: 16px;
}
</style>