<template>
  <div class="custom-navbar">
    <slot name="left">
      <span @click="back"> <BackSvg></BackSvg></span>
    </slot>
    <div class="custom-navbar-content">
      <slot name="content"> <div></div> </slot>
    </div>
    <slot name="right"> <div class="default-right"></div> </slot>
  </div>
</template>

<script lang="ts" setup>
import BackSvg from '@/assets/svg/login/back.svg?component';
const emit = defineEmits(['routerSubmit']);
const back = () => {
  emit('routerSubmit');
};
</script>

<style lang="less">
@import '@/style/flex.less';
.custom-navbar {
  .dja(space-between);
  height: 6%;
  .default-right {
    width: 20px;
  }
  .custom-navbar-content {
    color: var(--theme-color-4);
  }
}
</style>
