<template>
	<div>
		<div class="list">
			<ul class="img" v-for="(item, index) in list" :key="index">
				<li class="img-box">
					<span class="text">{{ item.sl}}</span>
				</li>
				<div>{{ item.jzdx}}</div>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "BuildingStatistics",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			classOption() {
				return {
					singleHeight: 51,
				};
			},
		},
	};
</script>

<style lang="less" scoped>
	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
		align-items: center;
		// line-height: 10px;
		margin: 26px 0;

		.img {
			width: 110px;
			height: 124px;
			margin-top: 6px;

			.img-box {
				width: 80px;
				height: 50px;
				background: url("../../../assets/images/build.png") no-repeat;
				margin-left: 10px;
				margin-bottom: 6px;
			}

			.text {
				font-size: 22px;
				text-align: center;
				margin-left: 17px;
			}
		}
	}
	.imgs{
		width: 50px;
		height: 60px;
	}
</style>
