yd_qycpfb/jp-mobile/pages/cfInfo/cfInfo.vue

<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">机器人11号厂房</block>
		</cu-custom>

		<image src="../../static/img/4.jpg" class="top-image"></image>

		<view class="info-box">
			<view class="info-title">基本信息</view>
			<view class="info-line" v-for="(item, index) in infoList" :key="index">
				<view class="info-name">{{item.name}}:</view>
				<view class="info-content">{{item.value}}</view>
			</view>
			
			<view class="info-line">
			    <a href="https://sz.zhaoshang800.com/cf/vr/a18528644.html#2311291035029227929">VR看房</a>
			</view>

		</view>
		
		<view class="info-box">
			<view class="info-title">概况信息</view>
			<view class="info-line" v-for="(item, index) in infoList2" :key="index">
				<view class="info-name">{{item.name}}:</view>
				<view class="info-content">{{item.value}}</view>
			</view>
		</view>
		
		<view style="height: 40rpx;"></view>


		</view>
</template>

<script>
	export default {

		components: {

		},
		data() {
			return {
				infoList: [{
						name: '厂房名称',
						value: '机器人产业园11号房厂房'
					},
					{
						name: '所属板块',
						value: '新阳经济区'
					},
					{
						name: '具体位置',
						value: '科技孵化区'
					},
					{
						name: '产权归属',
						value: '国有'
					},
					{
						name: '占地面积',
						value: '62.73亩'
					},
					{
						name: '厂房层数',
						value: '4层'
					},
					{
						name: '厂房面积',
						value: '12460m²'
					},
					{
						name: '闲置层数',
						value: '1-4层'
					},
					{
						name: '闲置面积',
						value: '8900m²'
					},
					{
						name: '距离高铁站',
						value: '10km'
					},
					{
						name: '距离机场',
						value: '14km'
					},
					{
						name: '负责人',
						value: '18936455291'
					},
					{
						name: '周边配套',
						value: '污水处理、绿化设施、环保设施'
					},
				],
				infoList2: [{
						name: '砖混/轻钢',
						value: '砖混'
					},
					{
						name: '层高',
						value: '4.2m'
					},
					{
						name: '承重',
						value: '0.5吨'
					},
					{
						name: '电力',
						value: '10KVA'
					},
					{
						name: '行车',
						value: '无吨'
					},
					{
						name: '配套用水',
						value: '有'
					},
					{
						name: '天然气',
						value: '否'
					},
				],
			}
		},
		methods: {

		}
	}
</script>

<style>
	.top-image {
		width: 750rpx;
		height: 450rpx;
	}

	.info-box {
		width: 710rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background: #fff;
		padding-left: 20rpx;
		padding-top: 20rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.info-title{
		color: #3EB0F5;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.info-line{
		display: flex;
		padding-left: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.info-name{
		width: 180rpx;
		color: #333;
		font-size: 30rpx;
	}
	
	.info-content{
		color: #666;
		font-size: 30rpx;
	}
</style>