H5页面中的自定义页面导航头部组件

<template>
  <div class="head app-cantent">
    <div class="head-title">
      <img class="back" src="@/assets/img/home/back.png" @click="handleBackData"/>   
      <div>{{title}}</div>
    </div>
  </div>
</template>

<script>

export default {
  props:{
    title: {
      type: String,
      default: '详情'
    },
 
  },
  data() {
    return {
    };
  },
  mounted() {
  },
  methods:{
    // 返回上一页
    handleBackData() {
      this.$router.go(-1);

    },
  }

}
</script>
<style lang="less" scoped>
.head{
  .head-title{
    position: relative;
    display: flex;
    padding: 20px;
    font-size: 16px;
    background: #2892FF;
    justify-content: center;
    color: #fff;

    .title-item{
      position: relative;
      margin-right: 24px;
      color: rgba(255,255,255,0.7);
      &:last-child{
        margin-right: 0;
      }
      &.title-show{
        font-weight: 600;
        color: #fff;
        &::before{
          position: absolute;
          content: '';
          left: 50%;
          bottom: -40%;
          width: 30px;
          height: 3px;
          transform: translate(-50%,-50%);
          background: #fff;
        }

      }
    }
    .back{
      position: absolute;
      left: 3%;
      top: 42%;
      width: 14px;
      height: 10px;
      transform:rotate(90deg);
      
      z-index: 3333;
    }

  }
    
  
}
</style>