<template>
	<view class="content">
		<view class="title">管理项目总览</view>
		<view class="table_view">
			<view class="table_header">
				<view class="th th1">地区</view>
				<view class="th th2">项目名称</view>
			</view>
			<view class="table_cell">
				<view class="td td1">未知地区</view>
				<view class="listarea">
					<view class="td td2" v-for="item in wzList" :key="item.id">{{item.proName}}</view>
				</view>
			</view>
			<view class="table_cell">
				<view class="td td1">昆明</view>
				<view class="listarea">
					<view class="td td2" v-for="item in kmList" :key="item.id">{{item.proName}}</view>
				</view>
			</view>
			<view class="table_cell">
				<view class="td td1">禄丰</view>
				<view class="listarea">
					<view class="td td2" v-for="item in lfList" :key="item.id">{{item.proName}}</view>
				</view>
			</view>
			<view class="table_cell">
				<view class="td td1">合计</view>
				<view class="listarea">
					<view class="td td2">/</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "manage",
		data() {
			return {
				wzList: [{
						id: 0,
						proName: '大姚开投2020资产收益权融资工程'
					},
					{
						id: 1,
						proName: '大姚开投2021债权收益'
					},
					{
						id: 2,
						proName: '安发展2021年债权融资计划'
					},
					{
						id: 3,
						proName: '河口滨河城投2020年应收款债权计划'
					},
					{
						id: 4,
						proName: '河口滨河城投2020年应收款债权计划'
					},
				],
				kmList: [{
						id: 0,
						proName: '昆明高新水科2022非公开债权融资计划'
					},
					{
						id: 1,
						proName: '昆明高新水科2023非公开债权融资计划'
					},
				],
				lfList:[{
					id:0,
					proName:"禄丰2020年债权融资计划"
				}]
			}
		}
	}
</script>

<style scoped>
	.content {
		margin-bottom: 50rpx;
	}

	.table_view {
		border: 1px solid #ddd;
		border-bottom: 0;
		border-right: 0;
		widtd: 98%;
		margin: 1%;
	}

	.table_header,
	.table_cell {
		display: flex;
		text-align: center;
		line-height: 47rpx;
	}

	.th,.td {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ddd;
		white-space: nowrap;
	}

	.th1{
		width: 25%;
		font-weight: bold;
	}

	.th2 {
		width: 75%;
		font-weight: bold;
	}
	
	.td1{
		width: 25%;
	}
	
	.listarea{
		width: 75%;
	}
	.td2{
		width: 100%;
	}
</style>
