Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 微改回顶组件样式

Browse Source
This commit is contained in:
BTMuli
2023-09-07 16:04:40 +08:00
parent ce864897f6
commit 7e3843809f
1 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/app/t-backTop.vue
View File

@@ -31,7 +31,7 @@ function handleScrollTop(): void {
cancelAnimationFrame(timer); cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn() { timer = requestAnimationFrame(function fn() {
if (scrollTop.value > 0) { if (scrollTop.value > 0) {
scrollTop.value -= 50; scrollTop.value -= 100;
document.body.scrollTop = document.documentElement.scrollTop = scrollTop.value; document.body.scrollTop = document.documentElement.scrollTop = scrollTop.value;
timer = requestAnimationFrame(fn); timer = requestAnimationFrame(fn);
} else { } else {
@@ -50,25 +50,23 @@ onMounted(() => {
<style scoped> <style scoped>
.back-top { .back-top {
position: fixed; position: fixed;
right: 20px; right: 10px;
bottom: 20px; bottom: 10px;
width: 60px; height: 40px;
height: 60px;
border-radius: 50%; border-radius: 50%;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
.back-top:hover { .back-top:hover {
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 10px 5px var(--back-top-shadow);
cursor: pointer; cursor: pointer;
transform: scale(0.9); transform: scale(1.2);
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
.back-top img { .back-top img {
width: 60px; width: 100%;
height: 60px; height: 100%;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }