<template>
    <div class="title">
        <div class="left">
            <span class="icon">
                <slot name="icon"></slot>
            </span>
            <slot name="title"></slot>
        </div>
        <div class="right">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.title {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: antiquewhite;
    border-bottom: 1px #3c7bff solid;
    padding: 0 20px;
    background: linear-gradient(90deg, #0A5CC8 3%, #053B7B 95%);

    img {
        display: block;
    }

    .left {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #fff;

        .icon :deep(img) {
            display: block;
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }
    }

    .right {
        cursor: pointer;
        :deep(img) {
            display: block;
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }
    }
}
</style>