<!--  -->
<template>
    <div class="smallNav">
      <span @click="handleBack" class="smallNav-back a">返回</span>
      <span v-if="showTitle" class="commonFont smallNav-title commonFont">{{title}}</span>
      <slot name='content'></slot>
    </div>
</template>

<script>
export default {
  props: {
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {

    }
  },
  computed: {
    title () {
      return this.$route.meta.title || ''
    }
  },
  beforeMount () {},
  mounted () {},
  methods: {
    handleBack () {
      this.$router.go(-1)
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.smallNav{
  height: 40px;
  display: flex;
  align-items: center;
  &-back{
    padding-right: 10px;
    margin-right: 10px;
    color: #aaaaaa;
    cursor: pointer;
  }
  &-title{
    padding: 0 10px;
    position: relative;

  }
  .a{
    position: relative;
  }
  .a::before{
      content:"";
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 80%;
      // background: red;
      border-right: 1px solid #aaaaaa;
    }
}
</style>
