xiaoshi_system/src/views/patentMining/components/basicMessage.vue

<template>
  <!-- 基本信息及流程 -->
  <div class="basicMessage">
    <div style="margin-bottom: 40px;">
      <span>项目基本信息</span>
      <el-divider></el-divider>
      <el-descriptions class="margin-top" title="" :column="column" size="" border>
        <el-descriptions-item>
          <template slot="label"> 
            <i class="el-icon-user"></i> 项目名称 
          </template> 
          {{ row.name }}
        </el-descriptions-item>
        <el-descriptions-item> 
          <template slot="label"> 
            <i class="el-icon-mobile-phone"></i> 项目产出
          </template>
          {{ row.type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i> 技术方向
          </template>
          {{ row.type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i> 产品阶段
          </template>
          {{ row.type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 是否检索
          </template>
          {{ row.type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 负责人
          </template>
          {{ row.type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 相关竞争对手
          </template>
          {{ row.type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 技术关键词
          </template>
          {{ row.type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 审核状态
          </template>
          <el-tag size="small">{{ row.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 审核进度
          </template>
          <el-tag size="small">{{ row.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 创建人
          </template>
          {{ row.createPerson }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 参与人
          </template>
         {{ row.createPerson }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 附件
          </template>
          {{ row.type }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="width: 100%;">
      <!-- 项目流程 -->
      <projectPath></projectPath>
    </div>
  </div>
</template>

<script>
import projectPath from './projectPath.vue'
export default {
  components: {
    projectPath,
  },
  props:['row'],
  data() {
    return {
      column:4,
      queryParams:{}
    }
  },
  mounted() {
    window.addEventListener('resize', (e) => {
      let width = window.innerWidth
      if (width > 2200) {  
        this.column = 6;  
      } else if (width < 1000) {  
        this.column = 3;  
      } else if (width < 1400) {  
        this.column = 4;  
      } else if (width < 1800) {  
        this.column = 5;  
      }  
    })
  },
  methods: {
    
  },
}
</script>

<style lang="scss">
.basicMessage {
  .el-divider--horizontal {
    margin: 10px 0;
  }
}
</style>
<style lang="scss" scoped>
.basicMessage{
  width: 100%;
  height: 100%;
}
</style>