<template>
  <div>
    <div v-if="flag" class="back" @click="back">
      <span class="goBack"> {{tag}} </span>
    </div>
      <el-button class="btnBack" v-else icon="el-icon-back" circle @click="back" title="返回"></el-button>
  </div>
</template>

<script>

export default {
  name: 'backButton',
  props: {
    flag: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      tag: '<'
    }
  },
  methods: {
    back () {
      this.$emit('back')
    }
  }
}
</script>

<style scoped>
  .back {
    z-index: 9999;
    position: fixed;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    text-align: center;
    line-height: 40px;
    height: 40px;
    width: 40px;
    opacity:0.5;
    background-color: rgba(0,0,0,.5);
  }
  .back:HOVER {
    opacity:1;
  }
  .goBack {
    height: 40px;
    width: 40px;
    font-family: 宋体;
    font-size: 24px;
    color: #fff;
  }
  .btnBack {
    /*font-size: px;*/
    color: #1e90fd;
    float: left;
    background-color: #e7f3fe;
    border: #c0e0fe 1px solid;
  }
  .btnBack:HOVER {
    /*font-size: px;*/
    color: #ffffff;
    float: left;
    background-color: #1e90fd;
    border: #c0e0fe 1px solid;
  }
  .el-button {
    padding: 10px;
  }
</style>
