2024-03-02 23:46:55 +08:00

85 lines
1.9 KiB
Vue

<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>