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

<template>
  <!-- 项目简介 -->
  <Card :title="title">
    <div class="container">
      <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>
.container {
  box-sizing: border-box;
  position: relative;
  height: 100%;
  width:100%;
  padding: 10px 13px;
  z-index: 2;
  .listItem {
    margin-bottom: 2px;
    .value {
      color: #bec2c6;
      word-wrap:break-word;
    }
  }
}
</style>