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

feat: 添加暗黑模式支持，优化样式和背景图像

Browse Source 
Co-authored-by: Sylvanysc <Sylvanysc@users.noreply.github.com>
Co-authored-by: xudeyu444 <xudeyu444@users.noreply.github.com>
Co-authored-by: 奕 <a18355849597@outlook.com>
This commit is contained in:
jiwangyihao
2025-06-04 00:52:05 +08:00
parent 8aefb0db7c
commit 9d05d0074a
7 changed files with 344 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
app.vue
View File

@@ -70,6 +70,87 @@ onMounted(() => {
qrWidth.value = qrEl.getBoundingClientRect().height;
}
});
const sDarkConfig = ref("auto");
const isDarkMode = ref(false);
const sDark = computed(() => {
return sDarkConfig.value === "auto"
? isDarkMode.value
? true
: false
: sDarkConfig.value === "dark"
? true
: false;
});
provide("sDark", sDark);
const enableTransitions = () =>
"startViewTransition" in document &&
window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
const mouseX = ref(0);
const mouseY = ref(0);
const toggleDarkMode = async ({ clientX: x, clientY: y }: MouseEvent) => {
if (sDarkConfig.value === "auto") {
sDarkConfig.value = isDarkMode.value ? "light" : "dark";
} else if (sDarkConfig.value === "dark" && isDarkMode.value) {
sDarkConfig.value = "auto";
} else if (sDarkConfig.value === "light" && !isDarkMode.value) {
sDarkConfig.value = "auto";
} else {
sDarkConfig.value = isDarkMode.value ? "dark" : "light";
}
localStorage.setItem("darkMode", sDarkConfig.value);
mouseX.value = x;
mouseY.value = y;
};
onMounted(() => {
const schemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
isDarkMode.value = schemeQuery.matches;
schemeQuery.addEventListener("change", (e) => {
isDarkMode.value = e.matches;
});
const savedDarkMode = localStorage.getItem("darkMode");
if (savedDarkMode) {
sDarkConfig.value = savedDarkMode;
}
watchEffect(async () => {
const sDarkValue = sDark.value;
if (!enableTransitions()) {
document.documentElement.classList.toggle("s-dark", sDarkValue);
return;
}
const clipPath = [
`circle(0px at ${mouseX.value}px ${mouseY.value}px)`,
`circle(${Math.hypot(
Math.max(mouseX.value, innerWidth - mouseX.value),
Math.max(mouseY.value, innerHeight - mouseY.value)
)}px at ${mouseX.value}px ${mouseY.value}px)`,
];
await document.startViewTransition(async () => {
document.documentElement.classList.toggle("s-dark", sDarkValue);
await nextTick();
}).ready;
document.documentElement.animate(
{ clipPath: sDarkValue ? clipPath.reverse() : clipPath },
{
duration: 300,
easing: "ease-in",
pseudoElement: `::view-transition-${sDarkValue ? "old" : "new"}(root)`,
}
);
});
});
</script>
<template>
@@ -100,17 +181,8 @@ onMounted(() => {
<NuxtLink to="/" class="flex items-center">
<Icon
name="s:spark"
class="text-4xl mr-2"
class="text-4xl mr-2 s-color-primary-color"
mode="svg"
:style="{
'--s-c1': 'var(--p-primary-color)',
'--s-c2': 'var(--p-primary-color)',
'--s-c3': 'var(--p-primary-color)',
'--s-c4': 'var(--p-primary-color)',
'--s-c5': 'var(--p-primary-color)',
'--s-c6': 'var(--p-primary-color)',
'--s-c7': 'var(--p-primary-color)',
}"
/>
<h1 class="font-(family-name:--s-title-font)">SPARK</h1>
</NuxtLink>
@@ -134,12 +206,19 @@ onMounted(() => {
GXDE OS
</NuxtLink>
<Button
icon="pi pi-sun"
:icon="`pi ${
sDarkConfig === 'auto'
? 'pi-bullseye'
: sDarkConfig === 'dark'
? 'pi-moon'
: 'pi-sun'
}`"
aria-label="Toggle Dark Mode"
size="small"
class="shrink-0"
rounded
severity="secondary"
@click="toggleDarkMode"
/>
</nav>
</header>
@@ -147,7 +226,7 @@ onMounted(() => {
<NuxtPage />
</div>
<footer
class="w-full flex justify-around bg-white snap-start overflow-hidden p-14"
class="w-full flex justify-around bg-white snap-start overflow-hidden p-14 dark:bg-surface-900"
>
<div class="flex flex-col items-start gap-6">
<Icon
@@ -160,14 +239,16 @@ onMounted(() => {
}"
/>
<h2
class="font-(family-name:--s-title-font) text-5xl text-(--p-surface-500)"
class="font-(family-name:--s-title-font) text-5xl text-surface-500 dark:text-surface-100"
>
SPARK
</h2>
</div>
<div class="flex flex-col gap-4">
<h2 class="text-2xl font-bold">关于星火社区</h2>
<p class="leading-[2] text-(--p-surface-600) max-w-[25.8em]">
<h2 class="text-2xl font-bold dark:text-surface-100">关于星火社区</h2>
<p
class="leading-[2] text-surface-600 max-w-[25.8em] dark:text-surface-200"
>
星火社区是以丰富 Linux
应用生态为核心目标的开源协作平台，汇聚年轻开发者团队。核心项目星火应用商店通过整合分散资源、提供海量软件下载及安装功能，解决
Linux 用户获取应用难题。社区以「星火燎原」为理念，通过论坛、Wiki
@@ -182,11 +263,11 @@ onMounted(() => {
</h2>
<Icon
name="s:qrcode-3"
class="s-color-[black] dark:s-color-[white]"
mode="svg"
:style="{
width: qrWidth + 'px',
height: '100%',
'--s-color': '#000000',
}"
/>
</div>
@@ -214,12 +295,16 @@ header {
width: calc(100% - var(--s-progress) * 24 * var(--spacing));
border-radius: calc(var(--s-progress) * 4 * var(--spacing));
height: 100%;
background-color: #fff;
background-color: var(--p-surface-0);
z-index: -1;
transition: {
property: transform, width, border-radius;
duration: 0.1s;
}
@variant dark {
background-color: var(--p-surface-900);
}
}
h1 {
@@ -270,4 +355,37 @@ header {
}
}
}
.s-dark header {
&::before {
background-color: var(--p-surface-900);
}
h1 {
color: var(--p-surface-100);
}
nav::before {
background-color: rgb(from var(--p-primary-500) r g b / 0.3);
}
.nav-link {
color: var(--p-surface-300);
&.active {
color: var(--p-primary-400);
background-color: rgb(from var(--p-primary-500) r g b / 0.3);
}
}
nav.mounted {
.nav-link {
background-color: unset;
&:hover {
background-color: rgba(from var(--p-surface-400) r g b / 0.1);
}
}
}
}
</style>

104
assets/css/main.css
View File

@@ -2,9 +2,109 @@
@import 'primeicons/primeicons.css';
@import '../fonts/KNYuanmo-Regular/result.css';
:root {
font-family: 'BlinkMacSystemFont', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@custom-variant dark (&:where(.s-dark, .s-dark *));
@theme {
--color-primary-color: var(--p-primary-color);
--color-primary-50: var(--p-primary-50);
--color-primary-100: var(--p-primary-100);
--color-primary-200: var(--p-primary-200);
--color-primary-300: var(--p-primary-300);
--color-primary-400: var(--p-primary-400);
--color-primary-500: var(--p-primary-500);
--color-primary-600: var(--p-primary-600);
--color-primary-700: var(--p-primary-700);
--color-primary-800: var(--p-primary-800);
--color-primary-900: var(--p-primary-900);
--color-primary-950: var(--p-primary-950);
--color-secondary-50: var(--p-secondary-50);
--color-secondary-100: var(--p-secondary-100);
--color-secondary-200: var(--p-secondary-200);
--color-secondary-300: var(--p-secondary-300);
--color-secondary-400: var(--p-secondary-400);
--color-secondary-500: var(--p-secondary-500);
--color-secondary-600: var(--p-secondary-600);
--color-secondary-700: var(--p-secondary-700);
--color-secondary-800: var(--p-secondary-800);
--color-secondary-900: var(--p-secondary-900);
--color-secondary-950: var(--p-secondary-950);
--color-surface-50: var(--p-surface-50);
--color-surface-100: var(--p-surface-100);
--color-surface-200: var(--p-surface-200);
--color-surface-300: var(--p-surface-300);
--color-surface-400: var(--p-surface-400);
--color-surface-500: var(--p-surface-500);
--color-surface-600: var(--p-surface-600);
--color-surface-700: var(--p-surface-700);
--color-surface-800: var(--p-surface-800);
--color-surface-900: var(--p-surface-900);
--color-surface-950: var(--p-surface-950);
--s-title-font: 'KN Yuanmo SC', sans-serif;
--s-background: var(--p-secondary-50);
}
:root {
font-family: 'BlinkMacSystemFont', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
background-color: var(--s-background) !important;
}
.s-dark {
--s-background: var(--p-secondary-950);
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(root),
.s-dark::view-transition-new(root) {
z-index: 1;
}
::view-transition-new(root),
.s-dark::view-transition-old(root) {
z-index: 9999;
}
@utility s-color-* {
--s-color: --value([color]);
--s-c1: --value([color]);
--s-c2: --value([color]);
--s-c3: --value([color]);
--s-c4: --value([color]);
--s-c5: --value([color]);
--s-c6: --value([color]);
--s-c7: --value([color]);
--s-color: --value(--color-*);
--s-c1: --value(--color-*);
--s-c2: --value(--color-*);
--s-c3: --value(--color-*);
--s-c4: --value(--color-*);
--s-c5: --value(--color-*);
--s-c6: --value(--color-*);
--s-c7: --value(--color-*);
}
@utility s-deco-* {
--s-deco: --value([color]);
--s-deco: --value(--color-*);
}
@utility s-bg-* {
--s-bg: --value([color]);
--s-bg: --value(--color-*);
}
@utility s-bg-2-* {
--s-bg-2: --value([color]);
--s-bg-2: --value(--color-*);
}
@utility s-bg-3-* {
--s-bg-3: --value([color]);
--s-bg-3: --value(--color-*);
}

BIN
assets/images/index/figure-dark.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 KiB

BIN
assets/images/index/figure-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
assets/images/index/figure-dark.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 671 KiB

3
nuxt.config.ts
View File

@@ -98,6 +98,9 @@ export default defineNuxtConfig({
},
},
}),
options: {
darkModeSelector: ".s-dark",
},
},
},
},

188
pages/index.vue
View File

@@ -105,7 +105,7 @@ onMounted(() => {
</div>
</div>
<div
class="flex flex-col items-center justify-center mb-10 text-(--p-secondary-400) text-lg gap-2 tracking-[0.5em] transition-all duration-[.03s]"
class="flex flex-col items-center justify-center mb-10 text-secondary-400 text-lg gap-2 tracking-[0.5em] transition-all duration-[.03s] dark:text-secondary-600"
:style="{
transform: `translateY(${range(0, 0.5, sProgress) * -500}%) scale(${
1 + range(0, 0.5, sProgress) * 0.2
@@ -119,14 +119,14 @@ onMounted(() => {
<i class="w-96 h-144 figure-container" />
<div class="card flex flex-col px-9 py-15 rounded-tl-3xl gap-8">
<div class="flex gap-4">
<h1 class="font-bold text-6xl">星火应用商店</h1>
<h1 class="font-bold text-6xl dark:text-surface-50">星火应用商店</h1>
<div class="flex flex-col items-start justify-between">
<span
class="font-(family-name:--s-title-font) px-4 py-0.5 text-white from-(--p-primary-400) to-(--p-primary-500) bg-linear-to-r rounded-full"
class="font-(family-name:--s-title-font) px-4 py-0.5 text-white from-primary-400 to-primary-500 bg-linear-to-r rounded-full dark:from-primary-500 dark:to-primary-600"
>V4.5.2</span
>
<h2
class="text-lg font-(family-name:--s-title-font) text-(--p-primary-500)"
class="text-lg font-(family-name:--s-title-font) text-primary-500"
>
SPARK STORE
</h2>
@@ -135,41 +135,45 @@ onMounted(() => {
<div class="flex -mt-3 gap-2">
<img
src="https://gitee.com/spark-store-project/spark-store/badge/star.svg?theme=gvp"
height="21"
class="h-[21px]"
/>
<img
src="https://gitee.com/spark-store-project/spark-store/badge/fork.svg?theme=gvp"
height="21"
class="h-[21px]"
/>
</div>
<div class="flex flex-col text-xl text-(--p-surface-500) gap-1">
<div
class="flex flex-col text-xl text-surface-500 gap-1 dark:text-surface-200"
>
<p>适用于 Debian 社区和其他 Linux 发行版的社区应用商店；</p>
<p>从社区中来，到社区中去，聚星星之火，成燎原之势。</p>
<p class="text-lg font-bold text-black">
<p class="text-lg font-bold text-black dark:text-surface-100">
🎉星火应用商店吉祥物「星小火」现已上线！
<a class="text-(--p-secondary-600)">了解更多 →</a>
<a class="text-secondary-600">了解更多 →</a>
</p>
</div>
<div class="flex gap-4">
<NuxtLink
to="/download"
class="px-12 py-2.5 text-2xl font-bold text-white from-(--p-primary-400) to-(--p-primary-500) bg-linear-to-r rounded-full"
class="px-12 py-2.5 text-2xl font-bold text-white from-primary-400 to-primary-500 bg-linear-to-r rounded-full dark:from-primary-500 dark:to-primary-600"
>
<i class="pi pi-download text-xl! font-bold! pr-4" /> 前往下载
</NuxtLink>
<a
class="px-2.5 bg-(--p-primary-200) border-(--p-primary-400) border-4 rounded-full flex items-center justify-center"
class="px-2.5 bg-primary-200 border-primary-400 border-4 rounded-full flex items-center justify-center dark:bg-primary-900 dark:border-secondary-600"
href="https://gitee.com/spark-store-project"
>
<Icon
name="simple-icons:gitee"
class="text-2xl! font-bold! text-(--p-primary-600)"
class="text-2xl! font-bold! text-primary-color"
/>
</a>
<a
class="px-2.5 bg-(--p-primary-200) border-(--p-primary-400) border-4 rounded-full flex items-center justify-center"
class="px-2.5 bg-primary-200 border-primary-400 border-4 rounded-full flex items-center justify-center dark:bg-primary-900 dark:border-secondary-600"
>
<i
class="pi pi-github text-2xl! font-bold! text-(--p-primary-600)"
/>
<i class="pi pi-github text-2xl! font-bold! text-primary-color" />
</a>
</div>
</div>
@@ -190,7 +194,7 @@ onMounted(() => {
}"
></div>
<div
class="absolute bottom-0 left-1/2 -translate-x-1/2 rounded-t-4xl px-6 pt-4 flex gap-6 from-(--p-primary-300) to-[transparent] bg-linear-to-b after:from-(transparent) after:from-50 after:to-(--s-to) after:bg-linear-to-b after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-2"
class="absolute bottom-0 left-1/2 -translate-x-1/2 rounded-t-4xl px-6 pt-4 flex gap-6 from-primary-300 to-[transparent] bg-linear-to-b after:from-(transparent) after:from-50 after:to-(--s-to) after:bg-linear-to-b after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-2 dark:from-primary-800"
style="
--s-to: color-mix(in srgb, var(--s-background), transparent 20%);
"
@@ -205,7 +209,7 @@ onMounted(() => {
class="flex flex-col items-center justify-between mt-2 mb-6 gap-5"
>
<h2
class="text-3xl text-(--p-primary-500) font-(family-name:--s-title-font) tracking-widest"
class="text-3xl text-primary-500 font-(family-name:--s-title-font) tracking-widest dark:opacity-80"
>
SPARK
</h2>
@@ -213,7 +217,7 @@ onMounted(() => {
<div
v-for="i in 3"
:key="i"
class="w-full rounded-full p-3 from-(--p-primary-400) to-(--p-primary-200) bg-linear-to-b"
class="w-full rounded-full p-3 from-primary-400 to-primary-200 bg-linear-to-b dark:from-primary-500 dark:to-primary-600 dark:opacity-60"
></div>
</div>
<div class="flex flex-col gap-4 w-full">
@@ -221,30 +225,32 @@ onMounted(() => {
<div
v-for="i in 2"
:key="i"
class="p-3 rounded-full bg-(--p-primary-500)"
class="p-3 rounded-full bg-primary-500 dark:opacity-80"
></div>
<div class="w-40 p-3 rounded-full bg-(--p-primary-500)"></div>
<div
class="w-40 p-3 rounded-full bg-primary-500 dark:opacity-80"
></div>
<div class="grow-1"></div>
<div
v-for="i in 3"
:key="i"
class="p-3 rounded-full bg-(--p-primary-500)"
class="p-3 rounded-full bg-primary-500 dark:opacity-80"
></div>
</div>
<div
class="rounded-t-2xl p-4 flex gap-4 w-full from-(--p-primary-400) to-[transparent] bg-linear-to-b grow-1"
class="rounded-t-2xl p-4 flex gap-4 w-full from-primary-400 to-[transparent] bg-linear-to-b grow-1 dark:from-primary-700 dark:opacity-80"
>
<div
v-for="i in 3"
:key="i"
class="w-45 h-27 rounded-xl flex items-center justify-center from-(--p-primary-500) to-(--p-primary-300) bg-linear-to-b"
class="w-45 h-27 rounded-xl flex items-center justify-center from-primary-500 to-primary-300 bg-linear-to-b dark:from-primary-600 dark:to-primary-700"
>
<i
class="pi text-5xl! text-(--p-primary-600)"
class="pi text-5xl! text-primary-color dark:text-primary-200"
:class="`pi-${['th-large', 'cog', 'thumbs-up'][i - 1]}`"
></i>
</div>
@@ -252,10 +258,12 @@ onMounted(() => {
</div>
</div>
</div>
<h2 class="text-center text-6xl font-bold text-(--p-primary-color)">
<h2
class="text-center text-6xl font-bold text-primary-color dark:text-primary-400"
>
星星之火，可以燎原。
</h2>
<p class="text-center text-xl leading-[2]">
<p class="text-center text-xl leading-[2] dark:text-surfacce-200">
每个普通用户的需求反馈、每名开发者的代码贡献、每一次社区的互助分享，<br />
都在为 Linux 桌面生态注入蓬勃活力。<br />
我们深信「人人为我，我为人人」，以共享之火照亮开源之路。<br />
@@ -267,7 +275,7 @@ onMounted(() => {
</section>
<section class="flex items-center justify-center gap-16 pt-15">
<div
class="flex bg-(--p-primary-200) rounded-4xl px-6 py-4 h-134 gap-6 overflow-hidden"
class="flex bg-primary-200 rounded-4xl px-6 py-4 h-134 gap-6 overflow-hidden dark:bg-primary-900"
>
<div
v-for="i in 5"
@@ -311,20 +319,11 @@ onMounted(() => {
<div class="flex items-center gap-6">
<Icon
name="s:spark"
class="text-6xl"
class="text-6xl s-color-primary-500"
mode="svg"
:style="{
'--s-c1': 'var(--p-primary-500)',
'--s-c2': 'var(--p-primary-500)',
'--s-c3': 'var(--p-primary-500)',
'--s-c4': 'var(--p-primary-500)',
'--s-c5': 'var(--p-primary-500)',
'--s-c6': 'var(--p-primary-500)',
'--s-c7': 'var(--p-primary-500)',
}"
/>
<h2
class="text-4xl font-(family-name:--s-title-font) text-(--p-primary-500)"
class="text-4xl font-(family-name:--s-title-font) text-primary-500"
>
WHAT'S NEW ?
</h2>
@@ -336,7 +335,7 @@ onMounted(() => {
<p class="text-5xl leading-[1.5] font-bold">
或许现在，<br />
你只需要一个<br />
<span class="text-(--p-primary-color)">星火应用商店。</span>
<span class="text-primary-color">星火应用商店。</span>
</p>
</div>
</section>
@@ -345,18 +344,17 @@ onMounted(() => {
<Icon
name="s:community"
mode="svg"
class="s-deco-secondary-700 s-bg-secondary-100 s-bg-2-secondary-200 s-bg-3-secondary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-secondary-600 dark:s-bg-3-primary-900"
:style="{
height: '100%',
width: 'auto',
'--s-deco': 'var(--p-secondary-700)',
'--s-bg': 'var(--p-secondary-100)',
'--s-bg-2': 'var(--p-secondary-200)',
'--s-bg-3': 'var(--p-secondary-400)',
}"
/>
<h2 class="text-5xl text-(--p-primary-600) font-bold leading-[1.3]">
<h2
class="text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
>
<span
class="font-(family-name:--s-title-font) text-(--p-primary-400) font-normal"
class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50"
>COMMUNITY</span
><br />
社区共筑&nbsp;&nbsp;精挑细选
@@ -371,18 +369,20 @@ onMounted(() => {
以开源精神守护应用品质
</p>
</div>
<p class="text-lg text-(--p-surface-700) leading-[2] max-w-[31.8em]">
<p
class="text-lg text-surface-700 leading-[2] max-w-[31.8em] dark:text-surface-200"
>
星火社区构建 Linux
生态「应用银河」，持续上架丰富的跨平台、跨生态应用程序，涵盖系统工具、影音娱乐等精选资源，精准匹配用户需求。年轻开发团队以
00 后为主力，致力让技术成果如星火般点亮数字原野。
</p>
<div class="flex items-center gap-4">
<p class="font-bold text-3xl text-(--p-primary-500)">
<div class="flex items-center gap-4 dark:opacity-80">
<p class="font-bold text-3xl text-primary-500">
全架构<br />
上架应用
</p>
<p
class="text-7xl font-(family-name:--s-title-font) text-(--p-primary-500)"
class="text-7xl font-(family-name:--s-title-font) text-primary-500"
>
{{
Math.floor(
@@ -420,12 +420,11 @@ onMounted(() => {
<!-- 右侧图片区域 -->
<Icon
name="s:community-deco"
class="s-deco-secondary-900 s-bg-primary-200 dark:s-deco-secondary-100 dark:s-bg-primary-500"
mode="svg"
:style="{
height: '100%',
width: 'auto',
'--s-deco': 'var(--p-secondary-900)',
'--s-bg': 'var(--p-primary-200)',
}"
/>
</div>
@@ -434,19 +433,18 @@ onMounted(() => {
<div class="flex items-center justify-center gap-6">
<Icon
name="s:superspeed"
class="s-deco-secondary-700 s-bg-secondary-100 s-bg-2-secondary-200 s-bg-3-secondary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-secondary-600 dark:s-bg-3-primary-900"
mode="svg"
:style="{
height: '100%',
width: 'auto',
'--s-deco': 'var(--p-secondary-700)',
'--s-bg': 'var(--p-secondary-100)',
'--s-bg-2': 'var(--p-secondary-200)',
'--s-bg-3': 'var(--p-secondary-400)',
}"
/>
<h2 class="text-5xl text-(--p-primary-600) font-bold leading-[1.3]">
<h2
class="text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
>
<span
class="font-(family-name:--s-title-font) text-(--p-primary-400) font-normal"
class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50"
>SUPERSPEED</span
><br />
极速下载&nbsp;&nbsp;瞬息可达
@@ -456,12 +454,11 @@ onMounted(() => {
<!-- 左侧图片区域 -->
<Icon
name="s:superspeed-deco"
class="s-deco-secondary-900 s-bg-primary-200 dark:s-deco-secondary-100 dark:s-bg-primary-500"
mode="svg"
:style="{
height: '100%',
width: 'auto',
'--s-deco': 'var(--p-secondary-900)',
'--s-bg': 'var(--p-primary-200)',
}"
/>
@@ -471,14 +468,16 @@ onMounted(() => {
<p class="text-5xl leading-[1.5]">下载「黑科技」</p>
<p class="text-5xl font-bold leading-[1.5]">APTSS 重构智能网络</p>
</div>
<p class="text-lg text-(--p-surface-700) leading-[2] max-w-[31em]">
<p
class="text-lg text-surface-700 leading-[2] max-w-[31em] dark:text-surface-200"
>
下载速度是应用商店的关键指标，而星火应用商店在这方面表现卓越。在软件分发阶段，商店采用基于
APT-Fast 优化的下载工具 APTSS，准备速度较原版提升 300%
以上，处理复杂应用依赖关系亦流畅迅捷；同时支持多线程下载加速，充分利用网络带宽资源，告别卡顿等待。
</p>
<a
href="https://gitee.com/GXDE-OS/aptss"
class="text-xl font-bold text-(--p-secondary-600)"
class="text-xl font-bold text-secondary-600 dark:text-secondary-500"
>🎯 APTSS 源码仓库地址 →</a
>
</div>
@@ -488,22 +487,20 @@ onMounted(() => {
<div class="flex items-center justify-center gap-6">
<Icon
name="s:convenience"
class="s-deco-secondary-700 s-bg-secondary-100 s-bg-2-secondary-200 s-bg-3-secondary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-secondary-600 dark:s-bg-3-primary-900"
mode="svg"
:style="{
height: '100%',
width: 'auto',
'--s-deco': 'var(--p-secondary-700)',
'--s-bg': 'var(--p-secondary-100)',
'--s-bg-2': 'var(--p-secondary-200)',
'--s-bg-3': 'var(--p-secondary-400)',
}"
/>
<h2 class="text-5xl text-(--p-primary-600) font-bold leading-[1.3]">
<h2
class="text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
>
<span
class="font-(family-name:--s-title-font) text-(--p-primary-400) font-normal"
class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50"
>CONVENIENCE</span
><br />
一键安装&nbsp;&nbsp;即刻掌控
><br />一键安装&nbsp;&nbsp;即刻掌控
</h2>
</div>
<div class="flex gap-16">
@@ -515,7 +512,9 @@ onMounted(() => {
让技术普惠真正触手可及
</p>
</div>
<p class="text-lg text-(--p-surface-700) leading-[2] max-w-[31em]">
<p
class="text-lg text-surface-700 leading-[2] max-w-[31em] dark:text-surface-200"
>
星火商店所有程序经过深度适配优化；用户轻点按钮，系统自动完成依赖解析与环境配置，处理复杂软件如搭积木般严丝合缝。从图形应用到编程工具，从
Wine 移植应用到 Android
APP，皆可轻松实现「零门槛安装」。上架应用均通过严格测试，社区开发者持续维护更新，确保每款软件始终良好稳定运行。
@@ -524,12 +523,11 @@ onMounted(() => {
<!-- 右侧图片区域 -->
<Icon
name="s:convenience-deco"
class="s-deco-secondary-900 s-bg-primary-200 dark:s-deco-secondary-100 dark:s-bg-primary-500"
mode="svg"
:style="{
height: '100%',
width: 'auto',
'--s-deco': 'var(--p-secondary-900)',
'--s-bg': 'var(--p-primary-200)',
}"
/>
</div>
@@ -538,7 +536,7 @@ onMounted(() => {
<div
class="fixed top-0 left-0 w-full h-full z-[-1]"
:style="{
opacity: 1 - Math.abs(range(-0.5, 0.5, sProgress - 6)) * 2,
opacity: 0.1 - Math.abs(range(-0.5, 0.5, sProgress - 6)) * 0.2,
transform: `scale(${1 - range(-0.5, 0.5, sProgress - 6)}) rotate(${
range(-0.5, 0.5, sProgress - 6) * 180
}deg)`,
@@ -546,27 +544,20 @@ onMounted(() => {
>
<Icon
name="s:spark"
class="absolute top-1/2 -translate-y-1/2"
class="absolute top-1/2 -translate-y-1/2 s-color-primary-500"
mode="svg"
:style="{
height: 'auto',
width: '100%',
'--s-c1': 'var(--p-primary-100)',
'--s-c2': 'var(--p-primary-100)',
'--s-c3': 'var(--p-primary-100)',
'--s-c4': 'var(--p-primary-100)',
'--s-c5': 'var(--p-primary-100)',
'--s-c6': 'var(--p-primary-100)',
'--s-c7': 'var(--p-primary-100)',
}"
/>
</div>
<!-- 左侧内容区域 -->
<div class="flex flex-col gap-4 items-start">
<div class="flex items-center gap-4">
<p class="font-bold text-3xl text-(--p-primary-600)">星火应用商店</p>
<p class="font-bold text-3xl text-primary-color">星火应用商店</p>
<p
class="font-bold text-2xl text-(--p-secondary-300) font-(family-name:--s-title-font)"
class="font-bold text-2xl text-secondary-300 font-(family-name:--s-title-font) dark:text-secondary-600"
>
SPARK STORE
</p>
@@ -575,13 +566,13 @@ onMounted(() => {
更多精彩，<br />
<span class="font-bold">邀您下载体验。</span>
</p>
<p class="text-lg leading-[2] text-(--p-surface-700)">
<p class="text-lg leading-[2] text-surface-900 dark:text-surface-200">
Linux 软件生态的构建并非依赖个体的孤立努力，而需要全社区共同参与；<br />
只有当大家的「星火」聚集一处，方可引发「燎原之势」。
</p>
<NuxtLink
to="/download"
class="px-14 py-3 text-2xl font-bold text-white from-(--p-primary-400) to-(--p-primary-500) bg-linear-to-r rounded-full"
class="px-14 py-3 text-2xl font-bold text-white from-primary-400 to-primary-500 bg-linear-to-r rounded-full dark:from-primary-500 dark:to-primary-600"
>
<i class="pi pi-download text-xl! font-bold! pr-4" /> 前往下载
</NuxtLink>
@@ -619,6 +610,10 @@ section {
);
}
.s-dark .s-dots {
background-image: linear-gradient(135deg, #d05a63, #d4a641);
}
.figure-container {
background-image: url("~/assets/images/index/figure.png");
background-image: url("~/assets/images/index/figure.webp");
@@ -628,6 +623,12 @@ section {
background-position: center;
}
.s-dark .figure-container {
background-image: url("~/assets/images/index/figure-dark.png");
background-image: url("~/assets/images/index/figure-dark.webp");
background-image: url("~/assets/images/index/figure-dark.avif");
}
.card {
position: relative;
@@ -672,6 +673,25 @@ section {
}
}
.s-dark .card {
&::before {
background-image: linear-gradient(
135deg,
color-mix(in srgb, var(--p-primary-400) 60%, var(--s-background) 40%),
transparent 42%
);
}
&::after {
background-image: linear-gradient(
135deg,
color-mix(in srgb, var(--p-primary-500) 30%, var(--s-background) 70%),
var(--s-background) 42%,
var(--s-background) 50%,
transparent
);
}
}
.s2d {
&::before {
content: "";