<script setup>
import { ref } from 'vue'
import { useTenantStore } from '@/stores/tenantStore'
import LayoutHeaderUl from './LayoutHeaderUl.vue'

const tenantStore = useTenantStore()

const tenantName = ref(tenantStore.tenantInfo.companyName || '校本资源平台')
</script>

<template>
  <header class='app-header'>
    <div class="container">
      <h1 class="logo">
        <RouterLink to="/">{{ tenantName }}</RouterLink>
      </h1>

      <LayoutHeaderUl />
    </div>
    <div class="bg-img"></div>
  </header>
</template>


<style scoped lang='scss'>
.app-header {
  position: relative;

  .bg-img {
    position: absolute;
    height: 800px;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -999;
    background: url('@/assets/images/home-bg.png');
  }

  .logo {
    width: 400px;

    a {
      font-size: 32px;
      color: #fff;
      display: block;
      line-height: 150px;
      height: 150px;
      width: 100%;
    }
  }
}
</style>