zhgdyun/src/views/projectAdmin/fourEngin/govComp/leftTop.vue

<template>
  <Card title="基本信息">
    <div class="container">
      <vue-scroll style="height: 95%">
        <div class="list">
          <!-- <div class="list-item" v-for="(item, key) in list" :key="key">
            <span class="label">{{ item.label +' ： '}} </span>
            <span class="value">{{ item.value }}</span>
          </div> -->
          <div class="list-item">
            <div>项目名称：中建四局金融城东区ATO91429地块项目</div>
            <div>项目地址：广州市金融城东区</div>
            <div>占地面积：6745㎡</div>
            <div>建筑面积：104402㎡</div>
            <div>建设单位：中建四局发展(广州天河)有限公司</div>
            <div>监理单位：广州宏元建设工程咨询有限公司</div>
            <div>设计单位：德国gmp建筑师事务所（方案设计）</div>
            <div style="margin: 15px 0 0 80px">
              中国建筑第四工程局有限公司（施工图设计）
            </div>
            <div>总包单位：中国建筑第四工程局有限公司</div>
            <!-- <div>业主单位：中国建筑第四工程局有限公司</div> -->
            <!-- <div>合同工期：2022-04-18/2024-10-08</div> -->
          </div>
        </div>
      </vue-scroll>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card'
import { listProjectInfo } from '@/assets/js/api/zhongjianFourth'

export default {
  components: { Card },
  data: () => ({
    // list: {
    //   projectAddress: { label: '项目地址', value: '' },
    //   projectAcreage: { label: '项目面积', value: '' },
    //   constructionUnit: { label: '建设单位', value: '' },
    //   designUnit: { label: '设计单位', value: '' },
    //   name: { label: '总包单位', value: '中国建筑第四工程局有限公司' },
    //   supervisorUnit: { label: '监理单位', value: '' },
    // },
    list: {}
  }),
  created() {
    this.projectSn = this.$store.state.projectSn
    // this.projectSn=localStorage.getItem('sn')
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      // listProjectInfo({ projectSn: this.projectSn }).then(res => {
      //   console.log('项目信息11111: ', res);
      //   const list = this.list;
      //   Object.keys(list).forEach(key => {
      //     list[key].value = res.result[key];
      //   })
      // })
      listProjectInfo({ projectSn: this.projectSn }).then((res) => {
        this.list = res.result
        console.log('项目信息11111: ', this.list)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  padding-top: 16px;
  padding-left: 16px;
  width: 100%;
  height: 100%;

  .list {
    width: 100%;
    height: 100%;
    color: #fff;
    overflow-y: scroll;

    .list-item {
      flex: 1;
      position: relative;
      // display: flex;
      box-sizing: border-box;
      padding: 8px 0;
      width: 100%;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      white-space: nowrap;

      .label {
        box-sizing: border-box;
        width: 22%;
        padding-left: 20px;
      }

      .value {
        width: 75%;
      }
      div {
        margin: 25px 10px 0 0;
      }
    }
  }
}
</style>