对接数据

components/GlobalLoading.vue

@@ -0,0 +1,72 @@
+<!-- /components/GlobalLoading.vue -->
+<template>
+	<div v-if="isLoading" class="global-loading-overlay">
+		<div class="loading-spinner">
+			<div class="spinner"></div>
+			<p class="loading-text">Loading...</p>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'GlobalLoading',
+	data() {
+		return {
+			isLoading: false
+		}
+	},
+	methods: {
+		show() {
+			this.isLoading = true;
+		},
+		hide() {
+			this.isLoading = false;
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.global-loading-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 9999;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.loading-spinner {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 30px;
+	background: white;
+	border-radius: 10px;
+}
+
+.spinner {
+	width: 50px;
+	height: 50px;
+	border: 5px solid #f3f3f3;
+	border-top: 5px solid #7B61FF;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+.loading-text {
+	margin-top: 15px;
+	font-family: 'Poppins-Medium', serif;
+	color: #7B61FF;
+}
+
+@keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+</style>