<template>
	<view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14">
		<!-- 标题栏 -->
		<Title />

		<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100">
			<!-- 角色栏 -->
			<Roles />

			<!-- 日常任务面板 -->
			<Globals />

			<!-- 定期任务面板 -->
			<TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref, onMounted
	} from 'vue';
	import Navbar from '@/components/Title/Title.vue';
	import Roles from '@/components/Roles/Roles.vue';
	import Globals from '@/components/Globals/Globals.vue';
	import TimeLine from '@/components/TimeLine/TimeLine.vue';

	let height = ref(null);

	onMounted(() => {
		const system = uni.getSystemInfoSync();
		height.value = system.windowHeight + 'px';
	});

	function getTasks() {

	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
