42 lines
1011 B
Vue
42 lines
1011 B
Vue
<template>
|
|
<div class="app-container" :style="containerStyle">
|
|
<div class="app-content" :style="scaleStyle">
|
|
<router-view v-slot="{ Component }">
|
|
<KeepAlive :include="cachedNames">
|
|
<component :is="Component" />
|
|
</KeepAlive>
|
|
</router-view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useScale } from '@/composables/useScale'
|
|
import { computed } from 'vue'
|
|
|
|
// 使用等比例缩放hook
|
|
const { scaleStyle } = useScale()
|
|
|
|
// 容器样式
|
|
const containerStyle = {
|
|
width: '100vw',
|
|
height: '100vh',
|
|
overflow: 'hidden',
|
|
position: 'relative' as const,
|
|
background: '#000'
|
|
}
|
|
|
|
// 只缓存技能树页
|
|
const cachedNames = computed(() => ['SkillPage', 'Work'])
|
|
</script>
|
|
|
|
<style>
|
|
#app {
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
|
|
'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
</style>
|