<template>
|
<el-config-provider :locale="zhCn">
|
<div class="h-full bg-gray-50 flex flex-col">
|
<template v-if="!isLoginPage">
|
<AppHeader class="flex-0" />
|
<div class="flex-auto !overflow-y-auto bg-[#f4f4f4]" ref="containerRef">
|
<div class="w-[63%] mx-auto">
|
<router-view></router-view>
|
</div>
|
<AppFooter></AppFooter>
|
</div>
|
</template>
|
<template v-else>
|
<router-view></router-view>
|
</template>
|
</div>
|
</el-config-provider>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, ref, watch } from 'vue';
|
import { useRoute } from 'vue-router';
|
import AppFooter from './components/AppFooter.vue';
|
import AppHeader from './components/AppHeader.vue';
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
const route = useRoute();
|
const containerRef = ref<HTMLDivElement | null>(null);
|
|
// 判断是否是登录页面
|
const isLoginPage = computed(() => {
|
return route.path === '/login';
|
});
|
|
// 监听路由变化，滚动到顶部
|
watch(
|
() => route.path,
|
() => {
|
if (containerRef.value) {
|
containerRef.value.scrollTop = 0;
|
}
|
}
|
);
|
</script>
|
|
<style>
|
#app {
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
</style>
|
