web-test/src/views/market/detail/patentDetail.vue

<template>
  <div id="patentDetail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <el-col :span="7" class="left">
            <el-image v-if="detailInfo.img_url" :src="detailInfo.img_url"></el-image>
            <el-col :span="24" class="noImage" v-else>
              <p>专利有效性</p>
              <p>{{ detailInfo.term }}</p>
            </el-col>
          </el-col>
          <el-col :span="17" class="right">
            <el-col :span="24" class="name textOver">
              {{ detailInfo.name }}
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                申请号
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ detailInfo.create_number || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                申请日
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ detailInfo.create_date || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                公开(公告)号
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ detailInfo.success_number || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                公开(公告)日
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ detailInfo.success_date || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                专利有效性
              </el-col>
              <el-col :span="16" class="otherInfo textOver" style="color:#ff0000;font-weight:bold;">
                {{ detailInfo.term || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                专利类型
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ detailInfo.type || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                发明人
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ detailInfo.inventor || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                申请人
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ detailInfo.apply_personal || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                代理人
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ detailInfo.agent_personal || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                代理机构
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ detailInfo.agent || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                地址
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ detailInfo.address || '暂无' }}
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="down">
          <h1>摘要</h1>
          <p>{{ detailInfo.abstract || '暂无' }}</p>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'patentDetail',
  props: {
    detailInfo: { type: Object },
  },
  components: {},
  data: function() {
    return {
      url: require('@a/fmzl.jpg'),
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  margin: 15px 0 0 0;
  .top {
    margin: 0 0 10px 0;
    .left {
      margin: 0 10px 0 0;
      border: 1px solid #ccc;
      .el-image {
        width: 100%;
        height: 360px;
      }
      .noImage {
        height: 360px;
        p:nth-child(1) {
          font-size: 25px;
          text-align: left;
          padding: 10px;
        }
        p:nth-child(2) {
          text-align: center;
          padding: 30% 0;
          font-size: 35px;
          font-weight: bold;
          color: #ff0000;
        }
      }
    }
    .right {
      width: 638px;
      border: 1px solid #ccc;
      .name {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid #ccc;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
      }
      .otherInfo {
        height: 40px;
        line-height: 40px;
        padding: 0 0 0 10px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        font-size: 16px;
        .tooltip {
          float: left;
          width: 98%;
        }
      }
    }
  }
  .down {
    border: 1px solid #cccccc;
    padding: 10px;
    p {
      font-size: 18px;
      line-height: 38px;
      text-indent: 2rem;
    }
  }
}
</style>