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

<template>
  <div>
    <div class="inner my-1">
      <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>
    <banner :show-page="showPage" />
    <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>
        <!-- <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>