登录注册

src/App.vue

@@ -3,16 +3,22 @@
 	<RouterView />
 	<MainFooter />
 	<BackTop />
-	
 	<VideoModel />
+	<div v-show="loading" class="main-loading">
+		<span class="iconfont icon-loading"></span>
+	</div>
 </template>
 
 <script setup lang="ts">
-	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 { 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 {
@@ -25,4 +31,26 @@
 	// 		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;
+	}
+</style>