<template>
    <div class="product-title" :class="{ isSmall }">
        <span><slot></slot></span>
        <img class="img1" src="@assets/png-biaokuag-01.png" alt="" />
        <img class="img2" src="@assets/png-biaokuag-02.png" alt="" />
    </div>
</template>

<script>
export default {
    props: {
        isSmall: {
            type: Boolean,
            default: false
        }
    }
};
</script>

<style lang="less" scoped>
.product-title {
    font-size: @font4;
    color: #ffffff;
    line-height: 44px;
    padding: 0 20px;
    position: relative;
    min-height: 44px;
    img {
        width: 20px;
        height: 44px;
        position: absolute;
        top: 0;
        &.img1 {
            left: 0;
        }
        &.img2 {
            right: 0;
        }
    }

    &.isSmall {
        font-size: 18px;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
        .flex();
    }
}
</style>
