PageHeader.vue

<template>
    <div :class="['page-header', layout, pageWidth]">
        <a-breadcrumb>
            <a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
                <span>{{ item }}</span>
            </a-breadcrumb-item>
        </a-breadcrumb>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'PageHeader',
    props: {
        title: {
            type: [String, Boolean],
            required: false,
        },
        breadcrumb: {
            type: Array,
            required: false,
        },
        logo: {
            type: String,
            required: false,
        },
        avatar: {
            type: String,
            required: false,
        },
    },
    computed: {
        ...mapState('settingModule', ['layout', 'showPageTitle', 'pageWidth']),
    },
};
</script>

<style lang="less" scoped>
.page-header {
    padding: 16px 24px;

    &.head.fixed {
        margin: auto;
        max-width: 1400px;
    }
}
</style>