refactor(components): blankLayout引入GlobalContent

This commit is contained in:
Soybean
2021-11-24 23:44:39 +08:00
parent 32aa5ee75a
commit 1ffb75afce
63 changed files with 64 additions and 50 deletions

View File

@ -58,7 +58,11 @@ const modules: LoginModule[] = [
{ key: 'bind-wechat', label: EnumLoginModule['bind-wechat'], component: BindWechat }
];
const bgColor = computed(() => mixColor('#ffffff', theme.themeColor, 0.3));
const bgColor = computed(() => {
const COLOR_WHITE = '#ffffff';
const ratio = theme.darkMode ? 0.6 : 0.3;
return mixColor(COLOR_WHITE, theme.themeColor, ratio);
});
</script>
<style scoped>
.login-bg {

View File

@ -0,0 +1,19 @@
<template>
<header class="flex-y-center justify-between h-78px px-24px bg-light dark:bg-dark shadow-sm">
<div class="flex-y-center h-full">
<system-logo class="w-48px h-48px mr-12px" :color="theme.themeColor" />
<n-gradient-text size="32">Soybean 网址导航</n-gradient-text>
</div>
<theme-switch :dark="theme.darkMode" @update="handleDarkMode" />
</header>
</template>
<script setup lang="ts">
import { NGradientText } from 'naive-ui';
import { SystemLogo, ThemeSwitch } from '@/components';
import { useThemeStore } from '@/store';
const theme = useThemeStore();
const { handleDarkMode } = useThemeStore();
</script>
<style scoped></style>

View File

@ -0,0 +1,3 @@
import WebsiteHeader from './WebsiteHeader.vue';
export { WebsiteHeader };

View File

@ -1,22 +1,12 @@
<template>
<div>
<header class="flex-y-center justify-between h-78px px-24px bg-light dark:bg-dark shadow-sm">
<div class="flex-y-center">
<system-logo class="w-48px h-48px mr-12px" :color="theme.themeColor" />
<n-gradient-text size="32">Soybean 网址导航</n-gradient-text>
</div>
<theme-switch :dark="theme.darkMode" @update="handleDarkMode" />
</header>
<website-header />
<n-space :vertical="true"></n-space>
</div>
</template>
<script setup lang="ts">
import { NSpace, NGradientText } from 'naive-ui';
import { SystemLogo, ThemeSwitch } from '@/components';
import { useThemeStore } from '@/store';
const theme = useThemeStore();
const { handleDarkMode } = useThemeStore();
import { NSpace } from 'naive-ui';
import { WebsiteHeader } from './components';
</script>
<style scoped></style>