<template>
    <div>
        <div class="top">
            <a-menu mode="horizontal" @click="navto">
                <a-menu-item key="/index">
                    <template #icon>
                        <mail-outlined />
                    </template>
                    高考咨询
                </a-menu-item>
                <a-menu-item key="/major">
                    <template #icon>
                        <FileSearchOutlined />
                    </template>
                    查专业
                </a-menu-item>
                <a-menu-item key="/university">
                    <template #icon>
                        <AuditOutlined />>
                    </template>
                    找大学
                </a-menu-item>
                <a-menu-item key="/fillout">
                    <template #icon>
                        <EditOutlined />
                    </template>
                    志愿填报
                </a-menu-item>
            </a-menu>
        </div>
        <div class="body">
            <router-view></router-view>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.top {
    position: sticky;
    z-index: 999;
    top: 0;
}
.body{
    padding: 20px 40px;
}
</style>
<script setup lang="ts">
import { MailOutlined, FileSearchOutlined, AuditOutlined, EditOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

function navto({ key }: { key: string }) {
    console.log(key)
    router.push({ path: key })
}
</script>
