1

src/App.vue

@@ -1,8 +1,6 @@
 <template>
 	<main-header />
-	<div class="view" ref="viewRef" :style="{ '--app-view-height': viewHeight + 'px' }">
-		<RouteCache />
-	</div>
+	<div class="view" ref="viewRef" :style="viewStyle"><RouteCache /></div>
 	<login-dialog />
 	<div id="loading" v-if="loading" v-loading="true"></div>
 </template>
@@ -16,10 +14,14 @@
 	const globalStore = useGlobalStore()
 	const loading = computed(() => globalStore.state.loading)
 	const viewRef = ref()
-	const viewHeight = ref(0)
+	const viewStyle = ref({
+		'--app-view-width': '',
+		'--app-view-height': ''
+	})
 	const observer = new ResizeObserver((entries) => {
 		const { width, height } = entries[0].contentRect
-		viewHeight.value = height
+		viewStyle.value['--app-view-width'] = width + 'px'
+		viewStyle.value['--app-view-height'] = height + 'px'
 	})
 	onMounted(() => {
 		observer.observe(viewRef.value)