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

添加商业版页面 (#4)

Browse Source 
* update:添加商业版内容

* update:添加插画并删除多余子版块

* update:加入商业版多发行版信息

* update:增加多cpu厂家标签

* update:商业版主页描述更新

* update:商业版标签前移到下载后面

* update:更新商业版内容“联系客服”按钮点击后的触发逻辑。展示联系方式并调用系统邮箱

* update:“关于页面”添加加入我们按钮

* update:使用@nuxt/icon引入SVG图标

* fix:修复竖屏设备导航栏由于增加”商业版“标签导致“GXDE OS"标签出界问题

* update:删除残留vue文件

* update:加入成果案例到商业版板块

* fix:修复790.29px*780px时，导航栏标签文字换行的问题

* fix:竖屏画面导航栏高度改为h-93.5

* update:更新商业版svg配图

* Standardize nav-link class styling

Removed padding from nav-link classes for consistency.

* fix(nav): 延后导航单行排布断点至 lg

修复视口在 780px~840px 区间时，因导航项增加导致的元素溢出和交叠问题。目前在设备大于 1024px 时才会并排显示导航栏项。

* style(commercial): 彻底重塑商业版前端插画与界面，并适配深色模式

1. 重绘场景插画：重新设计了“案例”、“客服”、“定制化”、“架构”、“分发”等 5 张大型场景 SVG 插图，升级为悬浮玻璃态面板、阵列多核管控板等高阶空间 UI 组合拼贴风，大幅提升商业严肃感与前瞻视觉。
2. 新增专属标题徽章：新设计 5 张针对各主体的立体厚重感微型徽章图（`*-title.svg`），替换原有的字体图标，增强每个模块的大型企服属性。
3. 清除硬编码与深色适配：地毯式拔除了插图内部强制锁色的 `<style>:root` 标签，并移除了用于高光的 `"#ffffff"` 死白硬层，无缝融入系统的深浅色动态 `var(--s-bg)` 等变量，适配完美的 Dark Mode 下暗色面板沉浸效果。
4. 界面版式对齐：重塑首屏第一区块（Section 1）的模拟 UI 板面为科技面板，收束卡片间距；重组了留板表单弹窗以及导航元素，令其样式表现与总应用的主界线全面拉齐。

---------

Co-authored-by: jiwangyihao <jwyh@jwyihao.top>
This commit is contained in:
momen
2026-03-04 13:42:02 +08:00
committed by GitHub
parent 059e01090c
commit be8c0d518f
13 changed files with 1047 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app.vue
View File

@@ -92,8 +92,8 @@ const sDark = computed(() => {
? true
: false
: sDarkConfig.value === "dark"
? true
: false;
? true
: false;
});
provide("sDark", sDark);
@@ -150,7 +150,7 @@ onMounted(() => {
`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)
Math.max(mouseY.value, innerHeight - mouseY.value),
)}px at ${mouseX.value}px ${mouseY.value}px)`,
];
@@ -167,10 +167,10 @@ onMounted(() => {
pseudoElement: `::view-transition-${
sDarkValue ? "old" : "new"
}(root)`,
}
},
);
},
{ immediate: true }
{ immediate: true },
);
});
@@ -192,10 +192,10 @@ const { data: latestRelease } = await useAsyncData(
return appConfig.latestRelease;
} else {
return await $fetch(
"https://gitee.com/api/v5/repos/spark-store-project/spark-store/releases/latest"
"https://gitee.com/api/v5/repos/spark-store-project/spark-store/releases/latest",
);
}
}
},
);
provide("latestRelease", latestRelease);
@@ -206,7 +206,7 @@ const joinGroup = () => {
dialog.value = true;
window.open(
"https://qm.qq.com/cgi-bin/qm/qr?authKey=1Oz2h5JBFSxBsHM63bwY1x0OswtQ08SBKj%2Fw9CRTxZ9%2B8%2FRKNIEv35s%2FhjOdRqkj&k=e7gkRbeGAjTfGupzsWbSbI8mOJM3ZqHQ&noverify=0",
"_blank"
"_blank",
);
};
@@ -246,13 +246,13 @@ const copyGroupNumber = async () => {
<header
ref="header"
tabindex="0"
class="fixed w-full h-15 z-10 px-4 sm:px-8 lg:px-12 translate-y-[calc(var(--s-progress)*4*var(--spacing))] sm:translate-y-[calc(var(--s-progress)*8*var(--spacing))] lg:translate-y-[calc(var(--s-progress)*12*var(--spacing))] before:translate-x-[calc(var(--s-progress)*4*var(--spacing))] sm:before:translate-x-[calc(var(--s-progress)*8*var(--spacing))] lg:before:translate-x-[calc(var(--s-progress)*12*var(--spacing))] before:w-[calc(100%-var(--s-progress)*8*var(--spacing))] sm:before:w-[calc(100%-var(--s-progress)*16*var(--spacing))] lg:before:w-[calc(100%-var(--s-progress)*24*var(--spacing))] sm:h-auto focus-within:h-auto before:h-15 focus-within:before:h-82.5 sm:before:h-full focus-within:sm:before:h-full overflow-hidden focus-within:overflow-visible transition-discrete group"
class="fixed w-full h-15 z-10 px-4 sm:px-8 lg:px-12 translate-y-[calc(var(--s-progress)*4*var(--spacing))] sm:translate-y-[calc(var(--s-progress)*8*var(--spacing))] lg:translate-y-[calc(var(--s-progress)*12*var(--spacing))] before:translate-x-[calc(var(--s-progress)*4*var(--spacing))] sm:before:translate-x-[calc(var(--s-progress)*8*var(--spacing))] lg:before:translate-x-[calc(var(--s-progress)*12*var(--spacing))] before:w-[calc(100%-var(--s-progress)*8*var(--spacing))] sm:before:w-[calc(100%-var(--s-progress)*16*var(--spacing))] lg:before:w-[calc(100%-var(--s-progress)*24*var(--spacing))] sm:h-auto focus-within:h-auto before:h-15 focus-within:before:h-93.5 sm:before:h-full focus-within:sm:before:h-full overflow-hidden focus-within:overflow-visible transition-discrete group"
:style="{ '--s-progress': sProgress }"
@click="if (!header?.matches(':focus-within')) header?.focus();"
@focus="handleHeaderFocus"
>
<nav
class="relative flex px-2.5 md:px-4 lg:px-8 items-center flex-col md:flex-row before:opacity-0 group-focus-within:before:opacity-100 sm:before:opacity-100 before:origin-top before:scale-0 group-focus-within:before:scale-100 sm:before:scale-100 before:translate-x-[calc(50vw-14.5*var(--spacing))] before:translate-y-15 group-focus-within:before:translate-x-[calc(var(--s-x)*1px)] group-focus-within:before:translate-y-[calc(var(--s-y)*1px)] sm:before:translate-x-[calc(var(--s-x)*1px)] sm:before:translate-y-[calc(var(--s-y)*1px)]"
class="relative flex px-2.5 md:px-4 lg:px-8 items-center flex-col lg:flex-row before:opacity-0 group-focus-within:before:opacity-100 sm:before:opacity-100 before:origin-top before:scale-0 group-focus-within:before:scale-100 sm:before:scale-100 before:translate-x-[calc(50vw-14.5*var(--spacing))] before:translate-y-15 group-focus-within:before:translate-x-[calc(var(--s-x)*1px)] group-focus-within:before:translate-y-[calc(var(--s-y)*1px)] sm:before:translate-x-[calc(var(--s-x)*1px)] sm:before:translate-y-[calc(var(--s-y)*1px)]"
:class="{ mounted }"
:style="{
'--s-x': sX,
@@ -286,10 +286,10 @@ const copyGroupNumber = async () => {
</div>
</div>
<div
class="flex grow pb-2.5 md:pt-2.5 items-end sm:items-center flex-row-reverse sm:flex-row w-full sm:w-auto justify-between md:justify-end opacity-0 group-focus-within:opacity-100 sm:opacity-100 origin-top scale-0 group-focus-within:scale-100 sm:scale-100 transition-transform duration-300"
class="flex grow pb-2.5 lg:pt-2.5 items-end sm:items-center flex-row-reverse sm:flex-row w-full sm:w-auto justify-between lg:justify-end opacity-0 group-focus-within:opacity-100 sm:opacity-100 origin-top scale-0 group-focus-within:scale-100 sm:scale-100 transition-transform duration-300"
>
<div
class="flex flex-col gap-1 mr-1.5 md:mr-1 lg:gap-2 lg:mr-2 sm:flex-row items-end sm:items-center"
class="flex flex-col gap-1 mr-1.5 lg:mr-1 lg:gap-2 lg:mr-2 sm:flex-row items-end sm:items-center"
>
<NuxtLink to="/" class="nav-link" active-class="active">
首页
@@ -297,6 +297,9 @@ const copyGroupNumber = async () => {
<NuxtLink to="/download" class="nav-link" active-class="active">
下载
</NuxtLink>
<NuxtLink to="/commercial" class="nav-link" active-class="active">
商业版
</NuxtLink>
<a
href="https://bbs.spark-app.store/"
class="nav-link"
@@ -323,8 +326,8 @@ const copyGroupNumber = async () => {
sDarkConfig === 'auto'
? 'pi-bullseye'
: sDarkConfig === 'dark'
? 'pi-moon'
: 'pi-sun'
? 'pi-moon'
: 'pi-sun'
}`"
aria-label="Toggle Dark Mode"
size="small"
@@ -513,6 +516,7 @@ header {
border-radius: calc(var(--spacing) * 4.75);
font-weight: bold;
color: var(--p-surface-600);
white-space: nowrap;
&.active {
color: var(--p-primary-600);

14
assets/icons/commercial-architecture-title.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="64" y="64" width="384" height="96" rx="16" fill="var(--s-bg)"/>
<circle cx="112" cy="112" r="16" fill="var(--s-bg-3)"/>
<circle cx="160" cy="112" r="16" fill="var(--s-deco)"/>
<rect x="64" y="208" width="384" height="96" rx="16" fill="var(--s-bg-2)"/>
<circle cx="112" cy="256" r="16" fill="var(--s-bg-3)"/>
<circle cx="160" cy="256" r="16" fill="var(--s-bg)"/>
<rect x="64" y="352" width="384" height="96" rx="16" fill="var(--s-deco)"/>
<circle cx="112" cy="400" r="16" fill="var(--s-bg-2)"/>
<circle cx="160" cy="400" r="16" fill="var(--s-bg-3)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 719 B

76
assets/icons/commercial-architecture.svg Normal file
View File

@@ -0,0 +1,76 @@
<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="hubglow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="var(--s-bg-2)" stop-opacity="0.4"/>
<stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
</radialGradient>
<linearGradient id="layer" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.9" />
<stop offset="100%" stop-color="var(--s-bg-2)" stop-opacity="0.5" />
</linearGradient>
<filter id="shadow-arch" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="-10" dy="25" stdDeviation="25" flood-opacity="0.15" />
</filter>
</defs>
<!-- Central Hub Layers -->
<g transform="translate(100, 420)">
<!-- Base Platform -->
<path d="M 300 100 L 500 200 L 300 300 L 100 200 Z" fill="var(--s-bg-2)" opacity="0.4" />
<path d="M 300 0 L 550 120 L 300 250 L 50 120 Z" fill="var(--s-bg-3)" opacity="0.3" transform="translate(0, -60)" />
<!-- Central Core Layer -->
<!-- Center block -->
<g transform="translate(300, 50)" filter="url(#shadow-arch)">
<path d="M 0 0 L 100 -50 L 0 -100 L -100 -50 Z" fill="var(--s-deco)" />
<path d="M 0 0 L 100 -50 L 100 50 L 0 100 Z" fill="var(--s-deco)" opacity="0.7"/>
<path d="M 0 0 L -100 -50 L -100 50 L 0 100 Z" fill="var(--s-deco)" opacity="0.5"/>
</g>
<g transform="translate(300, -80)" filter="url(#shadow-arch)">
<path d="M 0 0 L 60 -30 L 0 -60 L -60 -30 Z" fill="var(--s-bg)" />
<path d="M 0 0 L 60 -30 L 60 40 L 0 70 Z" fill="var(--s-bg)" opacity="0.7"/>
<path d="M 0 0 L -60 -30 L -60 40 L 0 70 Z" fill="var(--s-bg)" opacity="0.5"/>
</g>
<!-- Floating Architectural Nodes -->
<!-- Left Node -->
<g transform="translate(100, -20)" filter="url(#shadow-arch)">
<path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-3)" />
<path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.7"/>
<path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.5"/>
<path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-bg)" />
</g>
<!-- Top Node -->
<g transform="translate(300, -220)" filter="url(#shadow-arch)">
<path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-2)" />
<path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.7"/>
<path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.5"/>
<path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-deco)" />
</g>
<!-- Right Node -->
<g transform="translate(500, -20)" filter="url(#shadow-arch)">
<path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-3)" />
<path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.7"/>
<path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.5"/>
<path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-bg)" />
</g>
<!-- Right Node 2-->
<g transform="translate(420, 140)" filter="url(#shadow-arch)">
<path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-2)" />
<path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.7"/>
<path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.5"/>
<path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-bg)" />
</g>
<!-- Connecting Datastreams -->
<path d="M 300 -80 L 300 -220" stroke="var(--s-deco)" stroke-width="4" stroke-dasharray="8,8" opacity="0.8" />
<path d="M 100 -20 L 300 80" stroke="var(--s-bg-3)" stroke-width="4" stroke-dasharray="8,8" />
<path d="M 500 -20 L 300 80" stroke="var(--s-bg-3)" stroke-width="4" stroke-dasharray="8,8" />
<path d="M 420 90 L 300 30" stroke="var(--s-bg-2)" stroke-width="4" stroke-dasharray="8,8" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

10
assets/icons/commercial-case-title.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(256, 256)">
<rect x="-160" y="-160" width="160" height="160" rx="32" fill="var(--s-bg-2)"/>
<rect x="0" y="-160" width="160" height="160" rx="32" fill="var(--s-bg)"/>
<rect x="-160" y="0" width="160" height="160" rx="32" fill="var(--s-bg-3)"/>
<rect x="0" y="0" width="160" height="160" rx="32" fill="var(--s-deco)"/>
<circle cx="0" cy="0" r="48" fill="var(--s-bg)" opacity="0.9"/>
<circle cx="0" cy="0" r="16" fill="var(--s-bg-2)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 589 B

79
assets/icons/commercial-case.svg Normal file
View File

@@ -0,0 +1,79 @@
<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.5"/>
<stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
</radialGradient>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="25" stdDeviation="30" flood-opacity="0.1" />
</filter>
</defs>
<rect x="0" y="0" width="800" height="800" fill="url(#glow)" />
<!-- Connecting Lines for Dashboard & Nodes -->
<path d="M 400 400 L 200 250" fill="none" stroke="var(--s-deco)" stroke-width="4" stroke-dasharray="10 10"/>
<path d="M 400 400 L 650 300" fill="none" stroke="var(--s-bg-2)" stroke-width="4" stroke-dasharray="10 10"/>
<path d="M 400 400 L 250 600" fill="none" stroke="var(--s-bg-3)" stroke-width="4" stroke-dasharray="10 10"/>
<path d="M 400 400 L 600 650" fill="none" stroke="var(--s-deco)" stroke-width="4" stroke-dasharray="10 10"/>
<!-- Central Management Dashboard Panel -->
<g transform="translate(250, 250)" filter="url(#shadow)">
<!-- Base Panel - using bg instead of fixed #ffffff -->
<rect width="300" height="300" rx="30" fill="var(--s-bg)" stroke="var(--s-bg-3)" stroke-width="3" opacity="0.95"/>
<!-- Top Header -->
<path d="M 0 30 C 0 13.431 13.431 0 30 0 L 270 0 C 286.569 0 300 13.431 300 30 L 300 60 L 0 60 Z" fill="var(--s-bg-2)" opacity="0.5"/>
<circle cx="30" cy="30" r="8" fill="var(--s-deco)"/>
<circle cx="55" cy="30" r="8" fill="var(--s-bg-2)"/>
<circle cx="80" cy="30" r="8" fill="var(--s-bg-3)"/>
<!-- Data Bars inside Dashboard -->
<rect x="30" y="100" width="240" height="40" rx="12" fill="var(--s-bg-2)"/>
<rect x="30" y="155" width="240" height="40" rx="12" fill="var(--s-bg-3)"/>
<rect x="30" y="210" width="160" height="40" rx="12" fill="var(--s-deco)"/>
<rect x="205" y="210" width="65" height="40" rx="12" fill="var(--s-bg-2)"/>
<!-- Status Checkmarks / Dots -->
<circle cx="240" cy="120" r="8" fill="var(--s-bg)" opacity="0.8"/>
<circle cx="240" cy="175" r="8" fill="var(--s-bg)" opacity="0.8"/>
<circle cx="160" cy="230" r="8" fill="var(--s-bg-2)"/>
</g>
<!-- Peripheral Device 1 (Top Left) -->
<g transform="translate(100, 150) rotate(-15)" filter="url(#shadow)">
<rect width="180" height="120" rx="20" fill="var(--s-bg-2)"/>
<rect x="20" y="20" width="140" height="80" rx="12" fill="var(--s-bg)" opacity="0.9"/>
<rect x="40" y="40" width="100" height="12" rx="6" fill="var(--s-deco)"/>
<circle cx="50" cy="75" r="10" fill="var(--s-bg-2)"/>
<rect x="70" y="70" width="50" height="10" rx="5" fill="var(--s-bg-3)"/>
</g>
<!-- Peripheral Device 2 (Top Right) -->
<g transform="translate(560, 200) rotate(10)" filter="url(#shadow)">
<rect width="140" height="160" rx="24" fill="var(--s-bg-2)"/>
<rect x="20" y="20" width="100" height="70" rx="15" fill="var(--s-bg)" opacity="0.95"/>
<rect x="20" y="100" width="100" height="20" rx="10" fill="var(--s-bg-3)"/>
<rect x="40" y="130" width="60" height="10" rx="5" fill="var(--s-deco)"/>
</g>
<!-- Peripheral Device 3 (Bottom Left) -->
<g transform="translate(150, 520) rotate(5)" filter="url(#shadow)">
<rect width="160" height="140" rx="24" fill="var(--s-bg-3)"/>
<rect x="20" y="20" width="120" height="60" rx="12" fill="var(--s-bg)" opacity="0.95"/>
<circle cx="50" cy="105" r="15" fill="var(--s-deco)"/>
<rect x="80" y="100" width="50" height="10" rx="5" fill="var(--s-bg-2)"/>
</g>
<!-- Peripheral Device 4 (Bottom Right) -->
<g transform="translate(520, 550) rotate(-8)" filter="url(#shadow)">
<rect width="180" height="100" rx="20" fill="var(--s-bg-2)"/>
<rect x="20" y="20" width="60" height="60" rx="15" fill="var(--s-bg)" opacity="0.95"/>
<rect x="90" y="30" width="70" height="12" rx="6" fill="var(--s-deco)"/>
<rect x="90" y="55" width="50" height="12" rx="6" fill="var(--s-bg-3)"/>
</g>
<circle cx="350" cy="120" r="18" fill="var(--s-bg-3)"/>
<circle cx="680" cy="500" r="12" fill="var(--s-deco)"/>
<circle cx="100" cy="450" r="16" fill="var(--s-bg-2)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

10
assets/icons/commercial-contact-title.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(256, 256)">
<rect x="-160" y="-120" width="160" height="240" rx="32" fill="var(--s-bg-2)"/>
<rect x="-80" y="-80" width="240" height="160" rx="40" fill="var(--s-bg)"/>
<rect x="0" y="40" width="160" height="80" rx="20" fill="var(--s-deco)"/>
<circle cx="80" cy="80" r="12" fill="var(--s-bg)" opacity="0.9"/>
<rect x="40" y="-20" width="80" height="16" rx="8" fill="var(--s-deco)"/>
<rect x="40" y="12" width="40" height="16" rx="8" fill="var(--s-bg-3)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 610 B

55
assets/icons/commercial-contact.svg Normal file
View File

@@ -0,0 +1,55 @@
<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.6"/>
<stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
</radialGradient>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="-10" dy="25" stdDeviation="30" flood-opacity="0.1" />
</filter>
</defs>
<rect x="0" y="0" width="800" height="800" fill="url(#glow)" />
<!-- Background Abstract Message Shape -->
<g transform="translate(400, 420) rotate(-15)">
<rect x="-240" y="-180" width="480" height="360" rx="60" fill="var(--s-bg)" opacity="0.8"/>
</g>
<!-- Mail / Contact Card floating in front -->
<g transform="translate(160, 220)" filter="url(#shadow)">
<!-- Base Card -->
<rect width="460" height="300" rx="30" fill="var(--s-bg)" stroke="var(--s-bg-2)" stroke-width="2" opacity="0.95"/>
<!-- Top Bar -->
<path d="M 0 30 C 0 13.431 13.431 0 30 0 L 430 0 C 446.569 0 460 13.431 460 30 L 460 80 L 0 80 Z" fill="var(--s-bg-2)"/>
<circle cx="50" cy="40" r="16" fill="var(--s-bg)" opacity="0.8"/>
<rect x="80" y="32" width="160" height="16" rx="8" fill="var(--s-bg)" opacity="0.8"/>
<!-- Messages Body -->
<rect x="40" y="110" width="220" height="50" rx="20" fill="var(--s-bg-2)"/>
<rect x="60" y="125" width="160" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
<rect x="60" y="140" width="100" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
<rect x="200" y="180" width="220" height="50" rx="20" fill="var(--s-bg-3)"/>
<rect x="220" y="195" width="180" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
<rect x="220" y="210" width="120" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
<rect x="40" y="250" width="180" height="20" rx="10" fill="var(--s-bg-2)" opacity="0.8"/>
</g>
<!-- Floating Stats Card (Graph) representing Solution/Quote -->
<g transform="translate(520, 440) rotate(8)" filter="url(#shadow)">
<rect width="200" height="220" rx="30" fill="var(--s-bg)" stroke="var(--s-deco)" stroke-width="3" opacity="0.95"/>
<rect x="30" y="30" width="140" height="140" rx="70" fill="none" stroke="var(--s-bg-2)" stroke-width="20"/>
<path d="M 100 30 A 70 70 0 0 1 170 100" fill="none" stroke="var(--s-deco)" stroke-width="20" stroke-linecap="round"/>
<circle cx="100" cy="100" r="24" fill="var(--s-bg-3)"/>
<rect x="40" y="180" width="120" height="16" rx="8" fill="var(--s-bg-2)"/>
</g>
<!-- Accent Elements -->
<circle cx="680" cy="220" r="15" fill="var(--s-deco)"/>
<circle cx="150" cy="580" r="25" fill="var(--s-bg-3)"/>
<rect x="620" y="160" width="40" height="40" rx="10" fill="var(--s-deco)" transform="rotate(25 640 180)"/>
<circle cx="120" cy="380" r="15" fill="var(--s-bg-2)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

10
assets/icons/commercial-customization-title.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="160" cy="160" r="64" fill="var(--s-bg-3)"/>
<circle cx="352" cy="112" r="48" fill="var(--s-bg-2)"/>
<circle cx="112" cy="352" r="48" fill="var(--s-bg)"/>
<path d="M 224 224 L 400 352 C 430 376 430 416 400 440 C 370 464 330 464 300 440 L 124 316 Z" fill="var(--s-deco)"/>
<circle cx="350" cy="400" r="16" fill="var(--s-bg)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 465 B

49
assets/icons/commercial-customization.svg Normal file
View File

@@ -0,0 +1,49 @@
<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.8"/>
<stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
</radialGradient>
<linearGradient id="glass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.9" />
<stop offset="100%" stop-color="var(--s-bg-2)" stop-opacity="0.3" />
</linearGradient>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="25" stdDeviation="30" flood-opacity="0.1" />
</filter>
</defs>
<rect x="0" y="0" width="800" height="800" fill="url(#glow)" />
<!-- Base Device Layer -->
<g transform="translate(150, 200) rotate(-10)" filter="url(#shadow)">
<rect width="500" height="400" rx="40" fill="url(#glass)" stroke="var(--s-bg-3)" stroke-width="4"/>
<rect x="30" y="30" width="440" height="340" rx="24" fill="var(--s-bg)"/>
<!-- UI elements representing customization -->
<rect x="50" y="50" width="200" height="30" rx="15" fill="var(--s-bg-2)" />
<!-- Content Cards -->
<rect x="50" y="110" width="180" height="120" rx="20" fill="var(--s-deco)" opacity="0.8" />
<rect x="250" y="110" width="120" height="120" rx="20" fill="var(--s-bg-3)" />
<rect x="390" y="110" width="60" height="120" rx="20" fill="var(--s-bg-2)" />
<!-- Bottom Dashboard elements -->
<circle cx="100" cy="290" r="40" fill="var(--s-bg-3)" />
<rect x="160" y="270" width="290" height="20" rx="10" fill="var(--s-bg-2)" />
<rect x="160" y="310" width="150" height="20" rx="10" fill="var(--s-deco)" opacity="0.5" />
</g>
<!-- Floating Customized Panels -->
<g transform="translate(500, 480) rotate(15)" filter="url(#shadow)">
<rect width="200" height="150" rx="20" fill="url(#glass)" stroke="var(--s-deco)" stroke-width="4"/>
<circle cx="100" cy="75" r="30" fill="var(--s-deco)" />
</g>
<g transform="translate(100, 520) rotate(-5)" filter="url(#shadow)">
<rect width="220" height="80" rx="40" fill="var(--s-bg-3)"/>
<circle cx="40" cy="40" r="20" fill="var(--s-bg)" />
<rect x="80" y="30" width="100" height="20" rx="10" fill="var(--s-bg)" />
</g>
<path d="M 650 150 L 670 150 M 660 140 L 660 160" stroke="var(--s-deco)" stroke-width="4" stroke-linecap="round"/>
<path d="M 120 280 L 140 280 M 130 270 L 130 290" stroke="var(--s-bg-3)" stroke-width="4" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

14
assets/icons/commercial-distribution-title.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="256" cy="256" r="80" fill="var(--s-deco)"/>
<circle cx="256" cy="64" r="48" fill="var(--s-bg)"/>
<circle cx="256" cy="448" r="48" fill="var(--s-bg-2)"/>
<circle cx="64" cy="256" r="48" fill="var(--s-bg-3)"/>
<circle cx="448" cy="256" r="48" fill="var(--s-bg)"/>
<path d="M 256 112 L 256 176" stroke="var(--s-deco)" stroke-width="24"/>
<path d="M 256 400 L 256 336" stroke="var(--s-deco)" stroke-width="24"/>
<path d="M 112 256 L 176 256" stroke="var(--s-deco)" stroke-width="24"/>
<path d="M 400 256 L 336 256" stroke="var(--s-deco)" stroke-width="24"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 726 B

67
assets/icons/commercial-distribution.svg Normal file
View File

@@ -0,0 +1,67 @@
<svg viewBox="-500 -500 1000 1000" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="20" stdDeviation="25" flood-color="var(--s-bg-3)" flood-opacity="0.25" />
</filter>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="var(--s-bg-2)" stop-opacity="0.8"/>
<stop offset="100%" stop-color="var(--s-bg-3)" stop-opacity="0.9"/>
</linearGradient>
</defs>
<!-- Orbital patterns -->
<g opacity="0.6" stroke="var(--s-bg)" stroke-width="4" fill="none">
<ellipse cx="0" cy="0" rx="350" ry="150" transform="rotate(-25)" stroke-dasharray="25 10 5 10" />
<ellipse cx="0" cy="0" rx="400" ry="180" transform="rotate(25)" stroke-dasharray="10 20" stroke-width="8"/>
</g>
<!-- Central Hub (Spark Store) -->
<g filter="url(#shadow)">
<!-- Base aura -->
<circle cx="0" cy="0" r="110" fill="url(#grad1)"/>
<!-- Overlapping geometry -->
<circle cx="0" cy="0" r="70" fill="var(--s-deco)" opacity="0.4"/>
<rect x="-35" y="-35" width="70" height="70" rx="15" fill="var(--s-bg)" transform="rotate(45)"/>
<circle cx="0" cy="0" r="15" fill="var(--s-bg-3)" />
</g>
<!-- Outer orbiting nodes -->
<!-- Node 1: UOS / Deepin (Diamond-like) -->
<g transform="translate(180, -260) rotate(-25)" filter="url(#shadow)">
<rect x="-45" y="-45" width="90" height="90" rx="20" transform="rotate(45)" fill="var(--s-bg-2)"/>
<rect x="-25" y="-25" width="50" height="50" rx="10" transform="rotate(45)" fill="var(--s-deco)" opacity="0.5"/>
</g>
<path d="M 60 -80 L 140 -200" stroke="var(--s-deco)" stroke-width="5" stroke-dasharray="8,8" opacity="0.7"/>
<!-- Node 2: Kylin (Hexagon) -->
<g transform="translate(-280, 100) rotate(15)" filter="url(#shadow)">
<path d="M 0 -60 L 52 -30 L 52 30 L 0 60 L -52 30 L -52 -30 Z" fill="var(--s-bg-3)"/>
<circle cx="0" cy="0" r="25" fill="var(--s-bg)"/>
</g>
<path d="M -90 30 L -210 75" stroke="var(--s-bg-3)" stroke-width="5" stroke-dasharray="8,8" opacity="0.7"/>
<!-- Node 3: Fangde (Tech Container) -->
<g transform="translate(300, 180) rotate(-10)" filter="url(#shadow)">
<rect x="-60" y="-50" width="120" height="100" rx="25" fill="var(--s-bg)"/>
<rect x="-35" y="-25" width="70" height="50" rx="15" fill="var(--s-bg-2)"/>
<circle cx="-45" cy="-35" r="5" fill="var(--s-deco)"/>
<circle cx="45" cy="35" r="5" fill="var(--s-deco)"/>
</g>
<path d="M 80 50 L 230 140" stroke="var(--s-bg)" stroke-width="5" stroke-dasharray="8,8" opacity="0.7"/>
<!-- Node 4: Small satellite -->
<g transform="translate(-150, -180)" filter="url(#shadow)">
<circle cx="0" cy="0" r="30" fill="var(--s-deco)" opacity="0.8"/>
</g>
<path d="M -60 -60 L -120 -150" stroke="var(--s-deco)" stroke-width="3" stroke-dasharray="5,5" opacity="0.5"/>
<!-- Floating particles -->
<g filter="url(#shadow)">
<circle cx="360" cy="-60" r="20" fill="var(--s-bg)" opacity="0.6"/>
<circle cx="-60" cy="280" r="15" fill="var(--s-bg-3)" opacity="0.8"/>
<rect x="200" y="-50" width="15" height="15" rx="4" fill="var(--s-deco)" opacity="0.5"/>
<rect x="-100" y="150" width="20" height="20" rx="5" fill="var(--s-bg-2)" transform="rotate(30)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

10
pages/about.vue
View File

@@ -71,6 +71,16 @@ function scrollIntoView(id: string) {
>我们期待通过社区用户的互助和支持，让星火计划的火焰持续燃烧，为
Linux 生态系统带来持续的活力。
</p>
<a
href="https://join-us.spark-app.store/"
target="_blank"
class="px-8 py-2.5 text-2xl font-bold text-white self-start mt-4 pointer-events-auto from-primary-400 to-primary-500 bg-linear-to-r rounded-full dark:from-primary-500 dark:to-primary-600"
>
<span class="font-(family-name:--s-title-font) opacity-60 mr-4"
>JOIN</span
>
加入我们
</a>
</div>
</div>

635
pages/commercial.vue Normal file
View File

@@ -0,0 +1,635 @@
<script setup lang="ts">
import {
onMounted,
watchEffect,
ref,
inject,
type Ref,
type ComponentPublicInstance,
} from "vue";
import { range } from "~/utils/index";
import Dialog from "primevue/dialog";
const scrollPanel = inject<Ref<ComponentPublicInstance>>("scrollPanel");
const sProgress = ref(0);
const contactDialog = ref(false);
onMounted(() => {
watchEffect(() => {
const scrollTop =
(scrollPanel?.value as unknown as { lastScrollTop: number })
.lastScrollTop || 0;
const clientHeight = scrollPanel?.value?.$el.clientHeight || 1;
sProgress.value = scrollTop / clientHeight;
});
});
const scrollToNext = () => {
const container = scrollPanel?.value?.$el.firstChild.firstChild;
if (container) {
container.scrollBy({ top: window.innerHeight, behavior: "smooth" });
}
};
const sendEmail = () => {
const to = "shenmo@spark-app.store";
const cc = "momen@spark-app.store";
const subject = encodeURIComponent("商业版咨询");
const body = encodeURIComponent("您好，我想咨询商业版的相关信息：\n\n");
window.location.href = `mailto:${to}?cc=${cc}&subject=${subject}&body=${body}`;
contactDialog.value = true;
};
</script>
<template>
<div class="page">
<section
class="relative flex items-center justify-center gap-10 pt-24 pb-24 sm:pb-0 flex-col sm:flex-row"
>
<div
class="fixed w-full h-full s-size-4 lg:s-size-5.5 top-0 left-0 z-[-1] flex items-end sm:justify-center"
:style="{
opacity: 1 - range(0, 0.5, sProgress) * 2,
'--s-n': 16,
'--s-progress': range(0, 0.5, sProgress) * 2,
}"
>
<div class="absolute top-0 left-0 flex flex-col">
<div v-for="r in 16" :key="r" class="flex">
<i
v-for="c in Math.min(16, 16 - r + 3)"
:key="`${r}-${c}`"
class="s-dots"
:style="{
'--s-row': r,
'--s-col': c,
}"
/>
</div>
</div>
<div class="absolute bottom-0 right-0 flex flex-col rotate-180">
<div v-for="r in 16" :key="r" class="flex">
<i
v-for="c in Math.min(16, 16 - r + 3)"
:key="`${r}-${c}`"
class="s-dots"
:style="{
'--s-row': r,
'--s-col': c,
'--s-n': 16,
}"
/>
</div>
</div>
</div>
<div
class="card flex flex-col lg:flex-row items-center lg:items-center px-4 md:px-6 lg:px-9 rounded-3xl gap-10 sm:gap-14 py-8 pb-15 sm:py-15 w-full max-w-7xl"
>
<div class="flex flex-col gap-6 lg:gap-8 flex-1">
<div class="flex flex-col text-center lg:text-left gap-4">
<h1
class="font-bold text-4xl sm:text-5xl lg:text-6xl text-surface-900 dark:text-surface-50"
>
星火应用商店<br />
<span class="text-primary-500 mt-2 block">商业版</span>
</h1>
</div>
<div
class="flex flex-col text-surface-500 gap-2 text-base sm:text-lg lg:text-xl text-center lg:text-left dark:text-surface-300"
>
<p>为政府、企事业单位客户提供专业的应用商店解决方案：</p>
<div class="flex flex-col gap-1 mt-2 lg:items-start items-center">
<span class="flex items-center gap-2"
><i class="pi pi-check text-primary-500" />
支持安装在主流信创设备上</span
>
<span class="flex items-center gap-2"
><i class="pi pi-check text-primary-500" />
支持定制客户端和服务器端本地部署</span
>
<span class="flex items-center gap-2"
><i class="pi pi-check text-primary-500" />
支持指定软件适配服务和信创设备迁移</span
>
</div>
<p class="mt-4 font-semibold">助力客户构建完善的软件分发体系。</p>
</div>
<div class="flex gap-4 mt-2 justify-center lg:justify-start">
<button
@click="sendEmail"
class="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white rounded-full font-bold shadow-lg shadow-primary-500/30 transition-all hover:-translate-y-1"
>
联系客服
</button>
<button
@click="scrollToNext"
class="px-6 py-3 border-2 border-primary-500 text-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-full font-bold transition-all hover:-translate-y-1 cursor-pointer"
>
了解更多
</button>
</div>
</div>
<!-- 模拟企业控制台 UI 窗口 -->
<div
class="hidden sm:flex flex-col flex-1 max-w-lg w-full rounded-2xl bg-surface-0/60 dark:bg-surface-800/80 shadow-[0_20px_50px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.5)] overflow-hidden border border-surface-200/50 dark:border-surface-700/50 h-[380px] relative font-mono backdrop-blur-xl"
>
<!-- 动态背景光晕 -->
<div
class="absolute -top-20 -right-20 w-64 h-64 bg-primary-500/10 dark:bg-primary-500/5 blur-3xl rounded-full"
></div>
<div
class="absolute -bottom-20 -left-20 w-64 h-64 bg-secondary-500/10 dark:bg-secondary-500/5 blur-3xl rounded-full"
></div>
<div
class="h-12 border-b border-surface-200/50 dark:border-surface-700/50 flex items-center px-4 bg-surface-50/80 dark:bg-surface-900/80 backdrop-blur-md"
>
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-red-400"></div>
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<div class="w-3 h-3 rounded-full bg-green-400"></div>
</div>
<div
class="ml-4 h-4 w-40 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"
></div>
<div class="ml-auto flex gap-3">
<div
class="h-4 w-12 bg-primary-100 dark:bg-primary-900/50 rounded-lg border border-primary-200 dark:border-primary-800"
></div>
</div>
</div>
<div class="flex flex-1 overflow-hidden relative z-10">
<!-- 左侧边栏 -->
<div
class="w-1/3 border-r border-surface-100 dark:border-surface-700/50 p-4 flex flex-col gap-4 bg-surface-50/50 dark:bg-surface-800/50 backdrop-blur-sm"
>
<div
class="h-8 w-full bg-primary-500 text-white rounded-lg flex items-center justify-center text-xs font-bold tracking-wider shadow-sm"
>
SPARK PRO
</div>
<div class="flex flex-col gap-2 mt-2">
<div
class="h-5 w-full bg-surface-100 dark:bg-surface-700 rounded-md"
></div>
<div
class="h-5 w-5/6 bg-surface-100 dark:bg-surface-700 rounded-md"
></div>
<div
class="h-5 w-4/5 bg-surface-100 dark:bg-surface-700 rounded-md"
></div>
</div>
<div
class="mt-auto p-3 rounded-xl bg-primary-50 dark:bg-primary-900/20 border border-primary-100 dark:border-primary-800"
>
<div
class="w-8 h-8 rounded-full bg-primary-200 dark:bg-primary-800 mb-2 flex items-center justify-center"
>
<div class="w-4 h-4 rounded-full bg-primary-500"></div>
</div>
<div
class="h-2 w-1/2 bg-primary-300 dark:bg-primary-700 rounded-full mb-1"
></div>
<div
class="h-2 w-3/4 bg-primary-200 dark:bg-primary-800 rounded-full"
></div>
</div>
</div>
<!-- 右侧主体内容 -->
<div
class="w-2/3 p-6 flex flex-col gap-5 bg-surface-0/50 dark:bg-surface-800/20 backdrop-blur-sm"
>
<div class="flex gap-4">
<div
class="flex-[2] h-16 rounded-xl from-primary-400 to-primary-600 bg-linear-to-br shadow-md p-3 flex flex-col justify-end text-white"
>
<div class="h-2 w-1/3 bg-white/30 rounded-full mb-1"></div>
<div class="h-3 w-1/2 bg-white/50 rounded-full"></div>
</div>
<div
class="flex-1 h-16 rounded-xl bg-surface-100 dark:bg-surface-700 flex items-center justify-center border border-surface-200 dark:border-surface-600"
>
<div
class="w-8 h-8 rounded-lg bg-surface-300 dark:bg-surface-500"
></div>
</div>
</div>
<div
class="flex-1 rounded-xl border border-surface-100 dark:border-surface-700 bg-surface-50/50 dark:bg-surface-800/80 p-4 flex flex-col gap-3"
>
<div class="flex justify-between items-center mb-2">
<div
class="h-3 w-20 bg-surface-300 dark:bg-surface-600 rounded-full"
></div>
<div class="h-3 w-10 bg-green-400 rounded-full"></div>
</div>
<div class="flex items-end gap-2 flex-1 pt-4">
<div
class="w-1/5 rounded-t-md bg-primary-200 dark:bg-primary-900 h-[40%]"
></div>
<div
class="w-1/5 rounded-t-md bg-primary-300 dark:bg-primary-800 h-[60%]"
></div>
<div
class="w-1/5 rounded-t-md bg-primary-400 dark:bg-primary-700 h-[100%]"
></div>
<div
class="w-1/5 rounded-t-md bg-primary-300 dark:bg-primary-800 h-[80%]"
></div>
<div
class="w-1/5 rounded-t-md bg-primary-200 dark:bg-primary-900 h-[50%]"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section
class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
>
<div
class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
>
<Icon
name="s:commercial-customization-title"
mode="svg"
class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
/>
<h2
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
>
<span
class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
>CUSTOMIZATION</span
><br />
专业定制&nbsp;&nbsp;专属服务
</h2>
</div>
<div
class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col-reverse sm:flex-row items-center justify-center"
>
<div
class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
>
<div
class="flex flex-col text-center sm:text-start items-center sm:items-start"
>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
>
专属企业形象
</p>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
>
满足企业个性化需求
</p>
</div>
<p
class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
>
商业版提供专属定制服务，可根据企业需求修改应用商店名称、logo、主题风格等，打造独一无二的企业级应用商店，提升企业品牌形象。从界面呈现到功能模块设定，全方位实现开箱即用的企业级定制。
</p>
<p
class="font-bold text-surface-700 dark:text-surface-300 text-base md:text-lg leading-[2]"
>
专属定制 / Logo 替换 / 风格定制
</p>
</div>
<Icon
name="s:commercial-customization"
class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
mode="svg"
/>
</div>
</section>
<section
class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
>
<div
class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
>
<Icon
name="s:commercial-architecture-title"
mode="svg"
class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
/>
<h2
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
>
<span
class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
>ARCHITECTURE</span
><br />
多重架构&nbsp;&nbsp;全系覆盖
</h2>
</div>
<div
class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col sm:flex-row items-center justify-center"
>
<Icon
name="s:commercial-architecture"
class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
mode="svg"
/>
<div
class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
>
<div
class="flex flex-col text-center sm:text-start items-center sm:items-start"
>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
>
不畏多重阻碍
</p>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
>
支持国内全平台硬件
</p>
</div>
<p
class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
>
商业版支持 amd64、arm64、loongarch64 等多种 CPU
架构部署，可在不同硬件平台上稳定运行，满足企业多样化的复杂部署需求，无缝适配各类国产化终端设备。
</p>
<p
class="font-bold text-surface-700 dark:text-surface-300 text-base md:text-lg leading-[2]"
>
龙芯 / 兆芯 / 飞腾 / 海光 / 华为麒麟 / 华为鲲鹏
</p>
</div>
</div>
</section>
<section
class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
>
<div
class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
>
<Icon
name="s:commercial-distribution-title"
mode="svg"
class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
/>
<h2
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
>
<span
class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
>DISTRIBUTION</span
><br />
跨发行版&nbsp;&nbsp;全面兼容
</h2>
</div>
<div
class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col-reverse sm:flex-row items-center justify-center"
>
<!-- 左侧内容区域 -->
<div
class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
>
<div
class="flex flex-col text-center sm:text-start items-center sm:items-start"
>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
>
融合多元生态
</p>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
>
适配主流 Linux 发行版
</p>
</div>
<p
class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
>
商业版支持多种主流国产操作系统，包括但不限于统信
UOS、银河麒麟、中科方德等，确保在不同发行版本及不同的软件基础包环境下都能高度稳定运行，为企业提供全生态覆盖、没有短板的应用商店解决方案。
</p>
<p
class="font-bold text-surface-700 dark:text-surface-300 text-base md:text-lg leading-[2]"
>
统信 UOS / 银河麒麟 / 中科方德
</p>
</div>
<!-- 右侧图片区域 -->
<Icon
name="s:commercial-distribution"
class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
mode="svg"
/>
</div>
</section>
<section
class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
>
<div
class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
>
<Icon
name="s:commercial-case-title"
mode="svg"
class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
/>
<h2
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
>
<span
class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
>CASE STUDY</span
><br />
成功案例&nbsp;&nbsp;稳如泰山
</h2>
</div>
<div
class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col sm:flex-row items-center justify-center"
>
<Icon
name="s:commercial-case"
class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
mode="svg"
/>
<div
class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
>
<div
class="flex flex-col text-center sm:text-start items-center sm:items-start"
>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
>
无惧极端异构
</p>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
>
政务终端统一纳管
</p>
</div>
<p
class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
>
某机关单位信创改造项目中，面临高度复杂的异构终端环境。该单位同时部署了搭载兆芯、飞腾、麒麟芯片的设备，并交叉安装统信
UOS、银河麒麟与中科方德。通过部署星火应用商店专业版进行整合，该单位最终成功实现了跨异构、跨操作系统的软件高效率统一分发与纳管。
</p>
<div class="flex gap-4 mt-2">
<!--<NuxtLink
to="/cases"
class="text-primary-500 font-bold hover:text-primary-600 dark:hover:text-primary-400 transition-colors flex items-center gap-2"
>查看详细案例 <i class="pi pi-arrow-right text-sm"
/></NuxtLink>-->
</div>
</div>
</div>
</section>
<section
class="flex flex-col items-center justify-center gap-6 lg:gap-8 px-8 pb-24 pt-24"
>
<div
class="flex items-center justify-center self-start sm:self-center gap-4 sm:gap-6"
>
<Icon
name="s:commercial-contact-title"
mode="svg"
class="!text-6xl sm:!text-7xl md:!text-[6rem] lg:!text-[7rem] text-primary-color s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
/>
<h2
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
>
<span
class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50 tracking-widest uppercase"
>CONTACT US</span
><br />
联系客服&nbsp;&nbsp;定制报价
</h2>
</div>
<div
class="flex gap-8 lg:gap-16 max-w-7xl w-full flex-col-reverse sm:flex-row items-center justify-center"
>
<div
class="flex flex-col py-0 sm:py-8 lg:py-12 gap-6 items-center sm:items-start flex-1"
>
<div
class="flex flex-col text-center sm:text-start items-center sm:items-start"
>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.5]"
>
全天候客服护航
</p>
<p
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-[1.5] whitespace-nowrap"
>
按需提供专业解决方案
</p>
</div>
<p
class="text-base sm:text-lg text-center sm:text-start text-surface-700 leading-[1.8] dark:text-surface-300"
>
商业版采用定制化报价模式，根据企业客户的具体需求（如定制程度、部署规模、私有化部署要求及驻点技术支持等）提供更具性价比的解决方案。期待与您的团队达成信创合作共识，我们将为您提供专业透明的咨询服务和报价方案。
</p>
<div class="flex gap-4 mt-2">
<button
@click="contactDialog = true"
class="px-8 sm:px-14 py-3 text-xl font-bold text-white from-primary-400 to-primary-500 bg-linear-to-r rounded-full shadow-lg shadow-primary-500/30 dark:from-primary-500 dark:to-primary-600 hover:-translate-y-1 transition-transform"
>
<i class="pi pi-envelope text-xl! font-bold! pr-2 sm:pr-2" />
马上联系
</button>
</div>
</div>
<Icon
name="s:commercial-contact"
class="w-full max-w-[20rem] sm:max-w-[24rem] lg:max-w-[30rem] h-auto object-contain hover:-translate-y-2 transition-transform duration-500 s-deco-primary-700 s-bg-primary-100 s-bg-2-primary-200 s-bg-3-primary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-primary-600 dark:s-bg-3-primary-900"
mode="svg"
/>
</div>
</section>
<Dialog
v-model:visible="contactDialog"
modal
:show-header="false"
class="!w-auto !min-w-[320px] !max-w-[calc(100vw-2rem)] rounded-3xl!"
:style="{
'--p-dialog-border-color': 'transparent',
}"
content-class="flex flex-col items-center p-5! w-full h-full gap-4 overflow-hidden!"
:pt="{
mask: {
class:
'backdrop-blur-2xl s-bg-[rgba(255,255,255,0.4)] s-deco-surface-950 dark:s-bg-[rgba(0,0,0,0.4)] dark:s-deco-surface-100',
style: {
'--p-mask-background': 'var(--s-bg)',
'--p-dialog-color': 'var(--s-deco)',
},
},
}"
dismissable-mask
>
<p class="flex items-center justify-center gap-2 font-bold mb-2">
联系商业版专线客服
</p>
<div class="flex flex-col gap-4 text-sm w-full font-medium">
<p>通过邮箱联系：</p>
<div
class="flex flex-col gap-2 p-4 bg-surface-100 dark:bg-surface-800 rounded-xl"
>
<div class="flex items-center justify-between">
<span class="text-surface-500">主收件：</span>
<span class="select-all font-mono">shenmo@spark-app.store</span>
</div>
<div class="flex items-center justify-between">
<span class="text-surface-500">抄送：</span>
<span class="select-all font-mono">momen@spark-app.store</span>
</div>
</div>
</div>
<div class="flex flex-col gap-4 text-sm w-full font-medium mt-2">
<p>也可以通过 QQ 联系：</p>
<div
class="flex flex-col gap-2 p-4 bg-surface-100 dark:bg-surface-800 rounded-xl"
>
<div class="flex items-center justify-between">
<span class="text-surface-500">shenmo：</span>
<span class="select-all font-mono">1422953823</span>
</div>
<div class="flex items-center justify-between">
<span class="text-surface-500">momen：</span>
<span class="select-all font-mono">954551908</span>
</div>
</div>
</div>
<button
@click="contactDialog = false"
class="mt-4 px-8 py-2 font-bold text-white bg-primary-500 rounded-full hover:bg-primary-600 transition-colors"
>
关闭
</button>
</Dialog>
</div>
</template>
<style scoped>
section {
width: 100%;
height: 100vh;
scroll-snap-align: start;
}
</style>