<template>
    <div class="more">
        <i class="el-icon-d-arrow-left animate__animated"></i>
        <div v-if="!path" class="name animate__animated" @click="wait"><slot>查看更多</slot></div>
        <router-link v-else :to="path" class="name animate__animated">
            <slot>查看更多</slot>
        </router-link>
        <i class="el-icon-d-arrow-right animate__animated"></i>
    </div>
</template>

<script>
export default {
    props: {
        path: {
            type: String,
            default: ''
        }
    },
    methods: {
        wait() {
            this.$message.warning('敬请期待');
        }
    }
};
</script>

<style lang="less" scoped>
.more {
    width: 200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    .name {
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
        padding: 20px;
        cursor: pointer;
        display: inline-block;
    }
    i {
        font-size: 16px;
        color: #ffffff99;
        font-weight: bold;
    }

    &:hover {
        i {
            animation-iteration-count: infinite;
            animation-duration: 1s;
            animation-delay: 0.3s;
            &:last-child {
                animation-name: fadeOutRight;
            }
            &:first-child {
                animation-name: fadeOutLeft;
            }
        }
    }
}
</style>
