83 lines
2.2 KiB
Vue
Executable File
83 lines
2.2 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { RouterView } from "vue-router";
|
|
import { useFullscreen, useFavicon, useTitle } from "@vueuse/core";
|
|
import zhCn from 'element-plus/dist/locale/zh-cn'
|
|
import FitScreen from "@fit-screen/vue";
|
|
import { NMessageProvider } from "naive-ui";
|
|
import { useUserStore } from "@/stores/modules/user";
|
|
import { NConfigProvider } from 'naive-ui'
|
|
import { zhCN as NZhCN, dateZhCN } from 'naive-ui'
|
|
// 全屏
|
|
const fitscreenRef = ref<HTMLElement | null>(null);
|
|
const { toggle } = useFullscreen(fitscreenRef);
|
|
// console.log(RouterView)
|
|
provide("fullscreen", { toggle });
|
|
// const screenWidth = window.screen.width;
|
|
// const screenHeight = window.screen.height;
|
|
const screenWidth = 1920
|
|
const screenHeight =1080
|
|
const store = useUserStore();
|
|
store.getUser();
|
|
console.log(screenWidth,screenHeight)
|
|
const route = useRoute(); // 获取当前的路由信息
|
|
|
|
const pageClass = computed(() => {
|
|
// console.log(route.name)
|
|
// if (navigator.userAgent.match(/iPad|Android Tablet/i)) {
|
|
// // 这是一个平板设备
|
|
// console.log("平板",navigator.userAgent)
|
|
// } else {
|
|
// // 这不是一个平板设备
|
|
// console.log("电脑")
|
|
// }
|
|
// 根据路由信息返回不同的页面类名
|
|
if (route.name === "Entry") {
|
|
return "bg-#fff"; // 假设关于页的类名为 page-about
|
|
}
|
|
else if(route.name==='DataBase'){
|
|
return 'bg-#fff'
|
|
}
|
|
else if (route.name === "ExternalLogin"||route.name === "Login") {
|
|
return "bg-#f3f3f3"; // 假设关于页的类名为 page-about
|
|
}
|
|
return "page"; // 默认类名
|
|
});
|
|
|
|
const locale = computed(() => zhCn)
|
|
</script>
|
|
|
|
<template>
|
|
<NMessageProvider>
|
|
<FitScreen
|
|
ref="fitscreenRef"
|
|
:width="screenWidth"
|
|
:height="screenHeight"
|
|
mode="fit"
|
|
:class="pageClass"
|
|
>
|
|
<n-config-provider :locale="NZhCN" :date-locale="dateZhCN">
|
|
<el-config-provider :locale="locale">
|
|
<RouterView />
|
|
</el-config-provider>
|
|
</n-config-provider>
|
|
</FitScreen>
|
|
</NMessageProvider>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.page {
|
|
|
|
background-image: url('@/assets/images/bg.jpg');
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.pages{
|
|
background-color: #fff;
|
|
}
|
|
.pagess{
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
</style>
|