<template>
  <div
    class="page-title"
    :class="{ 'show-border-buttom': showBorderBottom }"
    @click="onClickBack"
  >
    <i class="el-icon-back" v-if="showIcon"></i>
    <span>{{ title }}</span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    //   内页标题
    title: {
      default: ""
    },
    // 是否显示返回图标
    showIcon: {
      default: true
    },
    // 是否显示底部分割线
    showBorderBottom: {
      default: true
    },
    //跳转的地址，默认-1(返回上一个页面)
    // BackURL:{
    //   type:String,
    //   default:-1,
    // }
  },
  methods: {
    onClickBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.page-title {
  width: 100%;
  height: 3.75rem;
  padding-left: 2.5rem;
  color: #0c2278;
  background:  #f5f5f5;;
  line-height: 3;
  font-weight: 800;
  font-size: 1.25rem;
  .show-border-buttom {
    border-bottom: #0079fe 0.15rem solid;
    margin-bottom: 1rem;
  }
  .el-icon-back {
    cursor: pointer;
    border: 0.0625rem solid #0c2278;
    border-radius: 100%;
    margin-right: 1.25rem;
    transform: scale(1.2, 1.2);
  }
}
</style>
