ContestPortal/src/Layout/index.vue

<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>