header.vue

<style lang="less" >
.vue-2018112102 {
    height: 36px;
    background-color: #444851;
    .title {
        // background: url('../images/logo-26.png') no-repeat;
        background-position: 15px 5px;
        width: 180px;
        background-color: #000000;
        color: #fff;
        // padding-left: 50px;
        font-size: 20px;
        line-height: 36px;
        text-align: center;
    }
    .breadcrumb {
        padding-left: 20px;
        color: #fff;
        font-size: 18px;
        line-height: 36px;
    }
    .info {
        text-align: right;
        color: #fff;
        line-height: 36px;
        padding-right: 20px;
        font-size: 14px;
    }
}
</style>
<template>
    <!--备注-->
    <div class="vue-2018112102 d-box">
        <div class="title" :style="{width:titleWidth}">{{$config.title}}</div>
        <div class="breadcrumb">
            <breadcrumb :breadcrumb="breadcrumb"></breadcrumb> {{$route.meta.pageName}}
        </div>
        <div class="info d-box-flex">
            <slot></slot>
        </div>
    </div>
</template>
<script type="text/javascript">
import breadcrumb from './breadcrumb.vue';
export default {
    props: {
        /**宽度 */
        titleWidth: {
            type: String | Number,
            default: '180px'
        },
        breadcrumb: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data: function () {
        return {
            tuserInfo: {},
            fuwuInfo: {
                codeName: ''
            }
        };
    },
    components: { breadcrumb },
    methods: {},
    watch: {},
    created: async function () {},
    mounted: function () {},
    //计算属性
    computed: {}
};
</script>