<template>
	<MainHeader />
	<RouterView />
	<MainFooter />
	<BackTop />
	<VideoModel />
	<div v-show="loading" class="main-loading">
		<span class="iconfont icon-loading"></span>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { RouterView } from 'vue-router'
	import MainHeader from './components/main-header.vue'
	import MainFooter from './components/main-footer.vue'
	import BackTop from './components/back-top.vue'
	import VideoModel from './components/video-model.vue'
	import { useGlobalStore } from './stores/global'
	const globalStore = useGlobalStore()
	const loading = computed(() => globalStore.state.loading)
</script>
<style scoped lang="less">
	// .main {
	// 	height: 100vh;
	// 	width: 100vw;
	// 	overflow-y: auto;
	// 	overflow-x: hidden;
	// 	position: relative;
	// 	> .content{
	// 		height: auto;
	// 	}
	// }
	.main-loading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999999999;
		> .iconfont {
			font-size: 80px;
			color: #fff;
			animation: loading 2s linear infinite;
		}
	}
</style>
<style lang="less">
	html:root {
		--main-header-height: 85px;
		@media (max-width: 1000px) {
			--main-header-height: 60px;
		}
	}
</style>