spark-store-project/spark-store-abyss
15
0
Fork 0
mirror of https://github.com/spark-store-project/spark-store-abyss synced 2025-12-18 21:31:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加平滑滚动功能到关于页面

Browse Source
This commit is contained in:
jiwangyihao
2025-06-12 00:52:20 +08:00
parent e323766da2
commit 532b55472f
1 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
pages/about.vue
View File

@@ -12,6 +12,16 @@ onMounted(() => {
sProgress.value = scrollTop / clientHeight; sProgress.value = scrollTop / clientHeight;
}); });
}); });
function scrollIntoView(id: string) {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}
</script> </script>
<template> <template>
@@ -72,7 +82,12 @@ onMounted(() => {
:style="{ height: '80%', width: 'auto' }" :style="{ height: '80%', width: 'auto' }"
/> />
</section> </section>
<div v-for="i in 6" :key="i" class="w-full h-screen snap-start" /> <div
v-for="i in 6"
:id="'section-' + i"
:key="i"
class="w-full h-screen snap-start"
/>
<nav <nav
class="flex justify-center gap-14 fixed bottom-0 z-[0] w-full h-45 bg-(--s-background) pointer-events-none" class="flex justify-center gap-14 fixed bottom-0 z-[0] w-full h-45 bg-(--s-background) pointer-events-none"
:style="{ :style="{
@@ -119,8 +134,9 @@ onMounted(() => {
2, 2,
}" }"
/> />
<div <button
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900" class="relative p-5 rounded-full bg-white pointer-events-auto cursor-pointer dark:bg-primary-900 hover:bg-surface-50 hover:dark:bg-primary-800"
@click="scrollIntoView('section-1')"
> >
<Icon <Icon
name="sp:spark" name="sp:spark"
@@ -140,9 +156,10 @@ onMounted(() => {
> >
<Icon name="sp:spark" class="w-16 h-16 s-color-white" mode="svg" /> <Icon name="sp:spark" class="w-16 h-16 s-color-white" mode="svg" />
</div> </div>
</div> </button>
<div <button
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900" class="relative p-5 rounded-full bg-white pointer-events-auto cursor-pointer dark:bg-primary-900 hover:bg-surface-50 hover:dark:bg-primary-800"
@click="scrollIntoView('section-2')"
> >
<Icon <Icon
name="s:gxde" name="s:gxde"
@@ -166,9 +183,10 @@ onMounted(() => {
mode="svg" mode="svg"
/> />
</div> </div>
</div> </button>
<div <button
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900" class="relative p-5 rounded-full bg-white pointer-events-auto cursor-pointer dark:bg-primary-900 hover:bg-surface-50 hover:dark:bg-primary-800"
@click="scrollIntoView('section-3')"
> >
<Icon <Icon
name="s:wine-runner" name="s:wine-runner"
@@ -192,9 +210,10 @@ onMounted(() => {
mode="svg" mode="svg"
/> />
</div> </div>
</div> </button>
<div <button
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900" class="relative p-5 rounded-full bg-white pointer-events-auto cursor-pointer dark:bg-primary-900 hover:bg-surface-50 hover:dark:bg-primary-800"
@click="scrollIntoView('section-4')"
> >
<Icon <Icon
name="s:amber-ce" name="s:amber-ce"
@@ -214,9 +233,10 @@ onMounted(() => {
> >
<Icon name="s:amber-ce" class="w-16 h-16 s-deco-white" mode="svg" /> <Icon name="s:amber-ce" class="w-16 h-16 s-deco-white" mode="svg" />
</div> </div>
</div> </button>
<div <button
class="relative p-7 rounded-full bg-white pointer-events-auto dark:bg-primary-900" class="relative p-7 rounded-full bg-white pointer-events-auto cursor-pointer dark:bg-primary-900 hover:bg-surface-50 hover:dark:bg-primary-800"
@click="scrollIntoView('section-5')"
> >
<Icon <Icon
name="s:package-manager" name="s:package-manager"
@@ -240,9 +260,10 @@ onMounted(() => {
mode="svg" mode="svg"
/> />
</div> </div>
</div> </button>
<div <button
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900" class="relative p-5 rounded-full bg-white pointer-events-auto cursor-pointer dark:bg-primary-900 hover:bg-surface-50 hover:dark:bg-primary-800"
@click="scrollIntoView('section-6')"
> >
<Icon <Icon
name="s:fantascene" name="s:fantascene"
@@ -266,7 +287,7 @@ onMounted(() => {
mode="svg" mode="svg"
/> />
</div> </div>
</div> </button>
</div> </div>
</nav> </nav>
<div <div