<template>
  <div>
    <div class="title-box" @click="goBack">
      <van-icon name="arrow-left"  class="left-btn"/>
      <div class="text">返回</div>
      <div class="title">{{ title }}</div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant'
export default {
  name: 'topTitle',
  props: {
    title: String
  },
  components: {
    [Icon.name]: Icon
  },
  methods: {
    goBack() {
      if (this.$route.name === 'details') {
        this.$router.push({
          path: '/index'
        })
        return
      }
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  width: 4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  color: #222222;
  font-size: .3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.left-btn{
  padding-left: .38rem;
}
.title-box{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 1rem;
  background: #fff;
  color: #0075FF;
  .text{
    font-size: .24rem;
    margin-left: .1rem;
  }
}
</style>
