<script setup>
  import { navigateBack } from '@/utils/router'

  const props = defineProps({
  })

  const onBack = () => {
    navigateBack()
  }
</script>

<template>
  <view class="nav-bar">
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view class="nav-bar-box">
      <!-- 左侧插槽 -->
      <view @click="onBack">
        <slot name="back"></slot>
      </view>
      <!-- 右侧插槽 -->
       <view>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
  }
  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }

  .nav-bar-box {
    padding: 0 36rpx;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
