green.v0.3/src/views/NewPlatform/Children/AchDet.vue

<template>
  <div>
    <div class="inner" style="margin-top: 40px">
      <bread-crumb :arr="arr" />
    </div>
    <div class="inner equ-box">
      <div class="equ-info d-flex">
        <img :src="obj.visitLocation" />
        <div class="equ-info-box mb-5">
          <p class="equ-name">{{ obj.name }}</p>
          <div class="d-flex flex-wrap">
            <div class="equ-info-left" style="width: 100px">
              <p>成果名字：</p>
              <p>专利类型：</p>
              <p>专利号：</p>
              <p>联系人：</p>
              <p>联系方式：</p>
            </div>
            <div style="width: 500px">
              <p>{{ obj.registerName }}</p>
              <p>{{ obj.style }}</p>
              <p>{{ obj.registerNum }}</p>
              <p>
                <span :key="index" v-for="(item, index) in obj.selPeoList">
                  {{ item.contactsName }}
                  <span v-if="index < obj.selPeoList.length - 1">,</span>
                </span>
              </p>
              <p>
                <span :key="index" v-for="(item, index) in obj.selPeoList">
                  {{ item.contactsPhone }}
                  <span v-if="index < obj.selPeoList.length - 1">,</span>
                </span>
              </p>
            </div>
          </div>
          <div class="equ-btn">
            <!-- <a-button style="margin-right: 20px">转化意向</a-button> -->
            <intention-model :type-data="typeData" style="margin-right: 20px; float: left" />
            <!-- <a-button type="primary">加入购物车</a-button> -->
            <add-shopping :type-data="typeData" style="margin-right: 20px; float: right" />
          </div>
        </div>
      </div>
      <div class="content-box">
        <div v-dompurify-html="obj.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { selResMes } from 'config/api';
import IntentionModel from 'components/Introduce/IntentionModel.vue';
import AddShopping from 'components/Introduce/AddShopping.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';

export default {
  name: 'AchDet',
  components: { IntentionModel, AddShopping, BreadCrumb },
  data() {
    return {
      typeOfPlatform: '成果详情',
      arr: [
        { name: '创新平台', url: '/NewPlatform/NewCore' },
        { name: '创新资源平台', url: '/NewPlatform/News' },
        { name: '知识产权与技术转移转化服务平台', url: '/NewPlatform/Transfer' },
        { name: '成果详情', url: '' },
      ],
      obj: {},
      typeData: {
        type: 2,
        Id: '',
      },
    };
  },
  computed: mapState('home', ['achId']),
  created() {
    this.typeData.Id = this.achId;
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const params = { param: { id: this.achId } };
        const res = await selResMes(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          // console.log(data);
          this.obj = data;
        }
      } catch (error) {
        // console.log(error);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.equ-box {
  background: #fff;
  padding: 20px;
  margin: 30px auto;
}

.equ-info {
  border-bottom: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  position: relative;

  img {
    width: 300px;
    height: 300px;
  }
}

.equ-name {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 31px;
  color: rgba(0, 0, 0, 0.85);
  opacity: 1;
}

.equ-info-box {
  position: relative;
  font-size: 16px;
  margin-left: 20px;
  height: 300px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  opacity: 1;

  p {
    margin-bottom: 6px;
  }
}

.equ-info-left {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  opacity: 1;

  p {
    margin-bottom: 6px;
  }
}

.equ-btn {
  position: absolute;
  bottom: 0;
}

.content-box {
  min-height: 400px;
  padding: 20px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
}
</style>