122 lines
3.7 KiB
Vue
Executable File
122 lines
3.7 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.mjs'
|
|
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'
|
|
import VScaleScreen from 'v-scale-screen'
|
|
import img from '@/assets/images/bg.jpg'
|
|
// 全屏
|
|
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
|
|
// console.log('🚀 ~ screenWidth:', screenWidth)
|
|
// console.log('🚀 ~ screenHeight:', screenHeight)
|
|
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 pageStyle = computed(() => {
|
|
// 根据路由信息返回不同的页面样式
|
|
if (route.name === 'Entry') {
|
|
return { 'background-color': '#fff !important' } // 假设关于页的类名为 page-about
|
|
} else if (route.name === 'DataBase') {
|
|
return { 'background-color': '#fff !important' }
|
|
} else if (route.name === 'ExternalLogin' || route.name === 'Login') {
|
|
return { 'background-color': '#f3f3f3 !important' } // 假设关于页的类名为 page-about
|
|
}
|
|
return {
|
|
'background-image': `url(${img}) !important`,
|
|
'background-position': '0 0',
|
|
'background-repeat': 'no-repeat',
|
|
'background-size': 'cover'
|
|
} // 默认类名
|
|
})
|
|
|
|
const locale = computed(() => zhCn)
|
|
|
|
const scaleChange = ({ widthRatio, heightRatio }: { widthRatio: number; heightRatio: number }) => {
|
|
console.log('scaleChange', widthRatio, heightRatio)
|
|
}
|
|
const beforeCalculate = (scale) => {
|
|
console.log('🚀 ~ scale:', scale)
|
|
return false
|
|
}
|
|
// ref="fitscreenRef"
|
|
// :width="screenWidth"
|
|
// :height="screenHeight"
|
|
// mode="fit"
|
|
// :class="pageClass"
|
|
// executeMode="debounce"
|
|
// waitTime="300"
|
|
// @scaleChange="scaleChange"
|
|
// :beforeCalculate="beforeCalculate"
|
|
</script>
|
|
|
|
<template>
|
|
<NMessageProvider>
|
|
<VScaleScreen
|
|
ref="fitscreenRef"
|
|
:width="screenWidth"
|
|
:height="screenHeight"
|
|
mode="fit"
|
|
:box-style="pageStyle"
|
|
>
|
|
<!-- <div :class="pageClass"> -->
|
|
<n-config-provider :locale="NZhCN" :date-locale="dateZhCN">
|
|
<el-config-provider :locale="locale">
|
|
<RouterView />
|
|
</el-config-provider>
|
|
</n-config-provider>
|
|
<!-- </div> -->
|
|
</VScaleScreen>
|
|
</NMessageProvider>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.fit-screen {
|
|
text-rendering: optimizeLegibility !important;
|
|
}
|
|
.page,
|
|
.v-screen-box {
|
|
// background-image: url('@/assets/images/bg.jpg') !important;
|
|
// background-position: 0 0;
|
|
// background-repeat: no-repeat;
|
|
// background-size: cover;
|
|
}
|
|
.pages {
|
|
background-color: #fff;
|
|
}
|
|
.pagess {
|
|
background-color: #f3f3f3;
|
|
}
|
|
</style>
|