spark-store-project/spark-store-abyss
15
0
Fork 0
mirror of https://github.com/spark-store-project/spark-store-abyss synced 2026-06-23 03:14:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加关于页面暗黑模式支持

Browse Source
This commit is contained in:
jiwangyihao
2025-06-12 00:23:44 +08:00
parent ca7e3cb92d
commit e323766da2
1 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/about.vue
+54 -31
View File
@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
const scrollPanel = inject<Ref<ComponentPublicInstance>>("scrollPanel"); const scrollPanel = inject<Ref<ComponentPublicInstance>>("scrollPanel");
const sProgress = ref(0.001); const sDark = inject<ComputedRef<boolean>>("sDark");
const sProgress = ref(0);
onMounted(() => { onMounted(() => {
watchEffect(() => { watchEffect(() => {
@@ -15,7 +16,7 @@ onMounted(() => {
<template> <template>
<div <div
class="page bg-primary-100" class="page bg-primary-100 bg-dark"
:style="{ :style="{
transform: sProgress > 6 ? 'translate(0)' : 'none', transform: sProgress > 6 ? 'translate(0)' : 'none',
}" }"
@@ -73,7 +74,7 @@ onMounted(() => {
</section> </section>
<div v-for="i in 6" :key="i" class="w-full h-screen snap-start" /> <div v-for="i in 6" :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-primary-50 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="{
transform: `translateY(calc(${-range( transform: `translateY(calc(${-range(
0, 0,
@@ -91,38 +92,43 @@ onMounted(() => {
}" }"
> >
<h2 <h2
class="absolute left-0 -translate-x-[calc(100%+14*var(--spacing))] font-(family-name:--s-title-font) text-4xl text-primary-400 w-36 self-center pointer-events-auto" class="absolute left-0 font-(family-name:--s-title-font) text-4xl text-primary-400 w-36 self-center pointer-events-auto dark:opacity-75"
:style="{ :style="{
transform: `translateX(calc(${ translate: `calc(${
25 * range(0, 1, sProgress) -50 * (1 - range(0, 1, sProgress))
} * var(--spacing))`, } * var(--spacing)) 0`,
opacity: 1 - range(0, 1, sProgress), opacity: sDark
? 0.75 - range(0, 1, sProgress) * 0.75
: 1 - range(0, 1, sProgress),
}" }"
> >
点击了解<br />星火软件 点击了解<br />星火软件
</h2> </h2>
<Icon <Icon
name="s:about-indicator" name="s:about-indicator"
class="absolute left-3 bottom-0 w-20 h-[auto]! s-color-primary-100" class="absolute left-3 bottom-0 w-20 h-[auto]! s-color-primary-100 dark:s-color-primary-500 dark:opacity-50"
mode="svg" mode="svg"
:style="{ :style="{
transform: `translateX(calc(${ translate: `calc(${40 * (sProgress - 1)} * var(--spacing)) 0`,
40 * (sProgress - 1) opacity: sDark
} * var(--spacing))`, ? (range(0, 0.5, sProgress - 0.5) -
opacity: range(0, 0.5, sProgress - 6.5)) *
(range(0, 0.5, sProgress - 0.5) - 0.38
: (range(0, 0.5, sProgress - 0.5) -
range(0, 0.5, sProgress - 6.5)) * range(0, 0.5, sProgress - 6.5)) *
2, 2,
}" }"
/> />
<div class="relative p-5 rounded-full bg-white pointer-events-auto"> <div
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900"
>
<Icon <Icon
name="sp:spark" name="sp:spark"
class="w-16 h-16 s-color-primary-color" class="w-16 h-16 s-color-primary-color"
mode="svg" mode="svg"
/> />
<div <div
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br" class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br dark:from-primary-500 dark:to-primary-600"
:style="{ :style="{
clipPath: clipPath:
sProgress <= 1 sProgress <= 1
@@ -135,14 +141,16 @@ 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> </div>
<div class="relative p-5 rounded-full bg-white pointer-events-auto"> <div
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900"
>
<Icon <Icon
name="s:gxde" name="s:gxde"
class="w-16 h-16 s-deco-primary-color s-bg-primary-400" class="w-16 h-16 s-deco-primary-color s-bg-primary-400 s-bg-dark"
mode="svg" mode="svg"
/> />
<div <div
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br" class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br dark:from-primary-500 dark:to-primary-600"
:style="{ :style="{
clipPath: clipPath:
sProgress <= 2 sProgress <= 2
@@ -159,14 +167,16 @@ onMounted(() => {
/> />
</div> </div>
</div> </div>
<div class="relative p-5 rounded-full bg-white pointer-events-auto"> <div
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900"
>
<Icon <Icon
name="s:wine-runner" name="s:wine-runner"
class="w-16 h-16 s-deco-primary-color s-bg-primary-400" class="w-16 h-16 s-deco-primary-color s-bg-primary-400 s-bg-dark"
mode="svg" mode="svg"
/> />
<div <div
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br" class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br dark:from-primary-500 dark:to-primary-600"
:style="{ :style="{
clipPath: clipPath:
sProgress <= 3 sProgress <= 3
@@ -183,14 +193,16 @@ onMounted(() => {
/> />
</div> </div>
</div> </div>
<div class="relative p-5 rounded-full bg-white pointer-events-auto"> <div
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900"
>
<Icon <Icon
name="s:amber-ce" name="s:amber-ce"
class="w-16 h-16 s-deco-primary-color" class="w-16 h-16 s-deco-primary-color"
mode="svg" mode="svg"
/> />
<div <div
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br" class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br dark:from-primary-500 dark:to-primary-600"
:style="{ :style="{
clipPath: clipPath:
sProgress <= 4 sProgress <= 4
@@ -203,14 +215,16 @@ 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> </div>
<div class="relative p-7 rounded-full bg-white pointer-events-auto"> <div
class="relative p-7 rounded-full bg-white pointer-events-auto dark:bg-primary-900"
>
<Icon <Icon
name="s:package-manager" name="s:package-manager"
class="w-12 h-12 s-deco-primary-color s-bg-primary-400" class="w-12 h-12 s-deco-primary-color s-bg-primary-400 s-bg-dark"
mode="svg" mode="svg"
/> />
<div <div
class="absolute p-7 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br" class="absolute p-7 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br dark:from-primary-500 dark:to-primary-600"
:style="{ :style="{
clipPath: clipPath:
sProgress <= 5 sProgress <= 5
@@ -227,14 +241,16 @@ onMounted(() => {
/> />
</div> </div>
</div> </div>
<div class="relative p-5 rounded-full bg-white pointer-events-auto"> <div
class="relative p-5 rounded-full bg-white pointer-events-auto dark:bg-primary-900"
>
<Icon <Icon
name="s:fantascene" name="s:fantascene"
class="w-16 h-16 s-deco-primary-color s-bg-white" class="w-16 h-16 s-deco-primary-color s-bg-white dark:s-bg-primary-900"
mode="svg" mode="svg"
/> />
<div <div
class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br" class="absolute p-5 w-full h-full rounded-full top-0 left-0 from-primary-400 to-primary-500 bg-linear-to-br dark:from-primary-500 dark:to-primary-600"
:style="{ :style="{
clipPath: clipPath:
sProgress <= 6 sProgress <= 6
@@ -254,7 +270,7 @@ onMounted(() => {
</div> </div>
</nav> </nav>
<div <div
class="fixed bottom-0 z-[0] flex h-[calc(100vh-60*var(--spacing))] bg-primary-100 pointer-events-none" class="fixed bottom-0 z-[0] flex h-[calc(100vh-60*var(--spacing))] bg-primary-100 pointer-events-none bg-dark"
:style="{ :style="{
transform: `translateY(${ transform: `translateY(${
100 - range(0, 1, sProgress) * 100 100 - range(0, 1, sProgress) * 100
@@ -490,6 +506,13 @@ onMounted(() => {
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.s-dark .bg-dark {
background-color: rgb(from var(--p-primary-500) r g b / 0.1);
}
.s-dark .s-bg-dark {
--s-bg: rgb(from var(--p-primary-500) r g b / 0.5);
}
.image { .image {
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;