From 43ae382ed6fbd3bddbc4b3aafe1ecd05ae62d8dd Mon Sep 17 00:00:00 2001
From: jiwangyihao <jwyh@jwyihao.top>
Date: Mon, 15 Sep 2025 10:28:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=96=87=E6=9C=AC=E9=A2=9C=E8=89=B2=E7=B1=BB?=
 =?UTF-8?q?=E5=90=8D=E6=8B=BC=E5=86=99=E9=94=99=E8=AF=AF=EF=BC=8C=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=9B=BE=E6=A0=87=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=BE=AA=E7=8E=AF=E7=B4=A2=E5=BC=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/about.vue | 18 ++++++++++++------
 pages/index.vue |  6 +++---
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/pages/about.vue b/pages/about.vue
index 12147fc..396382e 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -319,7 +319,7 @@ function scrollIntoView(id: string) {
           </div>
           <div class="flex">
             <p
-              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surfacce-200"
+              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surface-200"
             >
               星火应用商店是专为 Linux
               发行版打造的社区软件平台，提供安全便捷的应用投递、下载与安装服务，让获取
@@ -356,7 +356,7 @@ function scrollIntoView(id: string) {
           </div>
           <div class="flex">
             <p
-              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surfacce-200"
+              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surface-200"
             >
               GXDE OS 是基于 Debian 的 Linux 发行版，是以经典 DDE 15
               桌面环境为核⼼，融合轻量化设计、开箱即用
@@ -397,7 +397,7 @@ function scrollIntoView(id: string) {
           </div>
           <div class="flex">
             <p
-              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surfacce-200"
+              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surface-200"
             >
               Wine 运行器是专为 Linux 用户设计的图形化工具， 通过集成 Wine
               环境、打包器和虚拟机功能，实现 Windows 应用程序的简化部署与运行。
@@ -437,7 +437,7 @@ function scrollIntoView(id: string) {
           </div>
           <div class="flex">
             <p
-              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surfacce-200"
+              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surface-200"
             >
               ACE 兼容环境是一款基于 Bubblewrap
               的容器化应用打包和分发方案，使任意平台的 Linux 发行版能无缝运行
@@ -476,7 +476,7 @@ function scrollIntoView(id: string) {
           </div>
           <div class="flex">
             <p
-              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surfacce-200"
+              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surface-200"
             >
               星火应用管理器是星火社区生态中的本地化应用管理工具，支持启动应用、信息查看、一键卸载及提取安装包等核心功能。
             </p>
@@ -515,7 +515,7 @@ function scrollIntoView(id: string) {
           </div>
           <div class="flex">
             <p
-              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surfacce-200"
+              class="text-left text-xl leading-[1.8] pointer-events-auto dark:text-surface-200"
             >
               星火动态壁纸是基于 X11 显式协议的高性能动态壁纸渲染引擎，专为
               Linux 平台深度优化，实现资源占用与视觉效果的极致平衡。
@@ -627,6 +627,12 @@ function scrollIntoView(id: string) {
   background-image: url("~/assets/images/about/fantascene/placeholder.avif");
 }
 
+.spark-background {
+  background-image: url("~/assets/images/about/spark/background.png");
+  background-image: url("~/assets/images/about/spark/background.webp");
+  background-image: url("~/assets/images/about/spark/background.avif");
+}
+
 .s-dark {
   .spark-placeholder {
     background-image: url("~/assets/images/about/spark/placeholder-dark.png");
diff --git a/pages/index.vue b/pages/index.vue
index 3c73e58..33402d1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -263,13 +263,13 @@ const latestRelease = inject<Ref<Release>>("latestRelease");
             class="w-16 h-16 bg-white rounded-2xl shrink-0 app-icon bg-contain"
             :style="{
               '--s-avif': `url('/app-icons/${
-                appIcons[(i - 1) * 9 + j - 1]
+                appIcons[((i - 1) * 9 + j - 1) % appIcons.length]
               }.avif')`,
               '--s-webp': `url('/app-icons/${
-                appIcons[(i - 1) * 9 + j - 1]
+                appIcons[((i - 1) * 9 + j - 1) % appIcons.length]
               }.webp')`,
               '--s-png': `url('/app-icons/${
-                appIcons[(i - 1) * 9 + j - 1]
+                appIcons[((i - 1) * 9 + j - 1) % appIcons.length]
               }.png')`,
             }"
           ></div>