policeSecurity/policeManagement/src/components/layout/header/LayoutHeader.vue

33 lines
795 B
Vue

<template>
<div class="flex-justify-between h-f">
<div class="flex-center">
<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
</div>
<div class="margin-right flex-center">
<a-avatar />
</div>
</div>
</template>
<script setup lang="ts">
import { staticRouter } from '@/router/staticRouters'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
const collapsed = defineModel<boolean>('collapsed')
</script>
<style scoped lang="scss">
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
}
.trigger:hover {
color: #1890ff;
}
</style>