样式和结构调整

src/assets/styles/index.scss

@@ -173,12 +173,12 @@
 }
 
 .btn-main {
-	font-size: 20px;
-	width: 123px;
-	height: 40px;
+	font-size: 20px !important;
+	width: 123px !important;
+	height: 40px !important;
 	text-align: center;
 	background: url('../images/buttons/btn-main.png') !important;
-	background-size: 100%;
+	background-size: 100% 100% !important;
 	border: none !important;
 	.is-disabled {
 		opacity: 0.4;
@@ -186,10 +186,10 @@
 }
 
 .btn-secondary {
-	font-size: 18px;
-	min-width: 80px;
-	height: 40px;
-	padding: 0 15px 4px;
+	font-size: 18px !important;
+	min-width: 80px !important;
+	height: 40px !important;
+	padding: 0 15px 4px !important;
 	background: url('../images/buttons/btn-secondary.png') no-repeat !important;
 	background-size: 100% 100% !important;
 	border: none !important;
@@ -197,8 +197,8 @@
 		opacity: 0.4;
 	}
 	&.small {
-		font-size: 16px;
-		height: 34px;
+		font-size: 16px !important;
+		height: 34px !important;
 	}
 }
 

src/assets/styles/loading.scss

@@ -1,72 +1,194 @@
 .global-loader {
-  position: absolute;
-  top: 50%;
-  color: #ffffff;
-  font-size: 20px;
-  margin: 0 auto;
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  position: relative;
-  text-indent: -9999em;
-  -webkit-animation: load4 1.3s infinite linear;
-  animation: load4 1.3s infinite linear;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-  z-index: 999;
+	color: #ffffff;
+	font-size: 20px;
+	width: 1em;
+	height: 1em;
+	border-radius: 50%;
+	-webkit-animation: load4 1.3s infinite linear;
+	animation: load4 1.3s infinite linear;
+	-webkit-transform: translateZ(0);
+	-ms-transform: translateZ(0);
+	transform: translateZ(0);
 }
 @-webkit-keyframes load4 {
-  0%,
-  100% {
-    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
-  }
-  12.5% {
-    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-  25% {
-    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-  37.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-  50% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-  62.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
-  }
-  75% {
-    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
-  }
-  87.5% {
-    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
-  }
+	0%,
+	100% {
+		box-shadow:
+			0 -3em 0 0.2em,
+			2em -2em 0 0em,
+			3em 0 0 -1em,
+			2em 2em 0 -1em,
+			0 3em 0 -1em,
+			-2em 2em 0 -1em,
+			-3em 0 0 -1em,
+			-2em -2em 0 0;
+	}
+	12.5% {
+		box-shadow:
+			0 -3em 0 0,
+			2em -2em 0 0.2em,
+			3em 0 0 0,
+			2em 2em 0 -1em,
+			0 3em 0 -1em,
+			-2em 2em 0 -1em,
+			-3em 0 0 -1em,
+			-2em -2em 0 -1em;
+	}
+	25% {
+		box-shadow:
+			0 -3em 0 -0.5em,
+			2em -2em 0 0,
+			3em 0 0 0.2em,
+			2em 2em 0 0,
+			0 3em 0 -1em,
+			-2em 2em 0 -1em,
+			-3em 0 0 -1em,
+			-2em -2em 0 -1em;
+	}
+	37.5% {
+		box-shadow:
+			0 -3em 0 -1em,
+			2em -2em 0 -1em,
+			3em 0em 0 0,
+			2em 2em 0 0.2em,
+			0 3em 0 0em,
+			-2em 2em 0 -1em,
+			-3em 0em 0 -1em,
+			-2em -2em 0 -1em;
+	}
+	50% {
+		box-shadow:
+			0 -3em 0 -1em,
+			2em -2em 0 -1em,
+			3em 0 0 -1em,
+			2em 2em 0 0em,
+			0 3em 0 0.2em,
+			-2em 2em 0 0,
+			-3em 0em 0 -1em,
+			-2em -2em 0 -1em;
+	}
+	62.5% {
+		box-shadow:
+			0 -3em 0 -1em,
+			2em -2em 0 -1em,
+			3em 0 0 -1em,
+			2em 2em 0 -1em,
+			0 3em 0 0,
+			-2em 2em 0 0.2em,
+			-3em 0 0 0,
+			-2em -2em 0 -1em;
+	}
+	75% {
+		box-shadow:
+			0em -3em 0 -1em,
+			2em -2em 0 -1em,
+			3em 0em 0 -1em,
+			2em 2em 0 -1em,
+			0 3em 0 -1em,
+			-2em 2em 0 0,
+			-3em 0em 0 0.2em,
+			-2em -2em 0 0;
+	}
+	87.5% {
+		box-shadow:
+			0em -3em 0 0,
+			2em -2em 0 -1em,
+			3em 0 0 -1em,
+			2em 2em 0 -1em,
+			0 3em 0 -1em,
+			-2em 2em 0 0,
+			-3em 0em 0 0,
+			-2em -2em 0 0.2em;
+	}
 }
 @keyframes load4 {
-  0%,
-  100% {
-    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
-  }
-  12.5% {
-    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-  25% {
-    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-  37.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-  50% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-  62.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
-  }
-  75% {
-    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
-  }
-  87.5% {
-    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
-  }
+	0%,
+	100% {
+		box-shadow:
+			0 -3em 0 0.2em,
+			2em -2em 0 0em,
+			3em 0 0 -1em,
+			2em 2em 0 -1em,
+			0 3em 0 -1em,
+			-2em 2em 0 -1em,
+			-3em 0 0 -1em,
+			-2em -2em 0 0;
+	}
+	12.5% {
+		box-shadow:
+			0 -3em 0 0,
+			2em -2em 0 0.2em,
+			3em 0 0 0,
+			2em 2em 0 -1em,
+			0 3em 0 -1em,
+			-2em 2em 0 -1em,
+			-3em 0 0 -1em,
+			-2em -2em 0 -1em;
+	}
+	25% {
+		box-shadow:
+			0 -3em 0 -0.5em,
+			2em -2em 0 0,
+			3em 0 0 0.2em,
+			2em 2em 0 0,
+			0 3em 0 -1em,
+			-2em 2em 0 -1em,
+			-3em 0 0 -1em,
+			-2em -2em 0 -1em;
+	}
+	37.5% {
+		box-shadow:
+			0 -3em 0 -1em,
+			2em -2em 0 -1em,
+			3em 0em 0 0,
+			2em 2em 0 0.2em,
+			0 3em 0 0em,
+			-2em 2em 0 -1em,
+			-3em 0em 0 -1em,
+			-2em -2em 0 -1em;
+	}
+	50% {
+		box-shadow:
+			0 -3em 0 -1em,
+			2em -2em 0 -1em,
+			3em 0 0 -1em,
+			2em 2em 0 0em,
+			0 3em 0 0.2em,
+			-2em 2em 0 0,
+			-3em 0em 0 -1em,
+			-2em -2em 0 -1em;
+	}
+	62.5% {
+		box-shadow:
+			0 -3em 0 -1em,
+			2em -2em 0 -1em,
+			3em 0 0 -1em,
+			2em 2em 0 -1em,
+			0 3em 0 0,
+			-2em 2em 0 0.2em,
+			-3em 0 0 0,
+			-2em -2em 0 -1em;
+	}
+	75% {
+		box-shadow:
+			0em -3em 0 -1em,
+			2em -2em 0 -1em,
+			3em 0em 0 -1em,
+			2em 2em 0 -1em,
+			0 3em 0 -1em,
+			-2em 2em 0 0,
+			-3em 0em 0 0.2em,
+			-2em -2em 0 0;
+	}
+	87.5% {
+		box-shadow:
+			0em -3em 0 0,
+			2em -2em 0 -1em,
+			3em 0 0 -1em,
+			2em 2em 0 -1em,
+			0 3em 0 -1em,
+			-2em 2em 0 0,
+			-3em 0em 0 0,
+			-2em -2em 0 0.2em;
+	}
 }

src/views/layout/Index.vue

@@ -1,14 +1,8 @@
 <template>
-	<div id="layout" :class="{ loading: layoutStore.globalLoading, 'scene-loading': layoutStore.sceneLoading }">
-		<div v-if="layoutStore.globalLoading || layoutStore.sceneLoading" class="global-loader"></div>
+	<div id="layout">
+		<Loader />
 
-		<div class="loading-text" v-if="loadingText">{{ loadingText }}</div>
-
-		<div class="masking">
-			<div class="m-top"></div>
-			<div class="m-left" :class="{ collapse: layoutStore.leftCollapse }"></div>
-			<div class="m-right" :class="{ collapse: layoutStore.rightCollapse }"></div>
-		</div>
+		<Masking class="masking" />
 
 		<Header class="header" />
 
@@ -16,37 +10,30 @@
 
 		<Footer class="footer" />
 
-		<!-- <UeVideo v-if="layoutStore.sceneType === 'ue'" class="scene" />
-		<MapView v-if="layoutStore.sceneType === 'gis'" class="scene" /> -->
+		<UeVideo v-if="layoutStore.sceneType === 'ue'" class="scene" />
+		<MapView v-if="layoutStore.sceneType === 'gis'" class="scene" />
 	</div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import Header from './cpns/Header.vue'
 import HomePage from '@/views/home/Home.vue'
 import UeVideo from '@/components/UeVideo.vue'
 import MapView from '@/components/MapView.vue'
 import useLayoutStore from '@/store/layout'
 import Footer from './cpns/Footer.vue'
+import Masking from './cpns/Masking.vue'
+import Loader from './cpns/Loader.vue'
 
 const layoutStore = ref(useLayoutStore())
 
-const loadingText = computed(() => {
-	let res = ''
-	if (typeof layoutStore.value.globalLoading === 'string') res = layoutStore.value.globalLoading
-	if (typeof layoutStore.value.sceneLoading === 'string') res = layoutStore.value.sceneLoading
-	return res
-})
-
 // 禁用默认右键菜单
 document.oncontextmenu = new Function('event.returnValue=false;')
 document.onselectstart = new Function('event.returnValue=false;')
 </script>
 
 <style lang="scss" scoped>
-@use '@/assets/styles/loading.scss';
-
 #layout {
 	position: relative;
 	width: 100%;
@@ -56,31 +43,6 @@ document.onselectstart = new Function('event.returnValue=false;')
 	color: #fff;
 	user-select: none;
 
-	&.loading::after,
-	&.scene-loading::after {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		background-color: rgba($color: #000000, $alpha: 0.55);
-		z-index: 99;
-	}
-
-	.loading-text {
-		position: absolute;
-		top: 60%;
-		left: 50%;
-		transform: translateX(-50%);
-		z-index: 100;
-		font-size: 18px;
-	}
-
-	&.scene-loading::after {
-		z-index: 2;
-	}
-
 	.header,
 	.footer {
 		z-index: 4;
@@ -106,52 +68,7 @@ document.onselectstart = new Function('event.returnValue=false;')
 	}
 
 	.masking {
-		position: absolute;
-		width: 100%;
-		height: 0;
 		z-index: 3;
-		pointer-events: none;
-
-		& > div {
-			position: absolute;
-			top: 0;
-			transition:
-				left 0.5s ease-out,
-				right 0.5s ease-out;
-		}
-
-		.m-top {
-			left: 0;
-			width: 100%;
-			height: 120px;
-			background: linear-gradient(0deg, rgba(0, 17, 50, 0), rgba(0, 17, 51, 0.6), rgba(0, 17, 50, 0.8));
-		}
-
-		.m-left,
-		.m-right {
-			// width: calc(var(--aside-width) + 50px);
-			width: var(--aside-width);
-			height: 100vh;
-			pointer-events: none;
-		}
-
-		.m-left {
-			left: 0;
-			background: linear-gradient(to left, rgba(0, 17, 50, 0), rgba(0, 17, 51, 0.5), rgba(0, 17, 50, 0.8));
-			&.collapse {
-				visibility: visible;
-				left: calc(0px - var(--aside-width));
-			}
-		}
-
-		.m-right {
-			right: 0;
-			background: linear-gradient(to right, rgba(0, 17, 50, 0), rgba(0, 17, 51, 0.5), rgba(0, 17, 50, 0.8));
-			&.collapse {
-				visibility: visible;
-				right: calc(0px - var(--aside-width));
-			}
-		}
 	}
 }
 </style>

src/views/layout/cpns/Loader.vue

@@ -0,0 +1,63 @@
+<template>
+	<div
+		v-if="layoutStore.globalLoading || layoutStore.sceneLoading"
+		class="window-loader"
+		:class="{ 'scene-only': layoutStore.sceneLoading }">
+		<div class="global-loader"></div>
+		<div class="loading-mask"></div>
+		<div class="loading-text" v-if="loadingText">{{ loadingText }}</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import useLayoutStore from '@/store/layout'
+
+const layoutStore = ref(useLayoutStore())
+
+const loadingText = computed(() => {
+	let res = ''
+	if (typeof layoutStore.value.globalLoading === 'string') res = layoutStore.value.globalLoading
+	if (typeof layoutStore.value.sceneLoading === 'string') res = layoutStore.value.sceneLoading
+	return res
+})
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/loading.scss';
+
+.window-loader {
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	z-index: 99;
+
+	&.scene-only {
+		z-index: 2;
+	}
+
+	.global-loader {
+		position: absolute;
+		left: calc(50% - 0.5em);
+		top: calc(50% - 0.5em);
+		z-index: 2;
+	}
+
+	.loading-mask {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background-color: rgba($color: #000000, $alpha: 0.55);
+		z-index: 1;
+	}
+
+	.loading-text {
+		position: absolute;
+		top: 58%;
+		left: 50%;
+		transform: translateX(-50%);
+		font-size: 18px;
+		z-index: 2;
+	}
+}
+</style>

src/views/layout/cpns/Masking.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="masking">
+		<div class="m-top"></div>
+		<div class="m-left" :class="{ collapse: layoutStore.leftCollapse }"></div>
+		<div class="m-right" :class="{ collapse: layoutStore.rightCollapse }"></div>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import useLayoutStore from '@/store/layout'
+
+const layoutStore = ref(useLayoutStore())
+</script>
+
+<style lang="scss" scoped>
+.masking {
+	position: absolute;
+	width: 100%;
+	height: 0;
+	pointer-events: none;
+
+	& > div {
+		position: absolute;
+		top: 0;
+		transition:
+			left 0.5s ease-out,
+			right 0.5s ease-out;
+	}
+
+	.m-top {
+		left: 0;
+		width: 100%;
+		height: 120px;
+		background: linear-gradient(0deg, rgba(0, 17, 50, 0), rgba(0, 17, 51, 0.6), rgba(0, 17, 50, 0.8));
+	}
+
+	.m-left,
+	.m-right {
+		// width: calc(var(--aside-width) + 50px);
+		width: var(--aside-width);
+		height: 100vh;
+		pointer-events: none;
+	}
+
+	.m-left {
+		left: 0;
+		background: linear-gradient(to left, rgba(0, 17, 50, 0), rgba(0, 17, 51, 0.5), rgba(0, 17, 50, 0.8));
+		&.collapse {
+			visibility: visible;
+			left: calc(0px - var(--aside-width));
+		}
+	}
+
+	.m-right {
+		right: 0;
+		background: linear-gradient(to right, rgba(0, 17, 50, 0), rgba(0, 17, 51, 0.5), rgba(0, 17, 50, 0.8));
+		&.collapse {
+			visibility: visible;
+			right: calc(0px - var(--aside-width));
+		}
+	}
+}
+</style>