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

<template>
  <Card title="基本信息">
    <div class="contentBox">
      <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>
    </div>
  </Card>
</template>

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


export default {
  components: { Card },
  data: () => ({
    list: {
      projectName: { label: '项目名称', value: '' },
      projectAddress: { label: '项目地点', value: '' },
      projectAcreage: { label: '建筑面积', value: '' },
      constructionUnit: { label: '建设单位', value: '' },
      supervisorUnit: { label: '监理单位', value: '' },
      designUnit: { label: '设计单位', value: '' },
      exploreUnit: { label: '总包单位', value: '' },
    },
  }),
  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];
        })
      })
    },
  },
}
</script>

<style lang="less" scoped>
.contentBox {
  margin-top: 3%;
  width: 100%;
  height: 90%;
  overflow: auto;
  .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%;
      }
}
::-webkit-scrollbar {
 width: 3px;
 color: #182337;
}
</style>