konggang-city-miniprogram/pages/metrics/projectPage/detail.vue

<template>
	<view class="content-box">
		<view class="item-list">
		  <view v-for="(item, idx) in itemList" :key="idx" class="term">
		    <view class="term-name">{{ item.name }}:</view>
		    <view class="term-value-group" >
		      <p  class="term-value-item">{{ item.value || "-" }}</p>
		    </view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
		  return{
			  itemList: [
			    {
			      name: "业主",
			      value: '普汇中金国际控股有限公司',
			    },
			    {
			      name: "项目名称",
			      value: '普汇中金生命科学国际合作中心',
			    },
			    {
			      name: "入库情况",
			      value: '在库/未入库',
			    },
			    {
			      name: "建设性质",
			      value: '新建/续建',
			    },
			    {
			      name: "工业技改",
			      value: '是/否',
			    },
			    {
			      name: "入库时间",
			      value: '2020.6.30',
			    },
			    {
			      name: "建设规模及主要建设内容",
			      value: '占地面积155.48亩，拟新建机械加工厂房5栋，孵化中心（框架结构）3栋，服务配套中心1栋，总建筑面积约147625平方米。',
			    },
			    {
			      name: "主要经济社会效益",
			      value: '针对产业链上游（研发）企业中的中小型企业，提供标准研发、检测、生产及配套服务，提升区域产业能级，形成产业聚集，实现规模效益',
			    },
			    {
			      name: "建设地址",
			      value: '位于空港新城临空产业区内，西安咸阳机场西北侧，东、南侧为机场规划用地，北临正平大街，西侧为项目一期用地。',
			    },
			    {
			      name: "总用地面积（亩）",
			      value: '155.48',
			    },
				{
				  name: "建设起止年限",
				  value: '2019.11-2022.12',
				},
				{
				  name: "总投资（万元）",
				  value: '67330',
				},
				{
				  name: "年度计划投资（万元）",
				  value: '20199',
				},
				{
				  name: "已到位资金额（万元）",
				  value: '-',
				},
				{
				  name: "投资方式",
				  value: '社会投资',
				},
				{
				  name: "年度主要建设内容及年底前形象进度",
				  value: '服务中心二次结构施工完成；其余楼栋号二次结构、屋面工程、水电安装、装饰装修施工完成。',
				},
				{
				  name: "重点级别",
				  value: '非重点、省级/市级/新区/新城',
				},
				{
				  name: "备注",
				  value: '-',
				},
			  ],
		 }
	  },
	  onLoad(option) {
	  	console.log(option.id)
	  },
	  methods:{
	  }
	};
</script>

<style lang="scss">
	.content-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.item-list {
	  margin-left: 20rpx;
	  display: flex;
	  flex-direction: column;
	  .term {
	    display: flex;
	    .term-name {
	      font-size: 28rpx;
	      width: 30%;
	      display: flex;
	      margin: 20rpx;
	      color: #7f7f7f;
	    }
	    .term-value-group {
	      flex: 1;
	      display: flex;
	      flex-direction: column;
	      font-size: 28rpx;
	      .term-value-item {
	        margin: 20rpx;
	      }
	      .flex_i {
	        display: flex;
	        flex-flow: row;
	        justify-content: space-around;
	      }
	    }
	  }
	}
</style>