feat:调整一下

pnpm-lock.yaml

@@ -397,67 +397,56 @@ packages:
     resolution: {integrity: sha512-n0edDmSHlXFhrlmTK7XBuwKlG5MbS7yleS1cQ9nn4kIeW+dJH+ExqNgQ0RrFRew8Y+0V/x6C5IjsHrJmiHtkxQ==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.44.1':
     resolution: {integrity: sha512-8WVUPy3FtAsKSpyk21kV52HCxB+me6YkbkFHATzC2Yd3yuqHwy2lbFL4alJOLXKljoRw08Zk8/xEj89cLQ/4Nw==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.44.1':
     resolution: {integrity: sha512-yuktAOaeOgorWDeFJggjuCkMGeITfqvPgkIXhDqsfKX8J3jGyxdDZgBV/2kj/2DyPaLiX6bPdjJDTu9RB8lUPQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.44.1':
     resolution: {integrity: sha512-W+GBM4ifET1Plw8pdVaecwUgxmiH23CfAUj32u8knq0JPFyK4weRy6H7ooxYFD19YxBulL0Ktsflg5XS7+7u9g==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.44.1':
     resolution: {integrity: sha512-1zqnUEMWp9WrGVuVak6jWTl4fEtrVKfZY7CvcBmUUpxAJ7WcSowPSAWIKa/0o5mBL/Ij50SIf9tuirGx63Ovew==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.44.1':
     resolution: {integrity: sha512-Rl3JKaRu0LHIx7ExBAAnf0JcOQetQffaw34T8vLlg9b1IhzcBgaIdnvEbbsZq9uZp3uAH+JkHd20Nwn0h9zPjA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.44.1':
     resolution: {integrity: sha512-j5akelU3snyL6K3N/iX7otLBIl347fGwmd95U5gS/7z6T4ftK288jKq3A5lcFKcx7wwzb5rgNvAg3ZbV4BqUSw==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.44.1':
     resolution: {integrity: sha512-ppn5llVGgrZw7yxbIm8TTvtj1EoPgYUAbfw0uDjIOzzoqlZlZrLJ/KuiE7uf5EpTpCTrNt1EdtzF0naMm0wGYg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.44.1':
     resolution: {integrity: sha512-Hu6hEdix0oxtUma99jSP7xbvjkUM/ycke/AQQ4EC5g7jNRLLIwjcNwaUy95ZKBJJwg1ZowsclNnjYqzN4zwkAw==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.44.1':
     resolution: {integrity: sha512-EtnsrmZGomz9WxK1bR5079zee3+7a+AdFlghyd6VbAjgRJDbTANJ9dcPIPAi76uG05micpEL+gPGmAKYTschQw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.44.1':
     resolution: {integrity: sha512-iAS4p+J1az6Usn0f8xhgL4PaU878KEtutP4hqw52I4IO6AGoyOkHCxcc4bqufv1tQLdDWFx8lR9YlwxKuv3/3g==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.44.1':
     resolution: {integrity: sha512-NtSJVKcXwcqozOl+FwI41OH3OApDyLk3kqTJgx8+gp6On9ZEt5mYhIsKNPGuaZr3p9T6NWPKGU/03Vw4CNU9qg==}

src/store/app.ts

@@ -0,0 +1,14 @@
+import { defineStore } from "pinia";
+
+export const useAppStore = defineStore('User', () => {
+  
+  //左侧菜单相关
+  const menuApp = reactive({
+    isExpaned:true,  //
+  });
+  return {
+    menuApp
+  }
+},
+  { persist: true }
+)

src/views/layout/index.vue

@@ -1,8 +1,130 @@
 <template>
-  <div>首页</div>
+  <n-layout>
+    <n-layout-header>颐和园路</n-layout-header>
+    <n-layout content-class="layout__main" has-sider>
+      <n-menu :collapsed="!menuApp.isExpaned" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions"
+        :render-label="renderMenuLabel" :render-icon="renderMenuIcon" :expand-icon="expandIcon" />
+      <n-layout-content content-style="padding: 24px;">
+        <RouterView></RouterView>
+      </n-layout-content>
+    </n-layout>
+  </n-layout>
 </template>
 
 <script setup lang='ts'>
+import { BookmarkOutline, CaretDownOutline } from '@vicons/ionicons5';
+import { MenuOption, NIcon } from 'naive-ui';
+import { useAppStore } from '@/store/app';
+import { storeToRefs } from 'pinia';
+const appStore = useAppStore();
+const { menuApp } = storeToRefs(appStore)
+const expandIcon = () => {
+  return h(NIcon, null, { default: () => h(CaretDownOutline) })
+}
+const renderMenuIcon = (option: MenuOption) => {
+  // 渲染图标占位符以保持缩进
+  if (option.key === 'sheep-man')
+    return true
+  // 返回 falsy 值，不再渲染图标及占位符
+  if (option.key === 'food')
+    return null
+  return h(NIcon, null, { default: () => h(BookmarkOutline) })
+}
+const menuOptions: MenuOption[] = [
+  {
+    label: '且听风吟',
+    key: 'hear-the-wind-sing',
+    href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199'
+  },
+  {
+    label: '1973年的弹珠玩具',
+    key: 'pinball-1973',
+    disabled: true,
+    children: [
+      {
+        label: '鼠',
+        key: 'rat'
+      }
+    ]
+  },
+  {
+    label: '寻羊冒险记',
+    key: 'a-wild-sheep-chase',
+    disabled: true
+  },
+  {
+    label: '舞，舞，舞',
+    key: 'dance-dance-dance',
+    children: [
+      {
+        type: 'group',
+        label: '人物',
+        key: 'people',
+        children: [
+          {
+            label: '叙事者',
+            key: 'narrator'
+          },
+          {
+            label: '羊男',
+            key: 'sheep-man'
+          }
+        ]
+      },
+      {
+        label: '饮品',
+        key: 'beverage',
+        children: [
+          {
+            label: '威士忌',
+            key: 'whisky',
+            href: 'https://baike.baidu.com/item/%E5%A8%81%E5%A3%AB%E5%BF%8C%E9%85%92/2959816?fromtitle=%E5%A8%81%E5%A3%AB%E5%BF%8C&fromid=573&fr=aladdin'
+          }
+        ]
+      },
+      {
+        label: '食物',
+        key: 'food',
+        children: [
+          {
+            label: '三明治',
+            key: 'sandwich'
+          }
+        ]
+      },
+      {
+        label: '过去增多，未来减少',
+        key: 'the-past-increases-the-future-recedes'
+      }
+    ]
+  }
+];
+
+const renderMenuLabel = (option: MenuOption) => {
+  if ('href' in option) {
+    return h(
+      'a',
+      { href: option.href, target: '_blank' },
+      option.label as string
+    )
+  }
+  return option.label as string
+}
+// icon
 </script>
 <style scoped lang='scss'>
+.n-layout-header {
+  height: 60px;
+}
+
+.n-layout-sider {
+  background: rgba(128, 128, 128, 0.3);
+}
+
+.n-layout-content {
+  background: rgba(128, 128, 128, 0.4);
+}
+.layout__main{
+  height:calc(100vh - 60px);
+}
 </style>

src/views/login/index.vue

@@ -1,228 +1,646 @@
 <template>
-  <div class="deepseek-home">
+  <div class="zn-home">
-    <header class="deepseek-home__header">
+    <!-- 导航栏 -->
-      <div class="deepseek-home__logo">
+    <header class="zn-header">
-        <span class="deepseek-home__logo-text">ZeroNode</span>
+      <div class="zn-header__content">
-        <span class="deepseek-home__logo-beta">零枢</span>
+        <div class="zn-logo">
-      </div>
+          <span class="zn-logo__text">ZeroNode</span>
-      <div class="deepseek-home__actions">
+          <span class="zn-logo__tag">零枢 · 数字化管理平台</span>
-        <n-button type="primary" @click="handleLogin">登录</n-button>
+        </div>
-        <n-button @click="handleLogout">注册</n-button>
+        <nav class="zn-nav">
+          <a href="#" class="zn-nav__link">产品功能</a>
+          <a href="#" class="zn-nav__link">解决方案</a>
+          <a href="#" class="zn-nav__link">客户案例</a>
+          <div class="zn-actions">
+            <n-button ghost @click="handleLogin">登录</n-button>
+            <n-button type="primary" @click="handleContact">联系我们</n-button>
+          </div>
+        </nav>
       </div>
     </header>
 
-    <main class="deepseek-home__main">
+    <!-- 主要内容 -->
-      <section class="deepseek-home__hero">
+    <main class="zn-main">
-        <h1 class="deepseek-home__title">科技赋能数字化管理</h1>
+      <!-- 英雄区域 -->
-        <p class="deepseek-home__subtitle">先进的陪玩管理系统，为您提供智能陪玩店体验</p>
+      <section class="zn-hero">
+        <div class="zn-hero__content">
+          <h1 class="zn-hero__title">
+            科技赋能 <span class="highlight">第五人格</span> 陪玩产业链
+          </h1>
+          <p class="zn-hero__subtitle">
+            基于.NET9 + Vue3的智能管理系统，为您提供全方位的数字化解决方案
+          </p>
+          <div class="zn-hero__cta">
+            <n-button type="primary" size="large" @click="handleLogin">
+              立即体验
+            </n-button>
+            <n-button size="large" @click="handleDemo">
+              观看演示
+            </n-button>
+          </div>
+          <div class="zn-hero__stats">
+            <div class="stat-item">
+              <div class="stat-number">100+</div>
+              <div class="stat-label">合作陪玩店</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">99.9%</div>
+              <div class="stat-label">覆盖需求</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">10+</div>
+              <div class="stat-label">开发人员</div>
+            </div>
+          </div>
+        </div>
+        <div class="zn-hero__illustration">
+          <img src="/public/logo.jpg" alt="系统预览" />
+        </div>
       </section>
 
-      <section class="deepseek-home__features">
+      <!-- 特性展示 -->
-        <div class="deepseek-home__feature">
+      <section class="zn-features">
-          <div class="deepseek-home__feature-icon">
+        <div class="zn-section-header">
-            <svg viewBox="0 0 24 24">
+          <h2>为什么选择 ZeroNode</h2>
-              <path d="M12 3L1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z" />
+          <p>专为第五人格陪玩产业设计的全方位解决方案</p>
-            </svg>
-          </div>
-          <h3 class="deepseek-home__feature-title">稳定系统</h3>
-          <p class="deepseek-home__feature-desc">基于.NET9 + Vue3研发，提供更稳定的系统体验。</p>
         </div>
-        <div class="deepseek-home__feature">
+        <div class="zn-features__grid">
-          <div class="deepseek-home__feature-icon">
+          <div class="zn-feature-card">
-            <svg viewBox="0 0 24 24">
+            <div class="feature-icon">
-              <path
+              <n-icon color="#3d8eff">
-                d="M12 15c1.66 0 3-1.34 3-3V6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 15.22 14.47 17 12 17s-4.52-1.78-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V21c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z" />
+                <GitCompare />
-            </svg>
+              </n-icon>
+            </div>
+            <h3>高效运营</h3>
+            <p>自动化订单处理、智能排班系统，提升店铺运营效率30%以上</p>
+            <a href="#" class="feature-link">了解更多 →</a>
+          </div>
+          <div class="zn-feature-card highlight">
+            <div class="feature-icon">
+              <n-icon color="#fff">
+                <BarChartSharp />
+              </n-icon>
+            </div>
+            <h3>数据洞察</h3>
+            <p class="highlight">实时数据分析仪表盘，帮助您做出更明智的商业决策</p>
+            <a href="#" class="feature-link">了解更多 →</a>
+          </div>
+          <div class="zn-feature-card">
+            <div class="feature-icon">
+              <n-icon color="#3d8eff">
+                <Server />
+              </n-icon>
+            </div>
+            <h3>安全可靠</h3>
+            <p>银行级数据加密，多重备份保障，确保您的数据万无一失</p>
+            <a href="#" class="feature-link">了解更多 →</a>
           </div>
-          <h3 class="deepseek-home__feature-title">科技赋能</h3>
-          <p class="deepseek-home__feature-desc">实施动态数据抓取，为您带来更高效的数据管理。</p>
         </div>
-        <div class="deepseek-home__feature">
+      </section>
-          <div class="deepseek-home__feature-icon">
+
-            <svg viewBox="0 0 24 24">
+      <!-- 客户评价 -->
-              <path
+      <section class="zn-testimonials">
-                d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
+        <div class="zn-section-header">
-            </svg>
+          <h2>客户评价</h2>
+          <p>听听他们怎么说</p>
+        </div>
+        <div class="zn-testimonials__slider">
+          <div class="testimonial-card">
+            <div class="testimonial-content">
+              "这个平台专注于服务玩家和陪玩双方，提供了一个安全有保障、匹配效率高的新空间。在这里，用户（无论是玩家还是陪玩）都能更快捷地实现各自的目标，获得满意的体验。"
+            </div>
+            <div class="testimonial-author">
+              <img src="@/assets/images/luolan_avatar.jpg" alt="罗经理" />
+              <div>
+                <div class="author-name">罗经理</div>
+                <div class="author-title">ASG陪玩店 运营总监</div>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial-card">
+            <div class="testimonial-content">
+              "ZeroNode系统彻底改变了我们的管理方式，订单处理速度提升了50%，代理满意度也大幅提高，陪玩更乐意于在我们团工作了。"
+            </div>
+            <div class="testimonial-author">
+              <img src="@/assets/images/luolan_avatar.jpg" alt="落梨" />
+              <div>
+                <div class="author-name">落店长</div>
+                <div class="author-title">巅峰电竞 创始人</div>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial-card">
+            <div class="testimonial-content">
+              "灵枢系统专门为第五人格陪玩打造，一条龙流程极速成单，科技赋能，将陪玩产业推向巅峰。"
+            </div>
+            <div class="testimonial-author">
+              <img src="@/assets/images/luolan_avatar.jpg" alt="杨某人" />
+              <div>
+                <div class="author-name">杨嚣张</div>
+                <div class="author-title">X电竞 校长</div>
+              </div>
+            </div>
           </div>
-          <h3 class="deepseek-home__feature-title">融创集群</h3>
-          <p class="deepseek-home__feature-desc">将系统产品与第五人格陪玩产业融合，打造数字化集群统一平台。</p>
         </div>
       </section>
     </main>
 
-    <footer class="deepseek-home__footer">
+    <!-- 页脚 -->
-      <div class="deepseek-home__footer-content">
+    <footer class="zn-footer">
-        <div class="deepseek-home__footer-links">
+      <div class="zn-footer__content">
-          <a href="#" class="deepseek-home__footer-link">使用条款</a>
+        <div class="zn-footer__main">
-          <a href="#" class="deepseek-home__footer-link">隐私政策</a>
+          <div class="footer-col">
-          <a href="#" class="deepseek-home__footer-link">联系我们</a>
+            <h4>产品</h4>
+            <a href="#">功能特性</a>
+            <a href="#">定价</a>
+            <a href="#">更新日志</a>
+            <a href="#">路线图</a>
+          </div>
+          <div class="footer-col">
+            <h4>资源</h4>
+            <a href="#">文档中心</a>
+            <a href="#">API接口</a>
+            <a href="#">帮助中心</a>
+            <a href="#">社区论坛</a>
+          </div>
+          <div class="footer-col">
+            <h4>公司</h4>
+            <a href="#">关于我们</a>
+            <a href="#">加入我们</a>
+            <a href="#">媒体报道</a>
+            <a href="#">联系方式</a>
+          </div>
+          <div class="footer-col newsletter">
+            <h4>订阅电子报</h4>
+            <p>获取最新产品动态和行业洞察</p>
+            <n-input placeholder="您的邮箱地址" round>
+              <template #suffix>
+                <n-button type="primary" size="small" circle>
+                  <template #icon>
+                    <n-icon>
+                      <ChevronForward />
+                    </n-icon>
+                  </template>
+                </n-button>
+              </template>
+            </n-input>
+          </div>
+        </div>
+        <div class="zn-footer__bottom">
+          <div class="copyright">
+            © 2025 AvengerS Gaming. All rights reserved.
+          </div>
+          <div class="social-links">
+            <a href="#"><i class="icon-wechat"></i></a>
+            <a href="#"><i class="icon-weibo"></i></a>
+            <a href="#"><i class="icon-bilibili"></i></a>
+            <a href="#"><i class="icon-qq"></i></a>
+          </div>
         </div>
-      </div>
-      <div class="deepseek-home__footer-copyright">
-        © 2025 AvengerS Gaming. All rights reserved.
       </div>
     </footer>
   </div>
 </template>
 
 <script setup>
+import { ChevronForward, GitCompare, BarChartSharp, Server } from '@vicons/ionicons5';
 import { useAuth0 } from '@auth0/auth0-vue';
+import { useDialog } from 'naive-ui';
+const dialog = useDialog();
+const handleDemo = () => {
+  console.log('观看演示');
+}
+
 const { loginWithRedirect, logout } = useAuth0();
 const handleLogin = () => {
   loginWithRedirect();
 }
+// 登出
 const handleLogout = () => {
   logout({ logoutParams: { returnTo: window.location.origin } });
 }
+// 联系我们
+const handleContact = () => {
+  dialog.warning({
+    title: '联系方式',
+    content: () => '微信：king1632739220'
+  })
+}
 </script>
 
 <style lang="scss" scoped>
-.deepseek-home {
+.zn-home {
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  color: #333;
+  background-color: #f9fafc;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  height: 100vh;
+}
-  overflow: hidden;
+
-  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+/* 导航栏样式 */
-  color: #333;
+.zn-header {
   background-color: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 
-  &__header {
+  &__content {
-    display: flex;
+    max-width: 1200px;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 2rem;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-  }
-
-  &__logo {
-    display: flex;
-    align-items: baseline;
-    font-weight: bold;
-    font-size: 1.5rem;
-
-    &-text {
-      color: $primaryColor;
-    }
-
-    &-beta {
-      margin-left: 0.5rem;
-      font-size: 1rem;
-      color: #666;
-    }
-  }
-
-  &__actions {
-    display: flex;
-    gap: 1rem;
-  }
-  &__main {
-    flex: 1;
-    padding: 1.5rem;
-  }
-
-  &__hero {
-    max-width: 800px;
-    margin: 3rem auto;
-    text-align: center;
-    padding: 2rem 0;
-  }
-
-  &__title {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-    color: #222;
-  }
-
-  &__subtitle {
-    font-size: 1.2rem;
-    color: #666;
-    margin-bottom: 2rem;
-  }
-
-  &__features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    max-width: 1000px;
-    margin: 5rem auto;
-  }
-
-  &__feature {
-    text-align: center;
-    padding: 2rem;
-    border-radius: 8px;
-    transition: transform 0.3s, box-shadow 0.3s;
-
-    &:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-    }
-
-    &-icon {
-      width: 60px;
-      height: 60px;
-      margin: 0 auto 1.5rem;
-      background-color: rgba(61, 142, 255, 0.1);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $primaryColor;
-
-      svg {
-        width: 30px;
-        height: 30px;
-        fill: currentColor;
-      }
-    }
-
-    &-title {
-      font-size: 1.3rem;
-      margin-bottom: 1rem;
-      color: #222;
-    }
-
-    &-desc {
-      color: #666;
-      line-height: 1.6;
-    }
-  }
-
-  &__footer {
-    background-color: #f8f8f8;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__footer-content {
     margin: 0 auto;
+    padding: 0 24px;
+    height: 72px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 0.3em;
+  }
+}
+
+.zn-logo {
+  display: flex;
+  align-items: baseline;
+
+  &__text {
+    font-size: 24px;
+    font-weight: 700;
+    color: #3d8eff;
+    margin-right: 8px;
   }
 
-  &__footer-links {
+  &__tag {
-    display: flex;
+    font-size: 14px;
-    gap: 1.5rem;
-  }
-
-  &__footer-link {
     color: #666;
+  }
+}
+
+.zn-nav {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+
+  &__link {
+    color: #555;
     text-decoration: none;
+    font-weight: 500;
     transition: color 0.3s;
 
     &:hover {
-      color: $primaryColor;
+      color: #3d8eff;
+    }
+  }
+}
+
+.zn-actions {
+  display: flex;
+  gap: 12px;
+}
+
+/* 英雄区域样式 */
+.zn-hero {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 60px 24px;
+  display: flex;
+  align-items: center;
+  gap: 60px;
+
+  &__content {
+    flex: 1;
+  }
+
+  &__illustration {
+    flex: 1;
+
+    img {
+      width: 100%;
+      border-radius: 12px;
+      box-shadow: 0 20px 40px rgba(61, 142, 255, 0.15);
     }
   }
 
-  &__footer-copyright {
+  &__title {
-    color: #999;
+    font-size: 48px;
-    font-size: 0.9rem;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 20px;
+
+    .highlight {
+      color: #3d8eff;
+    }
+  }
+
+  &__subtitle {
+    font-size: 18px;
+    color: #666;
+    margin-bottom: 32px;
+    max-width: 500px;
+  }
+
+  &__cta {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 48px;
+  }
+
+  &__stats {
+    display: flex;
+    gap: 40px;
+
+    .stat-item {
+      .stat-number {
+        font-size: 28px;
+        font-weight: 700;
+        color: #3d8eff;
+        margin-bottom: 4px;
+      }
+
+      .stat-label {
+        font-size: 14px;
+        color: #888;
+      }
+    }
+  }
+}
+
+/* 特性区域样式 */
+.zn-features {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 80px 24px;
+  background-color: #fff;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
+  margin-top: -40px;
+  position: relative;
+  z-index: 1;
+}
+
+.zn-section-header {
+  text-align: center;
+  margin-bottom: 48px;
+
+  h2 {
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: 16px;
+    color: #888;
+  }
+}
+
+.zn-features__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+
+.zn-feature-card {
+  padding: 32px;
+  border-radius: 12px;
+  background-color: #f9fafc;
+  transition: all 0.3s;
+
+  &.highlight {
+    background: linear-gradient(135deg, #3d8eff, #6a5acd);
+    color: #fff;
+
+    .feature-link {
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(61, 142, 255, 0.15);
+  }
+
+  h3 {
+    font-size: 20px;
+    margin: 20px 0 12px;
+  }
+
+  p {
+    color: #666;
+    margin-bottom: 20px;
+    line-height: 1.6;
+
+    &.highlight {
+      color: #DDD;
+    }
+  }
+
+  .feature-icon {
+    width: 60px;
+    height: 60px;
+    background-color: rgba(61, 142, 255, 0.1);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #3d8eff;
+    font-size: 24px;
+  }
+
+  .feature-link {
+    color: #3d8eff;
+    text-decoration: none;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.3s;
+
+    &:hover {
+      gap: 8px;
+    }
+  }
+}
+
+/* 客户评价样式 */
+.zn-testimonials {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 80px 24px;
+
+  .zn-section-header {
+    margin-bottom: 48px;
+  }
+}
+
+.zn-testimonials__slider {
+  display: flex;
+  gap: 24px;
+  overflow-x: auto;
+  padding-bottom: 20px;
+}
+
+.testimonial-card {
+  min-width: 400px;
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .testimonial-content {
+    font-size: 16px;
+    line-height: 1.6;
+    color: #555;
+    margin-bottom: 24px;
+    font-style: italic;
+  }
+
+  .testimonial-author {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    img {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .author-name {
+      font-weight: 600;
+    }
+
+    .author-title {
+      font-size: 14px;
+      color: #888;
+    }
+  }
+}
+
+/* 页脚样式 */
+.zn-footer {
+  background-color: #1a2b4a;
+  color: #fff;
+  margin-top: 80px;
+
+  &__content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 60px 24px 0;
+  }
+
+  &__main {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 40px;
+    padding-bottom: 60px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .footer-col {
+    display: flex;
+    flex-direction: column;
+
+    h4 {
+      font-size: 18px;
+      margin-bottom: 20px;
+    }
+
+    a {
+      color: rgba(255, 255, 255, 0.7);
+      text-decoration: none;
+      margin-bottom: 12px;
+      transition: color 0.3s;
+
+      &:hover {
+        color: #3d8eff;
+      }
+    }
+
+    &.newsletter {
+      p {
+        color: rgba(255, 255, 255, 0.7);
+        margin-bottom: 16px;
+        font-size: 14px;
+      }
+    }
+  }
+
+  &__bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 0;
+
+    .copyright {
+      color: rgba(255, 255, 255, 0.5);
+      font-size: 14px;
+    }
+
+    .social-links {
+      display: flex;
+      gap: 16px;
+
+      a {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 20px;
+        transition: color 0.3s;
+
+        &:hover {
+          color: #3d8eff;
+        }
+      }
+    }
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 992px) {
+  .zn-hero {
+    flex-direction: column;
+    text-align: center;
+    padding-top: 40px;
+
+    &__subtitle {
+      max-width: 100%;
+    }
+
+    &__cta {
+      justify-content: center;
+    }
+
+    &__stats {
+      justify-content: center;
+    }
+  }
+
+  .zn-features__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .zn-footer__main {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .zn-nav {
+    display: none;
+  }
+
+  .zn-hero__title {
+    font-size: 36px;
+  }
+
+  .zn-footer__main {
+    grid-template-columns: 1fr;
+  }
+
+  .zn-footer__bottom {
+    flex-direction: column;
+    gap: 16px;
   }
 }
 </style>