nxdt-uniapp/pages/projectInfo/components/ProjectInfoDetails.vue

<template>
  <view>
    <div class="content">
      <Title title="工程信息" />
      <!-- 表单 -->
      <u-form
        labelPosition="left"
        :model="proInfo"
        ref="addressForm"
        labelWidth="120"
        :labelStyle="{ fontWeight: 400, fontSize: '12px', color: 'rgba(15, 39, 75, 0.6)' }"
      >
        <!-- 工程名称 -->
        <u-form-item label="工程名称" borderBottom>
          <u-input
            v-model="proInfo.proName"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
        <!-- 工程负责人 -->
        <u-form-item label="工程负责人" borderBottom>
          <u-input
            v-model="proInfo.proLeader"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>
        <!-- 联系方式 -->
        <u-form-item label="联系方式" borderBottom>
          <u-input
            v-model="proInfo.proLeaderPhone"
            disabled
            disabledColor="#fff"
            border="none"
            inputAlign="right"
            fontSize="12"
            style="font-weight: 500"
          />
        </u-form-item>

        <!-- 计划开工时间 -->
        <u-form-item label="计划开工时间" prop="startDate" borderBottom>
          <div slot="right" class="form-select">
            <span class="form-name">{{ proInfo.startDate }}</span>
          </div>
        </u-form-item>

        <!-- 计划竣工时间 -->
        <u-form-item label="计划竣工时间" prop="endDate" borderBottom>
          <div slot="right" class="form-select">
            <span class="form-name">{{ proInfo.endDate }}</span>
          </div>
        </u-form-item>

        <!-- 工程类型 -->
        <u-form-item label="工程类型" prop="projectType" borderBottom>
          <div slot="right" class="form-select">
            <span class="form-name">{{ proInfo.proTypeName }}</span>
          </div>
        </u-form-item>

        <!-- 选择监理单位 -->
        <u-form-item label="监理单位名称" prop="supervision" borderBottom v-if="proInfo.proType == 2">
          <div slot="right" class="form-select">
            <span class="form-name">{{ proInfo.supervisorUnit }}</span>
          </div>
        </u-form-item>

        <!-- 工程地址配置 -->
        <div class="project-addr">
          <Title title="工程地址配置" />
        </div>
        <div v-for="(item, index) in proInfo.proAddress">
          <!-- 工程地址 -->
          <u-form-item :label="`工程地址${index + 1}`" borderBottom>
            <div slot="right" class="form-select">
              <div class="right-content">
                <span class="form-name">{{ item.label }}</span>
              </div>
            </div>
          </u-form-item>

          <!-- 经度 -->
          <u-form-item label="经度" borderBottom style="text-align: right">
            <u-input
              v-model="item.lon"
              disabled
              disabledColor="#fff"
              border="none"
              inputAlign="right"
              fontSize="12"
              style="font-weight: 500"
            />
          </u-form-item>

          <!-- 纬度 -->
          <u-form-item label="纬度" borderBottom>
            <u-input
              v-model="item.lat"
              disabled
              disabledColor="#fff"
              border="none"
              inputAlign="right"
              fontSize="12"
              style="font-weight: 500"
            />
          </u-form-item>
        </div>
      </u-form>
    </div>
  </view>
</template>

<script>
export default {
  props: {
    proInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;

  .form-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 5px;
    word-break: break-all;
  }
  .form-name {
    width: 200px;
    font-weight: 500;
    font-size: 12px;
    color: #0f274b;
    white-space: normal; /* 允许换行 */
    word-wrap: break-word; /* 强制长单词换行 */
    word-break: break-all;
    text-align: right;
  }

  .please-select {
    font-weight: 400;
    font-size: 12px;
    color: rgba(15, 39, 75, 0.4);
  }
  .right-content {
    display: flex;
    font-weight: 500;
    font-size: 12px;
    color: #0f274b;
    word-break: break-all;
  }

  .project-addr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
}
</style>