<template>
    <div class="page">
        <n-page-header class="head bg-white dark:bg-black" title="邀请人数" @back="handleBack">
            <template #extra>
                <div class="w-[22px]"></div>
            </template>
        </n-page-header>

        <commission-pannel></commission-pannel>
    </div>
</template>

<script setup lang="ts">
import { CommissionPannel } from '@/components/common'
import { NCard, NEl, NPageHeader, NRow, NCol, NGrid, NGridItem, NButton, NIcon } from 'naive-ui'
import { useRouter } from 'vue-router'

const router = useRouter()
function handleBack() {
    router.back()
}
</script>

<style lang="less" scoped>
:deep(.n-page-header) {
    height: 50px;
    padding: 0 22px;
    .n-page-header__main {
        flex-grow: 1;
        .n-page-header__title {
            flex-grow: 1;
            text-align: center;
        }
    }
}

.head {
    // background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}
</style>
