<template>
	<div class="page">
		<div class="page-list" :style="{'width': leftWidth}">
			<slot name="left"></slot>
		</div>
		<div class="page-list" :style="{'width': rightWidth}">
			<slot name="right"></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'todo-list-page',
		props: {
			leftWidth: {
				type: String,
				required: false,
				default: () => {
					return '49%'
				}
			},
			rightWidth: {
				type: String,
				required: false,
				default: () => {
					return '49%'
				}
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;

		.page-list {
			height: 100%;
		}
	}
</style>
