hp>
<template> <div class="wrapper" ref="wrapper">
<Publish />
<Selects />
<Comment />
<Package />
<button class="receive" v-show="show">
<img class="receive__btn" src="./assets/banner14.ca023c2c.png" @click="handleBtnTop"/>
</button>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
import Publish from "./components/Publish.vue";
import Selects from "./components/Selects.vue";
import Comment from "./components/Comment.vue";
import Package from "./components/Package.vue";
export default {
name: "App",
components: {
Publish,
Selects,
Comment,
Package,
},
setup() {
const wrapper = ref(null);
const show = ref(false);
const handleBtnTop = () => {
clearInterval(backTop);
const backTop = setInterval(() => {
document.documentElement.scrollTop -= 100;
if (document.documentElement.scrollTop < 500) {
clearInterval(backTop);
}
}, 20);
};
onMounted(() => {
window.addEventListener("scroll", () => {
wrapper.value = document.documentElement.scrollTop || window.scrollY;
if (wrapper.value > 500) {
show.value = true;
} else {
show.value = false;
}
});
});
return { wrapper, show, handleBtnTop };
},
};
</script>
<style lang="scss">
.wrapper {
background-color: #ca2322;
.receive {
width: 2.6rem;
position: fixed;
left: 50%;
bottom: 0.1rem;
margin-left: -1.3rem;
background: none;
animation: btnFrame 2s linear infinite;
&__btn {
width: 100%;
vertical-align: middle;
}
}
@keyframes btnFrame {
50% {
transform: scale(1.1);
transform-origin: center;
}
}
}
</style>
