<template>
  <div class="navbar">
    <van-nav-bar :title="title" fixed :border="false" :left-arrow="!hideBackNav"  z-index="0" class="nav-bar"  @click-left="Onleftclick" >
    </van-nav-bar>
  </div>
</template>

<script>

export default {
  name: 'navbar',
  props: {
    title: {
      type: String,
      default: ''
    },
    hideBackNav:{
      type:Boolean,
      default:false
    }
  },
  setup(props,context) {
    const Onleftclick = ()=>{
      context.emit('leftclick')
    }
    return {
      Onleftclick
    }
  }
}
</script>

<style lang="less" scoped>
.navbar {
  text-align: center;
  font-size: 16px;
  height: 57px;
  font-weight: 500;
  background: #fafafa;
  -webkit-font-smoothing: subpixel-antialiased;
  .nav-bar {
    font-size: 13px;
    height: 24px;
    // line-height: 75px;
    top: 25px;
  }
  .icons {
    position: absolute;
    left: 20px;
    top: 30%;
    height: 20px;
    font-size: 20px;
    line-height: 24px;
  }
  :deep(.van-nav-bar) {
    background: rgba(0,0,0,0);
  }
  :deep(.van-nav-bar .van-icon) {
    color: #303133;
    font-size: 24px;
  }
  :deep(.van-nav-bar__left) {
    padding: 0 17px;
    height: 20px;
  }
  :deep(.van-nav-bar__title) {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    height: 24px;
    line-height: 24px;
  }
  :deep(.van-nav-bar__content) {
    height: 24px;
    background: rgba(0,0,0,0);
  }
  :deep(.van-hairline--bottom::after) {
    border-bottom-width: 0;
  }
}
</style>
