<template>
    <div class="ht-base-back-top2-demo">
        <div class="ht-base-back-top2-demo">
            <ht-base-back-top :height="10" :bottom="100">
                <div class="demo-top" @mouseover="hover = false" @mouseout="hover = true">
                    <ht-base-icon v-if="hover" type='LiRa_up' />
                    <div v-else>回到<br>顶部</div>
                </div>
            </ht-base-back-top>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseBackTop2Demo',
        data() {
            return {
                hover: true
            }
        }
    }
</script>
<style lang="less">
    .ht-base-back-top2-demo {
        .demo-top {
            display: table;
            width: 60px;
            height: 60px;
            color: #ffffff;
            text-align: center;
            vertical-align: middle;
            background: #4d4d4d;
            display: table-cell;
        }
    }
</style>

