<template>
    <div class="module-header">
        <div class="title-main">
            <img src="~@/assets/images/layout/common/module-title-icon.png" alt="" class="title-img" />
            <span class="title-text">{{ title }}</span>
        </div>
        <div class="title-sub">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'modelue-header',
    props: {
        // 标题
        title: {
            type: String,
            default: '',
        },
    },
    data() {
        return {}
    },
}
</script>
<style scoped lang="scss">
.module-header {
    width: 100%;
    height: 25px;
    background: url('@/assets/images/layout/common/module-header-bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;

    .title-main {
        display: flex;
        align-items: center;
    }

    .title-sub {
        display: flex;
        align-items: center;
        margin-right: 30px;
    }

    .title-img {
        height: 14px;
        width: 14px;
        margin-bottom: 12px;
    }

    .title-text {
        font-weight: 700;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 24px;
        margin-bottom: 10px;
        margin-left: 10px;
    }
}
</style>