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

<template>
  <div class="inner equ-box">
    <div class="equ-info d-flex">
      <img :src="obj.img" alt="" />
      <div class="equ-info-box">
        <p class="equ-name">{{ obj.name }}</p>
        <div class="d-flex flex-wrap">
          <div style="width: 200px" class="equ-info-left">
            <p>成果名字：</p>
            <p>学科分类：</p>
            <p>联系人：</p>
            <p>联系方式：</p>
            <p>转让形式：</p>
            <p>成果表现形式：</p>
            <p>成果阶段：</p>
          </div>
          <div style="width: 500px">
            <p>{{ obj.name }}</p>
            <p>{{ obj.classification }}</p>
            <p>
              <span v-for="(item, index) in obj.selPeoList" :key="index">{{ item.contactsName }}</span>
            </p>
            <p>
              <span v-for="(item, index) in obj.selPeoList" :key="index">{{ item.contactsPhone }}</span>
            </p>
            <p>{{ obj.layout }}</p>
            <p>{{ obj.performance }}</p>
            <p>{{ obj.stage }}</p>
          </div>
        </div>
        <p class="equ-btn">
          <a-button style="margin-right: 20px">转化意向</a-button>
          <a-button type="primary">加入购物车</a-button>
        </p>
      </div>
    </div>
    <div class="content-box">
      <div v-dompurify-html="obj.content"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { selResMes } from 'config/api';
export default {
  name: 'AchDet',
  data() {
    return { obj: {} };
  },
  computed: mapState('home', ['achId']),
  created() {
    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: 60px auto;
}

.equ-info {
  height: 300px;
  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>