50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
||
<el-config-provider :locale="appStore.locale" :size="appStore.size">
|
||
<router-view ref="wrapRef" />
|
||
</el-config-provider>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useSettingsStore } from '@/store/modules/settings';
|
||
import { handleThemeStyle } from '@/utils/theme';
|
||
import { useAppStore } from '@/store/modules/app';
|
||
|
||
const appStore = useAppStore();
|
||
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
// 初始化主题样式
|
||
handleThemeStyle(useSettingsStore().theme);
|
||
});
|
||
});
|
||
|
||
const scale = ref(1);
|
||
// 设计稿宽度（你是多少就写多少，一般 1920）
|
||
const DESIGN_WIDTH = 1920;
|
||
|
||
// 计算缩放
|
||
const setScale = () => {
|
||
const clientWidth = document.documentElement.clientWidth;
|
||
let ratio = clientWidth / DESIGN_WIDTH;
|
||
// 最小缩到 0.7（防止太小看不清）
|
||
if (ratio < 0.7) ratio = 0.7;
|
||
// 最大不超过 1
|
||
if (ratio > 1) ratio = 1;
|
||
scale.value = ratio;
|
||
};
|
||
|
||
// 监听窗口变化
|
||
const resizeListener = () => {
|
||
setScale();
|
||
};
|
||
|
||
onMounted(() => {
|
||
setScale();
|
||
window.addEventListener('resize', resizeListener);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', resizeListener);
|
||
});
|
||
</script>
|