<template>
	<a-row>
		<a-col  span="4">
			<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" style="width: 100%;" mode="inline">
				<a-menu-item key="1">个人求职</a-menu-item>
				<a-menu-item key="2">企业招聘</a-menu-item>
				<a-menu-item key="3">应届毕业生</a-menu-item>
				<a-menu-item key="4">人才入户</a-menu-item>
				<a-menu-item key="5">其他</a-menu-item>
			
			</a-menu>
		</a-col>
		<a-col span="16">
			<div style="width: 100%;background-color: #fff;padding: 10px;">
				<a-list item-layout="horizontal" :data-source="data">
					<template #renderItem="{ item }">
						<a-list-item>
							<a-list-item-meta
								description="2020-11-12">
								<template #title>
									<a href="https://www.antdv.com/">{{ item.title }}</a>
								</template>
							</a-list-item-meta>
							<template #extra>
							 <a-button>下载</a-button>
							</template>
						</a-list-item>
					</template>
				</a-list>
				<a-pagination v-model:current="current" :total="500" style="text-align: center;" />
			</div>
		</a-col>
		<a-col span="4">
			<a-list size="small" bordered :data-source="data" style="height: 294px">
				<template #renderItem="{ item }">
					<a-list-item>{{ item }}</a-list-item>
				</template>
				<template #header>
					<div>Header</div>
				</template>
			</a-list>
		</a-col>
	</a-row>



</template>
<script setup lang="ts">
	import { ref, onMounted, computed, watch } from 'vue';
	const openKeys = ref<string[]>(['1']);
	const selectedKeys = ref<string[]>(['1']);

	interface DataItem {
		title : string;
	}
	const data : DataItem[] = ref([
		{
			title: 'Ant Design Title 1',
		},
		{
			title: 'Ant Design Title 2',
		},
		{
			title: 'Ant Design Title 3',
		},
		{
			title: 'Ant Design Title 4',
		},
	])
</script>

<style>
</style>