<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "SystemLayoutHeader",
});
</script>

<script setup lang="ts">
import Info from "@/components/Base/Tools/Info/index.vue";

const prefix = "_system-layout-header";
</script>

<template>
  <a-layout-header theme="light" :class="prefix">
    <div :class="`${prefix}-wrapper`">
      <div :class="`${prefix}-wrapper-grid`">
        <Info />
      </div>
      <div :class="`${prefix}-wrapper-grid`">
        <!-- <UserBox /> -->
      </div>
    </div>
  </a-layout-header>
</template>

<style lang="scss" scoped>
$prefix: "_system-layout-header";

.#{$prefix} {
  padding: 0;
  background-color: #fff;
  height: 60px;
  position: reactive;
  z-index: 20;
  box-shadow: 0px 2px 4px 0px rgba(133, 99, 244, 0.2);
  box-sizing: border-box;
  &-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    &-left {
      font-size: 16px;
      color: #333;
    }

    &-right {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }
  }
}
</style>
