platformFront/src/components/common/Crumbs.vue

<template>
    <div class="container clearfix" :style="{'minWidth':minWidth?minWidth:'980px'}">
        <img v-if="linkTo" class="return-btn fl" src="../../images/return.png" alt="返回按钮" @click="goBack">
        <h4 class="fl">{{title}}</h4>
        <div class="contents fr">
            <slot></slot>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'crumbs',
    props: ['title','linkTo','minWidth','param'],//minWidth-有些头部选项比较多，最小宽度需要调整
    data: function () {
      return {}
    },
    methods:{
      goBack(){
        this.$router.push({
          name:this.linkTo,
          params:this.param
        });
      }
    }
  }
</script>

<style lang="less" scoped>
    @import "../../less/common.less";

    div.container {
        width: calc(100% - 50px);
        height: 40px;
        background: #fff;
        padding: 0 20px 0 30px;
        margin-bottom: 20px;
        line-height: 40px;
        position: absolute;
        z-index: 5;
        // min-width: 980px;
    }

    .return-btn{
        margin: 11px 5px 0 0;
        cursor: pointer;
    }

    h4 {
        font-size: 15px;
    }
</style>