78 lines
1.7 KiB
Vue
78 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
|
|
import Toolbar from "@/components/Toolbar/Toolbar.vue";
|
|
import Type from "@/components/Type.vue";
|
|
import Side from "@/components/Side.vue";
|
|
import Statistics from "@/components/Modal/Statistics.vue";
|
|
import Backgorund from "@/components/Backgorund.vue";
|
|
import {onMounted} from "vue";
|
|
import {useBaseStore} from "@/stores/base.ts";
|
|
|
|
const store = useBaseStore()
|
|
// 查询当前系统主题颜色
|
|
const match: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
|
|
// 监听系统主题变化
|
|
match.addEventListener('change', followSystem)
|
|
|
|
function followSystem() {
|
|
const theme = match.matches ? 'dark' : 'light'
|
|
document.documentElement.setAttribute('data-theme', theme)
|
|
}
|
|
|
|
onMounted(() => {
|
|
store.init()
|
|
if (store.theme !== 'auto') {
|
|
document.documentElement.setAttribute('data-theme', store.theme)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <Backgorund/>-->
|
|
<div class="main-page">
|
|
<div class="center">
|
|
<Toolbar/>
|
|
<div class="content">
|
|
<Type/>
|
|
</div>
|
|
<Side/>
|
|
</div>
|
|
<Statistics></Statistics>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/assets/css/colors.scss";
|
|
|
|
.main-page {
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 100vw;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-size: 14rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: var(--color-main-bg);
|
|
|
|
.center {
|
|
width: 70vw;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
//border: 1px solid gray;
|
|
position: relative;
|
|
|
|
.content {
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|