添加商业版页面 (#4)

* 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>

pages/about.vue

@@ -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>
 

pages/commercial.vue

@@ -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>