<script lang="ts" setup>
import avatar from '@/assets/newimg/avatar.png'
import { computed, onMounted, ref } from 'vue'
import { logoutApi } from '@/api/login'
import { logoutHandler } from '@/utils/logout'
const logout = async () => {
  await logoutApi()
  logoutHandler()
}
onMounted(() => {
})
</script>

<template>
  <el-header class="header-flex">
    <img :src="avatar" alt="">
    <div class="username">欢迎！zhangsan</div>
    <div class="line">|</div>
    <img src="@/assets/newimg/exit.png" alt="" @click="logout" style="cursor: pointer;">
  </el-header>
</template>

<style lang="less" scoped>
.header-flex{
  display: flex;
  align-items: center;
}
.line{
  margin: 0 15px;
  color: #fff;
}
.username{
  font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #F2F4F5;
    padding-left: 10px;

}
</style>
