JSL_OrganizeInternalOAWeb_Archive/src/manager/header.vue

<template>
    <div class="top-nav" style="height: 8vh;">
        <div class="logo">
            <span style="color:white">Logo</span>
        </div>
        <div style="color: #f5f7f9;font-size: 30px;position: relative;left:40%">内部系统管理界面</div>
        <div class="user-profile" style="left: -100px;">

            <div style="color: #f5f7f9">
                <img class="userimg" alt="" src="../assets/images/img1.jpg">
            </div>
            <span class="username">{{ username }}</span>
            <Dropdown trigger="click" style="margin-left: 20px">
                <a href="javascript:void(0)">
                    <Icon type="md-exit" class="iconexit" style="color: #f5f7f9;font-size: 20px"></Icon>
                </a>
                <template #list class="exit">
                    <DropdownMenu>
                        <DropdownItem @click="navigateTo('../components/login')">退出</DropdownItem>
                    </DropdownMenu>
                </template>
            </Dropdown>
        </div>
    </div>
</template>

<script>
import { Dropdown, DropdownItem, DropdownMenu, Icon, Image } from "view-ui-plus";

export default {
    components: { Icon, DropdownItem, DropdownMenu, Dropdown, Image },
    data() {
        return {
            username: "John Doe",
            avatarUrl: "path_to_avatar",
            dropdownVisible: false
        };
    },
    methods: {
        goToHomePage() {
            // 处理回到首页的逻辑
        },
        handleDropdownVisibleChange(visible) {
            this.dropdownVisible = visible;
        },
        logout() {
            // 处理退出登录的逻辑
        },
        navigateTo(path) {
            this.$router.push(path);
        }
    }
};
</script>

<style scoped>
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: #515A6E;
    padding: 0 20px;
    position: relative;
}

.logo {
    font-size: 24px;
    position: absolute;
    left: 100px;
}

.user-profile {
    position: relative;
    display: flex;
    flex-direction: row;
    text-align: center;
}

.username {
    margin-left: 10px;
    color: white;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    padding-right: 10px;
}

.userimg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.exit {
    position: relative;
    top: 20px;
    left:50px;
}

.iconexit {
    position: relative;
    top: 15px;
    left: -20px;
}
</style>