zhgdyun/src/views/projectAdmin/dataBoard/homePage/projectInfo.vue

<template>
  <div class="projectInfo">
    <div class="title">
      {{ $t('message.companyDiagram.projectInfo') }}
    </div>
    <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>
  </div>
</template>

<script>
export default {
  props: ['projectData']
}
</script>

<style lang="less" scoped>
.projectInfo {
  position: relative;
  margin-bottom: 25px;
  height: calc(100% - 2px);
  width: 100%;
  .title {
    position: relative;
    top: -10px;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    color: #6ce9f0;
  }
  .content {
    position: relative;
    padding: 10px 20px;
    height: calc(100% - 20px - 24px);
    z-index: 2;
    .listItem {
      .value {
        color: #fff;
      }
    }
  }
}
</style>