<template>
  <div class="back-to-top"
    v-show="y > 300"
    @click="y = 0">
    <el-icon>
      <Top />
    </el-icon>
  </div>
</template>

<script setup>
import { useWindowScroll } from '@vueuse/core'
const { x, y } = useWindowScroll({
  behavior: 'smooth'
})
</script>

<style scoped
  lang="scss">
  .back-to-top {
    position: fixed;
    bottom: 50px;
    right: 24px;
    z-index: 999;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--el-bg-color-overlay);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    i {
      font-size: 20px;
      color: var(--el-text-color-regular)
    }
  }
</style>