<template>
  <div class="header">
    <div class="back-wrapper" @touchend="onBack">
      <div class="back"></div>
    </div>

    <span class="title">{{title}}</span>
  </div>
</template>

<script>
export default {
  name: 'HeaderUfo',
  props: ['title'],
  methods: {
    onBack() {
      this.$yoho.finishPage({});
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 45PX;
  padding-left: 20PX;
  padding-right: 20PX;
  background-color: #fff;
  position: relative;
  text-align: center;

  .back-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    width: 60PX;
    position: absolute;
    left: 20PX;
  }

  .title {
    display: inline-block;
    color: black;
    font-size: 17PX;
    line-height: 45PX;
  }

  .back {
    width: 24PX;
    height: 24PX;
    background: url(~statics/image/order/back@3x.png) no-repeat;
    background-size: cover;
  }
}
</style>