45 lines
1.6 KiB
Vue
45 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { NEl, useThemeVars } from 'naive-ui';
|
|
import { computed } from 'vue';
|
|
import Noise from '../components/Noise.vue';
|
|
|
|
defineProps<{ title?: string; subtitle?: string }>();
|
|
|
|
const themeVars = useThemeVars();
|
|
|
|
// Мягкие цветовые «пятна» фона на основе текущей темы (как в onboard).
|
|
const blobBg = computed(() => {
|
|
const p = themeVars.value.primaryColor;
|
|
const w = themeVars.value.warningColor;
|
|
const i = themeVars.value.infoColor;
|
|
|
|
return [
|
|
`radial-gradient(circle 14vw at 50% -6%, color-mix(in srgb, ${p} 22%, transparent), transparent 100%)`,
|
|
`radial-gradient(circle 18vw at 104% 50%, color-mix(in srgb, ${w} 22%, transparent), transparent 100%)`,
|
|
`radial-gradient(circle 18vw at -6% 104%, color-mix(in srgb, ${i} 22%, transparent), transparent 100%)`,
|
|
].join(', ');
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Noise />
|
|
|
|
<NEl class="relative flex min-h-screen items-center justify-center p-4">
|
|
<div class="pointer-events-none fixed inset-0 z-0">
|
|
<div class="absolute inset-0" :style="`background: ${blobBg};`" />
|
|
<div class="grid-overlay absolute inset-0 opacity-60" />
|
|
</div>
|
|
|
|
<div class="relative z-10 w-full max-w-sm">
|
|
<div v-if="title || subtitle" class="mb-5 text-center">
|
|
<h1 v-if="title" class="text-xl font-semibold">{{ title }}</h1>
|
|
<p v-if="subtitle" class="mt-1 text-sm opacity-70">
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
|
|
<slot />
|
|
</div>
|
|
</NEl>
|
|
</template>
|