<template>
	<div class="card-container">
		<a-tabs v-model:activeKey="active" type="card">
			<a-tab-pane tab="人员行为识别" :key="1">
				<person></person>
			</a-tab-pane>
			<a-tab-pane tab="车辆识别" :key="2"><car></car></a-tab-pane>
			<a-tab-pane tab="外来生物识别" :key="3"><foreign></foreign></a-tab-pane>
			<a-tab-pane tab="设备镜头脏污" :key="4"><dirty></dirty></a-tab-pane>
		</a-tabs>
	</div>
</template>

<script setup name="polling">
	import person from './components/person.vue'
	import car from './components/car.vue'
	import foreign from './components/foreign.vue'
	import dirty from './components/dirty.vue'
	const active = ref(1)

	const handleClick = (tab) => {
		console.log(tab)
	}
</script>

<style scoped>
.card-container p {
	margin: 0;
}
.card-container > .ant-tabs-card .ant-tabs-content {
	height: 120px;
	margin-top: -16px;
}
.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
	padding: 16px;
	background: #fff;
}
.card-container > .ant-tabs-card > .ant-tabs-nav::before {
	display: none;
}
.card-container > .ant-tabs-card .ant-tabs-tab,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
	background: transparent;
	border-color: transparent;
}
.card-container > .ant-tabs-card .ant-tabs-tab-active,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
	background: #fff;
	border-color: #fff;
}
#components-tabs-demo-card-top .code-box-demo {
	padding: 24px;
	overflow: hidden;
	background: #f5f5f5;
}
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
	height: 120px;
	margin-top: -8px;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
	background: transparent;
	border-color: transparent;
}
[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
	background: #000;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
	background: #141414;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
	background: #141414;
	border-color: #141414;
}
</style>
