<template xmlns="">
    <div class="header">
        <a-button class="logo" ghost>LOGO</a-button>
        <div class="centered-text">内部系统管理界面</div>
        <div class="avatar-container">
            <a-avatar :size="64" @click="$toggleDropdown">
                <a-image :size="64" src="../views/images/img1.jpg"></a-image>
            </a-avatar>
<!--            下拉框-->
            <div v-if="$dropdownVisible" class="dropdown">
                <div class="dropdown-content">
                   <div>
                       <a href="/LoginRegister/Login">退出<LogoutOutlined /></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue';
import {LogoutOutlined,} from '@ant-design/icons-vue';

const $dropdownVisible = ref(false);

function $toggleDropdown() {
    $dropdownVisible.value = !$dropdownVisible.value;
}
</script>

<style scoped>
.header {
    position: relative;
    /*background: rgb(68, 112, 131);*/
    background: #508bf3;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    border: none;
    font-size: 25px;
    font-weight: bold;
    display: flex;
}

.avatar-container {
    margin-left: auto;
}

.centered-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px;
    font-weight: normal;
    color: white;
}
/*下框*/
.dropdown {
    position: relative;
}

.dropdown .dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #f9f9f9;
    min-width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px;
    z-index: 1;
}
.dropdown-content{
    margin: 0 auto;
}
.dropdown-content>div>a{
text-decoration: none;
color: #508bf3;
}
</style>