dd_jx_pc/src/components/public/PageHead.vue

<template>
  <div class="PageHead">
      <div class="flex-box-ce">
         <span class="return" @click="routePush?$router.push(routePush):$router.go(-1)">返回</span>
         <span v-if="phName!=''">{{phName}}</span>
         <div v-else class="slot">
           <slot name="headMent"></slot>
         </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'pageHead',
    props:{
      phName:{
        type:String,
        default:''
      },
      routePush:{
        type:String,
        default:null
      }
    },
  data() {
    return {};
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped="scoped" lang="scss">
.PageHead {
  height: 42px;
  font-size: 14px;
  span{
    height: 32px;
    line-height: 32px;
  }
  span:nth-child(1) {
    cursor: pointer;
    width: 42px;
    color: #8f8f8f;
    position: relative;
  }
  span:nth-child(1)::after{
    position: absolute;
    content: " ";
    height: 18px;
    width: 1px;
    background-color: #8f8f8f;
    right: 0px;
    top: 50%;
    margin-top: -9px;
  }
  span:nth-child(1):hover {
    color: #1299f9;
  }
  span:nth-child(2) {
    padding-left: 12px;
    color: #585858;
  }
  .slot{
    margin-left: 12px;
  }
}
</style>