zhgdyun/src/views/projectAdmin/jlw/projectHuli/projectIntro.vue

<template>
<!-- 项目简介 -->
<Card :title="title">
     <div class="content">
      <vue-scroll>
        <div class="listItem">
          <!-- 项目名称 -->
          <span class="label">
            {{ $t('message.companyDiagram.entryName1') }}：
          </span>
          <span class="value">{{ projectData.projectName }}</span>
        </div>
        <div class="listItem">
          <!-- 项目地址 -->
          <span class="label">
            {{ $t('message.companyDiagram.projectAddress') }}：
          </span>
          <span class="value">
            {{ projectData.provinceName }}{{ projectData.cityName }}
            {{ projectData.areaName }}{{ projectData.projectAddress }}
          </span>
        </div>
        <div class="listItem">
          <!-- 项目经理 -->
          <span class="label">
            {{ $t('message.companyDiagram.projectManager') }}：
          </span>
          <span class="value">{{ projectData.projectManage }}</span>
        </div>
        <div class="listItem">
          <!-- 联系电话 -->
          <span class="label">
            {{ $t('message.companyDiagram.telPhone') }}：
          </span>
          <span class="value">{{ projectData.projectTel }}</span>
        </div>
        <div class="listItem">
          <!-- 建筑面积 -->
          <span class="label">
            {{ $t('message.companyDiagram.buildArea') }}：
          </span>
          <span class="value">{{ projectData.projectAcreage }} m²</span>
        </div>
        <div class="listItem">
          <!-- 开工日期 -->
          <span class="label">
            {{ $t('message.companyDiagram.buildStartTime') }}：
          </span>
          <span class="value">{{ projectData.startWorkDate }}</span>
        </div>
        <div class="listItem">
          <!-- 项目编号 -->
          <span class="label">
            {{ $t('message.companyDiagram.projectNo') }}：
          </span>
          <span class="value">{{ projectData.projectNumber }}</span>
        </div>
        <div class="listItem">
          <!-- 工程类别 -->
          <span class="label">
            {{ $t('message.companyDiagram.projectType') }}：
          </span>
          <span
            class="value"
            v-for="(item, index) in $t('message.companyDiagram.PROJECTTYPE')"
            :key="index"
          >
            {{ projectData.projectType == item.id ? item.name : '' }}
          </span>
        </div>
        <div class="listItem">
          <!-- 工程用途 -->
          <span class="label">
            {{ $t('message.companyDiagram.projectUse') }}：
          </span>
          <span
            class="value"
            v-for="(item, index) in $t(
              'message.companyDiagram.ENGINEERINGPRUPOSE'
            )"
            :key="index"
          >
            {{ projectData.engineeringPurpose == item.id ? item.name : '' }}
          </span>
        </div>
        <div class="listItem">
          <!-- 结构类型 -->
          <span class="label">
            {{ $t('message.companyDiagram.structureType') }}：
          </span>
          <span
            class="value"
            v-for="(item, index) in $t('message.companyDiagram.STRUCTURETYPE')"
            :key="index"
          >
            {{ projectData.structureType == item.id ? item.name : '' }}
          </span>
        </div>
        <div class="listItem">
          <!-- 工程状态 -->
          <span class="label">
            {{ $t('message.companyDiagram.projectStatus') }}：
          </span>
          <span
            class="value"
            v-for="(item, index) in $t('message.companyDiagram.BUILDSTATUS')"
            :key="index"
          >
            {{ projectData.bulidStatus == item.id ? item.name : '' }}
          </span>
        </div>
      </vue-scroll>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
export default {
components:{Card},
  props: {
    title: {
      type: String,
      default: "default title"
    },
    projectData:{
      type: Object,
      default: {}
    }
  },
    data() {
    return {

    };
  },

}
</script>

<style lang="less" scoped>
   .content {
    position: relative;
    padding: 10px 20px;
    height: calc(100% - 20px - 24px);
    z-index: 2;
    .listItem {
      margin-bottom:2px ;
      height: 8%;
      .value {
        color: #bec2c6;
      }
    }
  }

</style>