|
@@ -1,5 +1,5 @@
|
|
|
<script setup>
|
|
|
-import { useDark, useToggle, useFullscreen } from '@vueuse/core';
|
|
|
+import { useDark, useToggle, useFullscreen, useWindowSize } from '@vueuse/core';
|
|
|
|
|
|
const { toggle } = useFullscreen()
|
|
|
|
|
@@ -8,32 +8,61 @@ const toggleDark = useToggle(isDark)
|
|
|
|
|
|
const theme = computed(() => isDark.value ? 'dark' : 'light')
|
|
|
const themeVars = {
|
|
|
-
|
|
|
+ 'nav-bar-background': '#0021C9',
|
|
|
+ 'nav-bar-icon-color': '#F5F5F5',
|
|
|
+ 'nav-bar-text-color': '#F5F5F5',
|
|
|
+ 'nav-bar-title-text-color': '#F5F5F5',
|
|
|
}
|
|
|
+
|
|
|
+const { width } = useWindowSize();
|
|
|
+watch(width, () => {
|
|
|
+ if (width.value <= 768) {
|
|
|
+ document.documentElement.style.fontSize = '16px';
|
|
|
+ }
|
|
|
+ if (width.value > 768) {
|
|
|
+ document.documentElement.style.fontSize = '20px';
|
|
|
+ }
|
|
|
+}, {
|
|
|
+ immediate: true
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<van-config-provider :theme="theme" :theme-vars="themeVars"
|
|
|
class="w-screen h-screen bg-light-300 text-dark-900 flex flex-col " :class="isDark && 'bg-dark-800 text-light-900'">
|
|
|
<!-- dark/light mode -->
|
|
|
- <van-nav-bar title="标题">
|
|
|
+ <!-- <van-nav-bar title="标题">
|
|
|
<template #right>
|
|
|
<div @click="toggleDark()" class="text-18px">
|
|
|
<i-carbon-moon v-show="isDark" class="text-light-900" />
|
|
|
<i-carbon-sun v-show="!isDark" class="text-dark-900" />
|
|
|
</div>
|
|
|
</template>
|
|
|
- </van-nav-bar>
|
|
|
+ </van-nav-bar> -->
|
|
|
|
|
|
<!-- fullscreen -->
|
|
|
<!-- <van-nav-bar title="标题" right-text="全屏" @click-right="toggle">
|
|
|
</van-nav-bar> -->
|
|
|
|
|
|
- <div class="overflow-y-auto">
|
|
|
+ <div class="overflow-y-auto w-full">
|
|
|
<router-view></router-view>
|
|
|
</div>
|
|
|
</van-config-provider>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
+<style>
|
|
|
+body {
|
|
|
+ --van-font-size-xs: 0.625rem;
|
|
|
+ --van-font-size-sm: 0.75rem;
|
|
|
+ --van-font-size-md: 0.875rem;
|
|
|
+ --van-font-size-lg: 1rem;
|
|
|
+
|
|
|
+ --van-line-height-xs: 0.875rem;
|
|
|
+ --van-line-height-sm: 1.125rem;
|
|
|
+ --van-line-height-md: 1.25rem;
|
|
|
+ --van-line-height-lg: 1.375rem;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
|