<!--  -->
<template>
  <div class="nav-bar">
    <van-nav-bar :title="title" :fixed="true" z-index="998" @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        <van-icon :name="LeftIcon" size="36" />
      </template>
      <template #right>
        <van-icon :name="RightIcon" dot size="28" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import LeftIcon from '@/assets/icons/1_75.png';
import RightIcon from '@/assets/icons/1_30.png';
export default {
  components: {},
  name: 'NavBar',
  props: {
    title: {
      type: String,
      default: '吕子宣 LV 10'
    }
  },
  data() {
    return {
      LeftIcon,
      RightIcon
    };
  },
  created() {},
  mounted() {},
  methods: {
    onClickLeft(value) {
      this.$emit('on-click-left', value);
    },
    onClickRight(value) {
      this.$emit('on-click-right', value);
    }
  }
};
</script>
<style scoped lang="scss">
.nav-bar {
  position: absolute !important;
  left: 0;
  top: 0;
  height: 100px;
  width: 100%;
}

/* @import url(); 引入css类 */
</style>
