<template>
    <div class="app-header">
        <div class="left">
          <a class="logo" @click="goHome">
            <el-space>
              <img src="@/assets/logo/logo.svg" alt="">
            </el-space>
          </a>
        </div>
        <div class="right">
          <UserAvatar />
        </div>
    </div>
  </template>

  <script setup lang="ts">
    import UserAvatar from '@/layout/components/top-bar/avatar/index.vue'

    const goHome = () => {
      window.location.href = '/';
    }
  </script>

  <style lang="scss" scoped>
  .app-header {
    background: var(--app-header-bg-color);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    .left a{
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 30px;
      h3{
        color: #000;
        font-size: 22px;
         padding:  0 8px;
      }
    }
    .right{
      padding-right: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  </style>
