<template>
    <div>
        <div class="sort-box">
            <a-icon type="info-circle" class="sort-icon" theme="filled" />
            <a-alert :message="str" banner class="sort-alert" />
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            str: {
                type: String,
                default: ''
            }
        },
        data() {
            return {

            }
        }
    }
</script>

<style scoped lang="less">
    .sort-box {
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
    }

    .sort-icon {
        color: orange;
        cursor: pointer;
        transition: all 1s;
        margin-left: 16px;
        display: block;
        position: absolute;
    }

    .sort-box:hover .sort-alert {
        opacity: 1;
    }

    .sort-alert {
        transition: all 1s;
        display: block;
        opacity: 0;

    }
</style>