111

src/App.vue

@@ -1,18 +1,32 @@
 <template>
 	<main-header />
-	<div class="view"><RouteCache /></div>
+	<div class="view" ref="viewRef" :style="{ '--app-view-height': viewHeight + 'px' }">
+		<RouteCache />
+	</div>
 	<login-dialog />
 	<div id="loading" v-if="loading" v-loading="true"></div>
 </template>
 
 <script setup lang="ts">
-	import { computed } from 'vue'
+	import { computed, onMounted, ref, onBeforeUnmount } from 'vue'
 	import RouteCache from '@/components/RouteCache.vue'
 	import MainHeader from '@/views/main-header.vue'
 	import LoginDialog from '@/views/login/login-dialog.vue'
 	import { useGlobalStore } from '@/stores'
 	const globalStore = useGlobalStore()
 	const loading = computed(() => globalStore.state.loading)
+	const viewRef = ref()
+	const viewHeight = ref(0)
+	const observer = new ResizeObserver((entries) => {
+		const { width, height } = entries[0].contentRect
+		viewHeight.value = height
+	})
+	onMounted(() => {
+		observer.observe(viewRef.value)
+	})
+	onBeforeUnmount(() => {
+		observer.disconnect()
+	})
 </script>
 
 <style lang="less">

src/views/login/login-dialog.vue

@@ -135,10 +135,17 @@
 	.el-dialog.login-dialog {
 		--el-dialog-border-radius: 0;
 		--el-dialog-padding-primary: 0;
-	}
-	.login-dialog-content {
 		width: 90rem;
 		height: 62rem;
+		.el-dialog__body {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.login-dialog-content {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
 		position: relative;
 		> .bg {
 			width: 100%;