85 lines
1.9 KiB
Vue
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> |