129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
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'
|
||
|
||
|
||
export default {
|
||
components: { Card },
|
||
data: () => ({
|
||
list: {
|
||
projectAddress: { label: '项目地址', value: '' },
|
||
projectAcreage: { label: '项目面积', value: '' },
|
||
constructionUnit: { label: '建设单位', value: '' },
|
||
designUnit: { label: '设计单位', value: '' },
|
||
exploreUnit: { label: '业主单位', value: '' },
|
||
supervisorUnit: { 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>
|
||
.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>
|