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

<template>
  <div>
    <rotation />
    <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 style="float: left; margin-right: 20px" :type-data="typeData" />
        <!-- <a-button type="primary">加入购物车</a-button> -->
        <add-shopping :type-data="typeData" />
      </div>
    </div>
  </div>
</template>

<script>
import { selContent } from 'config/api';
import IntentionModel from 'components/Introduce/IntentionModel.vue';
import Rotation from 'components/Rotation/Rotation.vue';
import AddShopping from 'components/Introduce/AddShopping.vue';
export default {
  name: 'ServiceDet',
  components: { IntentionModel, Rotation, AddShopping },
  data() {
    return {
      obj: {
        name: '',
        id: '',
        content: '',
      },
      typeData: {
        type: 0,
        Id: '',
      },
    };
  },
  created() {
    this.typeData.Id = this.$route.params.id;
    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>