<template>
    <div class="ht-base-page-header-artical">
        <ht-base-breadcrumb>
            当前位置：
            <ht-base-breadcrumb-item v-for="(i,index) in breadcrumbArray" :key='index' :to="i.to">{{i.text}}
            </ht-base-breadcrumb-item>
        </ht-base-breadcrumb>
        <div class="ht-page-header-heading">
            <span class="ht-page-header-heading-title">{{title}}</span>
            <span class="ht-page-header-heading-sub-title">{{subTitle}}</span>
        </div>
        <div class="ht-page-header-content">
            <div class="wrap">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HtBasePageHeaderArtical',
        props: {
            breadcrumbArray: {
                type: Array,
                default: () => []
            },
            title: {
                type: String,
                default: ''
            },
            subTitle: {
                type: String,
                default: ''
            },
        },
        methods: {}
    }
</script>
<style lang="less">
    .ht-base-page-header-artical {
        .ht-base-breadcrumb a {
            color: #999999;
        }
        .ht-base-breadcrumb a:hover {
            color: #278EF8;
        }
        .ht-base-breadcrumb > span:last-child{
            font-weight: 400;
            color: #333333;
        }
    }
</style>

