forked from lnbiuc/blog-next-view
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.vue
36 lines (32 loc) · 970 Bytes
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script lang="ts" setup>
import '~/styles/main.css'
function handleToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
const isScroll = ref(false)
onMounted(() => {
window.addEventListener('scroll', () => {
isScroll.value = window.scrollY > window.innerHeight / 2
})
})
</script>
<template>
<div>
<div class="opacity-20 h-full w-full z-0" />
<Header />
<div class="relative z-10">
<NuxtPage />
</div>
<Footer />
<UNotifications class="b-0 w-[300px] z-4000" />
<Transition name="fade">
<div v-if="isScroll" class="flex flex-row fixed justify-end bottom-4 right-4 z-1000">
<div
class="bg-violet rounded-full flex flex-row h-35px w-35px justify-center items-center transition-all duration-150 hover:bg-violet-500 active:scale-90 hover:scale-110"
@click="handleToTop">
<div class="i-carbon-chevron-up" />
</div>
</div>
</Transition>
</div>
</template>