You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
2.7 KiB
134 lines
2.7 KiB
<template> |
|
<Tabbar /> |
|
<div class="main-container"> |
|
<Main /> |
|
</div> |
|
<Footer /> |
|
<div ref="totop" v-if="show" class="gotop" @click="scrollToTop"></div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
// 导入顶部导航栏 |
|
import Tabbar from './tabbar/index.vue' |
|
// 导入二级路由容器 |
|
import Main from './main/index.vue' |
|
// 导入底部导航栏 |
|
import Footer from './footer/index.vue' |
|
import { onMounted, ref } from 'vue' |
|
const totop = ref() |
|
const flog = ref(false) |
|
const show = ref(true) |
|
const scrollToTop = () => { |
|
flog.value = true |
|
const dom = document.querySelector('.gotop') as Element |
|
console.log(dom) |
|
totop.value.style.backgroundPosition = '-6px -145px' |
|
setTimeout(() => { |
|
totop.value.style.backgroundPosition = '-363px -78px' |
|
}, 200) |
|
setTimeout(() => { |
|
totop.value.style.backgroundPosition = '-316px -78px' |
|
}, 400) |
|
setTimeout(() => { |
|
totop.value.style.backgroundPosition = '-6px -80px' |
|
totop.value.style.height = '60px' |
|
|
|
scrollTop() |
|
}, 500) |
|
} |
|
const scrollTop = () => { |
|
window.scrollTo({ |
|
top: 0, |
|
left: 0, |
|
behavior: 'smooth', |
|
}) |
|
setTimeout(() => { |
|
show.value = false |
|
}, 1500) |
|
setTimeout(() => { |
|
show.value = true |
|
flog.value = false |
|
num = 800 |
|
}, 1600) |
|
} |
|
let num = 800 |
|
onMounted(() => { |
|
// 页面滚动窗口监听事件 |
|
window.onscroll = function () { |
|
let high = document.documentElement.scrollTop || document.body.scrollTop //兼容各浏览器 |
|
// console.log(high,totop.value.offsetTop) |
|
|
|
if (flog.value) { |
|
num = num - 40 |
|
totop.value.style.top = num + 'px' |
|
return |
|
} |
|
// 获取浏览器卷去的高度 |
|
if (high >= 900) { |
|
totop.value.style.display = 'block' |
|
} else { |
|
totop.value.style.display = 'none' |
|
} |
|
} |
|
}) |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.main-container { |
|
width: 100%; |
|
min-height: 100vh; |
|
// padding-top: 80PX; |
|
} |
|
|
|
.gotop { |
|
display: none; |
|
width: 45px; |
|
height: 45px; |
|
z-index: 999; |
|
position: fixed; |
|
bottom: 50px; |
|
right: 50px; |
|
background-image: url('../assets/images/jinglingtu.png'); |
|
background-position: -264px -78px; |
|
transition: top 0.2s linear; |
|
animation: show 0.5s ease-in-out; |
|
} |
|
.gotop:hover { |
|
transition: background-image 0.2s ease-in; |
|
background-position: -215px -78px; |
|
} |
|
.bian { |
|
animation: bian 0.1s ease-in-out; |
|
} |
|
.fei { |
|
position: absolute; |
|
// animation: fei 3s ease-in-out; |
|
} |
|
@keyframes show { |
|
0% { |
|
opacity: 0; |
|
transform: translate3d(0, 100%, 0); |
|
} |
|
100% { |
|
opacity: 1; |
|
transform: none; |
|
} |
|
} |
|
@keyframes bian { |
|
0% { |
|
background-position: -6px -145px; |
|
} |
|
100% { |
|
background-position: -316px -78px; |
|
} |
|
} |
|
// @keyframes fei { |
|
// 0% { |
|
|
|
// bottom: 50px; |
|
// } |
|
// 100% { |
|
// top: 10%; |
|
// } |
|
// } |
|
</style>
|
|
|