IntelliClass_FE/components/app/Container.vue

35 lines
862 B
Vue

<script lang="ts" setup>
import { twMerge } from 'tailwind-merge'
import type { NavSecondaryItem } from '../nav/Secondary.vue'
defineProps<{
navSecondary?: NavSecondaryItem[]
contentClass?: string
}>()
</script>
<template>
<div class="flex flex-1 flex-col p-8 page-bg-gradient">
<!-- <h1 class="pl-2 text-xl font-medium">外部标题</h1> -->
<slot name="subnav">
<NavSecondary
v-if="navSecondary && navSecondary.length"
:navs="navSecondary"
/>
</slot>
<div
class="h-full rounded-lg shadow-sm overflow-hidden"
:class="twMerge('bg-white dark:bg-neutral-900 p-8 z-20', contentClass)"
>
<slot />
</div>
</div>
</template>
<style scoped>
.page-bg-gradient {
@apply bg-gradient-to-br from-[#D5DEF9]/50 to-[#D6C9F9]/50;
@apply dark:from-[#36477A]/50 dark:to-[#7C6DA6]/50;
}
</style>