zhgdyun/src/views/projectAdmin/fourEngin/command/leftOne.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>
      </vue-scroll>
    </div>
  </Card>
</template>

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

import { mapState } from 'vuex'

export default {
  components: { Card },
  data: () => ({
    // 项目信息列表
    // list: {
    //   projectAddress: { label: '项目位置', value: ' 建宁路与热河交叉路口' },
    //   projectAcreage: { label: '用地面积', value: ' 112768.21㎡' },
    //   constructionUnit: { label: '建设单位', value: ' 中建四局发展(广州天河)有限公司' },
    //   designUnit: { label: '设计单位', value: ' 中国建筑第四工程局有限公司' },
    //   exploreUnit: { label: '勘察单位', value: ' 贵州中建建筑科研设计院有限公司' },
    //   supervisorUnit: { label: '监理单位', value: ' 广州宏元建设工程咨询有限公司' },
    // },
    list: {
      projectAddress: { label: '项目位置', value: '' },
      projectAcreage: { label: '用地面积', value: '' },
      constructionUnit: { label: '建设单位', value: '' },
      designUnit: { label: '设计单位', value: '' },
      exploreUnit: { label: '勘察单位', value: '' },
      supervisorUnit: { label: '监理单位', value: '' },
    },
  }),
  created() {
    this.getList()
  },
  computed: {
    ...mapState(['projectSn']),
  },
  methods: {
    /** 查询列表 */
    getList() {
      listProjectInfo({ projectSn: this.projectSn }).then(res => {
        console.log('项目信息: ', res);
        const list = this.list;
        Object.keys(list).forEach(key => {
          list[key].value = res.result[key];
        })
      })
    },
  },
}
</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;

      // &:hover {
      //   margin-top: 2px;
      //   margin-bottom: 5px;
      //   padding: 20px 0;
      //   &::before {
      //     content: '';
      //     position: absolute;
      //     top: 50%;
      //     left: 6px;
      //     display: inline-block;
      //     transform: translate(0, -50%);
      //     width: 8px;
      //     height: 14px;
      //     background-image: url('../assets/images/command-center/triangle.png');
      //     background-size: 100% 100%;
      //     transition: all .3s;
      //   }
      // }

      // &:hover .value {
      //   color: #c2805f;
      // }

      // &:last-child {
      //   margin-bottom: 0;
      // }

      // .label,
      // .value {
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   white-space: nowrap;
      // }

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

      .value {
        width: 75%;
      }
    }
  }
}
</style>